Hi Guys,
I have little confusion about media queries. I have read many articles about media queries and how to use them some says that when you go for responsive design better to use start from small device then go to bigger size.
Is this a right approach
Itās quite a good approach, but thereās no ārightā way, and many people find it easier to work the other way around. Just experiment a bit and see what works for you. 
1 Like
No donāt start from any device just cater for all devices or no devices in particular. What I mean by this is donāt go chasing devices and device widths.
Create a layout that works across the whole range of your browser. Close the window to about 320px and then open it up slowly to as wide as it will go. If your design looks bad at any point then throw in a media query and fix it. If you do this across the whole width range you will collect all devices without even knowing they existed.
With this method a few well chosen media queries will do wonders. Just concentrate on the design and its the design that should dictate the breakpoint and not some imaginary device (there are thousands of them).
As to whether you use min-width or max-width media queries it doesnāt really matter these days as the āmobile firstā criteria was mainly for devices that didnāt support media queries and we have moved on since then.
I prefer to start with the desktop layout approach and then use max-width media queries to make the design fit on smaller widths but in the end its just 6 of one and half a doxen of the other.
The main thing is not to think in terms of devices but create a flexible and responsive layout that fits all devices.
2 Likes
No donāt start from any device just cater for all devices or no devices in particular. What I mean by this is donāt go chasing devices and device widths.
I donāt know, I find it perfectly reasonable to come up with a starting figure from whatever the smallest width popular device isā¦ in the past I think people often would start out from the iPhone width since most others were larger. You have to start somewhere, as if it gets too small itās no longer usable responsive or not.
Now, if OP wants to hop from device size to device size with their media queries, I feel like that would be catering too much to devices. But if theyāre just using one as a starting āsmallestā width and then increasing generally from there, I think thatās perfectly fine, as opposed to an arbitrary āabout 320pxā - even though it very well might be that width that they start at 
Thatās not what Paul was saying though. He never said that you canāt LOOK at the devices, but heās just saying that the devices themselves should be out of hte picture. You shouldnāt try and code specifically for specific devices. Make a generalized media query to target 99.9% of mobile devices and go from there. Same for tablets.
You and Paul seem to be agreeing with each other in core principles but I do believe you just didnāt understand him.
As Ryan said you are saying much the same as me
I usually assume 320px is the smallest as there are not many of the old 240px widths around these days and then I just go up from there. I donāt cater for any other specific widths though and just do the old browser drag routine and make sure the design works across the range. 
I understand clearly what you meant - what I was concerned with was your disagreement with OP
start from small device then go to bigger size.
No donāt start from any device just cater for all devices or no devices in particular.
Seems to be disagreement for disagreementās sake, since he seems to be generally saying what Iām saying, which is apparently also what youāre saying
And yea, I assume 320 too, but itās because thatās the smallest common usage phone width I know of - which is essentially what OP is saying - starts with the smallest device and then goes bigger.
I usually assume 320px is the smallest as there are not many of the old 240px widths around these days and then I just go up from there. I donāt cater for any other specific widths though and just do the old browser drag routine and make sure the design works across the range. smile
Me tooā¦ I usually donāt bother looking on an actual phone of whatever type until nearer to the end, as if itās responsive, in theory it should work out ok unless the phone browser is being a littleā¦ annoying thing? 
Iāve always had a sense that the point of the āmobile firstā approach is not to cater so much for the narrowest devices first, but to cater for the āweakestā in a sense. You make sure that 1) your layout will work in a linear fashion for narrow screens and 2) for older browsers that donāt understand media queries, like IE8. Then you build from there by spreading elements out into columns etc. via media queries for more capable browsers.
Itās just one way of doing things, and I havenāt done a lot of it myselfāalthough these days I favor a layout that is one column at any width, rendering the whole issue largely redundant. I just do what @PaulOB describes of widening and narrowing the browser to make sure everything is coping at all widths.
Isnāt it so much easier with just one column and no preset widths
Life should be that easy all the timeā¦
2 Likes
No because a column can get too wide. If a column of text is more than about 35em or so wide you lose track of which line you just read in order to start reading the next line when you return to the left of the column. If the viewport is wider than that then you either need multiple columns or you end up with huge amounts of whitespace.
You can set a max-width to cover that, which is what I do. Thatās not strictly setting a width.
1 Like
I know - the point I was trying to make is that if you do that then when the width of the viewport is a lot wider than that then a single column layout will have a lot of whitespace.
Yes, a lot of people seem to hate that, but it really doesnāt bother me at allāeven on my wide screen. I prefer to read down a single column than have to scan all over the screen. Personal taste, though.
2 Likes
Yes, I think I was trying to be too clever for my own good and maybe just confused things. 
I simply meant that you should be mostly device agnostic but of course you do need to have a starting point. I assumed (maybe incorrectly) that the OP meant start at small devices and then run through each of the other bigger devices but on re-reading the original post it doesnāt actually say that so I probably got the wrong end of the stick.
@PaulOB - I hadnāt even though of reading it that way, very well probable that youāre correct. Oh well, we all agree anyway
@felgall - I think thatās pretty specific advice you have for a seemingly inappropriately large amount of possible scenarios. Iāve seen plenty of single column sites that didnāt have legibility problems at allā¦ whereas some definitely do. And this is a bit of a subjective-opinion debate over what was meant to be a light hearted comment, at that
I definitely do hate the single columns that are solid text, that expand into perpetuity. Weāre on the same page there.
@ralphm - yeah, the whitespace doesnāt look bad at all on say minimal blog layouts and suchā¦ I rather like it. As you say, personal taste though. I suppose what I like someone else will be repulsed by
Often I like to bump up the text size to fill the whole screen anyway. Then I can lean back and read at leisure. It works better with a single column.
Weāre expected to be PC and not make age-ist comments, yes.
Wellā¦ people of all ages have eyesight issues, right?
Anyway, the true reason for one-column designs now comes outā¦
Thatās what was referring to. Usability studies have shown that once a column is wider than about 35em that the text becomes unreadable. Note that this is a width related to the size of the text only - the larger the text the wider the column can be and still be readable. It is not specific advice at all as while the exact point that a single column of text will become unreadable for people (it may be 32em for some while others can just about manage 38em) it is a fact that once lines of text get too long people canāt easily tell where the next line starts when they go back to the left.
There are all sorts of ways around this - to leave the rest of the screen as whitespace or all sorts of ways of slotting in extra columns when the screen is wide enough.
The only point I was making was that if you stick with a single column then eventually you will need to do something - even if it is to leave the rest of the page as whitespace.
I once had someone in one of my classes who has 16 monitors side by side and can open a single browser window across all of them. This gives a viewport width of over 30000 pixels.With a font size of 16px = 1em you get a maximum readable column width of about 560 pixels so even on a single screen the whitespace needed might be twice as much as the text - unless you make the text a lot bigger or add extra columns of content to make use of the space. If this person I knew were to bump up the font size to fill his browser it would be about 1000px and thereād be just about enough space on the monitors for one line of text. Obviously he could drop the font size to about 500px, put up with about eight screen widths of whitespace and see two lines of text at a time.
The only point I was making was that if you stick with a single column then eventually you will need to do something - even if it is to leave the rest of the page as whitespace.
Yep yep
I once had someone in one of my classes who has 16 monitors side by side and can open a single browser window across all of them. This gives a viewport width of over 30000 pixels.With a font size of 16px = 1em you get a maximum readable column width of about 560 pixels so even on a single screen the whitespace needed might be twice as much as the text - unless you make the text a lot bigger or add extra columns of content to make use of the space. If this person I knew were to bump up the font size to fill his browser it would be about 1000px and thereād be just about enough space on the monitors for one line of text. Obviously he could drop the font size to about 500px, put up with about eight screen widths of whitespace and see two lines of text at a time.
Niceā¦ haha