Web Development

Dr Derek Bridge
School of Computer Science & Information Technology
University College Cork

Lecture Objectives

learn the principles of responsive layout
learn how to use CSS media queries for responsive layouts
learn to solve the problems caused by images in responsive layouts

Responsive Web Design (RWD)

In RWD, we adapt the layout to the characteristics of the device.

Responsive Web Design

A flexible (liquid) layout.;
Flexible images and media;
Media queries;
Least-capable-clients-first ('mobile-first'); and
Progressive enhancement.

Responsive Components

Some of the things we have seen so far are already helpful for RWD.

Liquid layouts, using relative units or percentages.
Flexbox, assuming, e.g. we allow items to wrap and to flex.
Grid layout, if we are not too prescriptive.
Multicolumn text.

When these do not suffice, then use media queries.

CSS Media Queries


body {
    color: white;
    background-color: black;
}

@media screen and (min-width: 600px) {
    body {
        background-color: red;
    }
}

@media screen and (min-width: 800px) {
    body {
        background-color: blue;
    }
}

@media screen and (min-width: 1000px) {
    body {
        background-color: yellow;
    }
}

Use a black background.
But, if the viewport is at least 600px, use a red background.
But, if the viewport is at least 800px, use a blue background.
But, if the viewport is at least 1000px, use a yellow background.

Media Queries


@media screen and (min-width: 800px) {
    …
}

Simple media queries comprise:
the media type: e.g. screen
an expression containing a media feature (e.g. min-width) and a value (e.g. 800px) in parentheses; and
some CSS between curly braces.

A list of the media features that you can use.

Media Queries for RWD

RWD uses media queries to adapt to a range of devices.

E.g.
a single-column layout for narrower viewports;
but one or more multi-column layouts for wider viewports.

Least-capable-clients-first and Progressive Enhancement

Write nice HTML:
- proper use of HTML markup;
- with content in a logical order; and
- validate it.
…for screen readers, search engine crawlers, etc.
Write some core CSS:
- something that looks OK on all devices,
- e.g. single-column layout for the narrowest reasonable viewport widths.
Write successive media queries that apply extra styles for relevant breakpoints:
- e.g. multi-column when viewport min-width allows it;
- e.g. even ultimately a fixed-width design for very wide viewports.

Simple RWD Example

In narrow-screen devices, we will use a one-column layout.
In wider devices, we will use a two-column layout.

One-column layout, with header, nav, main and footer stacked

Two column layout, with nav and main side-by-side

Simple RWD Example: CSS


body {
    margin: 0;
}
        
@media screen and (min-width: 600px) {
        
    body {
        width: 80%;
        margin: 0 auto;
        display: grid;
        grid-template-columns: 1fr 3fr;
        grid-template-areas: "top top"
                             "middle-left middle-right"
                             "bottom bottom"
    }

    header {
        grid-area: top;
    }

    nav {
        grid-area: middle-left;
    }

    main {
        grid-area: middle-right;
    }

    footer {
        grid-area: bottom;
    }

}

Common Breakpoints

320px	For small screen devices, like phones, held in portrait mode
480px	For small screen devices, like phones, held in landscape mode
600px	Smaller tablets held in portrait mode
768px	Ten-inch tablets held in portrait mode
1024px	Ten-inch tablets held in landscape mode, as well as some laptop, netbook and desktop displays
1200px	For widescreen displays, primarily laptop and desktop browsers

Problem!
there is a much wider range of devices and viewports than this table assumes;
the table is not future-proof.

Let the content determine the breakpoints:
- "Start with the small screen first, then expand until it looks like shit. Time for a breakpoint!"
  — Stephen Hay
- A breakpoint is any point at which you need a media query to get the page or one of its components to look right
Some people now recommend using ems instead of pixels for the media queries.
- This defines breakpoints proportionally and hence also works when the user scales the content.
- It also encourages you to define breakpoints based on readability: people are most comfortable with lines of 45-75 characters.

A Problem

Many small-screen devices draw a distinction between the layout viewport and the visual viewport.

The visual viewport of a phone may be much narrower than the layout viewport ued for rendering a web page.

Media queries use the layout viewport and so might not work as expected.

A Fix

To make RWD work on these devices, we need to make the two viewports of equal size.

Either add the following inside the head element of your HTML:


<meta name="viewport" content="initial-scale=1.0, width=device-width" />

Or add the following to your CSS:


@viewport {
      width: device-width;
}

Or do both!

Foreground Images

We use HTML to include a foreground image, e.g.


<img src="wombat.jpg"
     alt="Wombats are furry and walk on all fours."
     title="A wombat walking along a road" />

There are also width and height attributes
—see below.

You can also nest the img element inside a figure,
with an optional figcaption.

Images in Fixed-width Layouts

In fixed-width layouts, you know how much space (in pixels) is available for your images.

So the image you put on your server should be neither smaller nor larger than needed.

Images in Fixed-width Layouts

Less satisfactory is to put on your server an image that is not the right size and let the browser scale the image by specifying the desired size…

…either in the HTML, e.g.


<img src="wombat.jpg" width="500" alt="..." />

…or in the CSS, e.g.


img {
    width: 500px;
}

E.g. suppose you have a three-column fixed-width layout. Suppose you know the width of the body is 1000px, the nav on the left is 300, the main in the middle is 400 and the aside on the right is 300.

If you want an image in the aside, then make sure it is no bigger than 300px, because that's what is available.

If the image you have is too big, then use image manipulation software such as Photoshop or the GIMP to scale it down so that it is no longer too big. Or if it is too small, scale it up.

But what you put on your server can be the perfect size.

The alternative is to put on the server an image that is too small or too big and then get the browser to scale it. You can do this using hTML or CSS. This is Less satisfactory because it may waste Internet bandwidth (if image is too big) and the scaling takes time.

If you are going to do this be careful. If you specify a width and a height, yoy destroy the aspect ratio. Just specify one and the browser will preserve the aspect ratio.

Images for Liquid Layouts

In liquid layouts, you don't know how much space is available for your images.

If the image is wider than the available space, it will overflow its container.

In liquid layouts, we will have to allow the browser to scale the image.

E.g. if you say your aside is 25% of the window, then when the window is 1200px wide, the aside will be 300px but when the window is 100px wide, then the aside will be only 250px.

Suppose the image you put on your server is 275px wide. When the window is 1200px wide, the aside is 300px wide andd your 275px wide image fits nicely. But when the window is 1000px wide, your aside is only 250px wide and your 275px wide image no longer fits.

One option is to use CSS to handle the overflow:


figure {
    overflow: hidden;
}

The overflow property has values that include visible (default), hidden, scroll and auto.

Images for Liquid Layouts

Responsive Web Design recommends we set the max-width to 100% in the CSS:


img {
    max-width: 100%;
}

If the image is narrower than its container, it will display at its normal size.
If it is wider than its container, it will be scaled down to match the width of the container.

Or you could set the width to 100%:


img {
    width: 100%;
}

Then the image scales up or down to match the container.

These solutions carry the disadvantages we discussed earlier: the scaling done by the browser takes time, and sometimes we are downloading large images, wasting bandwidth, only to scale them down on the browser.

You need to make sure hieght is auto, so that the browser preserves the aspect ratio. (Of course, if you set the ehigt, then the width should be auto.)

Should you still put the width and height in HTML. This is in flux: originally, yes; then, no; now, yes again. Brwosers use this to calculate aspect ratio and to get a hint about layout. (And this works with srcset, provided all images have the same aspect ration, but not so much when picture uses art direction and even aspect ratio changes.) So watch this space.

One part of *CSS* that is nearly usable is aspect-ratio, ideal for know-ahead-of-time aspect ratios, e.g.

            .thumb {
                aspect-ratio: 1/1;
            }
            
            .hero {
                aspect-ratio: 16/9;
            }

And for other situations, there will be an *HTML attribute* for images called intrinsicsize.

But There Are Still Problems

resolution switching problem: you want to serve smaller image files to narrow screen devices, and also optionally you want to serve different resolution images to high density/low density screens
art direction problem: you want to serve different images for different layouts — for example a wide image showing a full scene for a desktop layout, and a narrower, cropped image showing a close-up for a mobile layout

Resolution Switching

HTML solves this using the srcset and sizes attributes, e.g.:


<img
     srcset="wombat-small.jpg 480w,
             wombat-large.jpg 800w"
     sizes="(max-width: 600px) 480px,
            800px"
     src="wombat-large.jpg"
     alt="..." />


<img 
     srcset="wombat.jpg,
             wombat-hi-res.jpg 1.5x"
     src="wombat-hi-res.jpg"
     alt="..." />

So you prepare multiple images: different sizes, different resolutions. And you write conditions in this attribute value about which should be fecthed and when.

In the first example, I prepare two imaes: small and large. In the srcset, I give their URLs and how wide they are using w, not px.

I won't explain in detail because it's quite fiddly. Best to look it up. I'll just give you the flavour.

Then the sizes attribute gives hints to the browser. The one says if I have up to 600px available (so the width here is viewporet, not image), thenuse the 480px image. Else use the 800px image.

The src attribute is still required. It will be used if none of the hints is true (doesn't apply here) and also for browsers that do not understand srcset/sizes.

The second example selects by resolution.

The Art Direction Problem

HTML solves this using the picture and source elements, e.g.


<picture>
    <source media="(max-width: 799px)" srcset="wombat-cropped.jpg" />
    <source media="(min-width: 800px)" srcset="wombat.jpg" />
    <img src="wombat.jpg" alt="..." />
</picture>

Web Development

Lecture Objectives

Responsive Web Design (RWD)

Responsive Web Design

Responsive Components

CSS Media Queries

Media Queries

Media Queries for RWD

Least-capable-clients-first and Progressive Enhancement

Simple RWD Example

Simple RWD Example: CSS

Common Breakpoints

A Problem

A Fix

Foreground Images

Images in Fixed-width Layouts

Images in Fixed-width Layouts

Images for Liquid Layouts

Images for Liquid Layouts

But There Are Still Problems

Resolution Switching

The Art Direction Problem

G'luck!