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
rajbee
6,657 PointsWhat are the disadvantages of using media queries ?
Are there any disadvantages ? If yes, then how do you mitigate them ?
4 Answers
Fábio Tavares da Costa
11,985 PointsIf correctly applied, none.
Ted Sumner
Courses Plus Student 17,967 PointsThere is no disadvantage to using media queries. It is how you make a modern, responsive web page. I have no idea how you could improve/use smarter styling as referred to by Pooria to accomplish what you can with media queries.
Properly designed sites actually improve performance on mobile devices based on the media queries.
Ted Sumner
Courses Plus Student 17,967 PointsPooria, while you are correct regarding the size of the text box, you do not necessarily want a one column page on a 24 inch monitor. 3 columns may be more appropriate for your design. But three columns will not work on the iPhone 5s because you either will not be able to see them because they are too small, or you will have to scroll over the side to see everything.
Proper design of the site starts with small phone size screens. Then you add to it as the screen gets larger, including adding large background images. The images are not downloaded on small sizes because the phone does not look at the CSS behind the media query for larger sizes. But when you have a larger size screen, like a laptop or desktop, it downloads the world's best image that you have on your site because the computer is on WiFi or hard connection internet and can support the bandwidth and speed. This is what is meant by mobile first design and it is only accomplished by media queries.
Pooria Rashidi
9,740 PointsYes, I realize that I was confusing media queries with breakpoints as if they were the same thing. Thanks for your explanation.
Ted Sumner
Courses Plus Student 17,967 PointsYou are welcome. This is a place to have these discussions and we all learn from them every day. I always forget about vh and vw as units. Thank you for reminding me.
Pooria Rashidi
9,740 PointsI would say that there's a disadvantage when you use media queries on something that could have been made responsive with smarter use of CSS styling. In such a case you could end up with much bulkier code than you need.
Ted Sumner
Courses Plus Student 17,967 PointsWould you please elaborate and give examples of what you are talking about because I have no idea how to otherwise style a site that would make the site responsive to screen size and still display appropriately on all sizes of screens.
Fábio Tavares da Costa
11,985 PointsMy understanding is that CSS rules without queries to adjust according to the view port size are interpreted as media: "all" by browsers.
What smarter use of CSS styling means?
Because authors of responsive frameworks were not smart enough to cook it, and I don't have a clue of what it is, like Ted Sumner , I'd like to see an example.
We have wide screens, phones and endless devices in between. It creates the context that triggered the invention of @media-queries. Resources as relative units, properties to control flux and minimum and maximum dimensions already existed.
Newer techniques, like flex-box, enhance the CSS tool box, however, when the flux of elements is more complex, queries gain a more important role too.
Pooria Rashidi
9,740 PointsHey guys, sorry for the confusion, let me give an example of what I mean:
Let's say you have some text that you want to scale with the viewport size. You could set many breakpoints with media queries that resize your text, or you could just use vw or vh once and you're set for all possible viewport sizes.
Forgive me if this is blatantly wrong, I'm not an expert on css, this is just what I've come to understand so far.
Fábio Tavares da Costa
11,985 PointsFábio Tavares da Costa
11,985 PointsNice,
This post ended up gathering some good tips.
As correctly applied is quite vague, let me add that what I had in mind was mainly well used break points.
O like The Open Framework. It is clear and efficient.
Ted Sumner
Courses Plus Student 17,967 PointsTed Sumner
Courses Plus Student 17,967 PointsCorrectly applied means that you start your base design for a small screen. Then you use media queries to add to the design. That saves mobile phone bandwidth and speeds them up while allowing for your full, cool site on devices more capable of handling it.
Fábio Tavares da Costa
11,985 PointsFábio Tavares da Costa
11,985 PointsYeah, Ted Sumner's explanation is better as it targets the process of scaling through different devices.
However mobile first and responsive design are different topics. Mobile first is straight forward. Devices like phones are the primary target, therefore have priority.
If my main target are 14 and up 17 inches devices. I consider start with regular web sizes and than scale up and down, while preserving the content as much as possible, to be better.
I pointed guides for sizes that I use to consult. The Open Frameworks follows Bootstrap.
Window Resizer is quite useful, Foundation's queries are at http://foundation.zurb.com/docs/media-queries.html, and similar sources like Semantics and HTML5 Boiler Plate.
Ted Sumner
Courses Plus Student 17,967 PointsTed Sumner
Courses Plus Student 17,967 PointsEven if the main target is 14-17 and up inch screens, I would still design mobile first. At least 1/2 of all internet traffic is from mobile devices now from what I understand. Clearly spend more time on the target size, but don't forget the mobile users. The only exception that I can think of is if you are designing for a known population and can define the devices they will use, like an in-house system.
Fábio Tavares da Costa
11,985 PointsFábio Tavares da Costa
11,985 PointsI would keep the focus on the primary group. All Internet traffic is a number difficult, even to dimension, any generous percentage of this total addressed as secondary feels like a mistake to me.
Naturally, as occurs with images or full systems, and Web sites or applications are systems, extract the smaller from greater works better.
Most characteristics of small sizes are about limitations, like single column design. Others, like single-hand navigation, are specific, and need to be addressed as such.
A coherent design keep its characteristics, but first these elements need to exist. If the bigger sizes explore enough options among what is available in its own context, initial and original are not likely to remain as synonymous.