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.
“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.
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.
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.
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:
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.
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 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.”
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.
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.
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.”
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.”