Optimising your website for mobile devices: An introduction

Posted by jw285 at Sep 08, 2013 01:40 PM |
An introduction to responsive web design and how this affects the University of Leicester website.

Over the past ten years or so web designers have gotten used to designing websites to fit on increasingly larger monitors with increasingly higher resolutions as home PCs got bigger and better. In 2001 we had to make sure that websites displayed correctly on relatively small screens of 640 pixels wide and 480 pixels high. In 2005 it was 1024 x 768 and in more recent years high definition monitors have come to the market with resolutions of 1920 x 1080 or even higher. Basically, as the years went by, people’s monitors got bigger. Easy!

However a couple of years ago all of this began to change and things became much more complicated. The popularity of internet enabled mobile devices such as smart phones and tablets meant that people could be using your website on a smart phone, a tablet, a super high definition widescreen monitor and/or anything in between. This meant that web designers and web editors had to make sure that their websites displayed correctly and, perhaps more importantly, worked effectively on a wide range of screen sizes.

As I write this blog post I know that mobile and tablet users make up almost 19% of all visitors to the University website (from outside of the University campus).

Mobile, tablet, desktop stats

This means that mobile and tablet users are still in the minority as far as the University’s website is concerned but this is expected to change dramatically over the coming few years as mobile and tablet users become the majority.

Bring on Responsive Web Design (RWD)

In the past couple of years Responsive Web Design (RWD) has been the big buzzword in web design circles. RWD is a design approach that enables web designers to design websites that respond to the users’ screen size. The content remains the same but the presentation of the content changes. This means that a website can have a completely different layout, size, positioning and styling if you view it on a smart phone than it does if you view it on a desktop computer. Take a look at the University homepage on a desktop computer and on a mobile device to get an idea of how it works.

Not to scale. The University of Leicester homepage on a PC monitor and a smart phone.

How does this affect you?

In April 2013 the University’s website became responsive for the first time. Some people within the University may not have noticed much of a change because the web browser that’s currently deployed by default on University computers (Internet Explorer 8) doesn’t support responsive designs so the website remains the same no matter how big or small your monitor or browser window is.

Firefox logoHowever the majority of website visitors will not be on campus and will be using a web browser or device that does support responsive design. Therefore if you’re a coordinator or contributor for a University website you need to be aware of this fact and check your website regularly to see how it looks and works on different screen sizes and devices.

The easiest way to do this (until the University upgrades the default web browser) is to install and use the Firefox web browser which is available to staff from the Program Installer (Start > All Programs > Program Installer). View your website in Firefox and try resizing the window to see the website change layout. However to see how your website looks and works on a smart phone you’ll need to test it on an actual smart phone.

What next?

In the coming weeks we’re planning to write a series of short blog posts which include tips on how to make sure your website looks good and works effectively on a variety of screen sizes and devices. This will include things such as making images and videos scale proportionately as the screen size changes.

About Me - Jeff Wilkinson

Share this page: