Small Screens Rule Now
Greetings folks! Today’s a good day to tune in, ’cause I’m about to give you the skinny on not just mobile website design, but also making your joint easy for people to use and navigate.
I’ll lay you odds you’re eyeballin’ this on your mobile phone.
In ’24, half the cats are using their pocket telegraphs to surf the web, so you better believe your site needs to be ready for those gadgets. But that’s not all. You need to dolly up your pages so they’re a breeze for any Joe or Jane to navigate.
Let me be blunt.
If you do not make your website easy to use for mobile devices like phones and tablets –
It will be impossible for you to rank in search engines like Google. Costing you visitors and sales.
Here's the Good News
Fortunately, with modern website management software like WordPress, Shopify, and others, it is much easier than ever to be able to make your website mobile friendly.
If you are using a customized design template, ensure that it can respond properly to smaller sized screens that are found on phones and tablets.
I’ve already discussed broken features or parts of your website, but you should also ensure that you don’t have the same problems when you view your website on a phone. It is easy for something to look and work just fine on a desktop, only to have it utterly break on a phone.
Mobile Friendly is Just the Start
Making sure that nothing breaks on a phone or tablet is just the start to making your website more user friendly.
There are some basic website design fundamentals that you should be using.
First, avoid low contrast colors that blend together, if the website is difficult to read users are going to be turned off. Light blue text on a dark blue background might be a nifty idea, but it will be hard to read for an extended length of time.
Beyond this there are additional considerations for accessibility, such as color-blind friendly color schemes, ensuring text is at least 16px large, descriptive alt text for images, and more.
If you want to ensure that you don’t have these kinds of issues, you can take a look at tools such as Page Speed Insights and Accessibility Checker.org that can quickly identify these kinds of issues.
Avoid overly cluttered menus, bombarding your visitors with too many options when they are trying to navigate your website can turn many visitors off. This also ties into structuring your website, something I’ve covered previously.
Another thing that you should be doing is use breadcrumbs to help people know where they are on your website. Below you can see an example of breadcrumbs from the Heartless website.
This lets a visitor know that they are on a specific article page and in a sub-category of the Heartless Journal immediately.
This is also another way to create links around your website that search engines can follow and use to understand your website. More so if you have the proper Schema mark up for the breadcrumbs implemented on your website.
The last part that I’ll cover in this section is alt tags for images.
This serves a dual purpose, one it directly describes the content of an image to search engines and aids in accessibility, as many screen readers will pull from the alt-image tags to describe images to visually impaired visitors. Ideally, you’ll also have an opportunity to use your targeted keyword in your image alt-tags, however, you should focus on accurately describing the image, over one extra chance to use a keyword.
Implementing Mobile Friendly Website Design
Verifying that everything is working on mobile phones and tablet’s is much easier than it used to be.
If you are using WordPress a design tool like Elementor have built in tools that will let you preview your design in a mobile layout. However, you can easily do cross browser testing with a platform like Test Grid to ensure that your design and website loads correctly on multiple mobile devices and web browsers.
Below, we’ll go through the step-by-step process for polishing up your website’s mobile experience.
- Make sure that your website is ready for visits from phones and tablets.
- If you can’t use tools inside of your website’s management software to do this you can just visit your own website on a phone or tablet and see how it reacts. Or use a tool like Test Grid.
- Does it still look good?
- Does anything break or overlap?
- You can use tools like PageSpeed to see if there are any issues with your website in terms of speed and loading times. It will also give you suggestions for things to improve around accessibility and SEO.
- Address any issues that you find, adjusting layout as needed so it loads properly on smaller screens.
- Avoid clutter or distractions.
- No cluttered menus.
- Distracting colors or unnecessary popups, animations, or low contrast elements.
- Make sure that you are using breadcrumbs to help users navigate things like product and post categories.
- Add alt-text to images Most modern website management software will let you do this when you are adding an image to a page or while you are uploading it to your website for use.
- Alternatively, you can manually add it to the HTML code by adding it to the image directly.
- <img src=”yourimage.jpg” alt=”a description of your image”>
- The “mom test”
- If ever in doubt, let your mom use your website on both a desktop and a phone.
- If she has any questions or issues using your website or finding her way around, you might want to consider changing the design.
Wrapping Up
Mobile website design has never been more important, but it’s never been easier to implement properly. Hopefully this guide has gotten you started with designing and laying out your website so it’s ready for prime time.
If there’s one big thing I want you to take away from this, its the “Mom Test” that I talked about above. Ideally you should be able to give your mother a phone or tablet with the website loaded up and she’ll be able to accomplish things on her own. If not, think about how you can make your website more readable and user friendly.
There are a wealth of guides and more specific instructions for your unique situation, but if you follow what I have outline above, you’ll be on your way to having a mobile friendly website that will attract visitors and boost your conversions.
Did This Guide Help You? Want More Local SEO Tips?
Get our complete guide emailed to you for free
SEO Sins: Guide to Local SEO
Learn how to avoid the most common SEO mistakes that will cost your business big money. This comprehensive guide shows you everything you need to know to get started with the basics of local SEO.
