Hi, Wondering what the target breakpoints for devices should be? or what are the common sizes that are being used today?
Should we target the smallest or largest devices?
No you should target all devices.
There are just too many devices with various sizes and resolutions ( over a 1000 I believe) so there is no point in targeting any specific one.
You should create breakpoints based on the needs of your design instead. Open and close the width of your browser and if your design breaks or looks awkward then throw in a breakpoint just before that happens.
If you create a fluid design then a few well chosen breakpoints will cater for all devices now and in the future.
You need to ensure your page scales down to 320px nicely as that is about the smallest you need to go unless you are building for an Apple Watch or similar.
The largest size will depend on your design and how you have created it so that lines of text are not too wide to scan easily.
5 Likes
I see. What if there device sizes that are similar like here - https://mediag.com/blog/popular-screen-resolutions-designing-for-all/ there is a 360x640 vs a 375x667. Should I target the smallest in this case?
No. The point is to forget about devices and their screen sizes, it’s pointless.
You should test on the smallest size, that being 320px as Paul mentioned.
But breakpoints (should) have no relation to actual device screen sizes.
Put breakpoints where your design needs them, putting them at a particular device screen size (or 1px above or below) is nonsense.
Then so long as the design works on the smallest screen (320px) and a very big screen (a max-width somehwere is a good idea), you can sleep easy knowing that you have all bases covered and you don’t have to worry about the thousands of different devices out there, in either orientation, then the new one that came out this week, and the one that’s coming out next week, etc, etc…into infinity
3 Likes
I see thanks
To give a practical but hypothetical example. This is in “desktop first” as it’s simpler to illutrate that way.
You make a page design that look good on desktop, but you keep it all fluid.
Then test in the browser by moving the side inward to narrow, you may prefer the “responsive design mode” that browsers have in their tools, as they show the size in pixels which can be useful in determining breakpoints.
At about 800px the horizontal menu bar is getting tight, there is no longer enough width for the items.
So you throw in a media query to switch to a “hamburger”. That may not be with width of whatever version of iPad, but it’s the width where your design needs to change.
Going narrower, at about 550px you see the photos you have floated on the right squeezing the text too tight to the left of them. Add an other query there to remove the float and centre them.
Keep testing and refining until it works at any size from the largest to the smallest.
Of course you don’t want a million media queries, so you probably don’t want just one change at each breakpoint, so you may want to add other changes you require at the appropriate size as defined by your particular design.
Again the sizes I metion are purely hypothetical, not a guide for sizes to have breakpoints. The breakpoits are governed by your design alone. Put them where they are required.
4 Likes
Also good to hear this straight from devs but im just a bit bummed out that most of the research I made did touch any of the these points you guys did. 
ok as long as it looks good and its more about testing? even though I won’t have lets say a 768px breakpoint…on my any ipad the 800px will look good?..
Why would a breakpoint have to match a screen size?
If it works on a very big screen and it works on a very small screen and also works on anything inbetween, then you don’t have to even think about all the devices.
I pity the fool who adds a media query and re-arranges the design at the width of every device ever made, then does the same again for them in portrait orientation.
It’s so much easier when you stop thinking about devices and concentrate on your design and keeping it fluid enough to fit any size.
If it looks good and it functions, then it is good.
4 Likes
@SamA74 @PaulOB so I do agree with what you guys are saying but got a argument from my team on these statements saying that what if it looks bad on certain screen size if your not using a certain breakpoint like 768px and instead use 800px there might be extra space or things getting cut off.
So their argument is basically why use random breakpoint numbers
But then thats like saying how would you know that the design is going to look good in 768px right?
Wrong. 
You and your team really should test the method that
@PaulOB and @SamA74 have suggested. 
If it was flawed, as your team believe, then I can assure
you that they would not have suggested it. 
You and your team should find a page that is not responsive
and then practice making it so.
Then practice some more until you become perfectly proficient. 
I would suggest, though, that you set the break points in em
rather px units.
For example…
@media ( max-width: 41em ) {
/* code here */
}
coothead
4 Likes
Let me try to rephrase that quote.
“Your team believes that one should use certain pre-established breakpoint values. Whereas, we argue that one should pick breakpoint values that work best with the specific page design (you referred to them as “random” rather than optimized for the design), because as you challenged, how would one know that the design will look good at predefined breakpoints.”
I believe that your understanding of everyone’s arguments is accurate, just awkwardly stated.
You’ve been given sound advice here. Your team’s method will probably work - the page(s) should fit on all screens - but it is unlikely to be optimal. Some or most of the transitions may be awkwardly timed which will look amateurish.
I would like to recommend that you click the magnifying glass icon in the menu at the top of this page and search for “breakpoints”. You will find that it is a old subject with lots of reruns… it comes up quite often. You should find that the advice and rationale given here regarding breakpoints has been consistent for a good number of years. 
4 Likes
You are fixated on device sizes when in essence devices are all sizes.
If you optimize for 768px only then what about devices that are 770px or 766px?
Are you going to do media queries for every different device known to man or that might exist on the future?
Chasing devices is futile! Concentrate on the needs of your design and create fluid sites that adapt to every single pixel. We have already explained how this is done and it’s so much easier than the other options.
Forget about devices or imagine that there is a device at every pixel size from 320px up to 5000px.
5 Likes
ok thanks all
1 Like
These are not random numbers. As described in my example scenario, they are carefully chosen numbers specific to the needs of the actual design.
Choosing a width of one arbitary device from a list of hundreds is a lot more like random.
Then all bets are off for it being sympathetic to your particular design, since it wasn’t chosen on that basis.
I would mostly agree with that. I mentioned pixels in my example just to keep things simple and not detract form the principle being conveyed.
But I do mostly use em values for media queries. I wil use px values if the query relates to pixel based content, ie, images. But for the most part I’m dealing with text based content, so em makes more sense.
I beleive it is better for accessibility. When a user with less than pefect eyesight zooms or increases their browser font size, the layout can handle it gracefully.
6 Likes
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.