Responsive Design

I’ve been playing around quite a bit with responsive web design the last few days as a result of a recent client requesting their new site be mobile-friendly. I’ve had to read up quite a bit on responsive design, but I’ve learned a lot both about what makes it a powerful tool to have and also about the various frustrations and pitfalls that come with designing a site that’s mobile-friendly. Not all themes make good candidates for responsive design, as I quickly discovered.

Responsive design is something I haven’t been altogether concerned about with my own sites since I was more or less content to default to the Jetpack mobile theme that comes bundled with that plugin. Building this design for my client, I realized how nice it would be if my own site was more mobile-friendly and customized to match my current style. So, yesterday, I rolled out version 2.1 of my theme.

responsive

If you’re viewing this on your mobile device, you should see a layout similar to the one above. This version of my site also got a couple of simple tweaks to its layout. I put a new social media bar at the top of the page for those links as well as for the search form, which frees up some real estate in my nav menu and sidebar. Everything else is built with relative dimensions, so the site should scale well on most mobile devices. The desktop and smartphone layouts work pretty seamlessly; some tablets may see a bit of jankiness. As it turns out, building a layout that accounts for every viewport size on every device is a large and daunting task. I’m not entirely convinced I’ve got everything in the middle quite right. If you see something odd on your device, I’d appreciate it if you could shoot me an email with a screenshot and the device you’re using so I can try to correct any issues.

That said, I’m chuffed about the updates to the mobile feature set of my site. Responsiveness is something I’ve had way in the back of my mind for a little while, but I honestly thought it was going to be more difficult to implement (i.e. building a whole separate theme; I didn’t even know media queries existed until this week) than it actually ended up being.

Next iteration of the site will be almost completely behind-the-scenes: shifting my stylesheet to SASS.

Have anything to add to the conversation?