Essential design tips for the mobile web

It’s no surprise that a recent report from UN agency, the International Telecoms Union, predicted that there will be more mobile subscriptions on the planet than people inside the next 9 months. The ‘smartphone revolution’ is most definitely upon us and as such, mobile web design has exploded in recent years.

This has meant that web developers have had to gets to grips with mobile site design, if they want to compete and future-proof their business. Bearing this in mind, I’ve come up with some top tips in order to give developers a starting point, with some things to be kept in mind before proceeding.

Consider fast-moving technology

A quick look at how far mobile devices have come since the introduction of the iPad will confirm that mobile technology is a fast-moving, ever-changing industry and for this reason, it’s wise to consider how you can future-proof design.

This means that keeping up with the latest trends is vital if you are to somehow ensure that the site will be viable in a few years’ time. Responsive design is, of course, all the rage at the moment and it’s likely that this will be part of your plan.

Whilst it’s safe to assume that most of your visitors will have smartphones, it’s worth considering that not all will, and so you may need to work this into the design. It’s worthwhile researching the target audience in the planning stages, so that you can get to grips with the common devices used, as well as user behavior.

Talking of user behavior…

Mobile web visitors don’t necessarily access websites on the go and this is something to bear in mind. Often, mobile browsing is done whilst waiting; on the train, in the car or even on the sofa at home.

This means that stripping down the design so that it’s too simplistic could be counterproductive. If you have a bare-bones site with nothing much in the way of content, this could be off-putting to the audience as your site is providing nothing much of real use and could be considered nothing more than an oversized banner ad.

Mobile these days is used as much as, if not more than, the desktop for internet browsing, so bear this in mind during the design process and ensure that your site is easy to use, yet content rich.

Optimizing your mobile site

Optimizing mobile websites is also vital, especially for landing pages, as these are the entry point to the website. This means that a mobile website should be optimized with the user in mind, as well as the search engine, to give a simple navigation experience, clear text, easy one-click forms and relevant meta information and alt tags.

File sizes should be considered in terms of weight and a strong call to action should be included on landing pages. If you have to use forms, then keep them as simple as possible, with as few input fields as possible so that the user doesn’t become frustrated and leave.

The same goes for actions; keep them simple and only use when necessary. Whilst it might be nice to have a fancy navigation system, if it’s unusable expect a high bounce rate.

Where buttons have to be used, make sure they pass the ‘thumb test’, meaning you should comfortably be able to press a button using your thumb, without hitting other content which may take you to a undesired page.

Optimization is something that needs to be considered when building a responsive website too. A lot of debate has been raging recently on how responsive design is slowing down the web and whether it will essentially mean the demise of responsive sites. However, there are conditional loading techniques which can help speed up a site to ensure devices don’t automatically download the full desktop version of the site every time.

CSS and JavaScript resources should be compressed and there’s plenty of open source software available to help with this. For example, UglifyJS can be used with JavaScript to compress code and Compass can be used to create cleaner markup, as well as sprites and extensions, without too much fuss and hard work.

Grid and breakpoints

When using responsive design, one of the key things to define at the start are the grid and your breakpoints. Again, there are numerous tools online that can help you to define columns and their width and gutters.

Some developers like to set breakpoints based on resolution, but this is not really the best solution as there are so many mobile devices on the market and resolutions change with time.

This means that breakpoints should be based on design and content, rather than resolution. To test breakpoints and grids, the browser window can be used during the design project to see how content behaves when resized.

Ideally it should flow naturally and you can use as many breakpoints as you need to achieve this.

UI, compatibility and guidelines

Not all mobile OS are created the same, as you will know, so it’s worth looking out the guidelines when it comes to building for Android and iOS, for example, and the browsers that can be used on them.

Bear in mind that users will be browsing on a variety of OS and some will be older versions, so it’s useful to ensure that the mobile website is backwardly compatible. Here it’s useful to look at analytics for the main site, if applicable, as you will be able to see what devices your audience are accessing the site on.

Of course, looking at analytics following completion of the site will also help you to make necessary changes and to learn for the future.

Content, content, content

As we all know by now, content is king of the web again and so planning content modules is important. The behavior of content modules will have to be defined in order to ensure that they display as they should as the user navigates and takes action.

This means that you have to look at, and define, how content displays when switching between a desktop and mobile screen in order to determine how the modules are going to stack and reorder themselves.

In this regard it’s often easier to really get this pinned down at the planning stage. Make a sketch on how you envisage content display and then work through how this can be achieved.

However, try not to get too hung up on defining everything. Whilst your main pages will need wireframes, it doesn’t necessarily follow that every single page will. Creating a master set for screen sizes and orientation should really be enough.

Build a prototype first and test thoroughly, making sure that all aspects work as you go along. It’s also wise to keep the user firmly in mind when testing, ensuring that navigation is simple and preferably a maximum of three layers. Try to find someone who isn’t technologically minded, but uses different devices, to test the site on.

Conclusion

Mobile web design is a necessary challenge to get to grips with as a designer, in order to offer a complete service to the client. Like many things in life, one of the most important aspects is planning so that you have a clear idea of how to go forward.

Effective planning and keeping the user in mind will help overcome most hurdles you’re likely to come across, and thorough testing will pick up the rest. Think responsive, quick and simple, with excellent useful content and you can’t go too far wrong.

Featured image/thumbnail, mobile web image via Shutterstock.

Kerry Butters

A prolific technology writer, Kerry is an authority in her field and produces content for a variety of high profile sites in her niche. Also a published author, Kerry is co-founder of digital content agency markITwrite, adores the written word and all things tech and internet related.