Breakpoints and Max Width - Post ID...

User 2818159 Photo


Registered User
60 posts

By default Foundations has 2 breakpoints (640 and 1024). Is this sufficient or do most add an additional smaller breakpoint?

What is the recommended max width for desktop?

Thanks
User 2699991 Photo


Registered User
5,391 posts

Hi Joe
breakpoints are there not just for device widths, they are there for helping make your layout look good at any widths.

Your decision that you have to make is
do I need to add a breakpoint, here so I can adjust my layout,
or
do I need to adjust my layout so it looks good without adding a breakpoint.

the 2 defaults are sort of indicators as to smaller devices & desktop devices
to the left of the first blue breakpoint is for most mobile devices, between the two breakpoints is for larger mobile phones & tablets ipads etc, and to the right for desktops up.to large monitors

There isn't really any right or wrong widths, you need to look at your design & decide for yourself how it appears

However having said all of that, for the higher end (call it max width if you want) I tend to make my max widths around the 2000 pixels, this I have found allows for a reasonable visual experience for people using even the big smart TV's.
BUT
you have to be aware of
1/ Image sizes (do your images look good at that size (for background images for example not grainy) not overpowering the layout
2/ any text (paragraphs/titles/text etc, shouldn't be too wide (is stretching the full width, or too small)

I find that working on a reasonable size monitor (22") gives me a good idea as to how the layout looks at all widths.

I know others who design using laptops, & they say that it is easier to visualise for smaller widths *obviously up to laptop/desktops with normal (whatever that is) monitors, but they find it hard to visualize for larger screen sizes.

So basically, it's really up to you to decide what you think your layout looks good at, use the default breakpoints as a guide not a crutch, & add/remove any that you need to keep your layout looking good.


Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS


A simple quick way to contact me
https://mawarputih.coffeecup.com/forms/contact-wayan/
User 2699991 Photo


Registered User
5,391 posts

as to adding breakpoints below the first default breakpoint

I find that most designs need px something widths around the 320px mark, but again I always start at just to the left of that first blue default breakpoint
do the main bits of the layout, then take the slider down, looking at the layout I can then see where it maybe starts to break up a little bit, at that point (if there is one) I look at the layout & think

1/ can I adjust something in the layout AT THE POSITION just below the default one (IE so maybe change font size Image sizes etc, so that it goes down to around the 320 px mark, still looking good

OR
do I add a breakpoint move the slider a little bit to the left of that new breakpoint and make layout adjustments from there?

The same then applies as I move the slider upwards, making a decision whenever the layout starts to break or looks wrong.
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS


A simple quick way to contact me
https://mawarputih.coffeecup.com/forms/contact-wayan/
User 122279 Photo


Senior Advisor
14,646 posts

It always depends on your design how many breakpoints you need. You need to make it look good for any monitor size, so if you need to change it one or two more times, then add breakpoints. For me those two default ones are usually enough.
The Foundation grid system has 1024px as the min-width for destops, at Bootstrap it is 1200px. Anything beyond that could be 'wall-to-wall' if that looks good (with max-width set to 'none'), or you can limit it at the point where the page still is looking ok. Remember, a TV set or a large screen in the open may be used to show a website, so if e.g. the images get pixelated at a certain width, then set a max width. In SD3, if you choose to limit it, the default is 1200px.

You beat me there, Wayan! ;)

Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 2818159 Photo


Registered User
60 posts

I can make my layout look OK down to around 480px but below that it's cramped. Just wondering how narrow we should be looking at design-wise - or rather, how many people are really using screens narrower than 480px?
User 2699991 Photo


Registered User
5,391 posts

Joe P. wrote:
I can make my layout look OK down to around 480px but below that it's cramped. Just wondering how narrow we should be looking at design-wise - or rather, how many people are really using screens narrower than 480px?


There are still devices around & in use that are about 320px,
so at the 480px width I would add a breakpoint, move the slider a little to the left of that & make it uncramped,. that way you are covering for most of the lower widths

Who knows how many are around, who knows if those people with them visit your site, who cares !! make your layout look good at all widths (as far as is reasonably possible, & that way you are taking care of the possibility of ALL visitors, just for the sake of a few minutes extra work
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS


A simple quick way to contact me
https://mawarputih.coffeecup.com/forms/contact-wayan/

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.