@bytesnz

Jack Farley, Computer Engineer

Good mobile web sites are currently few and far between. Most web sites don't have a mobile web site, so people accessing the site, be it current or potential customers, or people seeking information, have to navigate web sites built for large screens and mice. This can involve a lot of scrolling, zooming in and out and frustration with menus that require you to be able to hover over a button. Most web sites that have got a mobile version have got a mobile specific web site that has very limited information on it, sometimes very outdated leaving people forced to be sent to the "full version" web site to find the information that want (if the mobile site allows them to).

With the technology available today, it is very easy to make a web site "responsive" for mobile devices. Long gone are the days of requiring a very minimised version of your web site for tiny screens with no bandwidth. I am strong believer that no web site needs a mobile-specific version of their page (or a mobile app for that matter) and hopefully this post will give why and how a one-for-all web site can be achieved.

History and Today's Technology

When the Internet first came to mobile phones, bandwidth was almost non-existent and phones were designed to be phones rather than the portable powerhouse of today.

The Wireless Application Protocol (WAP) and the WAP Browser was the way to button press your way through the Internet. WAP sites were specially crafted and very minimal.

As bandwidth increased and screens got bigger and touchable, the WAP protocol quickly vanished and access to real web sites became a thing of everyday. However, the evolution of touch and bandwidth weren't quite synced so along low bandwidth "mobile" web sites designed specifically for mobile phones. These sites normally had a fraction of the content of the normal web site and was designed a few specific uses, such as checking the weather at the local mountain.

Today, a large amount of people with Internet access have it on mobile phones at a every increasing high speed. Most mobile browsers are fully compliant with the latest (and even draft) specifications in web technology, such as HTML, CSS and Javascript.

In the realm of HTML (the code of the actual contents and structure of each page of a web site), HTML 5 offers better ways of creating graphic-intensive web sites without requiring add-ons, such as Adobe Flash, Shockwave and Microsoft Silverlight.

In the realm of CSS (the code that makes each page look the way it does), CSS 3 offers the ability to customise the look of a site for different media (print, screen and speech) and for different resolutions (the number of dots or pixels making up a screen) all in a single "responsive" stylesheet.

In the realm of Javascript (the code that makes cool things happen), where can I start… With what Javascript can do, who needs custom built apps? Notifications, offline access, background services (allowing background updates) and pushing updates to clients (browsers) are all possible with the latest browsers.

The New Mobile Responsive Internet

Gone are the days of not having a mobile site or having a dedicated web site - if you want to exist on the Internet, you have to have a web site that is capable of being displayed on the "old" computer and mobile devices. If you don't, you don't exist (at least in Google's eyes).

So what does this mean? Well, not much needs to change, you just need to be a little smarter.

• Pages need to be able to be smooshed onto a small screen. If you have a fancy layout, you need to ensure that if they screen is too small, things will be ordered neatly so they can still be read.
• The navigation needs to work on touchscreens. Mobile phones and tablets normally don't have mice (and some laptops have touchscreens), so mouseover events are (currently) nearly non-existent (they action the same time as touches clicks), so they can't be used to open menus. Instead, the navigation must work solely on touches clicks. That's not to say you can't have mouseover menus for desktops with a mouse, but it is difficult to tell when a mouse is being used and when one isn't.
• Your pages need to specify they are mobile friendly. This tiny bit of HTML will make all the difference to your Google page ranking

<meta name="viewport" content="width=device-width,initial-scale=1.0">

• You need to be bandwidth conscious. Even though I have been harping on about how much bandwidth mobile devices have these days, you still need to be weary of it - don't use 1MB images if they only need to be 100kB to look good. Another thing to consider is they amount of requests your page needs to fully load. Each image, stylesheet, Javascript file and any other goodies you may have each require a request (please sir may I have…) to the server. Latency (the time it takes to talk to a server on the Internet and get a response) is still an issue on mobile devices (and always will be for the foreseeable future), so less is best.

Examples

skiwhitewater.com

Whitewater Ski Resort is an O for awesome ski hill in the Kootenays, British Columbia, Canada and their web site(s) are a good example of the separate page for mobile devices. Their mobile web site (skiwhitewater.mobi) is a different site from the one you visit on a device it determines as a desktop. It is only helped by its content management system (Drupal), that is able to load the same data onto both web sites. The navigation is completely different on each site though, so if you get used to the desktop site, you will find it difficult to find the same information on the mobile web site.

mec.ca

Mountain Equipment Co-op is a great outdoor equipment store in Canada (one that quickly became my outdoor supplier when we were in a town that had one). Their mobile web site (bar a few occasional glitches) is perfect. It is their normal web site, but with responsive CSS to make it fit and work on a mobile device - exactly what everyone should aim for. Everything is available and easy to navigate to. What's better is MEC offers free WiFi in store so you can browser their site while browsing their store.

swissarmy.com

Mobile site, non existent. Desktop site on a mobile device… don't even bother trying. This is the perfect example of something that could be easily transformed, but just hasn't.

Need Help?

I believe that for most web sites, making it work perfectly on a mobile device is a quick and easy fix, so much so, that if you have a web site that isn't mobile ready (or have a dedicated mobile web site that you want to get rid). I am willing to have a look at for you and make it mobile friendly for $100 (some exclusions apply). Feel free to contact me if you would like me to have a look at your web site.