10 Tips To Design A Mobile Friendly Website


It’s 2015 and the world is going mobile - even more so than it already has. So there’s no time like the present to make sure you have the best mobile friendly website possible. Ideally, actually, there’s no time like yesterday. If you already have a mobile friendly website, these tips will help you make sure it’s the best possible. If you don’t, these tips will help you create one and get up to speed.


1. Understand the importance of your mobile site.

According to a report by inbound marketing company, HubSpot, 73 percent of smartphone users shop over the mobile web instead of through an app. Additionally, out of the 6.8 billion people in the world, 4 billion of them use a mobile phone. Only 3.5 billion use a toothbrush.

Let’s say that half of these mobile phones are smartphones. That’s 2 billion smartphone users in the world. And 73 percent of those users - almost 1.5 billion people - are not just interacting with the mobile web, they’re buying things on it. With so many users researching, browsing, and purchasing on the mobile web, you better make sure you have a user-friendly site that will appeal to them.

2. Only hire the best.

If you read and understood my first point, there’s no need to argue how important it is to have the best mobile app designers working on your project. If you can afford an in-house designer, you better make sure your hiring process is up to par.

If you can’t keep a team in house, there are plenty of other options for finding quality designers. If you decide to go with a freelance worker, sites like Toptal will screen every applicant for you and match you with the best person for your specific projects. You can also outsource to a design firm or try to find local talent on a freelance basis.

3. Simplify the navigation.

Your users aren’t navigating your mobile site from a giant screen. That’s the whole point. Therefore, you will have to approach your mobile site a little differently than the website your users would access from their computers.

You should always provide your users with the option to go to your main site, in case there is a specific section they are trying to reach, but you don’t need to include every aspect of your main site on your mobile site. Pick a couple of the most important features, and focus on optimizing those for mobile users.

4. Use a single-column layout.

This goes hand-in-hand with the last point, but mobile sites don’t have the room for multiple columns. Smartphone screens may be getting larger, but they’re not that large. The great thing about a single-column layout is that it uses the entire width of the screen, so users don’t have to scroll from side to side or zoom in and out.

Instead of expanding in width, content should expand down the page. Users are much more apt to stay on a page that scrolls up and down versus one that scrolls side to side.

5. Don’t underestimate font and button sizes.

Users will be accessing your mobile site through smaller screens, but that is not an excuse for small fonts and small buttons. In fact, the opposite is true. Any type on your mobile website should be at least 14px. Although this seems large, it keeps your users from needing to zoom in if they want to read your content.

According to Apple’s design guidelines, the recommended button size is at least 44 px by 44px. In reality, a good rule of thumb for buttons is the bigger, the better. Bigger buttons make it harder for users to hit the wrong one by mistake or miss the necessary button altogether. Not only will this strategy make your mobile site more user-friendly, but it will also increase conversions for e-commerce sites.


6. Adopt a mobile first mindset.

Mobile first is a growing movement in the designer world. Advocates of this mindset push designing your mobile site first, then expanding to tablet and desktop versions from there. This might not be possible if you already have a desktop site in place, but it is a good strategy if you are starting from scratch.

Beginning with your mobile site forces you to consider the most important aspects of your site that users can’t live without, no matter what the site of their screen is.

7. Reduce file sizes.

It’s said that 40 percent of users will abandon your site if it takes longer than three seconds to load. Therefore, you want to do everything in your power to design a site that loads as quickly as possible. One way to optimize loading speed is by reducing the size of the files on your site.

By running your images through a tool like compressor.io you can cut down on file size and, in return, load time for users of your mobile website.

8. Avoid fixed width.

This one is obvious, but it somehow still needs repeating. Use responsive design. Responsive design uses CSS technology to make one version of a website that adjusts itself to display properly on all devices, regardless of size. Using responsive design also reduces the amount of work website developers will need to perform when creating your website.

Sites using responsive design can detect the size of a visitor’s screen and the orientation of that screen. Using flexible layouts, flexible images, and cascading stylesheet media queries, the design layout changes accordingly. This is the best way to ensure a great user experience across all devices.

9. Test, test, and test again.

When I say test, test, and test again, I don’t mean to test your site over and over again on one device. Instead, try your device out on the different devices your users will access it from. Test the entire site from an iPhone, iPhone plus, Android, Windows phone, tablet, and any other device you can get your hands on.

You can test your website by putting yourself in the shoes of your users, or even better, you can get people who are unfamiliar with your site to test it for you.

10. Never stop improving.

Once you get your mobile website set up, don’t think that you are done. Make sure you are maintaining your site to keep it up to date. Also turn your attention to creating great content for your site. You’ve worked hard to create your site, and now you want users to visit and stay on the site. Make sure you give them good reason to stay once they’re there.

Edited by Stefania Viscusi
Get stories like this delivered straight to your inbox. [Free eNews Subscription]
Related Articles

ChatGPT Isn't Really AI: Here's Why

By: Contributing Writer    4/17/2024

ChatGPT is the biggest talking point in the world of AI, but is it actually artificial intelligence? Click here to find out the truth behind ChatGPT.

Read More

Revolutionizing Home Energy Management: The Partnership of Hub Controls and Four Square/TRE

By: Reece Loftus    4/16/2024

Through a recently announced partnership with manufacturer Four Square/TRE, Hub Controls is set to redefine the landscape of home energy management in…

Read More

4 Benefits of Time Tracking Software for Small Businesses

By: Contributing Writer    4/16/2024

Time tracking is invaluable for every business's success. It ensures teams and time are well managed. While you can do manual time tracking, it's time…

Read More

How the Terraform Registry Helps DevOps Teams Increase Efficiency

By: Contributing Writer    4/16/2024

A key component to HashiCorp's Terraform infrastructure-as-code (IaC) ecosystem, the Terraform Registry made it to the news in late 2023 when changes …

Read More

Nightmares, No More: New CanineAlert Device for Service Dogs Helps Reduce PTSD for Owners, Particularly Veterans

By: Alex Passett    4/11/2024

Canine Companions, a nonprofit organization that transforms the lives of veterans (and others) suffering PTSD with vigilant service dogs, has debuted …

Read More