Modernising Web Design

02 August 2017

Originally published early January 2017 as an internal document.

The Internet continues to evolve rapidly and become a more mature platform for content distribution; at the same time the devices we use to access the Internet are becoming more varied. We continue to use desktop and laptop computers with a wide range of screen sizes but have also seen the proliferation of mobile phone with Internet access, followed by an array of Tablet devices and onto the upcoming expectation of an increase in wearable tech and virtual reality devices.

As modern web developers it is essential that we consider all devices as best we can, else the sites we deliver are unlikely to display well across this range of screen sizes. To put this into some perspective, consider the following:

  1. More than 50% of Internet access now originates from mobile devices; if such visitors cannot use your site they will leave (for e-commerce sites you have just lost potential trade to a competitor).
  2. Google considers that mobile support should be essential for every web site on the Internet; since April 2015, failure to provide mobile support will result in worse rating in Google’s results.
  3. Google is in the process of adding penalties to result ratings based upon mobile and desktop performance scores – slower loading sites will lose position in listings.

Making a Mobile Friendly Site

Whether we are updating an existing site or creating a new site from scratch, supporting the vast array of device screen sizes can seem a daunting task – how can you design something on a huge desktop screen that can fit and look good on a small portrait smartphone? At present you have two options:

A.     Separate Mobile Site

This involves creating a completely separate site for mobile devices, then detecting the type of device viewing your site and sending them to either the desktop or mobile version as appropriate. This approach has been in use for the last ten years or so; but has some significant drawbacks:

  • You must now maintain two separate versions of your website, increasing workload and cost.
  • These designs are only optimised for two screen sizes, usually full-size desktop and portrait smartphone; everything in between will be presented with one or the other, irrelevant of actual screen size – this leads to a bare looking site on larger mobile screens, and the entire desktop design being cramped onto smaller mobile screens (rendering the site unusable).

B.     Responsive Design

This approach involves allowing your web site to change its layout to suit the screen size of the device, this even occurs in real-time as the screen size is changed (such as rotating a mobile device or resizing a browser window on a desktop). Responsive Design allows every visitor to enjoy an optimised experience of your site; encouraging visitor retention and increased sales.

“Responsive Design” overcomes the drawbacks of the older “Mobile Site” option and is, by far, the preferred solution for creating modern mobile-friendly sites that cater for all screen sizes.

Technology for Creating Responsive Sites

Achieving a responsive design with solely your own code, whilst possible, can be time consuming. Fortunately frameworks (CSS and JavaScript files) are available free-of-charge that provide the underlying responsive features upon which to create your design. The most common of these is Bootstrap which, originally created by Twitter, is now a worldwide industry standard – as such it is portable across developers, both within your team and also with external suppliers.

Bootstrap additionally brings many layout tools not part of the standard HTML web page language; for example, navigation menus which reduce down to “hamburger menus” on smaller screens, and grid-based columns allowing content to be displayed in up to 12 columns on larger screens but less columns on smaller screens, all the way down to a single column on the smallest screens.

Bootstrap introduces default recommendations on layout concerns such as font size, padding and guttering; whilst often contentions, these defaults certainly create highly readable sites even for those with suboptimal eyesight. Such defaults can be overridden, but the further you deviate from the Bootstrap defaults, the more customisation you will need to make – this can increase initial design costs substantially and great care must be taken to ensure you have consistently customised across all screen sizes (such testing of the defaults has already been performed by the Bootstrap developers and the huge number of sites that have chosen to use this framework).

Steps to Creating a Responsive Design

As a designer, there are certain steps to consider when creating a responsive design:

  1. Simplify – look at the elements you have on screen and decide if they are all really required; is there duplication, non-essential clutter, or simpler ways of presenting the information to reduce the amount of screen space required? A cleaner interface will make for an improved experience for all users, not just those on small screens.
  2. Optionalise – are there elements which can be hidden on smaller screens without restricting the usability of the site or access to any parts of it? Large screen users can still have your full site experience, smaller screens will display less features but become more usable with less scrolling.
  3. Dynamicise – let navigation menus reduce down to a “hamburger menu” on small screens, allow images to scale to the space available, allow content displayed in columns to reduce to fewer or single columns on small screens, allow font sizes to change to suit the screen size, move elements of the layout around to best suit the device.
  4. Rethink – challenge your existing layout solutions, could you do things completely differently to give a more consistent experience across all screen sizes?

If a small screen user will have to scroll down repeatedly to reach the actual content of a page or wade through enormous menus, then they are unlikely to enjoy your site – they are likely to go somewhere else!

Ideally designs should be produced for both large screen desktop devices and small screen portrait smartphones, perhaps also an intermediate tablet size. Bootstrap detects specific screen sizes so it is important that designs are created at these sizes in your design software:

  • Extra small devices – less than 768 pixels wide (e.g. phones)
  • Small devices – greater than or equal to 768 pixels wide (e.g. tablets)
  • Medium devices - greater than or equal to 992 pixels wide (e.g. desktops)
  • Large devices - greater than or equal to 1200 pixels wide (e.g. desktops)

It highly recommended that all designers familiarise themselves with the concepts of Bootstrap (without getting into too much of the detail initially), especially the content of the CSS and Components sections at http://getbootstrap.com/

Site Performance

Since late 2016 Google has been profiling web site performance from both desktop and mobile perspective; these performance indexes, along with a similar mobile-support index, will undoubtedly affect result ratings. These indexes require many sites to reorganise stylesheets and JavaScript files, compressing and “minifying” these; adding client-side caching features throughout sites, and compressing images significantly beyond the level with which we as designers are often comfortable.

Your site can be profiled at profiled at https://testmysite.thinkwithgoogle.com/