Why do I need ‘responsive design’ for my website ?
Because websites now have to work with smartphones and tablets and these have massively different screen sizes and resolutions. If your website appears with tiny (illegible) text then you will have broken the don’t make me think rule for the visitor.
This website has a responsive design and if you change its size on a desktop or large tablet you will see elements shuffle about and menus appear/disappear according to browser window size.
Some years ago we did a website for a flying school and here's how we did the responsiveness.
This is the ‘big daddy’ with the navigation on the left, the main content in the middle and the checklist in the sidebar rotated by a few degrees on the right.
Because desktop screens can get very big (30”) these days, the overall width of the content area has been constrained and the lined blue background fills the non-content area.
Apple iPads have very high resolution displays but browsers structure the page so that you can still read the text.
The checklist has now been moved underneath the main content, but the navigation hasn’t moved.
The menu has been brought to the top so that it’s visible so we put the image, smaller this time, on the right. The content is now in a single vertical column.
Lower down the page we straightened up the checklist.
Incidentally on a smartphone, the font size is frequently increased.
A range of alternative renderings
It’s all the same basic HTML website code underneath, but the designer has to employ CSS (cascading style sheets) that are enabled or disabled by media queries to change the page according to the device being used.
Each different range of devices (desktop, tablet, smartphone) needs its own rendering and it’s not getting easier because there are more types of devices on the way – think watches, TV, HD TV and Ultra HD TV. You have to think about what devices your market is likely to use and the designer will have to work to at least three (fluid) layouts.
Links and menus
For smaller screens links have to be discretely touchable, so buttons may have to be bigger and perhaps fonts too.
If there are a lot of menu items, then you may have to fall back on the ‘hamburger’– the three line menu button that has become ubiquitous, though frequently it isn’t labelled. You’re supposed to know.
On the left, before the hamburger has been touched and on the right, after.
Some people like to reduce the amount of information on a small screen. If you’re going to do this, it’s as well to let the visitor know there is more available on a tablet or desktop as appropriate.
Large tables of data are not going to work on a small screen. One method for rendering large tables is to freeze the first column and let the user scroll the remainder. Of course this becomes harder if the table is deep as well as wide.
We’ve noticed that some of our clients’ websites are more popular with smartphones than desktops with tablets coming last – though this may change over time. For most owners it looks like having a responsive design is mandatory.
Think carefully about your particular market and its needs. Think too whether you should consider ‘mobile first’ as a strategy for your website design. Whatever you do, ensure that you have implemented the minimum for mobile.
2021 © Caz Limited