The terms responsive and mobile first are thrown around quite often in discussions about web design. Responsive technologies help create websites that look and behave well on every device — desktop or mobile, whereas mobile-first design focuses on the website’s look and behavior on mobile devices above everything else.
If you’re wondering whether to emphasize responsive technology or mobile-first design in your own web-development strategy, the good news is that the two categories are deeply intertwined — even feed off one another. Responsive technology is a crucial aspect of mobile-first design, and mobile-optimized websites are highly responsive.
Today, I’ll explain — and hopefully, clarify — how brands can leverage responsive technologies to drive engaging mobile-first user experiences.
Responsive Tech Vs. Mobile Design
The word ‘responsive’ doesn’t actually refer to a design strategy. Instead, responsive describes a technical approach with a specific goal: no matter what type of device a visitor is using to browse the Internet, the website will look equally amazing and offer an equally engaging user experience.
One of the most widespread, responsive web technologies is a simple algorithm that detects what type of device a visitor is using. The algorithm then inserts that device’s ideal versions of graphics, page layouts, and other elements — in other words, responsive technologies enable and enhance mobile-first web design.
Mobile first, on the other hand, is not a specific set of technologies, but rather a concept — a different perspective on design. Luke Wroblewski’s 2009 blog post titled, “Mobile First” woke up many designers to this concept. The premise is that a website should adapt image sizes, content lengths, page layouts, and other design elements to optimize the experience for a customer viewing content on the screen of a mobile device. This wasn’t an issue in the past when most people browsed the Internet from computer monitors; however, with the wide range of mobile screens now available, this type of design thinking is essential.
Wroblewski’s blog post was published at a time when mobile users still accounted for less than 10 percent of all web traffic. Today, however, the vast majority of business-to-consumer (B2C) traffic moves through mobile — and any company that lacks a mobile-optimized website will lose significant business as a result. Furthermore, mobile customers browse and make purchases in very quick time slices — while waiting in checkout lines, during lunch breaks, and so on — heightening the need for attention-grabbing, fast-paced, and delightful mobile experiences.
As you can see, every mobile-first design strategy needs responsive technology.
Graceful Degradation and Progressive Enhancement
As web-design expert, James Archer, points out in his article, “Mobile first: why are we getting it wrong?” mobile and desktop optimization must go hand in hand. It’s possible to take the mobile-first idea too far, creating an ideal mobile experience alongside a painfully limited desktop experience.
Mobile first provides a wealth of opportunities to integrate with the capabilities of various devices — location services, built-in scanning, and so on. However, those features should be bonuses and not essential components of your user experience. It’s easy to fall into the habit of “graceful degradation” — designing for the most powerful devices first and gradually stripping features away from the user experience on less-powerful devices.
By the same token, it’s very simple to become trapped in a “progressive enhancement” mindset in which you start with the most restrained approach, leaving even the desktop version of your site looking like a touch-friendly mobile app. The last thing you want any user to think is, “Ugh, this is probably another one of those stupid mobile-first designs.”
Both methods, however, miss the core of the problem that responsive technology is designed to solve: above everything, the user experience should be consistent — and consistently great — across all devices.
The Bottom Line
In short, starting from mobile isn’t the solution to a universally great user experience. The solution is to use responsive technology to build a website that works great on mobile devices but also adapts to desktop screens. The more responsive your website is, the more you’ll be following the mobile-first philosophy. And, the more your website is optimized for a variety of mobile devices, the more you’ll realize how essential responsive technology is to creating engaging web experiences.