Responsive Web Apps

for the busy developer

Simon MacDonald

@macdonst

What makes me the expert on Responsive Web Design?

I read a book

What is responsive web design?

Responsive web design (RWD) or responsive design is an approach to web design that aims to make web pages render well on a variety of devices and window or screen sizes from minimum to maximum display size to ensure usability and satisfaction.

– Ethan Marcotte

Pillars of RWD

1

Flexible Layout

2

Media Queries

3

Flexible Images

Flexible Layout

Legacy Layouts - Tables

<html>
  <body>
    <table>
      <tr>
        <td colspan="3">Header</td>
      </tr>
      <tr>
        <td rowspan="2"">Navigation</td>
        <td>Content</td>
        <td rowspan="2">Navigation</td>
      </tr>
      <tr>
        <td>Footer</td>
      </tr>
    </table>
  </body>
</html>

Legacy Layouts - Grid Systems

<div class="container">
  <div class="row">
    <div class="twelve columns">Header</div>
  </div>
  <div class="row">
    <div class="two columns">Nav</div>
    <div class="eight columns">
      <div class="container">
        <div class="row">
          <div class="twelve columns">Content</div>
        </div>
        <div class="row">
          <div class="twelve columns">Footer</div>
        </div>
      </div>
    </div>
    <div class="two columns">Aside</div>
  </div>
</div>

Can I Use CSS Grid?

Photo by ThisisEngineering RAEng on Unsplash

If you are having code problems I feel bad for you son.

I got 99 problems but IE ain't one.

Let's build some layouts

Mobile

Laptop/Tablet

Desktop

body {
  display: grid;
  gap: 1em;
}

Header

Navigation

Content

Footer

Block Layout

<html>
  <body>
    <header>Header</header>
    <nav>Navigation</nav>
    <main>Content</main>
    <footer>Footer</footer>
  </body>
</html>

body {
  display: grid;
  gap: 1em;
  grid-template-rows: auto auto 1fr auto;
  min-height: 100vh;
}

Header

Navigation

Content

Footer

Mobile Layout

<html>
  <body>
    <header>Header</header>
    <nav>Navigation</nav>
    <main>Content</main>
    <footer>Footer</footer>
  </body>
</html>

body {
  display: grid;
  gap: 1em;
  grid-template-columns: 12em auto;
  grid-template-rows: auto 1fr auto;
}

header {
  grid-column: span 3;
}

nav { 
  grid-row: span 2;
}

Header

Nav

Content

Footer

Laptop Layout

<html>
  <body>
    <header>Header</header>
    <nav>Navigation</nav>
    <main>Content</main>
    <footer>Footer</footer>
  </body>
</html>

body {
  display: grid;
  gap: 1em;
  grid-template-columns: 12em auto 12em;
  grid-template-rows: auto 1fr auto;
}

header {
  grid-column: span 3;
}

nav, aside { 
  grid-row: span 2;
}

Header

Nav

Content

Footer

Desktop Layout

Aside

<html>
  <body>
    <header>Header</header>
    <nav>Navigation</nav>
    <main>Content</main>
    <aside>Aside</aside>
    <footer>Footer</footer>
  </body>
</html>

body {
  display: grid;
  gap: 1em;
  grid-template-columns: 12em auto 12em;
  grid-template-rows: auto 1fr auto;
}

header {
  grid-column: 1 / 4;
  grid-row: 1;
}
nav {
  grid-column: 1 / 2;
  grid-row: 2 / 4;
}
main {
  grid-column: 2 / 3;
  grid-row: 2;
}
aside {
  grid-column: 3 / 4;
  grid-row: 2 / 4;
}
footer {
  grid-column: 2 / 3;
  grid-row: 3;
}

Header

Nav

Content

Footer

Line Based

Aside

body {
  display: grid;
  gap: 1em;
  grid-template-columns: 12em auto 12em;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    'header header header'
    'nav main aside'
    'nav footer aside';
}

header { grid-area: header; }

nav { grid-area: nav; }

main { grid-area: main; }

aside { grid-area: aside; }

footer { grid-area: footer; }

Header

Nav

Content

Footer

Grid Areas

Aside

Media Queries

What is a media query?

Media queries allow you to adapt your site or app depending on the presence of various device characteristics such as:

Screen resolution
Screen orientation
User preferences like color scheme or reduced motion
etc.

Can I Use Media Queries?

body {
  display: grid;
  gap: 1em;
  grid-template-rows: auto auto 1fr auto;
  grid-template-areas:
    'header'
    'nav'
    'main'
    'footer';
}

@media (min-width: 40em) {
  body {
    grid-template-columns: 12em auto;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
      'header header'
      'nav main'
      'nav footer';
  }
}

@media (min-width: 60em) {
  body { 
    grid-template-columns: 12em auto 12em;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
      'header header header'
      'nav main aside'
      'nav footer aside';
  }
  aside { display: block; }
}

Three Layouts

Small - up to 27.5em (approximately 440px)
Medium - between 27.5 em and 60em (441-960px)
Large - over 60em (961+ px)

A Note About Breakpoints

I don't have a magic formula for selecting breakpoints.

You can look at what large companies like Google and Microsoft suggest.

However, I find a good rule of thumb is to select two break points to give your site or app 3 distinct layouts.

You only need to consider them when your design breaks at different screen resolutions.

Flexible
Images

<img width="100%" />

Just send a large image down the wire and set it's width to 100%. Works everywhere! 👏

Except it wastes bandwidth to send a large image when not required 👎
But if you pick too small an image it will look grainy when blown up to larger sizes 👎👎

<img srcset & sizes />

Let the browser choose the right sized image for the device.

Checks device width.
Uses our old friend media query to determine the correct image to use.
Requests the corresponding image from srcset.

<img
  sizes="
    (min-width: 960px) 600px,
    (min-width: 640px) 300px,
    150px
  " 
  srcset="
    css-grid-mobile.png 150w,
    css-grid-laptop.png 300w,
    css-grid.png 600w
  "
  src="css-grid.png"
 />

In our simple example downloading the image sized for mobile saves 230 kb.

<picture/>

Used when you want to change more than the resolution of the image you serve.

Serve zoomed-in images to smaller screens
Don't send animated gifs if the user prefers-reduced-motion.
Use the latest image formats while providing a fallback for legacy browsers.

<picture>
  <source srcset="css-grid-night.png"
          media="(prefers-color-scheme: dark)">
  <img src="css-grid.png">
</picture>

Other options:

For example dark mode:

Can I Use <picture/>?

Use CSS Grid to layout your app or site
Use grid areas and skip the complicated line-based syntax.
Lean towards using srcset and sizes for images
Until you need to use non-size media-queries or nonstandard image formats

In Conclusion…

Thank You!

Questions?

Why didn't you talk about my favourite framework?

In recent years we've pivoted towards better developer experience at the expense of the user experience. None of the things we've talked about today require a byte of JavaScript in order to work.

Okay, I don't hate JS frameworks but…

Reducing the amount of JS downloaded/parsed/run will increase the performance of your site/app.

Bias towards web fundamentals before reaching for that JS framework.

What about laying out components?

Can I Use Flex Box?

Header

Home

Content

Footer

About

Contact

Header

Home

Content

Footer

About

Contact

Header

Home

Content

Footer

nav {
  grid-area: nav;
  display: flex;
  justify-content: space-between;
}

Mobile Nav

<html>
  <body>
    <header>Header</header>
    <nav>            
      <p>Home</p>
      <p>About</p>
      <p>Contact</p>
    </nav>
    <main>Content</main>
    <footer>Footer</footer>
  </body>
</html>

About

Contact

@media (min-width: 40em) {
  nav { 
    flex-direction: column; 
    justify-content: flex-start; 
  }
}

Header

Home

Content

Footer

Laptop Nav

<html>
  <body>
    <header>Header</header>
    <nav>            
      <p>Home</p>
      <p>About</p>
      <p>Contact</p>
    </nav>
    <main>Content</main>
    <footer>Footer</footer>
  </body>
</html>

About

Contact