I’m chugging along with a Russ W tutorial about building responsive websites. But my question is, “How do do you know what pixel widths devices are in the first place”, Is this a good guide:
And no i have no affiliation with the referenced article.
Here is the key: Forget about devices and what width screens they have. Make break points where your design needs them.
The only screen size you need consider is the minimum you need to fit on, which is generally 320px. That does not mean put a break point there, it’s just what you need to test the design down to.
I agree with doing the “make viewport narrower” approach (design for desktop first) though some prefer the “make viewport wider” approach (design for mobile first). It’s only a matter of preference and what works better for you.
Basically I design so it looks good for desktop. Then I narrow the viewport. When I see something cramped or sticking out of its container element where resizing, wrapping or overflow is not acceptable, that’s where I put a break point. Then I continue to narrow the viewport until it breaks the design again. Rinse repeat until it gets down to the narrowest probable width.
potential dumb question… “When you adjust your viewport and see you need to make a breakpoint how do you know what the pixel width is at any given point?” Put another way if i adjust a viwport ive no idea what the pixel width is, do you need a plug in or something for the browser?
I have an on-screen ruler that tells me the pixel width of the browser window. That gets me pretty close. But all breakpoints are not based on pixel widths… some are based on em or rem width which is helpful if users are apt to zoom the contents larger than the default design. In the end, whatever units are used, I use trial and error as the final test.