How to Prepare Your Website For Mobile

People use their smartphones to browse the web more often than laptops and computers.

This has been the case for about five years or so now. 

But what makes it crucial right now is the fact that not only has Google created a separate index for mobile, it will also be the primary.

This means Google will primarily use mobile as a gauge when evaluating your site for indexing and ranking.

Design your site with mobile in mind.

Designers used to think of desktops when they conceptualise designs for websites. But this poses several problems.

Since you have more space on a desktop, putting all the elements together to fit a small screen later on would be a huge challenge.

If you just convert from the desktop version, the text becomes too small to read, navigation becomes confusing and everything looks...squished together.

You won’t have this problem if your site is responsive. Responsive sites use optimised images and CSS styling that seamlessly changes the site according to the width of the screen.

If you are yet to build a site, look at the mobile version first before considering and assessing the desktop layout of your website.

For the best user experience across all devices and platforms, consider the most basic functions and features for a lower browser like mobile phones before slowly advancing to tablets and computers.

Don’t sweat the small stuff: the simpler the site, the better!

Don’t worry about not carrying over all the jazz of your site’s desktop version to mobile. You don’t need it! 

People who are on their phones are in a different head space. 

They are usually on the go and don’t have time to wait for slow sites to load. Nor do they have the patience to figure out how to navigate a complicated website.

Everything needs to be simple and easy and quick.

We broke down what it takes to have a good mobile experience into these easy, actionable tips:  

• When you design, always identify the primary goal of the whole website and have one clear Call-To-Action (CTA) for the whole site.

• Put your CTA in a button and let it sit at the top of the page. Have that follow you as you scroll down the page.

• Use a hamburger menu. Keep all your secondary nagivation buttons (buttons that don’t directly service your CTA) in one place while still keeping the page neat and tidy.

• Make the subpages accessible by just scrolling down.

• Rely on internal linking instead of a mega menu.

• If you have a pop-up, be conscious of the timing of when it should appear. Make it easy to close. It should also take only a small part of the top of the screen.

• Get rid of the sidebar.

• Avoid Big Hero images on mobile (image behind the text) because this will slow down your load speed.

• If you have a lot of content, adding a Search Bar is a good idea. It will make the user find what they are looking for easily. However, make sure not to put it on the header as it will interfere with your CTA.

• If you really need to have social media icons, put them at the footer and make them small. What you really need is for users to go to your website from social media, not the other way around.

Keep it mind: 

if it doesn’t help the user get what they need quickly or if it doesn’t push them to decide to buy from you, then don’t put it there.

You can find more tips on how to prepare your site for mobile in this podcast episode.

Or you can let WordPress experts review your site and give customised recommendations for a better mobile-ready website. You can also shoot us an email at [email protected].