-

Responsive Design for Beginners

a quick guide to help you get started with responsive web design

Often, when first learning web design, beginners will lean towards using measurements of pixels in their CSS files.

When I first began learning web design, I found myself making tiny adjustments in pixels to get my content where I wanted it. Little did I know, this tweaking only made the site look good on my own display! Changing computers or switching to a mobile device would completely destroy the look of the site.

This is because pixels are a hard measurement, meaning that a distance measured in pixels will not change whether the viewer's display is large or small. Responsive design is a practice in web design that attempts to eliminate the hard coded measurements such as these and replace them with measurements that adapt to the device being used.

Enter: Relative Measurements

CSS has the ability to utilize relatively sized measurements. These measurements are called em, rem, and percent.

em Em measures the distance of one default font size for the device. If the default font size for the browser on your device is 14px, 1em will equal to 14px. Measuring like this allows sizing of objects and elements to be treated more as ratios and less as hard numbers so that no matter how small the device gets, the layout of the page remains roughly the same.
rem Rem is measured according to the font-size of the html tag. If you have a font size set in the html section of your CSS file, it will be equivalent to 1 rem. Rem is useful in cases where you want to size elements consistently over your site.
percent Percents allow elements and images to be resized based on the size of the parent element. Percentages can also be used on margins and padding values. This allows the same flexibility of device sizes as does em, but cannot be used on things such as fonts.
p, table{
  font-family: "merriweather";
  font-weight: 300;
  font-size: 1.3em;
  width: 52%;
  justify-content: center;
  margin: auto;
  padding-bottom: 3.5em;
}

"This is nice and all, but I have a really small phone! Content on pages like these wrap infinitely! How do you suppose that's fixed?"

Set your Min and Max Width.

Minimum and maximum widths can be set for elements so that even when the window is sized too small, the user can scroll left and right on the text rather than having jumbled lines of words. The same can be done with height! If you're using a laptop or desktop, resize your browser window and see how this paragraph will not become any narrower after a certain width.

p {
  min-width: 300px;
}

Include All Devices By Using Media Queries

Media queries are conditions that a device must meet in order to have a certain style used. Media queries can be written to require certain minimum and maximum dimensions, resolutions, and display modes. You can probably see how this could be used to specify widths and resolutions of certain devices.

Queries can also become a dangerous rabbit hole. As more and more devices are released every year, dimensions and resolutions become more diverse across platforms. It's probably in your best interest to limit the amount of queries you use. If you are using a desktop or laptop, resize your browser window by its width and try to find the point where the query changes the style of the page based on the width of the window.

@media only screen and (max-width: 600px) and (min-width: 550px) {
    .queries {
       background-color: black;
    }
}