Monday, 9 September 2013

Best Responsive Design Breakpoints

While trying to find an answer to my own question: "What are the best responsive design breakpoints?", I have performed a small statistical study over SmartPhone screen widths (portrait and landscape) using information provided by i-skool.

SmartPhone Screen Width Study (Portrait & Landscape)

The above table shows how often a specific SmartPhone width in the source data is reported. There are five peaks:
  • 320 pixels
  • 480 pixels
  • 768-800 pixels
  • 1024 pixels
  • 1280 pixels
These look like good responsive design breakpoint candidates.

Best Google Ad Formats

Google offers several ad formats. Assuming the following breakpoints, here are examples of adequate ad formats with regards to width:
  • 320 to 479 pixels - Mobile Leaderboard (320x50), Half Banner (234x60), Medium Rectangle (300 x 250)
  • 480 to 767 pixels - Banner (468 x 60), (468x15) Displays 4 links
  • 768 pixels and above - Leaderboard (728 x 90), (728x15) Displays 4 links