American Film Academy

Equipping filmmakers of tomorrow, today

Apply
Login
Pay

AFA Web Dev 101

  • joshua@afa.education
  • daniel@afa.education

Modules

Tools & Resources

Courses

Responsive Design

Table of Contents

Lecture

Notes

Hands-On Guide to Responsive Web Design

A Hands-On Guide to Responsive Web Design

Learn the basics by seeing and interacting with the code.

What is Responsive Web Design?

Responsive Web Design (RWD) is an approach that makes web pages render well on a variety of devices and window or screen sizes. Content, design, and performance are necessary across all devices to ensure usability and satisfaction.

The core principles of RWD are:

  • The Viewport Meta Tag: This tag tells the browser how to control the page’s dimensions and scaling. Without it, your responsive code may not work correctly on mobile devices.
  • Fluid Grids: Using relative units like percentages (%) or flexbox/grid instead of fixed units like pixels (px) for column widths.
  • Flexible Images: Using rules to ensure images scale down to fit within their containing element, rather than overflowing.
  • Media Queries: The magic of RWD. This allows you to apply different CSS rules based on the device’s characteristics, most commonly its width.

Example 1: A Basic Two-Column Layout

This is the most fundamental concept. A non-responsive layout with fixed widths will break on small screens, forcing users to scroll horizontally. A responsive layout will adapt, often by stacking the columns vertically.

Live Demo

Click and drag the bottom-right corner of the box below to see the difference in behavior.

Non-Responsive

The Code

Notice how the responsive version uses display: flex for a fluid layout and a @media query to change the layout on smaller screens.

Non-Responsive CSS

.container {
    width: 650px;
}
.column {
    float: left;
    width: 300px;
    margin: 10px;
}

Responsive CSS

.container {
    display: flex;
    gap: 20px;
}
.column {
    flex: 1; /* Flexible width */
}

/* Media Query Magic! */
@media (max-width: 600px) {
    .container {
        flex-direction: column;
    }
}

Example 2: Flexible Images

A common problem is large images breaking out of their containers on small screens. The fix is remarkably simple: give the image a maximum width of 100% of its container.

Live Demo

Drag to resize the containers. See how the non-responsive image overflows, while the responsive one scales down perfectly.

Non-Responsive

The Code

The solution is just two lines of CSS. max-width: 100% prevents the image from growing larger than its parent container, and height: auto ensures its aspect ratio is maintained as it scales.

Non-Responsive CSS

img {
    width: 400px;
    height: 200px;
}

Responsive CSS

img {
    max-width: 100%;
    height: auto;
}

Example 3: Responsive Navigation

A horizontal navigation bar on a desktop looks great, but on a mobile device, the links will wrap awkwardly or overflow. The common solution is to collapse the menu behind a “hamburger” icon on smaller screens.

Live Demo

This demo uses a clever CSS-only trick with a hidden checkbox to toggle the menu. Resize the pane to see the hamburger menu appear, then click it.

Non-Responsive

The Code

The key here is the media query. It hides the normal navigation links and displays the hamburger icon. When the (hidden) checkbox is checked by clicking the label (the hamburger), the :checked pseudo-selector is used to display the navigation links in a vertical stack.

Non-Responsive HTML/CSS

<!-- Just a simple list -->
<nav class="nav">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

<style>
.nav li { 
    display: inline-block; 
}
</style>

Responsive HTML/CSS

<!-- Note the checkbox and label -->
<input type="checkbox" id="menu-toggle">
<label for="menu-toggle" class="hamburger">
    &#9776;
</label>
<ul class="nav-links"> ... </ul>

<style>
#menu-toggle, .hamburger {
    display: none;
}
@media (max-width: 700px) {
    .hamburger {
        display: block; /* Show hamburger */
    }
    .nav-links {
        display: none; /* Hide links */
    }
    /* Show menu when checkbox is clicked */
    #menu-toggle:checked ~ .nav-links {
        display: flex;
    }
}
</style>

Demo

Responsive Design: Notes & Live Demos

1. What is Responsive Design?

Responsive design ensures that a website looks and works well on all devices: desktops, tablets, and mobiles.

  • Use meta viewport to scale pages on mobile devices.
  • Use flexbox or grid for flexible layouts.
  • Use media queries to adjust styles based on screen size.
  • Use relative units (%, em, rem, vw, vh) instead of fixed px when possible.

2. Flexbox Demo

This flex container automatically wraps and resizes the items as the screen shrinks.

1
2
3
4
5

3. Media Query Demo

Resize the screen to see the color change:

  • Width > 800px → Red
  • 500px < Width ≤ 800px → Orange
  • Width ≤ 500px → Green
Resize me!

4. Grid Demo (Auto Responsive)

This grid automatically adjusts the number of columns based on available space.

A
B
C
D
E
F

5. Basic JS Demo (Window Resize)

We can also use JavaScript to respond to screen size changes:

Current width: px

Submit Assignment