How To Design A Mobile Friendly Website In 14 Steps

by Silvio Porcellana - July 7, 2016

Today’s post is a long one, so grab a coffee and your notepad. We are going to break down the design process for an awesome mobile friendly website. This post will explain to you from start to finish – what sorts of things you should be thinking about when designing a mobile friendly website!

Why Mobile Friendly?

5 years ago you could (maybe) have gotten away with ignoring mobile users, but that’s just not the case anymore. More and more people have smart phones and they are using them for all sorts of tasks that once would have been done on a PC.

In fact, according to Smart Insights, mobile might be more important than desktop! Of course it really depends on your niche, but the one thing that is for sure is that for the vast majority of businesses, mobile is important!

Ways To Do It

Ok, so let’s assume you’re on board and you want to make your website mobile friendly. How do you do it?

There are 3 options:

Responsive Design:

Essentially, you have one website, all users are sent the same basic HTML and CSS. But the website is designed using fluid elements and media queries so that it is rendered differently depending on the user’s screen size.

Dynamic Serving:

When a user’s browser requests a page on your website, it sends a token called ‘user agent’ which tells the server what device is requesting the site. Dynamically served websites use this user agent to send different HTML (sometimes totally different) to mobiles than to desktops. This is more complicated than responsive design, and creates some SEO issues, but it can work well for some types of sites.

Mobile Website:

You’ve all seen this in action. Mobile users are redirected to a different URL - Often “mob.example.com” or similar. Essentially, you have 2 entirely separate sites, and they can in theory be as similar or as different as you like.

Which Option To Choose

Options 2 and 3 have essentially the same result (although option 3 is probably the easier to implement), it’s just a question of whether you want your mobile site to be on a separate domain or not.

If your mobile site has all the same content and pages as your main site, dynamic serving may be an option. But if your mobile site has a different structure or any large differences in content, it might be best to go with option 3 over option 2.

The real question is whether to choose option 1 or option 2/3:

The biggest advantage of having a separate mobile site is that you don’t have to attempt to pack a desktop site into a mobile screen – which is of course a challenge. You can build your mobile site from the ground up.

Responsive sites rely on the user’s device to do the processing, they have to download the full site and then parse the CSS to show only the bits that the mobile device needs.

With a separate mobile site on the other hand, the server does the heavy lifting. You can send the mobile device only the CSS and HTML that it needs, and perhaps more importantly, you can send smaller images, optimized for mobile, rather than forcing the user to download the larger images from your desktop site*.

This is of course good for load speed. More on that later though.

*There is a workaround to achieve a similar result with a responsive site, but it requires some technical knowledge and has its own downsides.

Responsive design is undeniably a popular choice, but here’s why we think that a separate mobile site is often a better choice.

Site Structure

Once you have decided how you want to make your site mobile friendly you need to start thinking about the site design. But before we worry about how the site will actually look, let’s think about what it needs to do!

What Devices?

The first question that you need to ask yourself is what devices your users are using. This will depend a lot on your niche and who your customers are. For example, if your business caters to 20 somethings, you can bet that the majority of your user base will be using smart phones.

Rather than making assumptions though, go and check your Analytics stats for your current site. You can quickly see stats on what devices your users are using, what screen sizes they have and what software.

Having an idea of the capabilities of your users’ devices will impact what sorts of features you use on your site.

What Do Your Users Want?

This is an important question. Mobile users may want the same things as mobile users, but they may not. So it is important to think carefully about what they might be searching for. With a mobile site, you have little room on the screen, so it is vital that you show users the information they need.

For example, mobile devices don’t have space for a full menu, so make it easy for users to find the pages they are most likely to require.

You can’t fit long product descriptions on a mobile screen, so prioritise images and concise bullet points.

What Do You Want?

Your users should come first, but that doesn’t mean that your needs don’t matter? So ask yourself what you want your mobile users to do. Your goals may be the same as for your desktop users, but they also may be not.

For example, you might want desktop users to fill in an enquiry, but your goal for mobile users might be a phone call. You might want mobile users to share your content, while you focus on getting desktop users to sign up for your email newsletter.

You should choose goals for users based on your own needs and also theirs. Mobile users are more likely to be using social media for instance, so prioritising your social sharing buttons makes a lot of sense.

Navigation Structure

As I mentioned above - mobile screens are small. So if you have a huge menu with drop downs and fly outs, you are going to need to re-think things.

As a minimum, consider stripping out less important navigation items from your main menu in order to make the important items easier to find. You can then move those items into a footer menu if you like.

Don’t force mobile users to scroll endlessly just to find a menu link, because they may give up and leave!

What About An App?

A lot of businesses get a mobile app built because they think they should, and a lot more don’t even consider it as an option. I always recommend having a mobile website, but you may also want to consider an app.

Mobile apps make most sense when you are getting a lot of repeat users, rather than first time users.

Go into your Analytics account and have a look at where your users are coming from, and specifically whether they are direct visitors as opposed to search engine users, referees or social media users.

This guide is about mobile friendly websites, but creating a mobile app may be an option – if it’s a good fit for your audience.

Site Design

After the structure you will need to design how your site should actually look. This is an import part of mobile friendly website design because mobile screens are small, and making sure your site is both good looking and easy to use can be a challenge.

What Is Mobile First?

Mobile first is a growing trend which is based on the principal that it is better to design your site first for mobile before desktop; which of course is the reverse of the traditional model. The thinking is that it is easier to expand a mobile site to fit a desktop screen than it is to reduce a desktop site to a mobile screen (while still working well).

Even if you already have a regular website: Think about how you would design your mobile site if you didn’t have a desktop version – or if desktop wasn’t even a thing!

When you design your mobile site without the constraints of worrying about your desktop site, you can ensure that it is truly designed for your mobile audience. And then you can worry about the technical challenge of actually implementing it afterwards.

Consistent Branding

Don’t forget that many of your users will move between devices. They may find your site when doing a quick mobile search, but they may go back later on their tablet or laptop. Or they may find you via their desktop and later revisit an article on their mobile.

For this reason, while you should definitely design “mobile first”, you should ensure that your key branding elements are consistent between your mobile and desktop sites:

Make sure your logo is prominent

Set a deliberate colour scheme for your site(s)

Use design elements consistently*

*In other words, if you use drop shadows on desktop, use them on mobile. If you have rounded corners on one site, don’t make them square on the other... etc.

Tap Targets

When you are designing a site for a small screen you don’t have room for lots of links and navigation elements and it is important to make sure that the navigation that you do use is easy to use.

In other words, make sure that any links or buttons on your site are nice and big and are adequately spaced. There is nothing more annoying for a mobile user than hitting the wrong button or link and being taken to the wrong page!

Making your links (and your regular text) a little larger for mobile devices is easy and can have a big impact on usability.

Responsive Buttons

On some, older (slower) devices, it can take a little time between tapping a link and actually going anywhere. This is outside of your control, but it can be frustrating for users who don’t necessarily know whether their phone is being slow or whether it failed to register their action.

Using the active state in your CSS, you can make your links and buttons visibly change when tapped.

It only need be a small change, perhaps a slight change in colour, or border, just to let the user know that they pressed the right thing and that they need to wait patiently for a response.

Don’t Make Users Type

The final golden rule of mobile friendly design is this: Typing on a mobile device is fiddly and annoying, so don’t expect your users to do a lot of it. In fact, avoid it altogether if possible.

Using features such as “log in with Facebook” can help. But other than that, only ask for the critical information that you need, and nothing else.

Giving mobile users a typing-free experience will help to boost your conversions and user retention.

Load Speed

Load speed is an important factor for any website because no website users have the patience to wait for a slow website to load. But on mobile it is even more important, because mobile users will often be working on a 3G connection and their hardware may also be slower than on a desktop.

There are lots of ways to speed up your website for all users (use Google’s page speed tool to see how your site performs). But one of the best ways to optimize for mobile is to serve smaller images to mobile users.

How to do this depends on what method you are using for your mobile site (responsive site or separate mobile site).

This is how it might work if you have a separate mobile site:

On your main (desktop) website, use larger images

On your mobile website, use small versions of those images

It’s that simple!

This is how it might work if you have a responsive site:

On your website, use small images, optimized for mobile screens.

These will load for all users, but they’re small, so they load fast.

Use a media query to detect larger screen sizes.

For larger screens, hide the small image and use background-image to show a bigger version.

This way you can show nice, big images for desktop users, without forcing mobile users to download huge files that they don’t need.

Final Thoughts

Mobile site design – as with pretty much anything related to the web is not a onetime deal. The web is constantly evolving and what your users are doing now may not be what they are doing in 5 years’ time.

So once you have designed your perfect, mobile friendly website, remember to continually re-visit your assumptions, look at how your demographics are changing and regularly ask yourself whether your site needs to change accordingly.

mob.is.it

mobile websites, native apps and mobile marketing - for resellers

Use mob.is.it to easily build awesome mobile sites, native apps and mobile marketing campaigns that you can sell to restaurants, local businesses and much more. And you do it all yourself, without the need to hire anybody else!

Try it for free!

 Silvio Porcellana

About Silvio Porcellana — I am the CEO and founder of mob.is.it. I usually write about the mobile web, online marketing and growth hacking while I enjoy helping fellow entrepreneurs and small businesses across the globe understand and profit with mobile marketing. You can reach me at silvio@mob.is.it or follow me on Twitter at @silvioporcellan

July 7, 2016