Principles of mobile web design

A fairly new addition to the pantheon of web design, designing sites for a mobile device doesn’t veer too far away from those essential principles of all web design. You’re going to want your site to look professional, gone are the days when you could get away with having a simplistic layout, you also want it to be user friendly, and stand out from the crowd. Today, with the ubiquity of smartphones, there’s no excuse for a shoddy design.

It’s a necessity that brands, and individuals alike, realise the importance of mobile web design. We’ve covered the pitfalls of mobile web design in a previous post. With layouts being the first thing designers usually get wrong – the main problem being that they often cling to outdated ideas, as I wrote in a previous post, “Despite all of the last decade’s advances in web technology, many web designers still sadly cling to outdated ideas and models of what web design should be. The web is still plagued by mobile-unfriendly layouts, which poses a major issue when it comes to mobile web design.”

Let’s look at two aspects in a little more detail. Google have come up with 25 essential components to good mobile design. Beginning with calls to action, front and centre, they say: “It can be easy for mobile users to miss menu items, so always put your key calls-to-action where you know users will see them. Study participants had the easiest time completing tasks on sites that clearly displayed primary calls-to-action in the main body of the site, with secondary tasks available through menus or below the fold. Your mobile calls-to-action will probably be different than on desktop, so put yourself in your user’s’ shoes when determining placement.”

Optimisation is another crucial principle, by optimising every page, you’ll be making the job a lot easier. Nick Babich writes a few tips on practical optimisation:

Use only vertical scrolling. There shouldn’t be pages where horizontal scrolling is necessary to see a primary content — make sure all your pages use relative width and position values for CSS elements, and images can scale as well. Put your content first and get rid of every element that could distract users from the content.
Limit the number of columns — ideally you should have a single column site layout.
Don’t mix desktop and mobile-optimised pages — sites that have such mix are actually harder for users to use than all-desktop sites.

With everything web based, people want things to be fast and efficient. This can be done by, “Ensuring that pages aren’t bogged down with long load times, too many graphics, or content that requires a user to zoom in and out to read”, Kim Speier writes in Hubspot, when explaining her 9 principles of mobile web design.

Creative Freedom have worked with a number of very satisfied clients, helping them with some stunning projects. If you would like to get a site that attracts customers, then please get in touch.