Remember when the only way you could reliably access the Internet was on your computer? By and large, that meant that you had a reasonably large monitor in front of you. Then, we moved to a point where you should have a “mobile-friendly” version of your site. That’s when people started creating subdomains or subdirectories with “m” or “mobi” or something similar. More recently, we moved toward encouraging “responsive” designs that adapt to the user’s screen.
But even then, for most of us, “responsive” simply meant have a desktop-oriented web design that could “respond” to fit the smaller confines of a smartphone display. That is no longer enough. Google has made it very clear that “mobile friendly” or “responsive” is no longer enough. You need to adopt a mobile first approach if you want to stay in Google’s good graces.
It used to be that you’d cater your blog design to the lowest screen resolution with a significant amount of traffic. That still meant a desktop-oriented design. Now, the approach is completely reversed. You design for the mobile display first, and then you have that design adapt to the larger space of a desktop monitor. But what exactly does that mean? Here are some key elements and considerations to keep in mind.
Single Column
For a time there, many blogs had sidebars on both sides. It was so common, that it was a whole category of WordPress themes on many sites. There were also many themes that had “double” sidebars on one side, so you’d have a wider main content column, one sidebar to the right of it, and then another sidebar to the right of the first sidebar. Crazy times, I tell you. Design people then often debated about whether the sidebar should be on the left or the right side of the screen. Most designs ended up settling for right sidebars, but even that is beside the point today.
More and more, what you’ll find is that the simpler, single column design is increasingly preferred. The reasons are numerous, but one of the biggest motivations is the mobile-first approach. When the screen of a smartphone is only so wide, a sidebar is completely unreasonable. The compromise with many responsive designs is that the sidebar appears on the desktop version, but when you get the narrow space of a phone, the sidebar gets pushed below the main column. But a true single column, with no sidebar at all, is quickly increasing in popularity.
Hamburger Menu
By and large, the traditional navigation you’d find on most websites would take on one of two forms. You’d have some main navigation running lengthwise across the header, oftentimes spanning at least half the width of the site’s design (if not more). Alternatively, a lot of navigation would be pushed into the sidebar. Neither scenario follows a “mobile first” approach.
The preferred “mobile first” approach is the so-called hamburger menu. That’s the button with the three horizontal lines. Click or tap on it to expand the navigation menu. We see this in mobile sites, but we’re seeing it increasingly in the “main” desktop versions of sites too.
Paragraph Length
This has less to do with the WordPress theme you might have running on your blog, and more to do with the actual content you decide to publish on there. If you’re more of a “pure” writer, then you mostly only think about paragraph length in terms of the storytelling or how you want the narrative to be received. And that’s perfectly fair.
But when you’re writing for a particular format and audience, as is the case with blog posts read on the web, HOW the words look is almost as important as the actual words themselves. From a “mobile first” perspective, this means keeping your paragraphs relatively short, because you don’t want a giant block of text to cover the entirety of a smartphone screen.
Keep It Simple
Going back to the core design of your site, a “mobile first” approach means that you emphasize clean lines and simple layouts. Something more ambitious might look pretty snazzy on a bigger screen, with radical lines and complex overlays, but it just ends up looking really cluttered, overwhelming, and not very user friendly on a smaller screen. Usability is critical.
A simpler design also lends itself to faster loading times, another key factor in Google’s ranking algorithm. It doesn’t matter if your site looks great if it also takes forever to load.
Video Format
Want to make it big on YouTube? Reading up on great video descriptions and integrating YouTube cards? Great. The “mobile first” approach is almost as important here as it is with your blog’s site design.
You may have noticed that some of your favorite YouTubers — like MKBHD and Peter McKinnon — have switched to an ultrawide format with a 2:1 aspect ratio (or 18:9, if you prefer). That’s wider than the regular 16:9 widescreen we’ve accepted as the standard for HD video. Why? Because more people are watching YouTube on their phones than ever before, and most popular smartphones now have an extra tall display with 18:9 or 18.5:9 aspect ratios (or somewhere in that range).
It’s better to get black bars on a regular computer monitor, which is already a larger display, than it is to get black bars on a smaller smartphone screen. The additional side to this is considering vertical video formats for Instagram Stories and IGTV, or even square videos for Instagram and Facebook. The conventional 16:9 video isn’t the totally dominant standard it once was.
Mobile Is the Way to Go
Simply having mobile as part of your overall strategy is good, but you should really be moving to the point where mobile becomes a much bigger priority. Everything you do has to be viewed through the lens of a mobile display, in a sense, because that’s where a growing majority of users are going to find your content. From podcasts to blog posts, social media to email newsletters, you need to be particularly cognizant of how any of that is received on a phone.