It wasn’t that long ago that mobile web design was a relatively new concept. Phones had just started to be a legitimate way to browse the web, but their small screen sizes and slow connections meant that surfing many websites was cumbersome and slow.
Only a few years later though, and mobile devices are on the brink of overtaking home computers when it comes to internet access. The popularity and power of iPhones and iPads, followed closely by Androids and Windows 8 devices, and the emergence of connections such as 3 and 4g, has meant that many devices are small enough to fit in our pockets and yet more than powerful enough to browse even the most complex sites.
Meanwhile the sheer diversity of screen sizes means that it would be nigh impossible to have a tailor made site for each and every one of them, so what does this mean for mobile web design?
The Best Solution
Well the best solution is to come up with a web design that can operate effectively on any popular device. This means you might not want to necessarily create two separate versions of your site, but rather have one site that can dynamically adjust to its environment and that’s designed to be suitable for a range of devices in terms of its navigation and input. There are a number of ways you can accomplish this which we will examine here…
Things to Avoid
First of all, there are some features you should avoid in your web design due to poor support across devices. The first of these is Flash – although Flash can be very useful for creating interactive features and animations, it unfortunately isn’t supported by iOS or Android meaning that the large majority of mobile devices won’t be able to show it.
Likewise you should avoid drop down menus and anything involving mouse overs as touch devices won’t know when someone is ‘hovering’ their finger over the screen meaning these aspects will be inaccessible.
Principles to Adhere To
There are various principles to adhere to when trying to make your site more compatible and accessible for mobile. One is to use lots of white space – white space is something that is easily collapsible and that will help to make your site feel less claustrophobic and more spacious – even on smaller screens.
At the same tie you should employ lots of large and obvious links. This way people will be able to click them easily with fingers or a mouse, rather than having to try and aim to click a tiny line of text.
When choosing where to put the most important features of your site, opt for the top left corner of the page. The reason for this is that even on a small screen this part will be visible, whereas the things on the extreme right may get pushed off to the side.
Finally, make sure your site design relies on percentages for its layout rather than set pixels. This way, your individual elements will adapt and so appear in the same position in relation to everything else no matter the size of the screen.
If you don’t want to stick to these methods, then you can use PHP script in order to get your site to adapt individual elements – so that only devices that support it include Flash for instance, and so that you include extra images depending on the size of the screen. Then just test, test, test…