Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Chris Mitchell
12,719 PointsMobile First Layout, teachers thoughts
I have come across the topic of only adding media queries when the content breaks or starts to look rubbish instead of using "popular default breakpoints"
Changing for when content breaks could lead to lots of media queries but I have also read that this isnt a huge problem but im not sure.
Could Guil give us his thoughts on this please?
Students + mods are also welcome to express their thougths too :)
Chris Mitchell
12,719 PointsThankyou :)
Jason Anello
Courses Plus Student 94,610 PointsA link that's a little more on topic: (in reference to an offtopic link I gave further down)
http://mediaqueri.es/
This is a site that showcases responsive websites. You could look at the media queries that are used on some of these sites to get a better idea of what other people are doing and to see if more people are using "default popular breakpoints" or choosing their own breakpoints based on design/content.
6 Answers
Kevin Lozandier
Courses Plus Student 53,747 PointsIt's for video purposes and for the sake of simplicity. When you design mobile-first, you ideally create your breakpoints organically as a result of the content needing to be representing differently to best serve its purpose and ideal state; the design needing to be adjusted to provide a better experience to users, or other related reasons.
Kevin Lozandier
Courses Plus Student 53,747 PointsHi, Chris Mitchell:
Have you taken the CSS Layout Techniques course? It addresses this exact topic and much more...
To explicitly answer your questions, designing mobile first makes things a lot of people involved with an application or web app because it forces you to prioritizes what most important towards the purpose of the app from the very beginning, and makes it easier to not over-engineer your layout from beginning when it comes to CSS styling.
Chris Mitchell
12,719 PointsHi Kevin,
Im currently doing the course at the moment and I wanted to ask because in the video he is using the 768px width.... now i understand its most likely just for the video purposes but since this is about layouts in particular, then it would be great to hear thoughts on the OP (original post)
Chris Mitchell
12,719 PointsThanks, I just wanted to clear any confusion or doubts for myself as well as others!
Jason Anello
Courses Plus Student 94,610 PointsI seem to hear less advocating for content defined breakpoints than device defined breakpoints. Whenever you see code there seems to be comments like "iPhone portrait" for example. Current defaults are only good for the current crop of devices that we have right now. We don't know what's coming out and what the screen sizes will be.
A year or two back I had jokingly told somebody that the 7" smartphone market will someday overtake the 7" tablet market. Maybe that's not such a joke anymore. Phones are getting big.
Before media queries and responsive design became popular we had php device detection scripts which would try to determine if the device was a mobile device and then redirect to a dedicated mobile version of the site. The problem is that you have to maintain this list of devices.
We should be moving away from device detection and be using feature detection instead. My opinion is that using the current "popular default breakpoints" based on current devices is another form of device detection.
Kevin Lozandier
Courses Plus Student 53,747 PointsHi, Jason Anello. Essentially, a strategy focusing on breakpoints based on particular devices is no longer a strategy towards creating a responsive website but an adaptive one.
It's very important to understand the difference.
There's certainly perhaps reasons that may require you do this as a result of the limitations of content of tremendous value of the app or web site being what it is not being flexible enough to warrant a responsive site.
Jason Anello
Courses Plus Student 94,610 PointsHi Kevin Lozandier ,
Correct me if I'm wrong but I thought that "adaptive design" was a renaming of the term "progressive enhancement". Which I thought was about providing a basic experience accessible to all and then progressively enhancing that experience for more capable devices. Basically, the opposite of graceful degradation. I was not aware though that adaptive techniques targeted specific devices.
What I was trying to get at in my answer is that I've seen some responsive templates/boilerplates that have a bunch of media queries already set up for you but the breakpoints are specific to certain devices. They seem to be encouraging people to write media queries for specific devices and not what the design/content calls for. I was only trying to say that I think we need to move away from that.
By comparison, html5 boilerplate does not seem to do this. The css file only has a few media queries in it and no specific devices are mentioned in comments.
Chris Mitchell
12,719 PointsGood explanation Jason Anello
I like the sound of feature detection and will look into it more!
Jason Anello
Courses Plus Student 94,610 PointsI'm straying off topic here but http://modernizr.com/ would be an example of something that implements feature detection and not device detection.
James Barnett
39,199 PointsJames Barnett
39,199 PointsChris Mitchell - If you want to attract the attention of a particular person you can tag them so they will be notified of the thread.
To tag someone type
@, then start typing their name, and choose their name from the drop down.