Responsive Web design is made of several key components:
- Flexible grid
- Flexible content
- Comfort points
- Fast loading on any bandwidth
- Readable on any size display layer
Responsive grid components we use do not have fixed pixel widths but are proportional to the overall size of the browser window. This is to say each grid unit has a percentage-based value for width. This allows the grid and elements placed within them to wrap and expand gracefully as the browser window size is altered.
This means images, video, text content and more are not given fixed widths but are allowed to fill the container they live in. This allows them to shrink or wrap as the viewport changes size.
Breakpoints (or comfort points, as we like to call them) are when content needs to change flow or layout based on how comfortable it looks given the width of the layout. The @media query in CSS is a handy and simple way to change any aspect of the page based on observations of content comfort. For example, if you find that a heading is too big and wrapping too much at a narrow width, it can be made more comfortable by reducing the font size at the specific page width you observed using an @media query. Instead of declaring large screen rules first only to override them on smaller screens, define rules as more real estate becomes available.
In general, the content should determine the breakpoints. If your content is uncomfortable, then try making it more flexible by adjusting font size or line heights. Failing this, breakpoints are a way to ease the transition of content from a large display to a small one.
Here is a guide on how to write the various types of breakpoints. Keep in mind we use EM's, but the method still works:
From 200 to 640px > @media screen and (min-width: 200px) and (max-width: 640px)
Landscape, at least 600px > @media screen and (min-width: 600px) and (orientation: landscape)
Portrait, less than 380px > @media screen and (max-width: 380px) and (orientation: portrait)
Some designers prefer to use what they consider to be the most frequent resolutions for setting breakpoints such as 320, 480, 720, 768, 1024, 1280px, but this ignores the most important part: content. This is why we only set breakpoints depending on observing content and user interfaces in the browser. Since there are already hundreds of devices out there on the Web, with more to come, it's prudent to stay flexible and not get too specific about sizes. Also, content should determine the breakpoint because device dimensions are too varied and always changing, therefore unreliable.
It's important to build from the small screen upwards. This is accomplished by having strong, well-vetted content first, then shaping it as there is more capability and real estate available in a browser. Ensuring information and functionality can be accessed on small screens first is a way to start thinking of content in a simple way, then build upwards. Starting with baseline shared styles and introducing more advanced layout rules when screen size permits is a way to keep code simpler, smaller and more maintainable.
Fast Loading On Any Bandwidth
Readable On Any Size Display Layer
The DePaul responsive framework is already setup to make reading enjoyable, but just in case you find yourself wondering why lines are short and fonts are clear and legible, 45-75 characters per line is the goal for optimal reading experiences.