Tutorials

Master Responsive Web Design Concepts in 2-5 hours

(20 minute video instruction followed by 2-5 hour challenges for you to truly master the concepts)

This blog article is written for those who want to learn responsive web design. This assumes that you already know how to use HTML/CSS. If not, please first check our own blog article: Master HTML and CSS in 5-20 hours and then visit this blog article afterwards.

The videos and contents were created by Amy, one of Coding Dojo instructors.  These concepts are also taught to Coding Dojo students in their first week.

Introduction to responsive web design (3 minute video)

As you are no doubt well aware, people are accessing the Internet through their mobile devices more and more. In November 2016, it became official: worldwide, people were using mobile devices more than desktop computers to visit the web.

Don’t throw away your laptop just yet though! Not surprisingly, we use different devices for different tasks. A phone might be great if you want to check your email, but with more complex tasks, people prefer their desktop computers.

What does this mean for us as developers? We need to make our websites accessible to all users, no matter which device they may be using. Don’t worry, this does not mean that you have to make customized versions of your website for each device out there . All you need to do is make your website responsive, then it will look good no matter which device your user has.

Keep two important things in mind as you wireframe your responsive website:

  • Design from the content out. No matter what, quality content is the most valuable thing your website has to offer. Design your website to make your content accessible, and be careful not to overwhelm your content with too many extras.
  • Mobile first! As already discussed, the mobile market is huge! Plus, their screens are tiny in comparison. Thinking mobile first forces us as developers to keep our websites simple and to focus on the most important information. Once we’ve covered the essentials, then we can think about extra content and features our website could have for desktop computers and larger screens.

Let’s see some examples of responsive websites. Visit http://mediaqueri.es and explore. Expand your window to its maximum size, then shrink it and see how the website adjusts. You can also use the Device Mode option with your Inspect Element tool to see how the website would look on different phones and tablets. You’ll notice that as the viewport gets smaller, features such as navbars and sidebars will disappear. They may be changed to a drop down menu, moved to the bottom of the screen, or otherwise moved out to make room for the most important content.

Media Queries (8 minute video)

@media

CSS uses the @media rule to detect information about the device being used to access the website. For example, it can be used to detect the size of the device, its capabilities, and its orientation. For this course, we will be using it to detect the device size, but keep in mind that it is capable of much more.

Different devices

We have three basic categories of devices: phones, tablets, and desktops. Of course there are more, but these are the big three. We will focus on using media queries to detect which category of device is being used and respond appropriately. To do this, we’ll need to know how we define each of these categories.

DeviceSize
PhoneWidth less than or equal to 480px
TabletWidth between 481px and 1023px
DesktopWidth greater than or equal to 1024px

Flexible units

Responsive web design is all about making our website fluid and proportional, so sometimes it doesn’t make sense to make elements on the page have a fixed size in pixels. We’ll still use pixels – for example, we usually use pixels for padding, since we typically want the same amount of padding regardless of screen size – but now we will also use flexible units for the elements on the page that need to be fluid. For example, we can use percentage (%) to set an element to take a certain amount of the available width, and the available width is determined by screen size! Other flexible units include em and rem. The rem unit is a multiplier of the default font size of the user’s browser. The em unit is a multiplier of the element’s parent. Experiment with these different units to understand how they behave.

Example

Let’s say that we have four buttons on our website that we would like to change color depending on the size of the screen. We’ll give desktop users red buttons, tablet users blue buttons, and phone users yellow buttons. We’ll give the buttons the class of .navbtn.

To get you started, here’s how we would set up a media query in our CSS to notice if the user’s screen is 480 px wide or smaller. If this is true, then we will target all elements with the class .navbtn and set their background to be yellow.

@media only screen and (max-width: 480px){
     /* we will set these stylings only if the device is a screen with a width of 480px or less */
     .navbtn {
         background-color: yellow;
     }
}

Remember that CSS is read from top to bottom, so if the conditions of the media query are met, the stylings within could override any stylings you placed on .navbtn in the code above the media query. Any code that you write below the media query may override the stylings we did here.

Try changing the button colors from red to blue to yellow on your own, depending on screen size. Rewatch the video above if you need a hint. Then, change how the buttons are oriented depending on screen size.

  • For desktop users, arrange all four buttons in one line
  • For tablet users, place two buttons per line
  • For phone users, give each button its own line

Grid System (11 minute video)

Why use the grid system?

To streamline the process of designing responsive websites, many developers choose to imagine that the screen is divided vertically into evenly distributed columns. Combined with dividing the screen into horizontal rows, this makes positioning our elements on the page much easier!

You don’t need to use someone else’s library just to have access to the grid system. You know how to use media queries, now just combine them with flexible units (for example, use percentages instead of pixels to set width) and you can make your own grid.

mobile wireframe

Here, we’ve thought about our website design with mobile first. We would want our data to be displayed very simply; just a vertical list that a user can easily scroll through on a phone. Using the grid idea, each topic gets all the available columns. For this example, assume that we are dividing our screen into four columns. Each column, therefore, gets 25% of the available width.

desktop wireframe

Now, we can think about a larger device. If we have more space, we can add a fun fact to each row. We’ll give one column of the available four to this extra content and leave the remaining three for the main content.

This means that in our html, we’ll give our elements different classes. For example, our optional elements should have a class that will make it possible for us to hide them when they are not wanted. To make our code easy to read, let’s name our classes with a system so that we can identify for which screen size they are intended and how many columns they will occupy. Our classes will follow the pattern screen size – number of columns. For example, a class of .med-1 will mean that for medium screens, the element will take up one column.

<div class="col sm-0 med-1">
   <h5>Did you know?</h5>
   <p>If you could fold a piece of paper 42 times, it would be tall enough to reach the moon.</p>
</div>

In our css, we’ll perform media queries that determine which classes we are using and which we are ignoring, depending on the screen size.

@media only screen and (max-width: 480px){
    .sm-0 {
        /* we will not display anything with the class .sm-0 if the screen's width is less than 480px */
        display: none;
     }
}
@media only screen and (min-width: 481px){
    .med-1 {
        /* anything with the class .med-1 will get 25% of the available width if the screen's width is greater than 480px */
        width: 25%;
    }
}

Combined with the css skills you already have to position elements on a page, you’ll build your own responsive grid in no time. We highly recommend you build your own responsive grid, rather than jump to using grids designed by libraries such as Bootstrap or Materialize. By building your own grid, even if you choose to use a library in the future, you will thoroughly understand how the grid system works and how to use it effectively.

Challenge: Based on what you have learned, now create a fully responsive website like this

For the desktop version, make the width 980px. If you’re struggling with html/css, then consider mastering html and css first (check out our site at https://www.hackerhero.com/blog/master-html-and-css/)

Michael Choi
About author

Founder of Coding Dojo and Data Compass.

Leave a Reply

Your email address will not be published. Required fields are marked *