Break Point Size

All WYSIWYG Web Builder support issues that are not covered in the forums below.
Forum rules
IMPORTANT NOTE!!

DO YOU HAVE A QUESTION OR PROBLEM AND WANT QUICK HELP?
THEN PLEASE SHARE A "DEMO" PROJECT.



PLEASE READ THE FORUM RULES BEFORE YOU POST:
http://www.wysiwygwebbuilder.com/forum/viewtopic.php?f=12&t=1901

MUST READ:
http://www.wysiwygwebbuilder.com/getting_started.html
WYSIWYG Web Builder FAQ
Post Reply
Bazza2
 
 
Posts: 43
Joined: Mon Apr 25, 2016 8:34 am

Break Point Size

Post by 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
User avatar
Bluesman
 
 
Posts: 1115
Joined: Mon Feb 01, 2016 5:43 pm
Location: Sweden
Contact:

Re: Break Point Size

Post by Bluesman »

Bazza2 wrote: Tue May 30, 2023 9:44 pm 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.
"Make My Day"

See my Website
wwonderfull
 
 
Posts: 1255
Joined: Fri Aug 21, 2020 8:27 am

Re: Break Point Size

Post by 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.
User avatar
crispy68
 
 
Posts: 2737
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Break Point Size

Post by 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
 
 
Posts: 287
Joined: Tue May 02, 2017 11:56 pm
Location: British Columbia, Canada

Re: Break Point Size

Post by 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!
User avatar
Rob
 
 
Posts: 179
Joined: Sun Jan 29, 2012 2:54 pm
Location: MN
Contact:

Re: Break Point Size

Post by 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?
The Website Guy - MN
Small Business Web Design
MGD4me
 
 
Posts: 287
Joined: Tue May 02, 2017 11:56 pm
Location: British Columbia, Canada

Re: Break Point Size

Post by 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
User avatar
crispy68
 
 
Posts: 2737
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Break Point Size

Post by 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.
User avatar
Rob
 
 
Posts: 179
Joined: Sun Jan 29, 2012 2:54 pm
Location: MN
Contact:

Re: Break Point Size

Post by 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. :-)
The Website Guy - MN
Small Business Web Design
alan_sh
 
 
Posts: 1680
Joined: Tue Jan 01, 2019 5:50 pm

Re: Break Point Size

Post by alan_sh »

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

Alan
wwonderfull
 
 
Posts: 1255
Joined: Fri Aug 21, 2020 8:27 am

Re: Break Point Size

Post by wwonderfull »

alan_sh wrote: Fri Jun 02, 2023 8:20 am Personally, I try not to use breakpoints at all. I use layout grids.

Alan
Thats the way I do it too 👍
User avatar
jerryco
 
 
Posts: 826
Joined: Fri Mar 27, 2009 2:42 pm
Location: Purmerend, Holland

Re: Break Point Size

Post by jerryco »

wwonderfull wrote: Fri Jun 02, 2023 10:19 am
alan_sh wrote: Fri Jun 02, 2023 8:20 am 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!
// Love is the acceptance of nothing / Account age is no guarantee of efficiency ;-) ->

Above, Beyond, and @wwonderfull! <- Genuinely helps you with a powered up site that counts! Four Times Excellence!
Bazza2
 
 
Posts: 43
Joined: Mon Apr 25, 2016 8:34 am

Re: Break Point Size

Post by 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
User avatar
onlye
 
 
Posts: 366
Joined: Sun Jun 17, 2018 12:36 am
Location: Gluckstadt, MS USA
Contact:

Re: Break Point Size

Post by onlye »

Bazza2 wrote: Fri Jun 02, 2023 9:43 pm 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
onlye
Gluckstadt, MS USA
Post Reply