Adaptive Design & Media Queries - having difficulty

Hey Ronando Long

I am sorry you are having difficulty. I am going to tag Nick Pettit and Allison Grayce Marshall to see if we can help work through this.

I will also be happy to let the teaching team know about your ideas to expand the section to be a little more specific.

Dan

Ronando Long - Are you stuck on a particular code challenge?

If so, help us, help you by posting:

• a link to the code challenge
• the instructions of the step you are having issues with
• the code you have so far

Adaptive Layouts are built using Media Query breakpoints yes, but it only looks good on SPECIFIC devices because it is not built using the fluid method.

Responsive uses em and % fluid layout as the foundation in conjunction with Media Query breakpoints to ensure the site looks good on ANY device.

Thanks Amy. You said, "Adaptive Layouts. ...not built using the fluid method." But in this video she says (at 1:38) "Since we built the website on a fluid layout, we don't have to target both of these dimensions seperately. The fluid layout will scale with the viewport size. So, we'll take the higher of the two..." where she talks about the phone and tablet pixel sizes and then launches into the Adaptive layout. So, if what you say is true, it's the opposite of what Allison is saying. Keep in mind the section is "Adaptive Design >> Finding Your Breakpoints."
http://teamtreehouse.com/library/websites/build-a-responsive-website/adaptive-design/finding-your-breakpoints

Again, not complaining about Allison. Simply stating that this video series is fast and confusing. She goes on to say that Adaptive doesn’t cover every single resolution your site might be viewed on, like Responsive websites do and that Responsive focuses on delivering the site on one seamless experience to all resolutions and handhelds rather than device specific, but I'm still not seeing the difference. They both adjust when the browser size changes and they both accommodate tablets and phones. The differentiation is not clear, even though I haven't hit the Responsive section yet. It would be good to have the clarification before getting there to avoid the distraction of questioning the difference.

Hi Ronando Long,

I couldn't agree more. Responsive Design is a moving target, and the material has changed quite a lot since the course was first created. The current material also moves a little too quickly. For both of those reasons, I'm hoping to update the course myself. Unfortunately, I probably won't be able to update it until very late this year or early next year. Sorry about that! I'm consumed with other upcoming projects that are still too early in development to put on our Roadmap. :)

As a more general note: Allison has moved on from Treehouse to pursue a career in freelance design and we wish her the best! If you have any trouble with her content, just ping me in the forum and I'll help as soon as I can. :)

I agree, just started this section myself and was wondering why buttons suddenly appear on the contact us link. It turns out after going through the project code that the button on that link is created in a different way than was previously taught as well, either that or I missed something.

Arrghh... See! See! I'm not crazy. Just because there are a couple voices in my head doesn't mean something's not jiving with the code. ...in Denmark! ...unless Dave can hear the voices in my head too.

And thanks for the response Nick. I think I'll just skip this one Adaptive/Responsive section, even though it is an important one, and hit it up later or elsewhere once I have my knowledge base built up.

Ronando Long - Hopefully this diagram clears up the differences between adaptive and responsive design

Thanks James. That helps a bit.

I think I need to rethink the definition of both AWD vs RWD.

In AWD it is device defined breakpoints. The con is that you can only target so many different devices before your code gets overloaded and complicated. There is way too many device sizes nowadays.

Whereas...

In RWD it is content defined breakpoints. You start with the a site in it's simplest form and starting from a small mobile device setting, you start expanding the site till it starts looking bad, add a breakpoint and style it till it looks good again. You then continue on all the way up to your largest screen size that you want to design for. This is the Mobile First method and is designed in the browser.

Please tell me if I'm on the right path for those who who the difference.

lol Ron,I was hearing voices but they were mainly cursing at the video !!!

Hi Amy Coulson,

Sorry for the slow reply. Yes, what you're saying is correct. Keep in mind that this is all fairly new terminology, so the definitions may vary depending on the source. :)