Responsive Web Design

By Usability, Web Design
DC responsive web designers portfolio sample

DC responsive web designers portfolio sample

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:

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.

Tagged under: