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
Related Articles

Coding and Invention Made Fun

By: Special Guest    10/12/2018

SAM is a series of kits that integrates hardware and software with the Internet. Combining wireless building blocks composed of sensors and actors con…

Read More

Facebook Marketplace Now Leverages AI

By: Paula Bernier    10/3/2018

Artificial intelligence is changing the way businesses interact with customers. Facebook's announcement this week is just another example of how this …

Read More

Oct. 17 Webinar to Address Apache Spark Benefits, Tools

By: Paula Bernier    10/2/2018

In the upcoming webinar "Apache Spark: The New Enterprise Backbone for ETL, Batch and Real-time Streaming," industry experts will offer details on clo…

Read More

It's Black and White: Cybercriminals Are Spending 10x More Than Enterprises to Control, Disrupt and Steal

By: Cynthia S. Artin    9/26/2018

In a stunning new report by Carbon Black, "Hacking, Escalating Attacks and The Role of Threat Hunting" the company revealed that 92% of UK companies s…

Read More

6 Challenges of 5G, and the 9 Pillars of Assurance Strategy

By: Special Guest    9/17/2018

To make 5G possible, everything will change. The 5G network will involve new antennas and chipsets, new architectures, new KPIs, new vendors, cloud di…

Read More