Make it

Responsive

Web development fundamentals

2022

What is responsive

Named by Ethan Marcotte, May 25, 2010 on A List Apart

Rather than tailoring disconnected designs to each of an ever-increasing number of web devices, we can treat them as facets of the same experience. We can design for an optimal viewing experience, but embed standards-based technologies into our designs to make them not only more flexible, but more adaptive to the media that renders them.

The control which designers know in the print medium, and often desire in the web medium, is simply a function of the limitation of the printed page.

 

We should embrace the fact that the web doesn’t have the same constraints, and design for this flexibility. But first, we must 'accept the ebb and flow of things.

John Allsopp, “A Dao of Web Design”

Responsive vs Adaptive

From 9 basic principles of responsive web design

Responsive

You put water into a cup, it becomes the cup. You put water into a bottle, it becomes the bottle. You put water into a teapot, it becomes the teapot.

Bruce Lee, Be Water, My Friend

Why responsive design is important

  • Get your phones out - what is their resolution?
  • Get your laptops out - what is their resolution?
  • How many different laptops and phones do we have in this room now?

Why responsive design is important

screensiz.es​

Why responsive design is important

screensiz.es​

What do we need?

Surprise...

...we already know most of the things!

Viewport

  • The meta viewport tag gives the browser instructions on how to control the dimensions and scaling
  • Without this tag, all devices will render our page differently and scale like they want to
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Plan your Design

  • Plan your Design for different screen sizes
  • Think about content first
  • Have a flexible layout in mind
  • Different methods, for example mobile first...

Relative units

If you can, use relative units

From 9 basic principles of responsive web design

Flow and wrap your elements

Use the flow that html provides you for free

From 9 basic principles of responsive web design

Min/Max values

Use max- and min-sizes to make sure that your content stays readable

From 9 basic principles of responsive web design

Vector images

If you can, use vectors

From 9 basic principles of responsive web design

Media Queries

Media queries are useful when you want to modify your site or app depending on a device's general type (such as print vs. screen) or specific characteristics and parameters (such as screen resolution or browser viewport width).

MDN Web Docs: Using media queries

Media Queries

@media screen and (min-width: 320px) and (max-width: 768px)

@ rule

media type

media feature

operator

media feature

  • all (default)
  • print
  • screen
  • speech

operator

Media Queries

@media screen (max-width: 600px) {
  .element {
    /* Do something here */
  }
}

Media Queries

  • any-hover
  • any-pointer
  • aspect-ratio
  • color
  • color-gamut
  • color-index
  • display-mode
  • forced-colors
  • grid
  • height
  • hover
  • inverted-colors
  • monochrome
  • orientation
  • overflow-block
  • overflow-inline
  • pointer
  • prefers-color-scheme
  • prefers-contrast
  • prefers-reduced-motion
  • resolution
  • scripting
  • update
  • width

Media Queries

  • You can also define the media rule in html to load a specific file

Think about Breakpoints

From 9 basic principles of responsive web design

Think about Breakpoints

  • Base your breakpoints on your design, not on specific devices
  • At what size does your layout no longer work?

Grids

  • Use flexible grid layouts to create modern responsive layouts

Hide things (sometimes)

  • Only hide information for different sizes, if it is really necessary
  • For example:
    • On desktop show full navigation
    • On mobile important + more

Loading images

<picture>
  <source media="(max-width:1000px)" srcset="picture-lg.png">
  <source media="(max-width:600px)" srcset="picture-mid.png">
  <source media="(max-width:400px)" srcset="picture-sm.png">
  <img src="picture.png" alt="picture">
</picture>

Loading images

<img
 srcset="
  flower4x.png 4x,
  flower3x.png 3x,
  flower2x.png 2x,
  flower1x.png 1x
 "
 src="flower-fallback.jpg"
>

Tools for testing

  • Safari: Develop → Enter Responsive Design Mode
  • Firefox: Tools → Browser Tools → Responsive Design Mode
  • Chrome: View → Developer → Developer Tools

More resources

Demo Time

Make it responsive

By Garrit Schaap

Private

Make it responsive