Sunday 10 August 2014

Is your teaching website mobile friendly?

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

Many websites were produced before smartphones were really around (~2007), so they are not mobile-friendly. Your site may look great on a desktop machine...

But on a smartphone, which the majority of students now have, it may look awful.

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.

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

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.

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 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:

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 a 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 into 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, maybe a far better solution as pages will load faster and students will get a better experience.