Guest blog by Jez Touch from Rare Earth Digital

A responsive website is one that is designed and built to look good and to work well on any size of screen that a visitor might use to view it. By allowing the elements to move around (re-flow) the viewer gets the best experience of your site on their phone, tablet and desktop.

But what does it mean for graphic designers and software developers?

The most obvious aspect of the site that will change depending on screen width is how elements of the site are laid out. On a desktop computer the site might display 2 boxes side by side, on a mobile phone the same 2 boxes will probably appear one above the other. This means when designing the desktop you might want to have your most important message on the left hand box, as this will be the top one on a smaller screen.

In addition to that, the content and even the functionality can change to be more appropriate for the device. It might be ok for a website viewed on a desktop with a fast internet connection to display lots of large images, whereas the same page viewed on a phone, where the user might just have a mobile connection, those images should be much smaller or removed altogether.

Think about how an interactive map looks on a desktop website, there might be a lot of detail and movement that reacts to the users mouse. That’s very useful, but on a small phone screen you can lose that detail and instead give the user a list of options to choose from. The list may not look as nice but if your priority is high quality user experience then it’s a better option.

The biggest consideration is the navigation. On a desktop users can usually see all of the main links, often horizontally near the top of the page (like on this one). On a phone there is no room for this so navigation is reduced down to the three short lines icon (the ‘hamburger’) to indicate where it is. If you’ve got complex navigation, especially lots of sub-layers think hard about the easiest way for people to navigate around on the smallest screen size. Will it drop down from the top, in from the side, totally cover the page underneath or push the content down underneath it (like this one) to allow it still to be seen? There are lots of decisions to make.

So how does it work? 

In general the look of a responsive website is controlled by Cascading Style Sheets (CSS) and the CSS will contain ‘Media Queries’ that define upper and/or lower screen widths, known as break points. The website detects the width of the screen in use, compares that with the media queries and then decides which part of the CSS to use.

Many websites have a single break point that says the website is either large (for desktops, tablets, some phones) or small (for most mobile phones) but it’s possible to have as many break points as you like, such as for…

– desktops
– tablets held in landscape mode
– tablets held in portrait mode
– phones in landscape
– phones in portrait
– etc.

What do we think about when designing and building a responsive site?

We’re all familiar with hovering on a website, when you move your mouse pointer over a screen element and something changes, either the element itself or just the pointer.

On desktops this is a really useful feature, but it doesn’t work on mobile devices. Phones are just not good (yet?) at detecting a finger hovering over the screen. Phones respond to you touching the screen which is the equivalent of clicking your mouse on a website. Ensure your ‘clickable’ elements on the screen are obvious and the only clue that they’re links isn’t just the rollover.

Fat fingers:
Phone screens are much smaller than desktop screen and that (no offence) your finger is much larger than your mouse pointer. So make sure that links and buttons in mobile views are larger and futher apart than on the desktop. There’s nothing more frustrating than clicking on one link and accidentally tapping another. Grrrrr.

Long content:
When designers layout a new web site they ensure that each part of the page has just the right amount of content to make it look brilliant. In the real world, website owners often add too much or too little content, or have really long headings, or images that are the wrong shape, all of which result in the site looking not quite as good.

This can be tricky to manage on a desktop but small screens can be even more sensitive, so always consider what will happen when any piece of content gets longer and plan for it

Testing is really important and the easiest way of testing a responsive website is to view it in your desktop browser and then drag the window narrower and wider, the website will respond according to those break points.

The best way though is to view the site on your phone, since this is how your visitors will view the site, and ultimately you’re testing the user experience. Putting yourself in the users shoes and ensuring they get the best experience is what Responsive websites are all about.

If you need any help with your website, or to talk all things responsive please get in touch.

Jez Touch
Rare Earth Digital


JG Creative and Rare Earth Digital are partner agencies. We share office space and work together to give you design specialists and technical specialists on your website, app or portal project. Contact us to find out more.