blue banner
Responsive Website Design

2020 Best Practices For Responsive Mobile Website Design

page title border

2015 was the first time that mobile search exceeded desktop searches. Since then, we’ve watched the continued rise in smartphone ownership and mobile search. Whereas previously it might have been enough to have a website that’s simply accessible across all devices; now it’s a priority to create a website that’s truly mobile-first, performing well and delivering a seamless experience for your customers on all of those devices.

Here’s a look at current best practices to keep in mind when building or redesigning your website.

 

Flip Your Approach

Traditionally, you would build a desktop website first and then focus on mobile. Today, you should be focused on the mobile experience first, and then scale up to tablets and eventually to your desktop site. It may not be practical to flip your thinking about an existing, established site, but if you’re planning a major site redesign or building a brand new website, mobile-first is likely the right approach. (Check your Analytics — it will show you how many of your specific site’s users are on mobile!)

Besides the majority of users being on mobile, there are practical reasons for designing a website to be mobile-first. There are more usability limitations with mobile, simply because of the smaller screen size, so it’s much easier to scale up than to scale down. Imagine furnishing and decorating a large room, and then scaling down to a smaller room. It’s much easier to create an arrangement that works for the smaller room and then spread it out (and maybe add a few items) to make it work better in the large room. By starting with mobile, you can evaluate features, functions, and content more objectively. You’re not making compromises or losing anything; you’re starting with the essentials and building from there.

 

Speed

Speed is a critical factor, particularly because mobile users using cellular networks may be dealing with slower connection speeds and/or data limits. If it takes more than 2-3 seconds for your responsive site to load, you’re likely to lose traffic to your competitors. And if that’s not motivation enough, keep in mind that Google also prefers fast mobile sites and will rank them above slower sites in search results. Test your mobile site speed and then figure out where you can scale down to improve loading times.

 

Navigation

Still using a navigation bar on mobile? A nav bar takes up a lot of real estate on a smartphone display, and even with just a few pages it can be hard to read and click. Ditch the nav bar on mobile and opt for a hamburger menu icon instead (three lines in a box), with a full-page, off-canvas menu that slides out from the side, for more space and better usability.

 

Search

Mobile users are on-the-go and in a hurry to get the information they’re looking for. Make sure your search function is:

  • Front and center
  • Above the fold
  • Accessible on the homepage

Also be sure that your search feature is forgiving when it comes to typos, which are even more common on mobile devices.

 

Placement

Smartphone screens have gotten bigger over the years, but our thumbs haven’t received the memo to evolve yet. Most people still prefer to interact with smartphones with a thumb, which means your most important elements should be in the middle of the screen. Edges and corners should be reserved for visual elements only; don’t expect people to click there.

 

Images

This may be obvious, but image quality, size, and resolution all affect load time and ultimately user experience. Images are the first place to look if you need to reduce the weight of your site to speed it up.

 

Contact

Your phone number, email, and address (if you have a brick and mortar location) should be linked right on your homepage to make it quick and easy for people to get in touch with you. This is true for any business, but especially for restaurants and service providers that regularly get calls from customers on-the-go. By linking contact information, it takes just one click for customers to:

  • Call you
  • Compose a new message in their email app
  • Automatically start navigation to your business from their default maps app

 

Checkout

Cart abandonment tends to be higher on mobile than on desktop. Reduce your abandonment rate by simplifying the purchase process on your site:

  • Allow users to checkout as a guest
  • Add automated checkout options and buttons (PayPal, Apple Pay, etc.) before users even get to their cart
  • Minimize unnecessary form fields
  • Enable auto-fill, tab buttons, and the correct keyboard to quickly move through the form fields you do have

 

At PixelPeople, We Know Mobile!

Whether you’re building a brand new website, or it’s time for an overhaul, it pays to focus on optimizing your customers’ mobile experience. PixelPeople employs web developers and designers who have been building websites for years. We stay on top of emerging technology and strategies for creating responsive websites that are optimized for the thing that matters the most: your customers.

Get in touch and find out how we can help get your business into the hands of more people!

Tags: , ,

Let's Get Started!