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.
- 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
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 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.