10 ridiculously easy rules to optimize your website design for mobile devices

Lisa Morgan
UXReality Blog

--

This article will let you put yourself in your user’s shoes. When it comes to mobile UX the best strategy is “optimize and minimize”. Read about responsive forms, navigation bar, what influences search engine ranking, and much more.

64% of site traffic to e-commerce stores comes from smartphones in the first quarter of 2019. By 2025, nearly three quarter or 72.6 percent of internet users or an equivalent of 3.7 billion people will log in on the web from their mobile devices.

And presently, around 2 billion people out of a total of 3.7 billion active internet users, that’s 51 percent of the global internet base, are currently accessing the net from their smartphones.

And if you’re still wondering why you should care: just last year, 2018 over $101 billion was spent on mobile apps alone. According to an Upwork report, online consumer spending has hit the 930 billion US dollars mark, and the trend still seems to not slowing down anytime soon.

How does poorly mobile-optimized website affect users?

Source: by Allen Zhang for Alpha Team

According to this post, 57 percent of website users say they won’t recommend a business with a poorly designed mobile site. Which implies mobile UX is essential if you’re out to get those valuable referral businesses.

Tip:

Improve your site load speed by five seconds or less, your page viewing sessions jump to 70 percent.

Does optimizing your website for mobile have any impact on search engine ranking?

Yes, optimizing for mobile does, in fact, affect your ranking on search engines. Google, the giant search engine that controls about 94 percent of all organic traffic; plus, 96 percent of total smartphone search traffic, have recently moved all indexing to mobile-first. If your long-term growth strategy is to leverage organic traffic, you may want to look into optimizing your business website.

However, as you know already, it can get quite wieldy trying to navigate through every task, rules, and best practice when optimizing your website for mobile.

So, we have organized these tasks into simple, easily digestible, rules to guide you as you optimize your business website for mobile.

If you are ready, let’s dive in.

Keep things simple

Sure, not a hardcore tip; however, this one advice underlies everything else you will do to optimize your website for mobile.

Also, considering that it’s quite easy to want to overdo things. Simplicity is at the core of optimizing your business website for mobile devices.

Drop the navigation bar

In line with keeping things simple, start by getting rid of your navigation bar. Sure, navbars are incredibly helpful for site users to navigate and find whatever information and resources they are looking for easily.

However, since most mobile devices have smaller screens, navigation bar often takes up spaces that could have been used for other content.

Source: by Aurélien Salomon

Tip:

One design tweak you can do is to implement a hamburger menu, where all the menu items are hidden; but are displayed when a user clicks on it.

Make it incredibly easy to reach essential elements

Remember, your goal as a designer is to make your mobile UX experience as seamless as possible.

What better way than to display critical elements prominent on the screen? Ensure that primary interactions happen at the front and center of the screen.

Optimize and minimize file sizes

Large files like images tend to slow than website load time; and that in turn, disrupts customer experience, plus it can impact your search engine ranking.

What do you do?

Minimize and optimize all the images on your site. Thankfully, there are free online image optimizers you can use to do this within minutes.

Ensure your design is responsive

It used to be in the past that any business that wants to improve the mobile user experience will have to develop a separate mobile website for their business — those days are long gone and forgotten.

These days, all you have to do is to create one website that is responsive. A responsive website adjusts and displays your site content depending on the screen size of the user.

Disable annoying popups

Popups are annoying. They are disruptive. Users don’t want to be distracted from what they are currently doing — reading. Google hates popups and has even gone as far as to roll out a penalty for what it calls “intrusive interstitials.”

Put yourself in your user’s shoes, would you like to be distracted while scrolling through a website?

Implement collapsible sections

You know once your website is optimized for mobile, the content on the site often collapses into one column.

The downside to this is that the content seems a bit longer. And users would have to scroll and scroll to consume your content.

What do you do?

Source: by Romain Sourdiaux for MoneySuperMarket

Use collapsible sections to shorten the content. This collapsible section or accordion displays only the headings and makes it incredibly easy for users to skim your page.

Optimize form for mobile

You may also want to make sure all the forms on your website are responsive and optimized for mobile devices.

Source: by Kallol Tushar

Test to see that all form field display correctly on your mobile device. Another tweak you can implement is to make your form short. Remove all unnecessary fields from the form.

Make your text visible without zooming or scrolling

That’s mobile UX 101. You don’t want your users to squint their eyes, zoom in on texts, and side scroll before they can read your content.

To improve user experience on your website, make your texts eligible. Use the right amount of white spaces, and avoid the use of font colors that would make reading difficult.

Make buttons large enough for finger clicks

Finally, ensure your call-to-action buttons are easily clicked with the fingers. Keep in mind, though, for this tip; there are no fast and hard rules. You’ll have to test each element until you find one that works perfectly for your audience.

Source: by Yaro Zubko

Don’t forget to clap for it

If you enjoyed this article, feel free to clap 👏 to help others find it.

Originally published at uxreality.com

Heeey… Step right up, folks :)

Hi, people of Medium! We have some news you’ll enjoy.

Facts say that 57% of users say they won’t recommend a business with a poorly designed mobile site. Poor customer experience just destroys conversions. What to do with this when even good website analytics is not enough to get understanding WHY’s of users behavior? We’ve thought it over and… made UXReality app!

UXReality is a smart tool to get a mobile user’s behavior as close to reality as possible with Eye Tracking and Facial Coding. It’s almost ready to be launched officially.

Just one important thing has left.

Guys, we need your opinion. We actively looking for UX professionals to get fair feedback about our tool. Will you become our exclusive user? :)

--

--

UXReality Blog
UXReality Blog

Published in UXReality Blog

Dig deeper into the universe of UX insights to create an awesome digital experience on mobile. Join the community of UX experts, marketers and product owners who are curious about mobile UX findings, tips, best practices, tools, and tutorials.