When we last saw Stan he’d found the right website designer for him. Now is the time to generate ideas for what the new website will look like. Stan has heard that the mobile web is growing and is becoming more important but he’s not quite sure what this means for his website. He wants to take full advantage of this mobile web but what exactly does that involve?
What Is the Mobile Web?
In simple terms the mobile web is anybody using a mobile phone or tablet computer to access Internet. IPhones, iPads, android phones, Blackberries, android tablets, etc are all classed as mobile devices that have Internet access. The real differences between these devices and normal computers are their small screen size and lack of a mouse and keyboard. For Stan to make sure that his website will cope with the mobile web he’s going to have to make sure it satisfies two main criteria.
1. It needs to be optimised for a small screen.
Modern mobile phones and tablets are actually very good at displaying full websites on their smaller screens. If you don’t do anything special to your website the mobile devices will usually scale it to fit on the screen. Your site will look almost exactly as it does on any other computer, just a lot smaller. And it’s the “a lot smaller” bit that can be the issue.
When you scale a full-size website to fit on a mobile phone screen it is difficult to read the text. People will end up having to zoom in and zoom out to view your website which makes it harder to use. Your website can ‘force’ mobile phones to display the text full-size, but then your website won’t fit on the screen forcing people to pan left and right. The more awkward your website is to use, the less people will use it, so Stan wants his website to be as user-friendly as possible.
The answer to Stan’s problem is responsive website design. As the name suggests your website responds to whatever screen size it’s being shown on. The text on your page stays full-size, but your website changes its layout to make sure that it fits on the screen.
2. It needs to work with ‘touch’ input?
Most mobile devices are now touchscreen i.e. you use your fingers to touch objects shown on the screen rather than clicking on them. For this to work properly you need to make sure that links and buttons are big enough and spaced out enough so that people can easily click the right ones. If your links are too small and too close together people end up clicking the wrong thing and will become frustrated and probably leave the site.
Touchscreen is also mean that you can’t hover the mouse over objects. If your website relies on this feature it won’t work on a mobile phone.
How to check whether your website works on the mobile web.
To test your website with a touchscreen there no better way than actually using a mobile phone or tablet. If you haven’t got one you’ll know (or possibly be the parent of) at least one person who does. You only need to do a fairly quick test by loading up your website and making sure that you can access your menus, navigate around the website, and use any of the features you’ve had built into your pages.
To see if your website fits on mobile screens you can use one of the online simulators. Have a look at http://screenqueri.es/. Simply select the device at the top of the screen, type in your website address and click the view button. The simulator will create an area the same size as the mobile device and then show your website inside it. Your website will be shown full-size so you won’t be able to see the resizing effect (again you’ll need to use a real device for that), but if you’ve incorporated a responsive website design you’ll be able to check that it works properly.
Design for the Mobile Web from the Start
Now that Stan understands the implications of the mobile web he’s better able to discuss his design with his new website developer. Responsive website design is the most sensible route to take but it needs to be designed into the website from the beginning as it has a number of implications on the page layout. As Stan consciously chose a web designer who can develop mobile websites (check out our website designer interrogation sheet to see what questions you need to ask) they are able to work together and test their designs to get things just the way Stan wants.
If you’re not familiar with what a responsive design looks like simply access this website on a mobile device. Either use the online simulator or just make this browser window narrower or a wider. You’ll see my website changes proportions as you make it narrower until the layout changes to a single column when it gets down to mobile phone size.
Have fun!
