With Responsive Designs, What Break Points Do You Use?

Webmaster Discussion
#1

My designer is asking what break points to use for Phone/Tablet/Desktop. He’s suggesting…

  • up to 767px wide for phone screens
  • 768px up to 1199px for tablets and smaller pc screens
  • 1200 px and more for larger pc screens
Does those break points sound about right to those of you who've done a responsive design?
#2

Re: With Responsive Designs, What Break Points Do You Use?

I think so yes. We’re working on a new design as well and went with what Twitter use:

  • 767px or below, Mobiles / Small Screen Format
  • Everything else gets a bigger version that’s partly flexible up to 1170px (there is no point going wider).
#3

Re: With Responsive Designs, What Break Points Do You Use?

Hmmm… I thought about it for few months, but I don’t know how to go about it, so I need a designer to do this instead of me… can anyone recommend anyone? :wink:

#4

Re: With Responsive Designs, What Break Points Do You Use?

Yes, Twitter’s Bootstrap is a great framework to work with. It’s responsive and neat, but with so many sites using it, you have to be careful to design something quite unique on top of it, or your site ends up looking like millions of others.

If you’re building from scratch, this nice tool called Gridpak will generate a responsive grid for you.

But with your original question about breakpoints. You should probably have a minimum of 2 breakpoints.

For tablets - Min 768px / Max 1024px
For mobile - Min 320px / Max 480px

Anything else is extra, but those are generally accepted as the standard ones.

#5

Re: With Responsive Designs, What Break Points Do You Use?

Same as Anthony, we use 320/480 for Mobile/Smartphone and 768/1024 for Tablets (portrait / landscape)

I also highly recommend Bootstrap and Foundation (I personally like Foundation more) as design frameworks.

For building from scratch I recommend GSS or Skeleton if you are designing for Wordpress.