A recent report revealed 1/3 of all Internet traffic is now coming from mobile devices. That’s a huge number. And for the near future at least, that number will only go up. That’s why it’s imperative for your website to be visually appealing and easy to navigate on mobile devices.
At eleventy, we provide Web design services. And we’ve been getting a lot of questions from clients lately about the difference between responsive and adaptive design. You may have heard these terms yourself and wondered exactly what they mean.
In today’s post, we’ll attempt to explain the difference between responsive and adaptive design and provide some advice to ensure your website is delivering an ideal mobile experience.
Some Popular Website Design Terminology Defined
With the increase in mobile devices of different sizes and operating systems, Web design has evolved. There are a number of different design methods when it comes to making your website viewable on mobile devices. Here are four popular mobile design terms and how we define them:
This means just what it sounds like: Not moving. A static website is one that remains exactly the same no matter what you look at it on—PC, tablet, smartphone, etc. You can pinch and zoom to view different areas of the website on mobile devices, but the makeup of the site itself remains the same. This is how websites were created before the rise of the mobile Web. It is not how they should be designed now.
This essentially means designing a Web experience for the device it will be used on. In terms of smartphones and tablets, this means mobile-specific websites or apps. eBay provides a prime example of native design. On your mobile device, you view a different version of the website designed specifically for mobile (on your smartphone the eBay URL becomes m.ebay.com). Of course, eBay also provides apps for an even-better mobile experience.
Responsive design is a way of changing a website’s layout to adjust to the device it’s being viewed on. These can be with a set of predefined break points (phone, tablet, PC) or just kind of “go with the flow” and adjust as needed. In between predefined points, the layout is supposed to grow or shrink to fit the screen.
Adaptive design, which includes responsive design, is a broader term that deals with the ways that you make your website more usable to a wider audience through technologies. You serve the best experience you can to them, given their device and what you can guess about the context in which they are using your site.
Which Should I Choose: Responsive or Adaptive Design?
Here’s the good news: You don’t have to choose. These are essentially just a pair of buzzwords. Even amongst Web designers, the definitions of these two terms remain debated.
“There’s not a solid definition for either—they’re just terms some smart guys came up with to describe what we Web workers are trying to do when we make websites,” said Nick Gehring, interactive designer at eleventy marketing group. “We use them as shorthand to communicate broader, not always well-defined things.”
Fortunately for nonprofit and business leaders, you will never have to walk into a creative agency and place an order for a “responsive” or “adaptive” website. Instead, the real directive will be to develop a website that accomplishes the goals of your site on any device—whether that’s enabling purchases, providing information, or encouraging interaction.
Different Examples of How Responsive Design Works
With the above being said, there are a couple different approaches to developing a website that responds effectively to different devices and screen sizes. Which one you choose may depend on how your site functions, your budget, and the suggestions/preferences of your Web designer.
“Lately I’ve tried to not use predefined sizes,” Nick said. “I test the page by sizing up and down my browser and fixing it where something looks weird. With the plethora of screen sizes, especially on Android devices, it’s probably the best option.”
To paint a better picture for you, here are two different examples of responsive websites in action.
Example #1: Eleventy Group Website
The eleventy website has a responsive design that fluidly adjusts to a wide variety of screen sizes. So if you slowly change the size of your browser window (as shown in the video below), you’ll notice the text will continually move around on your screen. That is the website responding to fit your screen size. Once it gets the small enough, the columns and top menu change too (this is the version of the site you will see on a smartphone).
Example #2: Screaming Frog Website
The Screaming Frog website is an example of a responsive website with fewer “breaking points”. If you change the size of your browser window (just as you did above), you’ll notice the site does not change every time you make your window smaller. Instead, it realigns at four different key points. That is the site responding to the screen size and providing the best version to the user.
Those are just two examples of how you can build a website that responds to the device or screen it’s being viewed on.
Focus on the User Experience First and Foremost
More important than whether you call a website “responsive” or “adaptive” is making sure you provide an ideal experience for your website visitors—wherever they visit from. Your site should not be more difficult to view, read or navigate on one device then another.
The functionality of the different devices should also play a key role in your website design.
“Besides screen size, you should consider the viewing device’s capabilities—or lack thereof,” Nick said. “For example, you can detect if the device has touch capability. Knowing that, you can allow different sorts of interaction, like allowing a user to swipe through a slideshow of images.”
“As another example, you can detect if it’s a phone and have a phone number be ‘tap to dial’. You can also use screen size as a way to determine what size image you serve to the device to conserve time and bandwidth.”
As the capabilities of smartphones expand, so will the potential for a more customized mobile experience.
“In the future, you may be able to detect ambient lighting and adjust the contrast of the website for reading. Likewise, you may be able to adjust the size of the text or images depending on how close the screen is to the user’s face, ” Nick explained. “These are just proposals at this point—but these sorts of technologies make the phone more ‘personal’ than a personal computer.”
As important as mobile is to your website today, it will be even more important tomorrow. If you’re not already getting more visitors from mobile devices than PCs, odds are you will be soon. Take action today to ensure you are providing a strong website experience across all devices.