Did you know that more than 75% of internet surfing these days is done on a mobile device – a phone or a tablet?
It’s so common now that Google actually gives search result priority to sites that are fully mobile-friendly.
“Mobile-friendly” means that your site has code in it that shifts items around on the page to make it readable and accessible even when viewed on a small screen.
So that means that if your blog page typically has a sidebar, the sidebar might magically shift below the main content on a phone screen. Otherwise, we’d be squishing in way too much for such a narrow screen and everything would become an unreadable jumble.
Other things will move, too. If you have a shop and you show your items in rows of four items each, narrowing the screen to phone-size should shift the items so each is now on its own row. Otherwise, your shoppers will be squinting at four tiny pictures with miniature titles, trying to find what they want.
No More “Above the Fold”
Remember: a good website is adaptable to ANY screen or window size.
This means that how the site actually looks might be quite different if you’re viewing it on a phone or tablet or desktop. But the important thing is: is the information readable and accessible in all formats?
I get a lot of clients who remember the old days – of perhaps five years ago – when “above the fold” was a big term in web design. They want to make sure all the important stuff is “above the fold” – meaning visible when the page is first loaded.
But that term has no meaning anymore, now that people could be looking at the site on any number of screen or window shapes and sizes. We can’t know everyone’s window size, and we don’t want to force too much information in too small a space.
We need to adapt.
So while we can spend a lot of time making XYZ section appear “above the fold” on a full-sized window on one specific desktop, know that that won’t be relevant to 95% of the rest of the visitors to your site. Even if they are viewing on a desktop, they may have resized their window, or increased their font size, or have different screen settings than you.
Mobile Menus are Hamburger Menus
When a user is viewing the site on a mobile device – especially a cell phone – the menu at the top can take up a LOT of real estate. Basically, when they load your site they will see nothing but the logo and the menu.
Your menu should switch to a “hamburger menu” on mobile to take up less space and allow for better content viewing on small screens.
Converting the menu to a “hamburger menu” – those distinctive three bars in the top right corner, which pops-out the menu when clicked – is typical for smaller screens, and those who surf on a phone or tablet should be well used to that. They’ll recognize the symbol and know just what to do to get access to the other areas of the site.
I sometimes get clients who worry about their shrunken menu and want to force it to appear full-sized on all screens, even mobile screens. But this is a bad idea because:
- Your home page content – likely the first thing visitors see – will just be a logo and a menu, implying that they should immediately leave this page – and miss out on your most powerful welcome and branding messaging.
- It will push down your content on every page, making every page look the same – so when they click on the “about” page, for example, they will just see the logo and menu areas again, and it might seem like they didn’t even load the new page, causing confusion.
- Google loves sites that adapt for mobile screens and having adaptable menus is part of that, and will boost your SEO with them.
Check for Usability, not Static Design
You can make sure your site is at its best by:
- loading it on a variety of devices – phones, tablets, and desktops
- loading it in a variety of browsers – Chrome, Firefox, Edge, Safari
- resizing your window on your desktop in lots of fun ways to see how the site reacts
- running a mobile test via the Google test site
In all cases, what we’re looking for is usability.
Is all the information still there? Is it large enough to be read and accessed? Does the flow still make sense? Does the menu collapse and expand appropriately, so as to not take up too much space on mobile, but still allow for all options to be selected?
Then it’s mobile-friendly, and that’s a huge win for your site – both for your visitors and your SEO rankings.
If you have a site designed by me – don’t worry! Mobile-friendly design is in all my packages and well tested on all my websites. But if you’re worried and would like me to take a look, I’d be happy to! Just contact me and we’ll chat.