Our third WordPress TweetChat went off without a hitch! This time around, we invited Tracy Rotton (alias @taupecat) to share her thoughts on responsive web design and how it intersects with WordPress. Tracy had lots of awesome tips to share, and to help spread them around we’ve compiled this blog post. It runs through the highlights of the chat, via tweets.
If you like it, be sure to follow #chatwp on Twitter so you can join in the next round too!
This week I'm super excited to welcome @taupecat, aka Tracy Rotton, WordPress theme wizard and responsive design expert! #chatwp
— chatwp (@chatwp) March 18, 2014
.@taupecat is the author of the upcoming book Responsive WordPress Theming, meaning she's perfect for this week's chat topic
#chatwp
— chatwp (@chatwp) March 18, 2014
We got things started with our usual first question. Always great to get background!
Q1: @taupecat, can you share a bit about yourself? What do you do? How did you get started using WP? #chatwp
— chatwp (@chatwp) March 18, 2014
I'm a lead web dev at @rp3agency, an ad agency in Bethesda, MD. I got started seriously in WP a few years ago while… #chatwp
— Tracy Rotton (@taupecat) March 18, 2014
…building small websites for a federal agency. I loved working with WP because it was structured in a way that was… #chatwp
— Tracy Rotton (@taupecat) March 18, 2014
…very comfortable with my style of front end & PHP development. #chatwp
— Tracy Rotton (@taupecat) March 18, 2014
In Question 2, we start to get a bit more specific:
Q2: What is your favourite feature in WordPress? @taupecat #chatwp
— chatwp (@chatwp) March 18, 2014
A2: It's flexibility. Since CPTs came around, you truly can build anything you want with it. Also, the front end… #chatwp
— Tracy Rotton (@taupecat) March 18, 2014
A2: …development (theming) isn't obscured by layers & layers of abstractions, unlike other popular CMSes. #chatwp
— Tracy Rotton (@taupecat) March 18, 2014
Finally in Question 3, our main topic:
Q3: Why do you think responsive design is so important? @taupecat #chatwp
— chatwp (@chatwp) March 18, 2014
A3: It's a multi-device kinda world out there now. We're just as likely to hit a site from our phones out & about… #chatwp
— Tracy Rotton (@taupecat) March 18, 2014
A3: …as we are sitting at our computers. Moreso, in fact, in other parts of the world than where I live. The best way to… #chatwp
— Tracy Rotton (@taupecat) March 18, 2014
A3: …gain an audience for your website is to make it accessible to people on any device at any time. And from a pure… #chatwp
— Tracy Rotton (@taupecat) March 18, 2014
A3: …developer's perspective, it's a great technical challenge and fun to do! #chatwp
— Tracy Rotton (@taupecat) March 18, 2014
The takeaway from Tracy’s answer to question 3, for us at least, is this: “The best way to gain an audience for your website is to make it as accessible to people on any device at any time.” So true. How can you expect to build an audience if many of them can’t easily use your site?
Then we got even more technical:
Speaking of the technical aspects… Q4: How do you start building a responsive theme? What does your workflow look like? #chatwp
— chatwp (@chatwp) March 18, 2014
A4: I'm a developer, so I'll speak to that and not design. I start with the _s starter theme, build a mobile… #chatwp
— Tracy Rotton (@taupecat) March 18, 2014
A4: …experience, and work my way up in terms of viewport size. #chatwp
— Tracy Rotton (@taupecat) March 18, 2014
A4: That's the really simplified version. Do you want me to expand on it? #chatwp
— Tracy Rotton (@taupecat) March 18, 2014
Of course, we did want more… and got it!
A4: Definitely a CSS preprocessor (my fave is @SassCSS) because it can really streamline certain aspects of the CSS dev… #chatwp
— Tracy Rotton (@taupecat) March 18, 2014
A4: …esp in terms of media query bubbling, selector nesting (but don't go overboard!), etc. Also, tools like Grunt.js… #chatwp
— Tracy Rotton (@taupecat) March 18, 2014
A4: …can help with a multitude of tasks, including JS concatenation to reduce your HTTP requests to as few as possible… #chatwp
— Tracy Rotton (@taupecat) March 18, 2014
A4: …while still allowing you to work with small, manageable files. #chatwp
— Tracy Rotton (@taupecat) March 18, 2014
Responsive is about more than just the visuals. Fast websites that perform well are important too!
.@chatwp Absolutely! You can't be certain of a visitor's bandwidth situation. Keeping things lean & efficient is key! #chatwp
— Tracy Rotton (@taupecat) March 18, 2014
We also wanted to know what options Tracy would suggest for someone without serious developer skills. For the average person, how should they start a responsive site?
Q5: Are there any pre-made themes you would suggest for someone w/o tech skills who wants to have a responsive site? #chatwp
— chatwp (@chatwp) March 18, 2014
A5: Ooh, that's a tough one. There are so many great theme shops doing awesome things with #RWD. One is "Collections" by… #chatwp
— Tracy Rotton (@taupecat) March 18, 2014
A5: …@thethemefoundry. Great use of post formats too. @woothemes has also done some great #RWD themes as has… #chatwp
— Tracy Rotton (@taupecat) March 18, 2014
A5: …@graphpaperpress. That's more by way of theme shops, and not nearly an exhaustive list. But most of the work I do… #chatwp
— Tracy Rotton (@taupecat) March 18, 2014
A5: …is custom theme development for clients who want something unique, and want me to build them a whole WP site. #chatwp
— Tracy Rotton (@taupecat) March 18, 2014
And in our final question, we asked about the bad stuff: what does WordPress make difficult? Where could it be improved?
Q6: What kinds of challenges does WordPress present for responsive sites? #chatwp
— chatwp (@chatwp) March 18, 2014
Q6: And how could #WordPRess be improved to be better for responsive sites? #chatwp
— chatwp (@chatwp) March 18, 2014
A6: Some challenges that are more WP-specific involve things like how to deal with your typical, horizontal WP navigation… #chatwp
— Tracy Rotton (@taupecat) March 18, 2014
A6: …and what to do with sidebars. They aren't problems truly unique to WP, but they come up a lot in the WP world. … #chatwp
— Tracy Rotton (@taupecat) March 18, 2014
A6: One thing I don't like about WP & RWD is how calling JavaScript & CSS dependencies can pile on the HTTP requests. … #chatwp
— Tracy Rotton (@taupecat) March 18, 2014
A6: …also, adding plugins that add in their own JS & CSS can just compound the problem further. That's a big challenge. … #chatwp
— Tracy Rotton (@taupecat) March 18, 2014
A6: However, WP does offer some benefits by making it really easy to produce differently scaled images to use in things like… #chatwp
— Tracy Rotton (@taupecat) March 18, 2014
A6: The <picture> element polyfill Picturefill.js, which helps a lot to reduce image bloat. #chatwp
— Tracy Rotton (@taupecat) March 18, 2014
And that was that!
Awesome! So much great #RWD (that's responsive web design) goodness in this week's chat. #chatwp
— chatwp (@chatwp) March 18, 2014
If you’re interested in Tracy’s book, Responsive WordPress Theming, here’s the deal:
Progress on the book has slowed a little, but I'm still working on it. I'm going to start selling an advance ebook soon… #chatwp
— Tracy Rotton (@taupecat) March 18, 2014
…keep an eye on http://t.co/zrVFYeSXFZ for details (although I missed my self-imposed deadline
)… #chatwp
— Tracy Rotton (@taupecat) March 18, 2014
Awesome! We’ll be sure to check it out as soon as it’s available.
And if you’d like to hear more about responsive web design and WordPress, here’s where you can tune in:
I'll be speaking on WP+RWD at @WordCampMiami on 5/10, and on 3/27 I'll be the guest on @ShopTalkShow answering more… #chatwp
— Tracy Rotton (@taupecat) March 18, 2014
Our next chat is tentatively scheduled for Tuesday, April 15th at 3pm EDT. We hope to see you there!
Want more WordPress tips?
Liked the chat? Want more great WordPress tips? You can sign up for our mailing list and we'll send 'em your way!
photo credit: jiraisurfer cc