Do you remember when the first iPhone came out? It was revolutionary to say the least. Suddenly, society had taken a giant leap into the future, and everyone was scrambling to get their own handheld phone/computer.
Fast-forward just 15 years to today, and we live in a mobile-first world. More than half of all website traffic comes from mobile devices. Half! That means for any given visitor to your website, there’s about a 50/50 shot they’re viewing it on a 6-inch smartphone instead of a 20-inch desktop. And that size change can cause serious problems if you’re not adjusting your site’s design.
In this article, I speak with one of our Senior Designers, Shelby Arnett, who offers insights and advice about mobile website design. She’ll teach us how mobile design differs from the traditional desktop, what elements to pay attention to on your mobile site and how to choose between responsive and adaptive design.
What Makes Mobile Different?
“Mobile web design isn’t something many people think of instinctively,” Shelby says. “But if most of your users are on mobile, you should definitely plan for how your site looks and functions on mobile devices.”
Shelby likened the desktop version of a website to a wide, blank canvas. On a desktop site there’s lots of room to add in design elements, make things interactive and play with custom functionality. But when you’re designing for the mobile experience, it’s all about simplicity.
“You have to simplify the entire experience for mobile-first design,” Shelby notes. “Everything from the content on the page to the menus to the form fields. It’s critical to knock things down to only what’s most important.”
This is where Shelby’s UX design experience shines through. She explains that mobile needs to be simplified because the user can only access so much information at once on a small screen. Instead of being able to peruse different elements of your brand on a single desktop web page, they can only see a snippet on their smartphone. So, as an adept marketer, you need to ensure that snippet is the most important piece of information that will encourage them to dive further into your sales funnel.
But how do you know what’s most important to your mobile users? Shelby recommends diving into your user analytics. “Pay attention to where your users are viewing your site and choose the design tactic that best meets them in that space.”
For example, suppose you see most of your audience viewing your site from the smartphones. That’s a good indicator you should invest your time and resources into making it easy to navigate on that screen size.
To sum up, the key difference between mobile-friendly websites and the desktop version is simplicity. With that in mind, let’s take a closer look at some of the key design elements businesses need to adjust when building a website for the mobile screen.
Key Elements of a Mobile-Friendly Site
The good news is that the key elements of web design are pretty much the same across any website. How you use them is what makes the difference.
The user experience changes with screen size, so Shelby recommends keeping an eye on a few specific design elements as you build the mobile version of your site.
- White space – Where white space on a desktop site can add much-needed breaks in visual elements, on mobile it can sometimes be a bit much. “On mobile we have to balance spacing out content appropriately without confusing the reader with too much space,” Shelby says. Remember that on mobile devices, you just need enough white space to help users distinguish between breaks in text or transitions on the page.
- Text size – How often do you have to zoom in to read website text on your phone? Don’t worry, you’re not the only one. The rule of thumb for mobile text size is 16 pixels, but Shelby says don’t be afraid to go larger if you think you need to. The most important thing is ensuring your users can easily read your web copy. (P.S. – this goes for buttons too.)
- Image placement – The best spot for images will change as you move to different screens. Mobile doesn’t have nearly the same capacity to display images as desktop does, and they tend to take up an entire smartphone screen. You want to do your best not to interrupt your user’s scrolling with too many images, so try to keep them to a minimum. Leave in images that are relevant to your content, but consider removing ones that are more decorative if it helps improve your mobile user’s experience.
- Navigation menus – On a desktop site, a less-than-perfect navigation menu might cause confusion but it probably won’t drive away a user completely. On mobile, however, that’s a real possibility. “As much as possible, you need to keep the menu streamlined and easy to navigate,” Shelby says. This is because confusing menus that don’t display well on a mobile phone or tablet actively prevent users from finding other pages on your website. A good menu design example is on Apple’s website. Check it out on your phone and notice how the navigation menu is easy to find, simply constructed and offers just a handful of options.
- Forms – We’ve all had a bad experience with web forms, especially on our phones. Maybe the fields were too big or too small, they wouldn’t let you type in them or you had no idea what information you were supposed to input. These issues keep people from taking the next step with your brand. That’s why Shelby stresses the importance of simplifying forms on your mobile site. They should be easy to understand, interact with and submit so you can keep users moving through your sales funnel.
That wraps up the most important adjustments you’ll need to think about as you craft your mobile-friendly website. But where there are do’s there are also don’ts. Next, we’ll take a quick look at some things you steer clear of if you want to preserve the mobile user experience.
Things to Avoid on Mobile
The trouble with pushing your desktop site directly onto mobile is that it might carry over some attributes that just don’t work on a mobile screen. Shelby notes two items, in particular, as the most common offenders:
- Pop-up ads – This type of ad is not compatible with mobile devices. Period. You can install a pop-up on your mobile site, but it will undoubtedly take up the whole screen, be hard to exit from and deter users from continuing to your content. Instead, you can opt for paid ads throughout your copy that can more cohesively coexist with the rest of your site.
- Carousels – Carousels can be a great way to display lots of information in an attractive, organized format. But when you’re lacking space, they can sometimes place a high demand on your users. “You’re asking too much from a mobile user to stop scrolling and wait for your entire carousel to cycle through all of the various slides and offers you have,” Shelby says. She adds that Google tends to flag sites with content that shifts around on its own—without the user’s interaction—meaning it could negatively affect your search rankings.
With these key design elements in mind, you can see how important it is that your mobile website isn’t a carbon copy of what people find on their desktop computers. Luckily, you don’t have to reinvent the wheel just to cater to mobile users.
Responsive vs. Adaptive Design
There are two ways to design websites so they adjust from desktop to mobile: responsive or adaptive. Each offers unique benefits and limitations, but in Shelby’s mind, one keeps a slight edge over the other.
Responsive Design
Responsive web design is the quick solution to making your website accessible on different screens. That’s because with this approach, you can use the same website you built for desktop and it will automatically adjust for the user’s screen size.
“With responsive design, the mobile site is the same as the desktop version, but you might still need to make some minor tweaks,” Shelby reminds us. “Sometimes I have to take things out or rearrange some elements if they feel too distracting on mobile.”
Most website building platforms — like WordPress, Squarespace or Wix — default to responsive websites. Their templates are designed to be easy to fit on multiple screen sizes, and you can even preview your website on desktop and mobile as you build it.
Shelby notes that responsive design is great when you don’t know what kind of devices your users will view your website on, but she also notes the need for quality control.
“Responsive design helps us have a guiding post for how things will look on different device sizes. But things are always moving and shifting and you can’t control exactly how things will look on a specific device. It’s important to have a QA process in place to get an idea of how the site will look and function on different mobile devices before publishing it.”
Adaptive Design
With adaptive design, you’ll make multiple designs for your website — one for each screen size your audience will likely use. Most adaptive websites include designs to accommodate up to six different screen sizes.
The benefits of this approach is that you can design a site that always looks exactly the way you intended, perfectly fit to any screen so the user has the best possible experience. Plus it can decrease your website’s load time on the mobile device it was designed for, which helps with SEO.
Although this sounds like a perfect solution, there is one major drawback of adaptive design: upkeep. “When designing an adaptive website, you end up with a handful of websites that all may need to be individually maintained and updated,” Shelby explains. This can take time and energy that some teams just don’t have.
There’s also the cost to consider. When you go with adaptive design, that means you’ll have to pay to design at least six separate website layouts. Yes, you’ll already have lots of the design elements on hand, but your team will have to figure out which items are most important to fit on a smaller canvas. Again, this takes time and energy that can quickly eat into your budget.
Which Is Right for You?
Choosing between responsive and adaptive design can be a tough choice. Shelby says that for most businesses, though, a responsive design makes the most sense.
“It’s typically less upkeep and easier to manipulate without needing a dedicated web team. If you have a small to medium-sized business and you just need to keep your website up and running, then responsive design will likely be your best option.”
For bigger businesses, however, Shelby recommends adaptive design. “It’s easier to manage, display and manipulate lots of content and design elements on mobile when the site is actually designed for that screen.”
She points to websites like Amazon and USA Today, who use unique layouts on mobile devices to better accommodate their users’ screen size.
Mobile-Friendly Tips
When it comes to mobile website design, there’s always one more thing you can do to improve your user experience and enhance the mobile version of your site. One tip Shelby offers businesses is to consider the mobile-first approach.
“If mobile design is a concern, or if you know it’s where your customers primarily view your website, consider designing your site for mobile first. Focus on getting everything set up for the ideal mobile experience, then expand it to fit larger devices.”
In addition to creating your website for mobile, Shelby also recommends conducting some mobile-friendly tests before launching it. “QA your website before publishing! Try it out on different browsers and devices. Walk through the same steps your customers take throughout the buyer’s journey to see where you can make improvements or streamline the process.”
Consider Mobile First
More and more users are visiting your website on their smartphones or other mobile devices than from their desktops. So even if you’ve never considered the mobile experience before, it’s time to focus on how people see your brand on the small screen.
If this article piqued your interest in web design, we have lots of other great blogs for you! Check out this one about keeping things “above the fold.”
