Responsive design is now widely used as a cost effective alternative to deliver content across different platforms. There are also great responsive CSS frameworks that allow designers rapidly deploying user interfaces, thanks to the graphic resources and JavaScript features that they include by default.
CSS frameworks
These are the three frameworks that we typically use in our work at inQbation:
- Bootstrap: Created by a designer and a developer at Twitter, it’s now the most common responsive framework and our first choice. See the default styles of the Bootstrap theme and some samples of layouts built with bootstrap. Due to its popularity, there is a high number of available themes in different marketplaces that makes you think that custom design is overrated.
- Foundation Zurb: Another popular framework, it also provides a default theme with JavaScript plugins and graphic resources ready to use, and a collection of templates for home page (wiht a JS slider), blogs, photo galleries, shopping carts, and so on.
- Gumby: We rarely use this framework, but it’s useful when you collaborate with a team using the old 960 grid system standard, because the classes of the grid are very similar.
Usual behavior in responsive design
Usually, responsive frameworks support two breakpoints, one for tablet devices and other for cellphones, this means that the layout changes its look and feel once it reaches certain widths. However, due to the variety of screen sizes nowadays, it’s better to analyze the specific requirements of your project and define if more breakpoints are needed or if some have to be removed. For instance, we had to remove the breakpoint for tablets in one of our projects because the target audience was getting frustrated to see a completely different design when resizing the browser window to have the website side by side with documents and spreadsheets in the same screen.
Another common feature of these responsive frameworks is to stack all the elements in the layout by default. Therefore, if you have a blog with a right sidebar with links to categories, tags and the archive, in mobile phones you will usually see the list of blog articles first and then sidebar below. This default behavior can cause major usability issues, for that reason it’s important not only designing the website for desktop but also deciding how it’s going to look and behave in other screens. The good thing is that most of the frameworks support features to rearrange layout elements for different screens, and hide unnecessary items for small screens in an easy way.
Common problems in responsive design
There are many problems that can arise in a responsive design, which make it useless in some platforms. Designers tend to assume that all the features in a regular website will work the same across all the platforms, but interaction in mobile devices is different from computers. One huge difference is the use of the mouse in computers which allows hovering objects or dragging and dropping items in other areas; those actions are not supported by default in mobile devices. Even if you use JavaScript plugins to allow the drag and drop feature, it could be really hard to perform that action in a cell phone if the object you need to drag is very small, unless you have really sharp fingers. Then, imagine that critical functionality depended on that drag and drop feature, your project could be a total failure.
Responsive design requires more work and therefore more budget and resources
The whole concept of the responsive design gives a false sense of rapid development in different platforms, but it actually takes double of the time and effort, if no more, to build a professional responsive interface that works well in all devices. Consider these points:
- It requires more documentation and collection of requirements
- If done well, it requires wireframes and design concepts for different screens
- In development, some features for mobile devices need to be supported by JavaScript plugins (like the drag and drop example).
- In testing, it needs to be reviewed in all possible mobile devices. And I mean, not only simulating the size of the screen in the computer, but actually living the experience on the actual mobile devices. If browser compatibility was already a pain for web developers, imagine on top of that being compatible with all possible devices.
In conclusion, we believe that responsive design is a great alternative only if it’s strictly necessary and / or if there is time and resources to do it right.
