Responsive Web Design is, as always, a hot topic among web designers. Matt Brady, a former Content Specialist, spoke with Dennis Kardys, our Design Director, to get his take on some recent online discussions regarding the best uses of responsive design.
Hi, Dennis! I recently read a blog post by David Heinemeier Hansson in which he seemed to claim that responsive design sometimes goes too far by trying to turn web pages into “one size fits all”. He suggested that responsive design works better as a “nip and tuck”, stretching and shrinking content to fit different screen sizes rather than completely reformatting a page. At Diagram, we’re big proponents of responsive design, so I wanted to get your opinion on this subject. When it comes to responsive sites, do you think designers sometimes go too far, trying to make sites fit into too many formats?
I definitely agree with David’s post. I wouldn’t necessarily say the issue is with trying to fit too many formats though. It’s more an issue with trying to make too many adaptations. Because we can target so many screen sizes and devices, it’s tempting to build a mega site—one that transforms to deliver the ideal design to different targeted device-types. In a scenario like this, you’d have different designs: for example, one optimized for desktop, one for tablet and one for smartphone. You’d then use responsive design techniques to swap them out. On the surface, that may sound like exactly what responsive design is intended for, but it completely misses the point. By focusing on the end device, rather than the content, you’re bound to end up with different designs. With responsive design the goal is to look beyond the device. Focus on the content, and figure out how it can adapt gracefully across screen sizes. Ideally, changes to the interface across screen sizes will be minimal.
Is it a bad idea to rearrange a page and hide some content or controls depending on screen size? How do you decide what screen sizes get which content?
Considering the disparity between a 22” display and a 3.5” display, keeping things identical is not always sensible. You don’t want your small screen UI to look crowded, and you don’t want your big screen UI to look sparse. So at some point, you need do some tailoring. A general rule of thumb is not to take away content or access to it. A person’s intention, i.e what they’re looking for or trying to do, isn’t based on the size of the screen they’re using. Having content appear and disappear depending on the device or the screen width can disorient and frustrate users. Some example of sensible editing would be:
- Some background images are primarily decorative; it may make sense to only introduce those at certain breakpoints.
- In a list of articles, you may want to only show short teaser text alongside your article titles, or even remove that text completely. On wider screens you may have room to introduce longer teasers.
- If some elements, like avatars or thumbnail images, become too small to be useful on small screens, it may make sense to drop them and just use text labels or titles.
When it comes to rearranging page elements, there’s no real way around it. Again, the goal is to avoid confusing users, so try to keep page components grouped together similarly across screen sizes, or in the same relative order (top, middle of page, bottom). What it ultimately comes down to is finding ways to create a sense of continuity across all screen sizes.
Hansson suggests creating multiple separate templates depending on device. We’ve spoken out against the idea of using multiple templates in the past, preferring to use a single template across an entire site. Does this approach also apply to responsive design? Is it better to include everything and hide information for some users, or should you design pages for specific screen sizes in order to try to ensure the best experience for everyone?
In the article referenced, the goal is to reduce the number of hard-coded templates your site needs, while at the same time giving content producers more control over layout through the CMS. There are a number of scenarios where it makes a lot of sense to use separate templates and a bit of device detection to serve up different experiences. David brings up some great justification for this approach. Just remember that it does require you to then maintain multiple code bases, and if you aren’t diligent, this can become overwhelming over time. Reducing the number of templates and using responsive design to cater to different screen sizes is still often a great approach—provided you keep page performance a priority. It’s better to only load what you have to, and then request more content or more code under certain conditions (like the detection of a specific browser feature or screen size). Trying to load too much up front will slow your site down; don’t expect people to stick around waiting for it to load.
Overall, whether you design one template or multiple templates, and whether you use responsive design or design separate experiences based on device or screen size, these are all great questions to explore when you’re deciding how to build your site. What ultimately matters is how well your site works for your end users. If you can chop down load time so the site loads and functions speedily, and if you can deliver a consistent and familiar user interface across devices, you’ll be in good shape.
Thanks for your time, Dennis!
If you have any questions or comments about responsive design, please feel free to leave a comment below, or contact us to speak with a web design expert.
