Break Point Size

[Bazza2]

I am just refreshing my site after many years of good service.

I had the small break point at 320 but my thinking is that I phones have larger screens today and most professionals
carry larger phones.

It would certainly help my web build to be working within a larger size page in the small break point.

Any thoughts about how these new larger modern I phones have effected the size of the small break point and am I on the right track thinking to make it now 480

Thanks

[Bluesman]

I am just refreshing my site after many years of good service.

I had the small break point at 320 but my thinking is that I phones have larger screens today and most professionals
carry larger phones.

It would certainly help my web build to be working within a larger size page in the small break point.

Any thoughts about how these new larger modern I phones have effected the size of the small break point and am I on the right track thinking to make it now 480

Thanks

Hi Bazza2. Depends on what category you are publishing the site for... But if you think the majority have sizes at 480 and more, OK. But there are still some users on smaller devices. Most of my sites were I use breakpoints I put 340 as smallest.
Another angle is if you use layout grids and flexgrids then you can make the 480 more flexible.

[wwonderfull]

For tablet larger phones from 640 to 768 can be a universal breakpoint. And if you target modern phones only and not tablets or larger screen devices then 480 is fair enough.

[crispy68]

I personally use 360px as my minimum as there are many devices that have a 360px viewport size. If you start at 480px you will leave a large amount of mobile devices off the list and may have issues with your site looking the best on them.

[MGD4me]

I personally use 360px as my minimum

Same here... up until about 6 months ago, I maintained my minimum breakpoint at 320, but there are fewer and fewer 'old' phones in use that require that smaller screen size. So for now, 360 is the "new small" for me. Even at 360px, I find it difficult to cram what I need in that small viewport.

And don't forget, a user can always rotate their phone sideways, and view the web page in Landscape mode, which is MUCH wider!

[Rob]

Boy, I must really over do it then. I use 1900, 1500, 1260, for desktop / laptop,
1024 / 768, for tablet,
and 480 / 320 for mobile with layout grids / flexbox.

Next year with WB19, I plan to add 2600.

Overkill?

Side question - do you like to activate the breakpoint when it is larger or smaller than the device width?

[MGD4me]

Overkill?

As the website designer, you are free to create as many (or, few) breakpoints as you wish, obviously.

Personally, I "ignore" the super-wide screens. My default breakpoint will show some unfilled gaps on each side. But, by including a background image set to 100%, at least there is something to occupy those blank areas.

The real issue for me, is that I find it too easy to try and fill the real estate of a wide viewport, which then makes it difficult to try and 'squeeze' everything into a small 'container' like 320, or 360px, without it resulting in a very long skinny roll of toilet paper. Okay, I exaggerate, but you get the idea...

Just my $.02

[crispy68]

@Rob,

Ultimately, your design will dictate what breakpoints you need. I wouldn't add one to just add one. Typically, a breakpoint is added because your design dictates a change in layout (ex: change fonts sizes, change orientation of a layout grid, orientation in a flex container, a card column is too skinny, etc).

So for example, your default is 1900. If at the 1500px point, does your design layout look bad and you need to change something to make it look good at 1500px width? If not, then don't add it. If it looks perfectly fine all the way down to 1260px then you don't need a 1500px BP. Same goes for each BP thereafter. The more complex the layout the better chance you may need more breakpoints.

My typical breakpoints setup is: 1900 (default), 1346, 1024, 768, 480, 360. (I subtract 20px for default and 1366px breakpoints to account for the scrollbar on desktops).

I find most of my layout changes occur less than 1024px. When you get into smaller sizes, there is a lot more layout changes taking place to accommodate the screen sizes and make things look good on mobiles.

[Rob]

@Crispy

I also subtract 20px for a scroll bar. Great minds think alike. For the larger breakpoints, I've enlarged the font so it is not so small on a larger screen. That helps fill the space so it looks "good" on larger screens as well as the small ones.

[alan_sh]

Personally, I try not to use breakpoints at all. I use layout grids.

Alan

[wwonderfull]

Personally, I try not to use breakpoints at all. I use layout grids.

Alan

Thats the way I do it too

[jerryco]

Personally, I try not to use breakpoints at all. I use layout grids.

Alan

Thats the way I do it too

And very well you do it!

[Bazza2]

Wow, thanks for all the replies.
I think I will stick with 3 break points and leave the break point sizes as is. Saves having to change all the break point in the pages that are already existing.

I had a look at Lay out grids originally but my site is rather complex and I get the feeling that the layout grid would suit a simple build with a few pages but would not suit as I said something complex.

Again thanks all

[onlye]

I had a look at Lay out grids originally but my site is rather complex and I get the feeling that the layout grid would suit a simple build with a few pages but would not suit as I said something complex.

Are you using absolute / fixed layouts instead of any containers?
Every time I think layout grids would prohibit creative design crispy68 teaches me something new. I have used Flex Grid a few times when I wanted a column to span several rows. Aside from those everything I have developed uses Layout Grids