Responsive design: Media Queries are only details

ByEdu Agni in

Very often I see people who want to learn how to create responsive websites posting in groups and mailing lists something like “I want to learn responsive design… how to use the Media Queries?” or “what it is the best way to start learning responsive design: bootstrap or foundation?”. It is also common to find designers saying that the responsibility to make a layout to become responsive is of the front-ender, and they do not need to worry about it.

It’s all wrong!

Associate the efforts to develop a responsive interface only to the front-end stage is one of the major current misconceptions of web development.

Ethan Marcotte, who coined the term responsive web design, published the first text on the subject at A List Apart in May 2010. What I find most interesting in this text are the “categories” in which he described it: CSS, layout & grids, mobile/multidevice, responsive design, interaction design. This shows the multidisciplinary knowledge needed to develop a responsive site. To create the concept, Ethan was inspired by an older idea, the responsive architecture, in which the spaces and environments scale to preset or desirable conditions, by means of sensors, according to the different contexts.

Context: this is the keyword!

Responsive design is not just a technological issue of adapting sites to different devices, but an adaptation to different contexts. It’s to develop interfaces with flexible layouts and content and that are adaptable to a wide variety of screen resolutions, devices and, specially, contexts of use.

People consume content and interact with devices in different ways according to the context in which they are. The way a person browses a website sitted at a desk, on a computer with keyboard and mouse, with a large screen, good connection and a reasonably controlled environment is quite different from the way that the same person would if in a subway with a small screen smartphone and without adequate light, unstable connection and chaotic environment, holding the device with one hand and interacting with a large and greasy finger. In these different contexts, people have different conditions to consume content. Time and rhythm are different, and the form and amount of information we are willing to consume are proportionally opposite.

Creating a responsive site is not simply applying Media Queries to the code to squeeze out the contents of a little more friendly way on smaller screens. What you will see on a smartphone must be leaner and have more focus. There is not enough space or time for doubtful relevance of content, and so it’s neccessary to design a more specific and appropriate interface, which requires us to pay more attention to areas such as information architecture, usability and accessibility. Among desktop and mobile, we need to establish a hierarchy of importance of textual and graphical information of the site, and thus rethink the relevance of this information in different contexts and devices. It’s not just the size of the screen, but the context in which the user is.

For this adaptation to different contexts and devices happen properly, we need an interface with very specific characteristics, such as a fluid layout with an adaptive design. The fluid structure where all the measures used are relative (percentage instead of pixels, for example) will allow the site to adapt to slight variations in screen sizes, such as the difference between an iPhone 6 an Iphone 6 Plus. On the other side, in variations on larger screens such as the difference between an iPad and an iPhone, the fluid interface would probably break, and part of the content would become irrelevant. In this situation, we need an adaptive layout, ie, when the site find one of those Break Points, the layout and content will restore to appear in a more appropriate and adapted way.

Example of a Design methodology made directly in the browser. Source:

Sample design methodology made directly in the browser. Source:
The key point is that to implement all this dynamism in the code, besides knowing well the users and the different contexts of use, you must have a well defined design project. And to work on the design of these interfaces, a static medium such as Photoshop does not help in the proper way. And it’s in these momentos that designers and front-enders need to hold hands, from the conception to the implementation of the interfaces. Methodologies of “designing in the browser” start to make more sense during the Responsive Design project. From sketches, wireframes and a style guide, the layout is developed directly in the browser with the help of a code inspector as firebug. It is an agile and consistent way to design and test real possibilities and limitations simultaneously.

In order to provide a good experience for users and fluid layout and adaptive design, it’s necessary to have a good performance optimization, which can be done very well by a designer who has minimal code skills, and a front-ender who has minimal design skills.

Designers and front-enders, be playmates! You will need each other more and more!

Leave a comment! 0

read more