Responsive design breakpoints

[Phreaddee]

Hi all,
working on a new site and am deciding on the media queries breakpoints.
this is what i've chosen so far, any one suggest otherwise?

@media only screen and (max-width:320px)
@media only screen and (min-width:320px) and (max-width:480px) 
@media only screen and (min-width:480px) and (max-width:960px) 
@media only screen and (min-width:960px) and (max-width:1440px) 
@media only screen and (min-width:1440px)

thoughts?
should i have a specific 768x1024 one for the ipad perhaps?

 

[ronaldroe]

Those look good. Smart determining the queries before hand and designing around them. I generally build out the site and code them based on how it reacts to different sizes. The only suggestion I have is that you may want to:
1. Add another between 960 and 480. That's a lot of width you're playing with there, and a lot can happen to a liquid layout between there.
2. Make sure your mobile-based widths include max-device-width. Some devices, in my experience iOS included, won't react to max-width.

 

[Fireproofgfx]

Hey Phreadee,

you had mentioned to me on my last site to incorporate this into my design. I looked into it through searching google but haven't had the time to really devote to the concept.

Do you guys know of a good place to go to learn more about this? I know of W3C and the likes but do you guys recommend somewhere better?

 

[ronaldroe]

This article is a great place to start:

http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries

 

[Phreaddee]

thanks ronald.
I was thinking that was quite a large space and was thinking of one around the 768 point to break it up a little.
thanks for the heads up on the device width. i figured that was the way to go based on what ive seen in the past, but was wondering whether or not it was needed and if just the width would work. so cheers.

in the past ive only split on a few breakpoints. one for iphone/smartphone and another for ipads, and designed around 960. this is a pretty special client i'm to do a redesign for so the $ are there and thought id really jump in the deepend with it all!

smashing magazine also have some pretty good articles.

or of your the view source kinda guy then these sites are good examples in practice...

http://teixido.co/
http://css-tricks.com/
http://www.informationarchitects.jp/en/

 

[ronaldroe]

http://css-tricks.com/

Probably my favorite blog. The way the search slides across has always interested me. He explains it in a video. Oddly, it's just a simple CSS3 transition.

 

[Fireproofgfx]

I am slowly self teaching myself. I don't get all the time I want to devote towards learning since I am a carpenter by trade, but I really try and view the source, watch videos, and write it down, just to retain as much as I can. Ronald the first tutorial looks like it will help a lot and thank you Phreadee for those links as well I will look into them.

 

[DHDdirect]

If you want to know a specific devices height/width or capabilities tera-wurfl has a decent database.

I was just on a Samsung Galaxy II S that didn't respond to max-width as well.

I would also suggest the 768px as devices have that as a common width as well as some odd balls having widths in that vicinity such as galaxy tablet (600px) motorola droid (540px), and even some odd landscape widths of (640px).

 

[Phreaddee]

Ive decided on both 768 + 640.
Initial tests showed that I needed to fill that gap.
480-640 should cover those oddballs if I do it smart.
320, 640, 960 & 1440 cover the grid variables.
480 & 768 fill the blanks. Considering 1180 as well although this might be considered overkill