Use a task-based design
Design your mobile blog and its structure with the mobile user in mind. Think about the reasons visitors use their mobile phones to check your blog. Perhaps they want to read one of your blogs and easily find related articles. Make sure your mobile visitor can easily do that. Check your Google Analytics in order to know which pages are most visited amongst your mobile audience. You can easily check this in Google Analytics, for instance at Audience » Mobile » Devices by adding a secondary dimension for Destination Page.
If someone finds your website and starts browsing it, make sure they can easily find and complete what they wanted to do. The use of a mobile phone most of the times implicates being on the go and a lesser attention span. Distractions are everywhere. Design your mobile UX to make sure they get things done.
Hamburger menu & sticky menu
Add a sticky menu with a search option and a hamburger icon. We all know the hamburger icon, and adding that as a substitute for your menu seems logical: it’s a space saver. Most menus fold out vertically, but some fold out to the left or right. Sometimes the word ‘menu’ is shown instead of the hamburger icon.
Your mobile menu should stay focused, especially when your website also has a drop-down menu. Consider creating great landing pages for your main menu items and just forget about the submenu for your mobile website. It will be more convenient to focus on mobile search instead. As the small mobile device does not allow you to put everything in your mobile menu, you want the search option to always be available.
Large touch surfaces
Our SEO Boston services already mentioned this before, and it’s so obvious, yet still not common. Mobile websites are usually browsed with a thumb. And we need to be able to click elements with that thumb as well.
“Ideally, buttons should be between 44px and 57px on a standard screen and 88px to 114px on a high-density (retina) screen. This allows enough area for the average fingertip to easily activate a button.”
And not just buttons, but other elements can be too small or too close for a finger. It’s really annoying to click a link and end up somewhere else, just because the link next to it is too close to the link you wanted. It’s in Google PageSpeed Insights as well, like the button hit areas. That tool is not the holy grail of mobile UX, but if Google can test it that easily, why not keep it in mind when designing your mobile website, especially when designing elements like a mobile menu or footer links.
Make your fonts large enough
Font size is really important for mobile blog. You can’t just use all the desktop font sizes on your mobile website as well. There are two reasons for that:
1 The mobile screen size. You don’t want the title to fill the screen, you want to make sure the article starts within the first view of the page. Nor do you want the base font (like your paragraph font) to be too small to read without having to pinch and zoom.
2 You’ll create a mess when using more than three font sizes. The size differences will be much more visible. That’s why we advise limiting the number of font sizes to two, maybe three.
Test your mobile blog again. And again.
When serving a responsive website to your visitors, you need to make sure that every change on your desktop site is also tested on the mobile version of your site. That is the only way you can make sure your mobile blog is always up to date.
