Hi
Starting to use RLM pro I am thinking ahead of my project. And the one I can't figure out is where to put my breakpoints. I know I can move the slider and make a breakpoint, the moment my layout needs that.

But is there some kind of list with common breakpoints for the wide range of devices available?

Regards,
Hans

Hiya JL,

When you start your project start it with the Bootstrap choice instead of the CoffeCup choice and it starts you with the 3 most commonly used break points already in place. You can either check the numbers then, and write them down for use later or use the Bootstrap setup instead of the CoffeeCup one. If you want to use the CoffeeCup one then just start a new project after you get the break points from the Bootstrap one and set up your break points. I'm not home at the moment so I can't look those numbers up for you, but if you check it out on your own you get to see the differences between the two setups a little bit. Have fun!

Hi JL,

I think of it as this way, in responsive web design you should not be thinking in terms of where should I place my breakpoints. What you should be thinking about is where does my website "break" when the screen size reduces.

The approach I take is a Desktop down design. I will build my full desktop view and have the layout the way I would like to see it. I would then start to move the slider to the left and continue to move it until I see formatting/layout issues then I would assign a breakpoint and fix the formatting or layout. I would continue this process until I am down to my smallest possible screen size.

Taking this approach will truly future proof your website. Lets imagine for a moment that you want to pre determine your breakpoints by common screen sizes for different mobile devices. Ok you have it all set up and perfect. Sony announces that they have a new smart phone coming out... guess what... its at an in-between size and now your website will look all messed up. Then its back to the drawing board you have to open your files up create a new breakpoint and fix the formatting/layout issues.

With all that being said.... Designers will always have their own approach to this but IMHO I think my approach works best.

Hope this helps

If you start with pre-defined break-points, then you're designing just for those sizes.
I would start with thinking about your content first – what's the best way to display it. For example; you could go with one column for the smallest screens and plan a 3-4 column layout for wide screens. Then preview it and see what happens when you shrink your browser.
If you use Firefox, there's a responsive design view in the tools. It will show you some common screen pre-sets and your own custom widths as well. Just make a note of the size wherever your layout needs to be adjusted. Then you don't have to worry about it not looking right on any particular device.

I use a combination of Jo Ann's and Steve's approaches. I design for the desktop first. I then set particular breakpoints at set pixels and make adjustments for them. Finally, I go back to the desktop and move the slider left and "fix" any parts that break.

If you are going to set predefined breakpoints ... pardon the pun... but whats the point

Skip a step and just set them as you need them.

Just my opinion

It is however you want to responsify your website.

Our views here are that you do not have a set breakpoint. You have custom ones where your design needs them, not where BS2 tells you to have them.

That is why Coffeegrinder has no preset breakpoints, which makes it easier to customize your own layout. Granted it does not have all the "Bells" that BS has, but I would guess that most of you do not use those features anyway.

Not to mention if you did, all you would need to do is add in the CSS from BS.

http://www.smashingmagazine.com/wp-content/uploads/2014/07/03-many-devices-opt.jpg
(Image from article: http://www.smashingmagazine.com/2014/07 … eb-design/)
Just how many break-points (portrait and landscape) do you want to pre-define? Notice the pic above doesn't include laptops, netbooks, desktops or TVs.
Do you want to create multiple versions of the same site, or one fluid, adaptable version?

It's trial and error process all over again. There is no "place" to put breakpoints, cell phones have way too many different screen sizes to keep up with.
Take Adams cell phone for example, let's say he wants to visit my site and his screen show's an unresponsive design, that's because I did not set a break point where his phone screen size landed.

You can't cover all your bases in responsive design, you can just toss breakpoints out and hope one lands in a popular phones setting. Especially if your running an online shop like me

But you can with RLM...

That is what the slider is for, you check your site using the slider to see if an element needs to be adjusted at a certain px width. If the element does not look good at that width, it will not look good at the same width on which ever device uses that width.