With more than half of the world’s internet traffic generated on smartphones, there’s no doubt about it. We live in a mobile-first society.
Gone are the days when designers could create a functional website, then simply scale it down for mobile. Treating mobile as an afterthought is simply no longer an option for brands that want to be taken seriously. In order to create an engaging user experience, we must look at the mobile version of a website as its own separate entity, which should be optimized in accordance with small screen best practices.
Cover photo by Jorge Rosal on Unsplash
Blog websites are no exception, with many people accessing informative or entertaining content on the go. Research from Hitwise shows that the average device split for searches was 72% for mobile compared to 28% for desktop in 2017, and this is only going up.
Read on to learn about five essential mobile-first design elements you can use to create expressive and user-friendly pages and blog posts.
Most website themes resize headers based on screen-width, but tools like Setka Editor go so far as to create a mobile-primed automated layout – while still allowing for manual adjustments as a designer or developer may see fit.
As mobile users will be accessing your content on a far smaller screen, it may seem logical to reduce your font size. However, in order to maintain optimized readability, it’s best to keep your paragraph text the same as on desktop view. This should generally be above 16 points and a legible font — Merriweather, Montserrat, Oswald, Open Sans, PT Sans, and PT Serif are all excellent mobile-friendly options for blog posts and articles.
Merriweather, Montserrat, Oswald, Open Sans, PT Sans, and PT Serif are all excellent choices for mobile-friendly fonts.
In Action: Here, creative director Ngyuen Le has optimized his design blog, Verse Journal, for mobile as well as desktop. He’s used headers in different sizes and weights to draw attention to certain calls-to-action and create added visual interest. While the ratio of design elements remains the same, he appears to have downsized the headers from desktop to ensure they are tidy, fully visible, and direct the eye where he wants it to go.
While paragraph text should remain the same across desktop and mobile, headers are a different story. These should be reduced in size on mobile devices, to allow for narrower screens. Otherwise, text may be cut off, appear too large or take up too much space on the screen.
When it comes to effective mobile blog design, intuitive navigation is a must. This is especially the case for sliders, whether displayed as image galleries throughout your blog posts or a banner showcasing your articles on your homepage. It’s unlikely that small arrows in a list will entice users to click through your content, so the natural solution? Swipe left-right navigation.
Nearly 50% of mobile phone users prefer to navigate with a single thumb
In Action: In research for his book Designing Mobile Interfaces, mobile design specialist Stephen Hoober found that nearly 50% of mobile phone users preferred to navigate using a single thumb. Incorporating swipe left-right navigation allows for this gesture. Above, designer Nathan Riley of Green Chameleon has used this functionality in an innovative way, combining it with the distorted animation.
When it comes to calls-to-action on mobile, size matters. You should make buttons as large and eye-catching as possible, without coming off as intrusive on the page. This is not only more likely to prompt readers to take action, but it also makes it easier to click through on smaller screens.
The goal is to make the reader’s experience on your blog easy and user-friendly, so they shouldn’t have to work too hard to figure out how to read your articles – or take a desired action. But CTAs in blog posts don’t have to be limited to buttons in the traditional sense.
In Action: Other clickable elements can be used throughout your articles to help increase time spent on-page. This could include a carousel of related articles at the bottom of your post or hyperlinks to related articles throughout your piece (though be sure to select open tab in new window). You can see this at play above on women’s lifestyle blog Girlboss, where they’ve used an engaging CTA, as well as hyperlinks throughout the text that are clearly signposted by using a different font color.
Multi-column design optimization
Multi-column design is popular on desktop websites, as it allows designers to include more information in a visually appealing way. Unfortunately, this generally doesn’t translate well with limited screen space. But there are still a few ways you can get around this when optimizing a blog site for mobile. One to consider is using a title layout grid where the column and row heights are the same, creating a square effect.
In Action: This mock-up for National Geographic’s Nature Watch shows how a grid can be effectively applied to blog navigation on mobile. However, UI developer Nick Babich gives a word of advice to designers when creating this kind of multi-column layout on mobile: “Make images large enough to be recognizable, yet small enough to allow more content to be seen at a time.”
Make images large enough to be recognizable, yet small enough to allow more content to be seen at a time.
— Nick Babich
Mobile layout may seem primitive, but it’s simple for a reason. As you’re limited to one, narrow column on mobile, it’s crucial to structure content in a clear, logical, and engaging way. The reader should be able to get an idea of what your article is about by skimming through it. Use sub-headers throughout your articles, break paragraphs into smaller chunks, incorporate images throughout your post, weave in design elements to bring attention to key points, and use a strong call-to-action at the end of your post.
In Action: Designed by Kati Forner, the lifestyle website Maed by Denise Vasi is a great example of a simple-yet-effective blog design that works well across both desktop and mobile. Breaking up text with images, infographics, and CTAs makes the content more easily digestible and also commands reader attention for more time spent reading your content.