How to Plan Responsive Breakpoints

By Beacon News | Published July 8, 2014 | Categories: Web Development

Typically people think about breakpoints in responsive designs in terms of typical screen size, and it usually works out to something like this:

• 1024 pixels wide—Full desktop and full-size tablets.
• 768 pixels wide—Tablets
• 320 pixels wide—Mobile phones

These breakpoints are extremely simplified way of describing what is actually done. In reality, devices come in a very wide range of screen sizes and there are new devices coming out every day. Technically there are no common screen sizes. A website needs to work at all screen sizes, not just at the breakpoints decided upon by looking at what devices make up the largest percentage of your website traffic.

Ideally, a design should be both FLUID and RESPONSIVE so that it is optimized for all screen sizes and not just certain breakpoints. If you grab your desktop browser by the corner and drag it around to resize it, you can see how a website responds to varying screen sizes. When content is fluid, it fills up 100% width of whatever the screen size is. When content within sections is no longer appropriate for that width (the line length of text boxes getting too long to read or the items in a horizontal navigation getting too cramped to be legible, for example) then a RESPONSIVE breakpoint needs to be added so that the layout is altered in a way that makes the content work better. Therefore, the breakpoints are determined by the content and not the screen size.

Ultimately what we get by taking this approach is a website that looks good on all devices.

Our actual real best practice is to work mobile first. We typically do a desktop graphical design first so that we have all of the graphics that are required for the fullest size, but we work mobile first when planning out the content and the responsiveness of the site. If we plan out the content for the small screen of a mobile device then we have tackled the most difficult problems first, and the rest of the design becomes much easier.