Break point guide for responsive design

HI Guys,

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.

Thanks,
David

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.

9 Likes

Hi there Nightwing,

simply use your eyes to determine the @media points of change. :winky:

coothead

3 Likes

Now I actually read the article you linked, you only need look as far as this point down the page:-

Before you start copying and pasting below, read why you don’t need device specific viewports.

Follow the link, and don’t even bother looking at the stuff that is after it on the page. :see_no_evil:

5 Likes

Absolutely, I spent a good few hours today on a site build making my browser narrower and wider and adjusting my CSS to get the best content fit.

5 Likes

Thanks everyone, i get it css breakpoints for specific devices is yesterdays news :slight_smile:

2 Likes

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.

5 Likes

Grazie mille :slight_smile:

Hi M,

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?

Thanks,
David

1 Like

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.

1 Like

If you have chrome devtools open the width and height of the window is written at the top of the screen as you resize.

There are more sophisticated plugins I’m sure but the above comes as standard with devtools in chrome.

5 Likes

Thank you, yes that works :slight_smile:

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.