To start the transition of a non responsive website one simple question has to be answered and the answer must be given for every device seperately but work on all of them.

What does a visitor seek?

In general the different devices can be clustered as follows:

• extra small: mobile phone <= 768
• small: tablet >= 768
• medium: desktop >= 992px
• large: desktop >= 1200px

When answering the question, what the user seeks, for every device group, the first differences appear. Mobile user often look for something else than desktop user or expect the website to work in a different way and this is where we can start developing a responsive design.

The technical base for Responsive Web Design (CSS 3 Media Queries) exists for a few years now, and some best practices and design patters have been crystallized. See Lukes Blog post for a list of layout options. In addition to the possible responsiveness of the page layout, following critical elements can be named.

1. Navigation: A list of possible navigation solutions has been collected by Brad Frost.
2. Fixed width elements: Any element that has a fixed width, for example a 200px search field in the header or a brand logo in the footer, can never work on all four device classes.
3. Hiding/Removing elements: A lean design is often missused in the repsonsive context. By hiding content for mobile users both principles are violated. If the content is not needend (lean), than it can be removed on all devices. If it is needed on one device, define a way how it is useable on every device.
4. Mouse and Touch: Especially on large and medium devices the design usually provides interaction on mouse hover. This does not wok on touch devices. See Jenn Lukas post for a list of possible alternatives.

Meanwile a lot of frameworks have emerged that support responsive design, like Bootstrap for example. Therefore the technical side is covered pretty well. If the design concept and the requirements define “responsive” the implementation follows easily and without any trouble or extra cost. But I often percieve that exactly this definition is missing. Imagine an online shop with lots of category links in a layer navigation. How should this work on a phone or tablet? The answer is, it does not. It can not!

As hard as it sounds, if you want a responsive design, you can not proceed by asking how is “this” represented responsive? Instead you should ask how can this shop categories be made accessible on a phone and a desktop. This may end in having the layer navigation being completely removed from the shop website and have it replaced by a combination of Footer only-navigation and very prominent search field.

It will not be enough to deal with technical questions if a website is transitioning to a responsive design. If you want to design a webpage that provides a good user experiance to everyone, no matter what device he is using, you should question every function and redefine even preconditioned concepts. You will be rewarded with a wider and happier user base, that access the web page more often and with different devices, because they can!