A responsive site works with the same content at the same address on every device, and only its layout changes. What sits in several columns side by side on a desktop moves underneath each other on a phone, the menu tucks behind a button, and the images adapt to the width of the screen.
Responsive behaviour is built on so-called breakpoints. These are the screen widths where the layout switches, for example where several columns become two and then one. We set the breakpoints according to the content rather than to particular devices, because the sizes of phones and tablets keep changing.
Most visitors today arrive from a phone, and on many sites they are the majority. That is why we often start the design with the mobile view, because that is where it becomes clearest what matters and what can safely move further back.
What makes a good mobile view
- The most important information and the main button can be seen on the first screen
- Buttons and links are easy to hit with a finger
- The text can be read without zooming
- Forms bring up the right keyboard, numbers for a phone number and email for an email address
We pay attention to image sizes as well. A phone gets a smaller version that loads faster than the one on a desktop, and where needed the crop is different too, so the important detail stays visible on a small screen. Fast loading matters especially on mobile, because visitors soon leave a slow page.
A good responsive design also decides what moves further back on mobile. A long table can turn into cards on a phone, and a complex filter can move into a separate panel that only opens when the visitor needs it.
That is why the designs include a mobile version of the main pages, and we also specify how elements should behave at the sizes in between. This way the developer does not have to guess what should happen on a tablet or a smaller laptop.
The mobile experience also counts in search, because Google takes the mobile version of a page as the basis when it processes and ranks it.
