Responsive design problems and solutions
Just about every website these days needs to be responsive: automatically adjusting the way it displays for a variety of devices from desktops to mobiles along with all manner of tablets and portables in between. This means that the designer must do a series of layouts for the different screen sizes and formats and then the developer needs to incorporate the necessary code to identify the size of the viewer’s screen and to re-arrange the contents accordingly.
Problems arise because there is no standard set of screen aspect ratios (the relationship between the height and width) for displays. However carefully a designer plans the different layouts between ‘desktop’ ‘tablet’ and ‘mobile’ displays there will always be other different aspect ratios which will alter the way the content appears. Added to which tablets can be viewed in portrait or landscape formats depending on which way they are held.
Designers need to make assumptions about what constitutes a typical display specification which includes screen resolution (the pixel density) as well as aspect ratio. Developers need to program the degree of responsiveness or fluidity using clever code like Bootstrap which alters the spacing and relationship between elements of the design.
I have a problem with responsiveness – and it’s happened with a succession of clients recently – whatever clients have been shown on initial wire frames and visuals, when they see the responsive design in the flesh it is not what they expected. ‘But the title in all your visuals was on one line and now it’s on two.’ I have been told twice this week. ‘Why is the image in the top banner moving around and changing size?’ and ‘I have to scroll down to see the bottom part of the home page which was all visible in your mock ups.’ And I don’t know if they have been looking at the site at home on some enormous 4K high definition smart TV screen the size of a dining room table or on their daughter’s Barbie iPhone.
More often than not, after a series of awkward telephone conversations, it turns out that the client is viewing the site on some obscure portable computer with a screen shaped like a letterbox or some other non-standard display. Trying to explain responsiveness to most clients is difficult to say the least: ‘What do you mean by my browser?’ and ‘How do I drag the edge of the frame with my mouse?’ Having tried a variety of analogies the one which seems to work best is likening website content to fluid which changes shape according to the container it is poured into. It’s maybe not the most elegant solution (pardon the pun) but it seems to work.
Responsiveness is yet another piece of the digital jigsaw puzzle that is probably always going to confuse the layman. Like the resolution of photographs and the mysteries of setting up email, it will come back to haunt us again and again.
Our designers have decided that, given a reasonable budget and a nervous client, it is worth lashing together a page in a responsive WordPress theme just to demonstrate the way the design elements work in action; that there isn’t a single, static image presented for them to sign off. Instead there are a collection of components that will rearrange themselves to fit available spaces and that the size and shape of the screen on which they appear will determine how much – or little – of them are on view at any one time.
This approach also enables a couple of interactive elements like rollovers to be included in the mock up to demonstrate that other things will be included that are not obvious in a static graphic.
‘No really, most people know that is the symbol for the menu on mobile phones…’ – why don’t you ask your seven year son old to show you.
