Sunday, 10 August 2014

Is your teaching website mobile friendly?

Here is an interesting question... Have you tested your teaching website on a smart phone? If not, try it... I'll wait.

A lot of websites were produced before smart phones were really around (~2007) and so they are not mobile friendly. Your site may look great on a desktop machine...

Webpage

A standard teaching website on a desktop

But on a smart phone, which the majority of students now have, it may look like this:

IMG 0696

The above teaching website on a mobile

It may look OK, but it is impossible to read, and almost impossible to use. In fact, the only way it can be used is by zooming in, which is fiddly and means that it is difficult to find your way around the site. Basically, students will get bored and not engage with the site, no matter how wonderful it is.

IMG 0698

Zoomed in - you can now read the site, but it is very difficult to navigate

However, the site would look much better, and be more user-friendly, if is displayed like this, and didn't require any zooming:

IMG 0699

The above teaching website displayed correctly on a mobile phone

The solution to this problem is to rewrite the site so that it displays correctly (or is at least usable) on mobile and desktop devices, and this can be done using one of two methods:

  1. Responsive web design (RWD)
  2. Mobile redirect

Both these methods have their pros and cons, and I have used both approaches - the website shown above uses the mobile redirect method due to the complicated nature of the cascading style sheets (CSS) used in the page template for the site.

1. Responsive web design (RWD)

This, in my opinion, is the correct way to do things... However, there are some disadvantages to this approach.

A well designed website should separate the content (the words and pictures) from the the layout, and typically the layout of the page is controlled by 'code' in a file, that is separate from the content file, called a cascading style sheets (CSS) file, which is loaded by the 'content' page in the web browser. These CSS files control the way the page looks, that is, the size of the text, the fonts, the positioning of text and images etc., and they can control more that one page.

Designing a website that has content and layout style separated in this way means that if you suddenly decide that you want all your text displayed in white on a black background, instead of black on a white background, then if you have designed the site correctly you only have to change one file, the CSS file, and all pages on the site (and you may have one page, or you may have many 1000s) will display the text in that way. If a CSS wasn't used then changes would have to be made to each individual page, and for very large sites this could be a very time consuming job.

This separation of content from layout means that if it is possible to determine the screen size of a device, i.e. it is a large desktop computer screen or a small handheld device, then different CSS files can be called so that the webpage is optimised for the device. And this is what happens, as the webpage loads the browser can run a test for device screen size and determines how to format the page.

The 'pro' of this approach is the content is displayed correctly for the device being used, and images and movies are shrunk to fit in the smaller screen. However, the 'con' is that even though the image or movie appear smaller their files are not reduced in size so pages may load slowly on mobile devices with low bandwidth.

I used this approach with my main website:

Screen Shot 2014 08 10 at 17 43 19

'Home' Page - desktop view

IMG 0746

'Home' Page - mobile view

IMG 0709

'Home' Page - mobile view

The browser detects the screen size and uses one CSS file for large (desktop and tablet) screens, and a different CSS file for small screens.

2. Mobile redirect

With mobile redirect the browser still determines the screen size of a device, but in this case if it detects a small screen it will redirect the page request to a webpage specifically written for mobile viewing.

The major disadvantage of this approach is that you have to maintain two sources of the information (text), that is, one source for the desktop, and one for the mobile. However, this problem can be resolved by holding the text in one file and loading this dynamically in to the 'desktop' or 'mobile' webpages by using PHP or javascript. (As you can imagine this makes things even more complicated.) Another problem is the page may not be correctly crawled (indexed) by the search engines as they may not be directed to the mobile version of the material, and so no one may find it!

A significant advantage of this approach is that images and movies can be resized to better fit mobile devices and this means images and movies will be in smaller files, which will therefore load faster on mobile devices with low bandwidth. Again, this means that two versions of the image or movie file will have to be produced - one for the desktop, and one for the mobile.

Which is best for me?

This is a tough question. Both approaches have their pros and cons. Personally I prefer solution 1, Responsive web design (RWD), however, for sites rich in images and movies solution 2, Mobile redirect, may be a far better solution as pages will load faster and students will get a better experience.