If you’ve been following this blog, then you already know that we aren’t going to give you a straight answer. Partially because it wouldn’t make for much of a post in we answered it definitively with one or the other. But mostly because there isn’t a definitive answer.
Life is tough for designers these days. Aside from being misunderstood as the tortured artists that they are, they’re also expected to cater to a whole bunch of different screen sizes. The humanity of it all.
So as they’re looking to bridge the gap between the vast array of devices, they essentially have two options for their designs - adaptive and responsive. (A third option would be to abandon the field of design in a huff, though those sorts of histrionics are typically reserved for high-strung actors and stylists rather than mild-mannered designers.)
Perhaps you’re wondering this:
What Is the Difference between Adaptive and Responsive Design?
Experienced designers know the difference. But to the layperson, there seems to be some confusion around the difference between the two. So we’ll dumb it down for you. Not that you’re dumb, of course…
Responsive Design
As the name implies, sites with responsive design respond to changes in browser width by adjusting the placement of design elements to fit in the available space. All without the aid of black magic.
A responsive website will display content based on the available browser space. So, for example, if you open a
On mobile phones, this happens automatically. The site checks for the available space and then, like a toddler beauty pageant contestant, presents itself in the ideal arrangement.
Responsive design is straightforward and fluid. It enables users to enjoy the online world without the deep and horrible frustration of having to adjust their screens. (First world problems.) As such, designers need to have a strong concept of the site they’re designing, as well as a sense of the end users.
Adaptive Web Design
Adaptive web design is a newer animal. It was introduced in 2011 and is also known by the far less sleek moniker - progressive enhancement of a website. Notice how it writhes on the tongue.
While responsive design relies on changing the design pattern to accommodate the available real estate, adaptive design has multiple fixed layout sizes. In this case, when the site detects the available space - be it a phone, tablet, desktop - it selects the layout most appropriate for that screen size. Resizing the browser has no impact on the design.
Sites were quick to embrace adaptive design. They have no qualms with the fact that the layout displayed on a mobile website using adaptive design may be different from the desktop’s version. Although this is often because the designer - who may arguably have control issues - picked a different layout for the phone’s screen rather than leaving the design to try to rearrange itself.
When working in adaptive design, it’s normal to develop six designs for the six most common screen widths; 320, 480, 760, 960, 1200, and 1600 pixels.
So which is better? That's another loaded question. We will say this:
Responsive Design Is the More Popular of the Two
For now, at least. Though popular isn’t always better. (It doesn’t, for example, decide who's going to be president.) Nevertheless, responsive design allows designers to show content based on the browser space available. And all of this equals consistency between devices.
The fluidity of responsive design makes for good UX. It’s SEO friendly and often easier to implement than adaptive design. Plus, there’s a plethora of exciting templates to use. Fun, fun, fun!!!!
So what are the drawbacks? In a nutshell:
- Not as much screen size design control
- Advertisements can get lost on the screen
- Longer mobile download times
Adaptive Design Is More Involved
The designer has several fixed layout sizes. And that means more work. But it does offer an alternative to the “one-size-fits-all-once-it’s-stretched-out-all-over-the-place” approach. (Which is how the clothing labels should REALLY read.)
All of this extra work does allow for the best UX based on the device for which it is designed. Mobile devices are able to sense their user’s environment, and designers can optimize advertisements based on user data.
Here’s where adaptive design doesn’t shine:
- It’s labor-intensive to create – especially when retrofitting traditional sites
- Tablets can have trouble with site configuration that’s smartphone- or desktop-oriented
- Search engines have trouble appreciating identical content on multiple sites so it’s challenging for SEO
So there you have it.
The Choice between Adaptive and Responsive Design Is Yours
There’s something to be said for sticking with responsive design in terms of saving money, improving SEO and keeping users content. Then again, adaptive design can tune in more to users’ varying needs.
It all comes down to thinking about your product or service when designing your site. Will you be accessing users in a specific setting? What aspects of their behavior can you use to keep them informed and engaged?
You might want to start with responsive design while keeping an eye on adaptive design and the ever changing field of design. More and more devices are getting “smart” and designers are increasingly designing to that notion.
It’s all part of the evolution of web design. Your job is to remain aware of these changes. After all, survival of the fittest isn’t about being the smartest and strongest - it’s about being the most adaptable to change.
Just ask Darwin.
No comments:
Post a Comment