Essential design tips for the mobile web

Default avatar.
March 27, 2014
Essential design tips for the mobile web.

thumbnailIt’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.


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.

Read Next

3 Essential Design Trends, December 2023

While we love the holidays, too much of a seasonal theme can get overwhelming. Thankfully, these design trends strike a…

10 Easy Ways to Make Money as a Web Designer

When you’re a web designer, the logical way to make money is designing websites; you can apply for a job at an agency,…

The 10 Most Hated Fonts of All Time

Remember when Comic Sans wasn’t the butt of the jokes? Long for the days when we actually enjoyed using the Impact…

15 Best New Fonts, November 2023

2023 is almost over, and the new fonts are still coming thick and fast. This month, we’ve found some awesome variable…

Old School Web Techniques Best Forgotten

When the web first entered the public consciousness back in the 90s, it was primarily text-based with minimal design…

20 Best New Websites, November 2023

As the nights draw in for the Northern hemisphere, what better way to brighten your day than by soaking up some design…

30 Amazing Chrome Extensions for Designers and Developers

Searching for a tool to make cross-platform design a breeze? Desperate for an extension that helps you figure out the…

Exciting New Tools for Designers, November 2023

We’ve got a mix of handy image helpers, useful design assets, and clever productivity tools, amongst other treats. Some…

The Dangers of Doomscrolling for Designers and How to Break Free

As a creative professional, navigating the digital realm is second nature to you. It’s normal to follow an endless…

From Image Adjustments to AI: Photoshop Through the Years

Remember when Merriam-Webster added Photoshop to the dictionary back in 2008? Want to learn how AI is changing design…

3 Essential Design Trends, November 2023

In the season of giving thanks, we often think of comfort and tradition. These are common themes with each of our three…

30 Obsolete Technologies that will Perplex Post-2000s Kids

Remember the screech of dial-up internet? Hold fond memories of arcade machines? In this list, we’re condensing down 30…