Suggested breakpoint defaults

User 2110889 Photo


Registered User
17 posts

As a starting point, what would you all suggest as the most essential breakpoint positions to cover the broadest range of devices from desktop PCs to iPhones and similar little devices? Up to now I've just been kinda chopping at it with an axe. Perhaps a more formal approach would be more effective.
Thanks, PP
If at first you don't succeed, get a bigger hammer.
http://www.photophart.com
User 2924428 Photo


Registered User
1,718 posts

Hi Photophart.. check out these articles I found on Google about breakpoints, there is no "specific" dimensions because all smartphones are different sizes, and unless you research ever smartphone out there you won't be able to get a fluid grid on all of them..

http://responsivedesign.is/strategy/page-layout/defining-breakpoints
http://responsivedesign.is/develop/browser-feature-support/media-queries-for-common-device-breakpoints

User 187934 Photo


Senior Advisor
20,245 posts

Break points are based on the needs of your content not the size of the device it's being viewed on.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 2110889 Photo


Registered User
17 posts

Links appreciated and that makes perfect sense.
If at first you don't succeed, get a bigger hammer.
http://www.photophart.com
User 271657 Photo


Ambassador
3,816 posts

For me, the most important one is at which point does the content work better in a single column.
Before that, when do columns of text get so long and skinny and/or photos so small that it would be better to go from 3 or 4 columns to 2.
Both Firefox and Chrome have good ways to test your site at different breakpoints so you can see just where your content "breaks". You might find that a breakpoint down to one column makes more sense at 519px rather than a more 'standard' 480px. Do what works best to make your content easy to read/use.
I love deadlines. I like the whooshing sound they make as they fly by. (Douglas Adams)
https://www.callendales.com
User 38401 Photo


Senior Advisor
10,951 posts

If you start your layout using the Bootstrap setup it will start you with basic breakpoints already setup for you (not sure why CoffeeCup's setup doesn't have that built into it by default). Then all you need to do is add breakpoints where the site breaks or doesn't look right to you as you slide the slider down smaller. No need to put in unnecessary ones just because, just add them where it breaks and you'll be fine.
User 271657 Photo


Ambassador
3,816 posts

If you start your layout using the Bootstrap setup it will start you with basic breakpoints already setup for you (not sure why CoffeeCup's setup doesn't have that built into it by default).

I'm glad it doesn't. I prefer the CC Coffeegrinder grid/frame because I don't design to pre-defined breakpoints. Content comes first, then breakpoints to suit the content.
(.....Not to mention the changes—including breakpoints, required to update from BS2 to BS3. :o)
I love deadlines. I like the whooshing sound they make as they fly by. (Douglas Adams)
https://www.callendales.com
User 122279 Photo


Senior Advisor
14,565 posts

This was exactly why many designers were against grid systems in the early days of Responsive web design. They said they had to fit the design into the grid instead of having the grid fit to the design. Luckily RLM has put and end to that with the user deciding where the breakpoints are to be set.
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 2088758 Photo


Senior Advisor
3,106 posts

Inger wrote:
This was exactly why many designers were against grid systems in the early days of Responsive web design. They said they had to fit the design into the grid instead of having the grid fit to the design. Luckily RLM has put and end to that with the user deciding where the breakpoints are to be set.


I couldn't have said it better myself Inger. I agree and haven't used any other software since I got rlm.
Taking over the world one website at a time!

Steve Kolish
www.misterwebguy.com

YouTube Channel:
https://www.youtube.com/channel/UCL8qVv … ttneYaMSJA
User 418470 Photo


Registered User
101 posts

This was very useful information. Just wanted to pop in & say Thanks:D
I should have something clever to say... but I don't.
newurbanpantry.com https://www.newurbanpantry.com
frankelmo.com http://www.frankelmo.com

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.