I’ve been a blogger and content creator for nearly a decade now. It started out as a hobby, and ten years ago technology was very different. I’d go on my laptop, type an article, hit post, and move on with my life. Mobile technology was on the rise, I even had an iPad at the time, but it wasn’t necessarily the focus of content development. My brain had never heard the term “mobile first,” and my writing process never reflected an emphasis on mobile technology.
For the first few years, I’d type on my computer and post. I think this was pretty common in 2014, but the climate was also changing at the time. Of course, back then I was only blogging for fun, and the laws of SEO and User Design were foreign to me. As I got more serious, I started to play around with different tools. One of them was Google Analytics, it told me what I needed to hear.
Around 75% of my site traffic was a result of mobile viewership. I had to optimize for mobile, and I had to do it fast! So, I set out to make my site mobile friendly. I could no longer operate with a “laptop first” mindset due to my preferences. It was time to listen to my audience and my iPhone. Along the way, I realized I was doing a lot wrong, and there was a lot to improve.
1. Keep Your Logo Clean
Originally, I had a nice banner on my blog. I made it myself, it wasn’t perfect, but I was happy with it. Then I went on an iPhone and loaded my site. The banner wasn’t smaller, it was cut off. Rather than shrink to fit the display, left and right quarters of the banner weren’t shown on screen.
In 2020, you need to be pulling up your smartphone and checking your website as soon as you make changes. Some templates do funky things, sometime images don’t look crisp on different displays, and some logos shrink to the point where they’re difficult to read. You need to pick a logo and header that behave well from mobile to desktop. If your template recommends a 100 x 100 pixel logo and you upload a 800 x 200 pixel banner, prepare for shenanigans.
Your logo sends a brand message. Don’t let it be sloppy.
2. Use Headers Appropriately
I generally wouldn’t recommend a 4,000 blog post without headers and subheaders. It will be difficult and daunting to read, but it might look OK on a laptop screen. With appropriate grammar and paragraphing, you could probably read it on the computer.
On your smartphone it’s a different story. You’ll scroll for a long time before hitting the bottom and you might get lost in a sea of text. Headers can be a great way to keep tabs on your progress through a post. They break posts into smaller, easier to digest pieces while allowing readers to refocus attention on specific points.
If you’re still making long posts, try to break them up. Google likes headers, and your readers will too.
3. Do Not Show the Full Post
If the prior point told you anything, it should be that nobody wants scroll more than necessary. Many themes display post previews rather than the full text of a post. On an early 2000’s blog, it was standard to use a mouse and scroll through pages of text. Today, that text will make a smartphone screen unbearably long.
Mobile devices like templates that offer a preview before seeing full text. Fortunately, there are a lot of formatting option when it comes to modern templates. It’s common to see a block-style grid being used. These are easy enough to navigate on desktop, but as the name implies, they will stack pretty well when moving to a smartphone. Users can actually find information, and new posts won’t get buried in texts.
4. Think Single Column
Now, when I create content, I think of how it will look on a smartphone as I design it. If I was to pick a new template for my website, this would be the biggest thought in my mind.
When I think of desktop layouts, I generally think about sidebars and templates with columns. If this template doesn’t adapt when it’s loaded on a mobile device, it will be an illegible without zooming and impossible to navigate.
At this point, if I am working on a website with a side column, I think of that as extra but unnecessary. I assume it will not load on a mobile device, and if it does, it will get pushed to the bottom. There are templates that will adapt to mobile differently, but mobile devices are built to show a single column when scrolling. There isn’t enough screen real estate to have multiple columns for fully loaded content.
5. Make Navigation Super Easy
People make menus, those menus branch out, then they branch out again. To be fair, a lot of times this hierarchy does make sense in terms for data flow.
When menus go onto mobile, they look different. You’re probably going to see a hamburger menu, and categories won’t branch off like they do on desktop. Plus, people have fat fingers. The more they need to tap, the more likely they are to make mistakes.
I’d advise you to keep menu options to a minimum. If you go into content creation with the mindset that navigation will be simple, you will be able to keep your site architecture in mind when you are classifying your content. The fewer steps viewers need to take, the easier mobile navigation will be.
6. Keep Images Minimal
No, I am not saying to use fewer images. I’m saying to keep images basic and easy to understand.
On a mobile device, images with simple colors and minimal text maintain their impact on a smaller screen. Remember, people keep their brightness at different levels, so using bright yellow text on an orange background will make your eyes bleed. If there is text, make it large and legible. Images are going to shrink to fit smaller screen sizes, and too much text is uninvited and hard to read.
If you’re going to use an infographic, you should click to expand rather than consuming the whole screen. Better yet, highlight specific data points in the post and link to the full image. Let the content tell a story without the need to leave the page, but invite readers to learn more if interested.
7. Know Your Goal
A lot of content will have a call to action on it. Whether that be to join an e-mail list or make a purchase, your post is building to that goal.
When you’re designing of mobile, this is the focus of your post. Your text needs to be solid and grammatically correct, but it needs to convince people to take action. So if you make any compromises, do not compromise the CTA.
If the CTA gets buried, you need to make some changes to the information on the page. Text can be reduced or images can be removed, but never compromise your end goal.
Welcome to the Mobile World
When I adopted a mobile first mentality, it was because I wanted to create for my readers. Just because I view the digital world from the admin screen on my laptop doesn’t mean readers see the same view. In fact, data told me I was wrong, so I had to make a change.
It’s critical to keep a mobile first mindset when developing content because it shows a sense of understanding for the user. If users are embracing mobile devices (newsflash, they are), then content creators need to understand the impact of taking a desktop-first approach. The future is going to become more mobile friendly, and this is going make some sites become obsolete. Nobody wants to be left in the dust because they should have used a mobile-first approach two years prior.
Mobile first does not mean mobile only. It’s an approach to design that takes all devices into consideration. Because mobile devices have the most limitation, it’s easier for mobile-friendly content to expand onto a larger screen. Fortunately, designers have been building this understanding for years. Most new templates are advertised to be “mobile friendly”, but some writers and content creators are stuck in the past. Next time you design content, think about mobile during the process. These thoughts may change the way you write and create, but they’ll eventually become second nature. The soon you change your mindset, the more adaptable your content becomes.
You must be logged in to post a comment.