This website stores cookies. Click here to accept them.cookie information page

How Mobile Devices are Shaping Websites & Software - Part 4

23rd January 2016

Part 3 talked about the successes and failures of Windows 8 as a case study. Now we will focus on the ways in which designers optimize for mobile.

At Oxford Web we aim to design websites that will stand the test of the future, where sites can be easily viewed on screens of any type and in any situation.

What is involved in "optimizing for mobile"? What makes the perfect usability experience on all devices? Sadly, there is no straightforward answer, but hopefully this article should make the problem clearer. There are four main types of website design: Fixed, Fluid, Adaptive, Responsive. Each comes with its benefits and deficiencies when it comes to viewing on multiple devices, as described below:

Static Website Diagram

Fixed (a.k.a. Static) width websites have been falling out of favour with increasing numbers of designers for years, but is this justified?
Benefits - The designer is given maximum control - no matter what screen the webpage is built on, it is relatively easy (and therefore low-cost) to display everything as intended in an identical fashion.
Deficiencies - Fixed width websites are built for viewing on desktop screens. If the full site is fed to mobile devices, the user will need to zoom and sideways scroll, marring the browsing experience. Also, if the user has a particularly large computer screen (which have generally been getting bigger over time) there will be copious amounts of 'white space' either side of the design. A way around this would be to build a separate mobile site or app, but creating and supporting this can take up a lot of developer time, and therefore is a costly option. Apps may not give you full site functionality

Fluid website diagram

Fluid width sites were possible to produce years before adaptive and responsive design
Benefits - These sites are able to expand and contract, allowing you the ability to remove any 'white space' on either side of a desktop screen
Deficiencies - These sites tend to fail on smaller screens, especially when there are lots of columns or a horizontal menu. As the columns menu items are squeezed into smaller spaces, the text will wrap more and become virtually unreadable. This is normally overcome by adding a minimum screen width, but this will inevitably mean some scrolling is needed on smaller devices

Adaptive website diagram

Adaptive sites are a way to quickly produce modern sites on a relatively small budget. Twitter's Bootstrap 'framework' and the lightweight Skeleton 'boilerplate' can be used as a base over which adaptive sites can be built.
Benefits - You will be able to produce a modern-looking site which will look great on any size screen. Most adaptive sites are based on a 960 pixel grid, that can re-arrange its components as the viewing window is made smaller to aid usability. Carousels can be shrunk for tablets and omitted altogether (or replaced with a small image) for mobile viewing. If you want to, you can have a swish looking drop-down menu for mobile to maximize screen space and minimize scrolling!
Deficiencies - It is slightly more difficult to ensure sites display uniformly across different browsers and more costly than a standard fixed website. If badly implemented, adaptive designs can slow page load times which can be a problem on mobile

Responsive website diagram

Responsive websites are the most difficult kinds of site to produce, but when carefully prepared will give users the ultimate browsing experience! This type of site is 100% future-proof
Benefits - You can insure that: text will always be displayed in a legible format with a suitable line length and font size, that every aspect of the website will be at the optimum size and position for every possible screen-size, unwanted items can be omitted in mobile view and that no white space will display unless you want it to and the overall design of the whole site looks immaculate and well balanced in any screen size
Deficiencies - These sites take time to perfect and can therefore be costly to produce. Again, if implemented incorrectly, page load times on mobile can be affected

We're always happy to give you personalized advice on the best way to design your website. Just drop us a line on 01865 596 144.

© Alberon Ltd 2017

8 Standingford House
26 Cave Street
Oxford
OX4 1BA

01865 596 144

Oxford Web is a trading name of Alberon Ltd, registered company no. 5765707 (England & Wales).