Relationship between breakpoints

Questions related to the Responsive Web Design tools of WYSIWYG Web Builder.
Forum rules
PLEASE READ THE FORUM RULES BEFORE YOU POST:
viewtopic.php?f=12&t=1901

MUST READ:
http://www.wysiwygwebbuilder.com/respon ... esign.html
Please read this first before posting any questions! Also check out the example project to get an idea how the RWD concept works.

Responsive Web Design FAQ:
http://wysiwygwebbuilder.com/forum/view ... 10&t=63817
Post Reply
Trevor Johnson
 
 
Posts: 70
Joined: Sun Dec 21, 2014 6:05 pm

Relationship between breakpoints

Post by Trevor Johnson »

Hi All,
I'm changing a site to having different layouts for different breakpoints and using megamenu. If I have 3 versions, default, 600px and 320px I ideally want the menu to change from hamburger to buttons at about 500px.
Also I noticed that a lot of my layout grids have different breakpoint numbers in the layout grid properties. So I have a breakpoint in megamenu for when it 'snaps', differing breakpionts in layout grids, and three breakpoints in 'Manage breakpoints' (including default).
What is the relationship between all these breakpoints please? Do they all have to be the same, or does one over-ride another etc.?
Should all the layout grids be the same size as the breakpoint version that they are in? Sorry it's a lot of questions but it's all the same one really, what is the relationship, if any?
Thanks.
User avatar
crispy68
 
 
Posts: 2729
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Relationship between breakpoints

Post by crispy68 »

The answer is sort of the same for all but I will break it down:

Normal breakpoints - You should choose appropriate breakpoints when your layout 'break's. In other words, if at a certain point your layout is too squished, images too small, etc. and doesn't look good you add a breakpoint. This will allow you to rearrange objects to look better. You will typically have to use more breakpoints if you are building a 'fixed layout' versus a 'floating layout'. Breakpoints can also be used to try and make sure your site looks good on as many devices as possible. All devices (from desktop to tablet to phones) have different widths and there is no foolproof way of targeting every device but many are similar. There have been many a discussion on the forum as to what are the optimum breakpoints but there are a few sites you can check out to see what a majority of device widths are and come up with your own conclusion:

http://stefhatcher.com/projects/device-dimensions/

http://screensiz.es/

Layout grid - The bp in a layout grid is when the grid itself switches from horizontal to vertical (stacked) mode. You will want to choose the breakpoint at which the layout is too narrow horizontally and needs to flip to vertical. Ex: lets say you have 3 images in a row. At some point the images will become too small to see or squished horizontally that you need it to flip to vertical to look good. Using layout grids typically will reduce the number of breakpoints you may need to use since you are creating a more fluid layout where things adjust automatically.

Mega Menu - The bp for this is essentially the same as the layout grid. It is at the point you want the menu to flip from a horizontal to a hamburger style. The breakpoint you choose should be when it needs to do this. It may or may not match what you have breakpoint wise for your layout grid or normal breakpoints as it truly depends on how many menu buttons you have.
Trevor Johnson
 
 
Posts: 70
Joined: Sun Dec 21, 2014 6:05 pm

Re: Relationship between breakpoints

Post by Trevor Johnson »

Thank you, Crispy68 for an excellent explanation. I understand better now and I'll look at the links.
Trevor Johnson
 
 
Posts: 70
Joined: Sun Dec 21, 2014 6:05 pm

Re: Relationship between breakpoints

Post by Trevor Johnson »

I'm still having problems understanding breakpoints. I have added a 320px breakpoint to my php contact page, set (in desperation) everything to 320px, the layout grids, responsive menu and anything else I can find. I've uploaded it (php) and going down in size, it breaks at about 960px. I've tried in a couple of browsers too.
https://thebritishschoollanzarote.com/page3.php
What have I done wrong?
User avatar
crispy68
 
 
Posts: 2729
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Relationship between breakpoints

Post by crispy68 »

It would be best to provide a copy of your project file for download so at can see all your settings.
Trevor Johnson
 
 
Posts: 70
Joined: Sun Dec 21, 2014 6:05 pm

Re: Relationship between breakpoints

Post by Trevor Johnson »

I've tried to copy the page and paste it into a new project but I only get the default page, how do I copy both versions without duplicating the whole lot and deleting 177 pages, can you help?
Post Reply