Day 35 - Device Breakpoints and Screen Size Detection

With so many new different computing devices on the market,  there are no common screen sizes. Breakpoints are the point at which your site's content or layout breaks on a device and needs to be adjusted for clarity and usability.

By adding breakpoints and screen detection rules about width and styling in the code (media queries in the CSS) your site's layout and typography can adapt legibly to multiple devices and screen sizes.

Test your web apps and sites on as many different devices as you can get your hands on. When the layout isn't working at a particular width and needs to be adjusted, define your own breakpoints in the CSS and adapt the layout.

Breakpoint rules of thumb:

• Typically change styling of your documents so that it's best suited for the user using their device.
• Always be concerned with readability and font sizes.
• When designing for "mobile first" think "content first". It's the content and your design flow that defines the breakpoint, not the pixel width of the most popular device.
• Make your designs adaptive so that they're future friendly as widths are growing and changing.
• Horizontal scrolling is a bad idea.
• It's not probable that you can cover all device types, but try and design usable solutions for your customer segments.