Overview of Breakpoints in Responsive Web Design

Last time, Jamal went over media queries. This is an important aspect to know of Responsive Web Design (RWD from now on) because it is this CSS declaration that allows for the different layouts to appear at different screen sizes. Hmm, now what about different screen sizes? To make it easy to understand, lets look at this using an analogy. So, imagine that RWD is a blueprint for a wonderfully new house. The foundation, which the rest of the house depends on, would be media queries. After the foundation comes the first level of the house, which sets the tone for how the rest of the house will be built. In this house, the first floor would be break points.

Break points in RWD are browser widths that have a media query declaration to change the layout once the browser is within the declared range. On average, every responsive site will have a minimum of two break points. These being for tablets and mobile devices. Unlike the desktop, tablet and mobile are based on the screen sizes of the iPhone and iPad because they are the most popular devices in both mobile and tablet devices. Whether or not this is a best practice is a conversation for later. This is good enough for most responsive websites today, however there are always instances when a little more detail in how your layout changes is necessary. For instance, creating breakpoints for devices when they are in landscape and portrait orientation.