When people think “responsive design” (if you’re unfamiliar with the topic check out this article & this one) they usually think about all the work during front-end development like creating a flexible grid for the site, setting up styles for variable-width images and video, using media queries, etc. Something we’ve been working through at Phase2 is how designing responsively affects the other areas of our process. We’ve by no means arrived at perfect solutions, but we have discovered ways that responsive design affects a lot of the pieces we use to build effective sites for our clients.
Designing responsively means we need to write responsively. Keeping things concise and to the point, while important before, is even more crucial when screen real estate is at a premium on smaller resolution devices like smartphones and tablets. Other habits that may need breaking include using verbiage that assumes a lot about layout structure. Phrases like, “Check out the links in the sidebar for more information.” will be pretty confusing to your users when the layout adjusts and there isn’t any sidebar at all.
Instead of just testing different browsers, you’ll now need to test your site on different devices and resolutions. Using the actual devices you’re designing for is the best route to go as it ensures that functionality doesn’t break when using other input methods like touch. For example: provide backups for interactions that would usually require the user to hover over an element to interact with content (or just design those interactions from the start). If you can’t get your hands on a fleet of phones and tablets to test on, there are multi-resolution testing tools where you can check your layout across different resolutions in a browser as you go.
A lot of the poster responsive designs right now are designed, managed, and maintained by designers already (often personal blogs, portfolio sites, etc.), but very few exist in areas like publishing, where there’s a lot of content that changes rapidly. What tools are we giving clients to prepare them for maintaining a responsive site once we deliver it to them and they, for the most part, take over control of the content.
A lot depends on site-specifics and functionality of course, but we need to be thinking about how well we’re setting up our clients to maintain site integrity in the long run. Good documentation of best practices and quality training can go a long way to avoid a future content editor from uploading a high-res JPEG baked with inline styles that ends up breaking the entire structure of their page.
Responsive design is a great strategy for meeting the broad needs of audiences who are viewing your site in different contexts. However, it’s more than just adding a flexible grid to your site and calling it a day. It affects the entire project from start to finish (way more than we’ve covered in this blog post). Being a relatively new way of designing, I know there is still a lot we have yet to learn in in order to make process as efficient as possible, but we’re excited about the benefit the methodology brings our clients and our users. Have any of you started designing responsively? If so, what changes have you seen across the various discipline’s required to build a useful site?