Making the Shift to Mobile-First Design

If the new year is bringing you a new website, seriously consider opting for a mobile-first design. Most of us are familiar now with responsive design—a design that allows your desktop site to collapse into a mobile version without having two separate websites for desktop and mobile. But mobile-first is still a buzzword most people haven’t explored, so let’s unpack it and talk about why it’s a great choice for your 2017 website project.

Businesses with better mobile sites have up to 140% more conversions compared to those with poor mobile sites.

What is mobile-first design? In a mobile-first design, your web designer starts with the mobile site first and then tackles the design of the desktop site. Doing this allows the designer to really consider the nuances of using your website on a mobile device—things like button size and placement, visual organization of text and content, and image treatment—to really give a seamless user experience on mobile.

What is the difference between mobile-first and responsive design? Technically, mobile-first is a type of responsive design—responsive design just means the design of your website responds based on the device being used, instead of requiring that you have a mobile version of your website (m.mywebsite.com).

That being said, the answer is that a basic responsive design is more limiting for the mobile user experience because it has to follow certain rules set forth by the desktop site. In a basic responsive design, you might find your text looks way too long on a smartphone and the user has to do a lot of scrolling to get to the bottom of your content.

Why choose mobile-first? There are lots of reasons to opt for a mobile-first design, but the two most important ones are speed and user experience.

For speed: Mobile-first websites are inherently faster than a traditional responsive site because the transaction of data is handled way better transitioning from mobile to desktop than desktop to mobile. In a traditional responsive design, we’re asking the mobile site to load all of the content and HTML from the desktop site, and in many cases, hide a lot of content that’s just too cumbersome when viewed on mobile. This makes the website much slower on mobile because we’re weighing it down with all this unnecessary code. In a mobile-first design, we ask the mobile site only to load what’s necessary, and then we enhance the content and code on desktop, which is much more efficient at handling that transaction.

For UX:  Simply put, mobile-first provides a better user experience because the site is designed around the nuances of using a mobile device. Giving users functionality that makes browsing more natural will keep them on the site longer and minimize friction.

Why care? A lot of the discussion around mobile-first can sound very techie and not at all relevant to the business owner, but there are some major benefits to having a mobile-first website that will no doubt affect the bottom line.

Consider these statistics:

• The average person spends 162 minutes per day on their phone and unlocks it 150 times.
• 29% of mobile users will abandon a webpage that fails to load in three seconds or less.
• The investment in mobile marketing is significantly disproportionate to the exponential growth in mobile media consumption.
• Businesses with better mobile sites have up to 140% more conversions compared to those with poor mobile sites.

*You can find more useful mobile marketing statistics from the September edition of Google Partners Connect.

The benefits of improving speed and user experience on mobile are twofold: Google rewards fast websites with great mobile UX, which could potentially lead to more visibility in organic search. More importantly, by removing frictions related to speed and user experience, you’re improving the overall customer journey and increasing opportunities for customers to take the desired actions on your website, whether that’s making a purchase or filling out a contact form.

Now that you’re thinking about your new website, check out the five main considerations for a successful relaunch. The MBB+ team wishes you a safe and happy new year, and we look forward to seeing your new (hopefully mobile-first) website in 2017.