Getting comfortable with mobile-first web design

The way people interact with the internet has evolved. When the web was new, all internet traffic came from a desktop computer. While some early smartphones were released throughout the 2000s, they could only access a “dumbed down” version of the internet.

Everything changed in 2007, when Apple released their first iPhone. Suddenly, we could access full sites from our pocket computers, leading to a previously unheard of level of connectivity.

Today, 63% of organic searches on Google come from a mobile device. Mobile has overtaken the personal computer as the primary way that we interact with the internet.

When we consider our own internet usage, this makes sense. How often do you use your phone to search for a nearby restaurant when you’re out and about, or look up that actor while you’re watching TV? But there is a disconnect between the way we design websites and the way we use them.

We usually design websites on a desktop or laptop computer. And even some professional web designers can forget to optimize the sites for mobile while they’re sitting at a full-sized computer screen.

When we fail to put the mobile experience first, the result can be a frustrating user experience, with pop-ups that cover the whole screen, forms that are too small to read, and graphics with contrast that gets lost in shrunken form.

Further, Google has switched to a “mobile-first indexing” system. This means they do not crawl your desktop site when indexing and ranking pages. They crawl your mobile site instead. If your desktop site is lightning fast but your mobile site crawls, you may get dinged in your rankings.

What Are Your Mobile Site’s Stats?

Before you know what to change, you need to know the current status of your site. Just because the majority of web traffic comes from mobile doesn’t mean yours does. To find out, visit your Google Analytics.

On your home dashboard, scroll down until you see a circle chart called Sessions by Device. This will show you the device breakdown for the past seven days. You can change your view to look at a longer time period to get a more accurate average. You may find that your demographic is actually more likely to use a computer than a smartphone, especially if your customers skew older.

Mobile-first design is still important, even if your customers are more likely to visit your site on desktop, because of Google’s indexing. But you may be able to have a slightly more complex site if more of your customers are visiting on desktop.

Another important factor to consider is site speed. Using Google’s PageSpeed Insights tool, you can test your site to see how quickly it loads on both desktop and mobile. If your site is like many, it will be plenty fast on desktop — and frustratingly tortoise-like on mobile. When you design mobile-first, you’ll focus on the speed of your site on a smartphone, instead of treating it as an afterthought.

How to Approach Mobile First Web Design

We can't focus on old-school methods

The old way of approaching web design was to plan for the desktop site, and then remove some features for mobile. Instead, we’re going to design for mobile, and maybe add some features for desktop.

Websites have become simpler. You may remember the sites of the early internet, overwhelming the visitor with animation, banner ads, flashing colors, and small text on a neon background. Web design has matured since then, with a new minimalism taking hold. This is a good thing for mobile design!

Keep simplicity in mind when you’re planning your site. It will be both easier for the mobile user to navigate, and will load more quickly. With page speed a major Google ranking factor, keeping your site light and fast will improve your position in search engine results.

Next, consider your hierarchy of information. On mobile, all content will be presented vertically. So you have to prioritize your content, putting the most important information at the top. Blog headlines and hero content should be visible before the user has to put finger to screen and start scrolling.

You don’t have to know how to code to create a mobile-first website. Even responsive website builders like WordPress and Squarespace allow you to toggle between mobile, tablet, and desktop views. Plan your site from the mobile view, and check it with the desktop view before publishing.

Must-Have Mobile Site Features

Whether you’re working with a responsive site design or starting from scratch with a new mobile design, here are the elements your mobile site should have.

Hamburger Menu

A hamburger menu is a symbol with three stacked horizontal lines. It’s a universal icon for a navigation menu on mobile, and it will immediately tell the user where to click for more options.

Compressed Images

Large images are a major site-speed killer. Images should be compressed to reduce their overall size and improve your site and page load speeds.

Simple Layout

A simple, easy to navigate layout will make your mobile site user friendly.

Clickable CTAs

Your call to action (or CTA) tells the user what to do next when they’re on your site. “Buy now,” “Learn more,” and “Get the download” are all CTAs that ask the user to take an action.

CTAs should always be easy to click, preferably in a brightly colored box or button. This is especially important on mobile, where clicking a small text link may be difficult.

Focus on the User

Focus on the mobile web user

Whether you’re designing your own site or outsourcing the project to a web developer, make sure that mobile is on your mind. Scroll through your most-visited websites on your smartphone, and note what makes the experience easy vs. what the frustrations are.

Keep the user in mind when designing your mobile site. They’re who you’re trying to impress!

If you need help with designing your mobile-first website, give us a call today.