Thanks, PP
If at first you don't succeed, get a bigger hammer.
http://www.photophart.com
http://www.photophart.com
photophart
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
Thanks, PP
bough
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
http://responsivedesign.is/strategy/page-layout/defining-breakpoints
http://responsivedesign.is/develop/browser-feature-support/media-queries-for-common-device-breakpoints
Eric Rohloff
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
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
photophart
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
http://www.photophart.com
paintbrush
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.
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
https://www.callendales.com
Jo Rice
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.
paintbrush
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.
)
I love deadlines. I like the whooshing sound they make as they fly by. (Douglas Adams)
https://www.callendales.com
https://www.callendales.com
Inger
Senior Advisor
14,566 posts
Online Now
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
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Steve
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.
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
Steve Kolish
www.misterwebguy.com
YouTube Channel:
https://www.youtube.com/channel/UCL8qVv … ttneYaMSJA
midcentury
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
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.
