Mobile First Responsive Web Design Using CSS Media Queries

Overview

This series of 6 videos is aimed at beginners to CSS to learn about designing for mobile first using CSS Media Queries.

One approach that focuses on planning for device widths and designing for the smallest width first. We can call this the mobile first approach. But it really designing for the smallest targeted viewport width. I will explore the viewport in one video, but the viewport is basically what you see if you position a window on your computer partially offscreen. You could say the smallest viewport width is one pixel, but really it is more what you want to put your time and effort into designing. Rather you need to be more selective about the target design viewport widths.

You are going to have to think about the viewport width below your smallest target and the viewport width above the largest. Generally for the smallest you have a single column flexible layout using the smallest fonts that present text in a reasonable manner and images that are resized. I like to call that the base. I should be able to see the base from a small width to the largest width monitor resolution I can find. At the extremes it may not be very aesthetic, but it does allow content consumption.

For the largest target viewport width you are going to cap the content width.

Finally you are going to have two or three or more if you want to work harder, target viewport widths to make a design. In between those targets, your design is likely to be flexible. The target viewport widths are also called breakpoints.

Once you have the media queries designed for your targeted device widths, you want to explore configuration options. You have the all in one CSS file approach, the CSS base file approach with an additional CSS file just for the screen targets. Then there a some hybrids. The CSS Media Query Mobile First Responsive Design Using CSS Files gets into the various approaches.

Follow Along Practice Files: Download All completed files are included.