Responsive or Adaptive?

[tonyp89]

I’m a little confused..

Responsive web design is when you use percentage dimensions and scale it down at certain browser widths, is that right?

For example:
@media only screen and (min-width: 320px) and (max-width : 420px) {
#container{
width:85%;
}

@media only screen and (min-width: 420px) and (max-width : 519px) {
#container{
width:75%;
}

If so, what is Adaptive Web Design?

I’ve made a design that uses media queries like the example above but I’m using fixed dimensions instead. Is this responsive or adaptive?

For example:
@media only screen and (min-width: 320px) and (max-width : 420px) {
#container{
width:450px;
}

@media only screen and (min-width: 420px) and (max-width : 519px) {
#container{
width:650px;
}

[jurotek]

My understanding of AWD is that you create different layout for each breakpoints. RWD is more of a device agnostic approach where you set breakpoints based on content behavior instead of device. To be honest I am little bit confused with all those buzzwords like: liquid, elastic, adaptive, responsive, progressive and who knows what else is out there. To me the best approach is based on the look or behavior of content at different widths not device width. If something doesn’t feel or look right as you scale up or down then take appropriate action at that point.

[tonyp89]

I’ve created a jsfiddle to really show what I’ve got – I mean, is this a type of responsive design? Or does it fall under one of the million other names? Hah…

http://jsfiddle.net/HHJL7/

[__]

I’ve created a jsfiddle to really show what I’ve got … http://jsfiddle.net/HHJL7/

That’s responsive.

[tonyp89]

@tomasz86 That’s understandable – But sometimes using px is just so much easier because you have complete control over the way everything looks. Sometimes with percentages when elements scale down you have no choice.

@traq Great! So it’s just a different method of responsiveness then?

[Senff]

Correct me if I’m wrong (cause I’m not 100% sure about this myself)…..

Responsive is when the layout of a site changes based on the screen size. Nowadays this is almost always done by using media queries, but technically, using percentages would also fall under it, because that could make things look really different on various screen sizes (and, hence, different between large monitors and small phones).

Adaptive is when the site serves different content (or a different method of content) based on the device it’s viewed on. For example, when you access the site on a desktop computer you’d get a Flash-based something, and when accessing on an iPhone, you’d see an HTML5-based something.

Makes sense?

[jurotek]

@tonyp89, I forked your jsfidlle to CodePen. Notice I am not using any horizontal padding on containers but control the horizontal spacing with left and right margins on elements within the containers. Also, the media queries have only min width and have em values. The actual values are reduced by 1em to account for vertical scroll bar width (not quite sure about this for hand held devices). If you decide to change base font size on html element to something other then 100% then you will have to adjust media queries min widths to account for that cause the em values are relative to base font size. I am sure other developers have other ways to do something like this which works best for them. Here is your forked fidlle to play around with.

[__]

Correct me if I’m wrong (cause I’m not 100% sure about this myself)…..

I think @jurotek hit it when he said that AWD has different layouts for various breakpoints. (Whether they are served different layouts or it happens client-side is an implementation detail.)

Basically, AWD is like having two or three different fixed, non-responsive layouts and which is used changes based on device/ screen size.

Great! So it’s just a different method of responsiveness then?

@tonyp89 yeah, I guess so. But by that token, so is UA-sniffing. Personally, I think strict AWD is awkward and limiting. But I also don’t care much about attaching labels to what I do – worry more about how it looks/ works. What you’ve got in that fiddle is nice.

[Senff]

I think @jurotek hit it when he said that AWD has different layouts for various breakpoints. (Whether they are served different layouts or it happens client-side is an implementation detail.)

I’ve always considered that pure RWD actually. :)

Basically, AWD is like having two or three different fixed, non-responsive layouts and which is used changes based on device/ screen size.

So when my site is fixed 1000 pixels wide for screens above 1200 pixel-wide screens, and it’s fixed 300 pixels wide for screens below 1200 pixel-wide screens….does that make it adaptive?

That’s what I understand from your description. The breakpoint being 1200 px, and the two layouts being fixed width.

But I also don’t care much about attaching labels to what I do – worry more about how it looks/ works.

THIS. I fully agree. The end result matters. Whether it’s called responsive, adaptive or whateverive, and whether the breakpoints happen at 1024/768/576/480/320 or 1111/943/601/447/333, to me the only thing that matters is that things look good on any screen/device.

[__]

@Senff – I don’t pretend to be an expert on the distinction. They’re buzzwords. (Kinda hard to be an expert on something you don’t care about.) This is the most succinct summary I’ve come across:

Where the two methods differ is in their delivery of the responsive/adaptive structures: RWD relying on flexible and fluid grids, and AWD relying on predefined screen sizes.

—Ryan Boudreaux, about halfway down under “Comparisons and Distinctions.”

I would tend to look at them both as attempts at solving the same problem, though I think AWD (according to this definition) falls short.

[Senff]

@traq You’re right of course. More buzzwords than fully defined terms!

The fact that a Google search for “difference between responsive and adaptive” gives you result with all kinds of different answers, says a lot.

[MattF]

In my experience, AWD is best used if you are taking an existing site and making it fit in tablets and phone. So in your css you still use media queries but decide the screen sizes for each one. If you do a search you can find the most common break points. You shouldn’t have to start from scratch either. Just start adding media queries. I don’t believe you need to use only percentages here either. You can just start changing the widths to flow how you want. Either one should work. I have used both and just use which is easiest for you and works good for the user experience.

RWD, for me anyways, works best if you are starting from scratch using all new code.

[Author]

Posts