Implementing mobile web design best practices is essential for building a website today. Over 50% of online browsing is done with mobile devices, and Google is now indexing websites on a mobile-first basis.
Mobile web design requires you to think a bit differently about your company’s website. When someone visits your website with their phone on the go, they likely have different priorities than someone visiting with their laptop at home. Recognizing this reality is key to providing a terrific user experience.
Implementing the mobile web design best practices described in this post will increase your website’s SEO authority and encourage more conversions.
Implement Responsive Design
In the context of mobile web design, responsive design means that all of the elements on a web page “respond” to the size of the screen they are viewed on. Meaning, as the size of the browser shrinks, so does the elements on the page such as text, images, buttons, etc..
If you're viewing this article on desktop right now, you can see this in action. Simply reduce the width of the browser window and you will see the elements on the page start to shrink in proportion to the reduction in screen size.
Implementing responsive design is the first thing we do when developing a website. It allows all of the elements on your website to respond automatically –no extra coding required. This can easily be done by purchasing a responsive WordPress theme.
While not a perfect solution right off the bat (we’ll get to media queries in a bit), making all elements responsive on your site will reduce 90% of the challenge in getting mobile web design right.
Create a Mobile Menu
Sorry to break it to you, but the navigation bar on your desktop website is not going to cut it for mobile. That navigation bar is not designed for thumbs and it leaves too much room for clunky or crowded design and user error.
Instead, what is needed is a different menu that appears when your website is loaded on a mobile device. The best example of this is the classic hamburger menu –which we actually use on our mobile website. It’s three simple lines on the corner of your mobile navigation bar, and when clicked offers a drop down or full-screen cover of all your mobile menu options. Don’t worry about this being confusing for people.
Your website visitors will intuitively understand the hamburger menu, as it is common in mobile web design and is seen in many smartphone apps. Creating a separate mobile menu for your website is not difficult as it may sound. Modern WordPress themes today allow you to easily customize a menu for mobile and have it automatically appear when it’s needed.
Optimize Forms for the Mobile Web
Taking into account web design for forms is critical. It’s likely that at least 50% of your website traffic is from mobile devices. If your forms aren’t optimized for mobile, you’re not going to be able to bring in as many leads.
Optimizing your forms for mobile means having minimal form fields that are large enough for a user to fill out easily. We recommend having one form field per line and making them nearly full width and responsive. Also, make sure they can see what they typed in once they have exited their keyboard.
Set Up AMP on Your Website
Accelerated Mobile Pages (AMP) allows your website to load extremely fast on mobile devices by stripping away all unnecessary code. All AMP pages are differentiated by the small lightning bolt icon and have become very popular on Facebook and Google’s search results.
AMP is almost exclusively used for written website content such as blog posts. It will significantly speed up the time it takes your website to load on mobile, reducing bounce rate and making your content more effective.
For WordPress users, installing AMP is pretty simple with the WP AMP plug-in. Just follow the setup instructions and you should be good to go.
Install Plug-ins To Optimize Mobile Site Speed
Having a website that loads fast is critical for providing a great user experience. But did you know that your website’s loading speed is one of the top SEO factors Google uses to rank your site? They also factor in user behavior such as how long people stay on your website. This means that if your website doesn’t load fast, you will incur a high bounce rate that will hurt your SEO rankings.
This is especially true on mobile devices, where internet connections might not be as strong. That’s why getting mobile site speed right is so important. Fortunately, this doesn’t need to be extremely complicated.
First, we would recommend using a tool like GTXMetrix to get a read on your site’s current speed and optimizations you can make. Next, install a plugin such as Pagespeed Ninja can significantly help make your website faster.
Compress Images
Like we just saw, mobile site speed is a big ranking factor for Google. One of the best ways to improve your website’s loading speed is to compress all of the images on it. What does compressing images mean? Basically, it allows you to reduce the file size of an image with a minor loss of fidelity.
We use a tool called TinyPing that sometimes reduces file sizes by 80%. This has a big impact on your page loading speed. Since images are often some of the largest files on a webpage. This is key for mobile, as there is no reason an image needs to be 7.5MB to be viewed on a 5-inch screen. It can also drain your hosting bandwidth –reducing the speed of your entire website.
Reduce Pop-Ups
Pop-Ups are all over the internet today. It’s become a running joke in the web design community that basically every page that loads on the internet today essentially spams you with pop-ups. This is especially true for business websites.
They might have a cookie notice, chat widget, newsletter signup or drop down pop-up. All loading within the first 3 seconds of a user visiting your website. While annoying and questionable on desktop, it is an especially bad mobile web design practice. On a small screen, these annoyances are extremely distracting and will only slow down your website. It forces the user to wait longer and then tap multiple times on the screen to exit out of those pop-ups before they can even view your website.
Needless to say, this does not make for a stellar user experience. We recommend disabling these pop-ups on your mobile website besides the cookie notice, which you likely need due to GDPR. Trust us, your audience will thank you.
Use Media Queries
When responsive design fails, turn to media queries. Media queries allow you to specify how elements behave and position themselves under certain screen sizes using CSS. This is extremely helpful, as it allows you to develop for based on the width of the screen, not a standard device type like “mobile” or “tablet”.
The result is a much more responsive website that looks great no matter the device it is viewed on and since it applies universally to screen size, there is no need to code a specific version of your mobile website for specific devices that are updated yearly anyway.
Like we touched on earlier in this post, sometimes responsive design does not automatically make your website look pixel perfect on every device. Rather, what is needed are media queries that adjust the layout of the website so it is fluid and adjusts perfectly to whatever screen size it’s loaded on.
Media queries require advanced knowledge of CSS to implement, so we would recommend hiring a freelance web designer to implement this on your website.
Conclusion
With a majority of web browsing already done on phones and tablets, it’s clear that mobile web design is here to stay. The sooner you implement the optimizations recommended in this post, the better off your website will be.
