Responsive Breakpoint Idea

When designing responsive websites it pays to know the various resolutions so you can create proper breakpoints in your design.

Apple

Apple Ipad 2 – 1024 x 768 at  at 132 ppi with a 9.7 inch display
Apple Ipad with Retina display – 2048-x 1536 at 264 ppi with 9.7 inch display
Apple Mini – 1024 x 768 at 153 ppi with a 7.9 inch display
Apple IPod – 1136 x 640 at 326 ppi
Apple IPod -4th generation – 960 x 640 at 320ppi
Apple Ipod Touch – 1136 x 640 at 326 ppi
Apple IPhone 4 and 4S – 960 x 640 at 326 ppi with a 3.5″ display
Apple IPhone 5 – 1136 x 640 at 326 ppi with a 4″ display

Amazon Kindle

Kindle Fire (1st gen) 1024 x 600 with 7″ display
Kindle Fire (2nd gen) 1024 x 600 with 7″ display
Kindle Fire HD 7″ – 1280 x 800 with 7″ display
Kindle Fire 8.9 – 1920 x 1200 with 8.9″ display

Android Phones

Samsung Galaxy II – 800 x 480 at 218 ppi
Samsung Galaxy III – 1280 x 720 at 306 ppi
Blackberry 10 – 1280 x 768
Blackberry Z10 – 1280 x 768

Android Tablets

Samsung Galaxy Tab 10 – 1280 x 800 – 10″ display
Samsung Galaxy Tab 7 and 7 Plus – 1024 x 600 – 7″ display
Acer Iconia Tab A500 – 1280 x 800 – 10″ display

It seems to me without getting into a whole bunch more models, and older phones the breakpoints at minimum should be 1280, 1024, 800, 600, 480 and 320. Of course it really all depends on the final design. And to even further the matter more their is a whole genre being created about fluid grids.

Articles to Use as a Reference for further exploration:

.Net Magazine – determining breakpoints for a responsive design

1st WebDesigner – overview of breakpoints in responsive design

Device-Agnostic Approach to Responsive design

Webdesignerwall – Setting Breakpoints in Responsive Design

Wikipedia’s list of display’s by pixel density

And of course Ethan Marcotte, who we can thank for starting the whole responsive web idea.