In most working environments there’s a good chance we are accessing most websites using a desktop web browser on a full-sized, horizontal monitor. However, it’s commonly known that this is not the way the average student is accessing your content.
According to this year's UPP campaign data, 59% of students accessed content using a mobile or tablet device in Hull and the number was even higher in Plymouth at 61%.
It’s therefore critical that websites are designed and programmed so that information is easy to read and understand on all device types; that is:
- On desktop web browsers
- On tablets; both horizontally and vertically
- On mobile devices; generally only vertically
Many web designers advocate a ‘mobile first’ strategy; designing first for the small screen and working their way up, which supports the prioritisation in the importance of making sure content not only looks great on small screens, but is fully functionally in a mobile format.
A word about search engine optimisation and responsive design
Responsive Design – and in particular good design for mobile – is now one of the most (if not the most!) important things driving search engine optimisation. For example, Google have actively called out mobile as one of the most important signals in ranking content, especially where a search has originated from a mobile device.
What is Responsive Design?
It used to be that web designers would code different versions of a website for each device type. A different version of the page would be served depending on the device being used to access the content.
However, current web practice is that layouts are flexible and are programmed to adjust themselves according to the device and aspect that the content is being viewed at. This is called Responsive Design.
The most common method of Responsive Design is based on a fluid grid format. Layouts are blocked into grid sections – for example eight equal sections on a full width desktop browser. As the device that is being used to access the content gets smaller, the layout is collapsed so items stack on top of each other. For example two sections side by side become two sections stacked on top of each other once the device screen becomes too small.
Tools to assist with Responsive Design
Emulating different devices from your computer
Did you know, you don’t need different devices to see how a site will look on that such device? Most browsers have a mode in them which will emulate different screen sizes, usually found within development tools.
Responsive Design: things to look out for
There are no hard and fast rules on responsive design; the site should deliver a design that is as easy to digest and interact with on all device types. However, the following are some checks you could choose to look at using a device emulator as described above:
- Do sections re-stack so that they are efficiently rendered across all screen sizes?
- Are font sizes easy to read across all device types? (Good responsive design has rules built in to adjust typography according to screen size).
- Does typography flow well across all device types?
- Do all special features (such as carousels, sliders, videos, animations) work on small screens – or if not, are they modified or disabled for screen types where they may not work so well?
- Are buttons and other call to action elements appropriate size and can they be clicked on easily?
- How does the navigation bar/menu bar look on different screen sizes? Often menus and navigation bars are designed to collapse or change as the screen size gets smaller.
- How easy is it to use booking platforms using mobile devices? (If possible, try and complete a room booking using a device or a device emulator).