Mobile-Friendly Website Design

Gone are the days when you can assume that visitors to your website will be viewing it with a large high-resolution screen. We live in an age where most people are walking around with a computer in their pocket, quaintly referring to it as a "phone". More than half of all UK smartphone owners access the internet every day on their pocket devices. Many others access it using one of a variety of tablets. For most businesses and organisations, it is now essential that your website display in the most friendly way possible on all sorts of different devices. Apart from anything else, Google now gives you a better ranking when it detects that your site is designed with this in mind.

To accommodate the huge variety of screen sizes, I now make all my designs responsive or adaptive. Responsive and adaptive web design is an approach to creating layouts and themes that provide an optimal viewing experience on a wide range of devices: large-screen desktops and laptops, smartphones and other handheld personal devices. The aim is to produce a design that can be viewed with a minimum of resizing, panning, and scrolling, no matter what the screen size. This is done using fluid, proportion-based grids, flexible images, and CSS3 media queries.

But this is not enough. To be truly mobile-friendly, it is necessary to accommodate slow internet connections and people who don't want their data plan gobbled up. It is also important not to thrash the CPU on a small device as this quickly drains the battery.

The following must be taken into account:

  • Page size and loading times must be as small as possible
  • Image sizes should be reduced on small devices to reduce bandwidth
  • Scripts and animations should be small and efficient to save battery
  • Popups may sometimes need to be removed below certain resolutions
  • Touch elements and links must be large enough for finger-clicks
  • Font sizes may need to be varied for readability

Unless these and other things are dealt with, viewing a website can become almost impossible. We have all tried to access sites that:

  • take forever to load, then present us with popups which obscure the content and which we can't close;
  • constantly jump around as we try to read the content (usually caused by AJAX calls);
  • have links that will not work no matter how many times we tap them;
  • simply lock up the browser so that we can't do anything!

All these things and more will be considered when producing your website.