With the recent release of bigger smartphones (iPhone 6s, iPhone 6s Plus, Galaxy S6, etc), along with the announcement of the new (and much bigger) iPad Pro, many developers have been wondering what the resolutions are on these devices in order to find their breakpoints using CSS media queries.  It seems as though immediately after these new devices are announced, someone makes a new chart of all of the devices and what their resolutions/breakpoints are.  I am always baffled as to why this is such a big deal in the developer community.  If you are doing responsive web design correctly, it doesn’t matter!

I’m not saying that developers should never use breakpoints.  In fact, most of the major responsive frameworks (i.e. Bootstrap) use them to some extent, which is completely fine.  But in almost no circumstance should we use specific device breakpoints when developing a website intended for the masses.  New devices at all different sizes and resolutions are being released on almost a weekly basis, and trying to keep up with all of the breakpoints for these devices would be insane.

So when developing in responsive design, try to follow these basic guidelines:

  • Continuously check how things are looking at all different resolutions, not just on specific devices.
  • If using breakpoints, you should create them based on content. Again, never on specific devices, products, or brands.
  • Design for the smallest mobile device first, then enhance the experience as more screen real estate becomes available.  This allows you to optimize breakpoints based on content and maintain the fewest number of breakpoints possible.

Do you have any other tips or tricks you use in responsive design?  Let me know in the comments below!