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 around (~2007), so they are not mobile-friendly. Your site may look great on a desktop machine...

But it may look awful on a smartphone, which most students now have.

It may look OK, but it is impossible to read and use. In fact, the only way to use it is by zooming in, which is fiddly and makes it difficult to find your way around the site. 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 it was 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 pros and cons, and I have used both approaches.

1. Responsive web design (RWD)

This is the correct way to do things. However, this approach could be improved.

A well-designed website should separate the content (the words and pictures) from the layout. Typically, the page's design is controlled by 'code' in a file separate from the content file, called a cascading style sheet (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 than 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 page, which could be time-consuming for huge sites.

This separation of content from layout means that if it is possible to determine the screen size of a device, i.e., whether 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. As the webpage loads, the browser can run a test for the device screen size and determine how to format the page.

The 'pro' of this approach is that the content is displayed correctly for the device being used, and images and movies are shrunk to fit the smaller screen. However, the 'con' is that even though the image or movie appears 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 information (text): 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 using PHP or JavaScript. (As you can imagine, this makes things even more complicated.) Another problem is that the page may need to be correctly crawled (indexed) by the search engines as they may not be directed to the mobile version of the material, 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. 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 tricky question. Both approaches have 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.

If you would like to support my blogging efforts, then please feel free to buy me a coffee at https://www.buymeacoffee.com/drnickm