Mobile Device / Smart Phone Friendly Websites
Why would you go to the trouble of making your website mobile device friendly? Browsing the internet via a mobile device is at an all time high, and increasing exponentially. Some statistics: in the US mobile data traffic increased by 260% from 2009 to 2010, and the sale of smart phones outsold the sale of PCs in Q4 2010 for the first time ever. Here's one prediction of the future of mobile from the MOCOM Think Tank. The availability of the iPhone 3 with it's superbly easy to use interface, followed by iPhone 4, and the proliferation of HTC and Android devices together with improving data plans from the major telecommunications companies has changed the way we think about browsing the internet. You can find out when a movie is on, answer your question or solve an argument immediately, check what your friends are up to, and find the weather report, all in a matter of seconds without even thinking about booting up your PC or Mac.
Case Study: creation of a mobile device friendly version of the Henry Langdon website - an ecommerce site allowing visitors to purchase from the beautiful Henry Langdon range of gourmet teas, cocoa and chai, spices, rubs and gourmet sugars.
The process of making your website mobile device friendly involves the following 3 preliminary steps:
- Decide which areas of your site will be included in the mobile friendly version:
- Not all sections of your website will be practical to view on the very small screens, and without the benefit of a full keyboard, so don't be afraid to leave parts of your website out.
- You should always have a link to the "full website" from the mobile friendly version so if your visitors really want something you've left out, they can still get to it.
- Your website may include so many things that it's just too many options to be easily navigated through on a mobile.
- Some functionality may only operate correctly via the full website, but will require a link to take the visitor there.
- Determine if you need to add new functionality to the site, which is specific to the likely requirements of your mobile user. For Henry Langdon's site, we added a "Buy Now" page which lists all the products in their range allowing the visitor to select all the items they wish to purchase from just one screen, making it quick to place an order on a mobile.
- For the content to be included, decide how you will change the layout of the screens so that they can comfortably fit the small screen. In the case of the Henry Langdon website, the left hand product category navigation was removed from the shopping cart pages, to allow the full screen for viewing product information. The mini-cart was given prominence in the header of the screens, allowing click through to checkout, which you can see in the image to the right.
Once you have gone through the above process, which we would be happy to help you work through, creating the mobile device friendly site will require:
- screen design to complement your current website
- implementation of the created screens in HTML and CSS
- creation of each page of the mobile friendly site, placing these files in a separate location on your web server
- setting up the code to determine whether a visitor is viewing the website via a mobile device in order to re-direct them to the appropriate version of the website
- testing on numerous devices including at least an iPhone, HTC, a Windows Phone, and a Blackberry.
See our work by checking out the mobile device friendly version of the Henry Langdon website (from your smart phone or other mobile device of course).
Feel free to get in touch with us about creating a mobile device friendly website by either calling us on (03) 8525 2082 or by completing the form below: