The answer is yes. When designing a mobile-friendly website for today’s abundance of mobile users it’s critical that you meet their accessibility needs. Here are important elements to consider.
The Mobile Header
When browsing a website on your phone can you always see the logo and navigation link on your screen when you scroll up and down? If yes, it’s nice, isn’t it? That’s an example of a fixed header. It always shows on the top of the screen no matter how far down the page you’ve scrolled. With having a fixed header, it’s key to make it slim so that it doesn’t take up too much of the screen’s real estate.
A non-fixed mobile header appears on the top of the screen when the user is scrolled all the way to the top of the page. When the page is scrolled, the header scrolls along with it making you have to scroll back to the top to access it again. This works, but it’s not ideal because it creates more work for your user.
Types of Navigation Menus
I’ve seen a handful of different mobile menu navigation solutions… some more effective than others. My favorite has got to be the off-canvas menu because it’s stylish and unobtrusive to the user. Below are some of the navigation menus you are likely to see on your phone.
Ah, yes… the notorious pulldown menu. This menu style comes across as being a very dated method and visually it’s not the prettiest of them all. Functional? Yes. SEO friendly? Definitely not. To change pages it relies on Javascript so the links within it aren’t seen by the search engines. My recommendation is that this mobile navigation solution be avoided. Look to the other examples below for a better choice.
This menu is tucked under the mobile header. When activated, it drops down and pushes the page content down. This menu style is functional and can by styled quite nicely. What I’m not keen on is that the page content goes up and down when the menu is opened and closed. Avoid using this type of menu with a fixed header because it may make the navigation items impossible to reach on smaller devices.
Widely used, the off-canvas mobile menu looks great and should make your users comfortable because they’ve seen it in other places… like the popular Facebook App on IOS and Android smart phones. Clicking on the menu icon will make the menu slide from the side of the screen either pushing the page right or just floating on top of it. Either way works great. The best part about this menu is that when it is open and the user is scrolling up or down the page in the background remains where it’s at.
Fonts & Colors
Some of us have vision that’s not as good as it used to be and unfortunately tends to get worse with age. For that reason, let’s accommodate those users by giving their eyes a rest by pumping up the size of fonts on mobile devices.
Now, how about the issue of contrast? If there isn’t enough contrast between your website’s background and the text that’s on it then your users will have a hard time reading what’s on it. And by “what’s on it” I could mean your products, services or message you’re trying to get across to the viewer. A simple solution would be to change the background color to something light and make the text dark for mobile users.
Alternate Text for Images and Links
For the visually impaired this is important. If you have ALT tags on your images and TITLE tags on your links then the user’s screen reader application can help them easily navigate your website.
Mobile Website Necessities
Besides the logo and navigation, there are some things that I’ve come to expect on a mobile website… a simple way to contact the website owner and the ability to quickly find what I need. Adding a search box gives the user a fast way to find what they’re looking for by using keywords. Adding an email link or a “Click to Call” button makes it easy for the viewer to contact you.
Some Other Handy Features to Keep in Mind
Social media, two words that you probably hear several times a day. It’s a good idea to offer both social media icons linking to your social profiles and also social media icons to share your website with others. The easiest way to add sharing to your website is to use the third-party web app ShareThis.
“Go Back a Page” and “Back to Top” links are always a nice finishing touch. This takes away from the user having to scroll as much when going through your website.
So, next time you’re browsing a website or reading a blog post on your phone take notice of what the mobile web developers have done to make things easier for you to get around. Think about things that could make it easier for you and shoot the webmaster a message with your suggestion.
Cheers to building a better mobile website browsing experience!