CS1115/CS5002

Web Development 1

Dr Derek Bridge

School of Computer Science & Information Technology

University College Cork

Responsive web design

There are many devices with many different screen sizes on which your web site should still be usable.

Mobile vs desktop web sites

Responsive Web Design

Responsive web design (RWD)

CSS3 Media queries

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

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

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

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

CSS3 Media queries

Media queries for RWD

Least-capable-clients-first and progressive enhancement

  1. Write nice HTML
    • proper use of HTML markup
    • logical order
    • validate it
    …for screen readers, search engine crawlers, etc.
  2. Write some core CSS
    • something that looks OK on all devices
    • e.g. single-column layout for the narrowest reasonable viewport widths
  3. 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

Example

/* Core */

@import url(https://fonts.googleapis.com/css?family=Shadows+Into+Light);

html {
    background-image: url('mint_stripes.jpg'); 
    /* Stripes background mint green: 
       http://www.publicdomainpictures.net/
           view-image.php?image=148956&picture=stripes-background-mint-green
       Licenced under CC BY 1.0 
           (https://creativecommons.org/publicdomain/zero/1.0/)
     */
    background-color: rgb(204, 239, 219);
}

* {
    margin: 0;
    padding: 0;
}

body {
    width: 70%;
    margin: 1em auto;
    background-color: rgb(1, 92, 3);
    color: white;
    border: 1em solid rgb(1, 92, 3);
    border-radius: 1em;
    font-size: 16px;
    font-family: 'Shadows Into Light', cursive;
}

nav, main, aside {
    background-color: white;
    color: black;
    padding: 1em;
    border: 0.0625em solid rgb(204, 239, 219);
    border-radius: 1em;
}

.cocktail {
    color: rgb(1, 92, 3);
    font-weight: bold;
}

img {
    max-width: 100%;
}

Example, continued

/* Header */

header {
    padding: 2em;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
}

header > h1 {
    font-size: 3em;
}

header > p {
    font-size: 2em;
}

Example, continued

/* Nav */

nav {
    padding: 1em 0;
    background-color: rgb(204, 239, 219);
    text-align: center;
}

nav ul {
    list-style: none;
    padding: 0 0.0625em;
}

nav li li {
    background-color: white;
    border: 0.0625em solid rgb(204, 239, 219);
}

Example, continued

/* Main */

main {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: flex-start;
}

main > h1, main > figure, main > p {
    flex-basis: 100%;
}

main > section {
    flex-basis: 48%;
    min-width: 15em;
    margin: 0.5em 0 1em 0;
    border: 0.0625em solid rgb(204, 239, 219);
    border-radius: 1em;
}

main > h1 {
    font-size: 2em;
}

main > section > h1 {
    font-size: 1.5em;
    padding: 0 1rem;
}

main > section > p {
    padding: 0 1rem;
}

main > p {
    margin: 0.5em 0 1em 0;
}

main ul, main ol {
    margin: 0.5em 0 1em 0;
    padding: 0 0 0 2.5em;
}

main > figure, #warning {
    text-align: center;
}

.attribution {
    display: block;
    font-size: 0.6em;
}

Example, continued

/* Aside */

aside > h1 {
    font-size: 1.5em;
}

aside > p {
    margin: 0.5em 0 1em 0;
    border-bottom: 0.0625em solid rgb(204, 239, 219);
}

/* Footer */

footer {
    padding: 2em;
}

Example, continued

/* Two-column layout */

@media screen and (min-width: 50em) {
    
    nav ul {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-around;
    }
    
    nav ul li {
        flex-basis: 10em;
    }
    
    body {
        display: grid;
        grid-template-columns: 75% 25%;
        grid-template-rows: auto;
        grid-template-areas: "upper-top upper-top"
                             "lower-top lower-top"
                             "middle-left middle-right"
                             "bottom bottom"
    }
    
    header {
        grid-area: upper-top;
    }

    nav {
        grid-area: lower-top;
    }

    main {
        grid-area: middle-left;
    }

    aside {
        grid-area: middle-right;
    }

    footer {
        grid-area: bottom;
    }
    
}

Example, continued

/* Three-column layout */

@media screen and (min-width: 70em) {

    nav {
        text-align: left;
        background-color: white;
        padding: 1em 0;
    }

    nav ul {
        margin: 0.5em 0 1em 0;
        padding: 0 0 0 2.5em;
    }

    nav li li {
        border: 0;
        border-bottom: 0.0625em solid rgb(204, 239, 219);
    }
   
    body {
        display: grid;
        grid-template-columns: 20% 55% 25%;
        grid-template-rows: auto;
        grid-template-areas: "top top top"
                             "middle-left middle-middle middle-right"
                             "bottom bottom bottom"
    }
    
    header {
        grid-area: top;
    }

    nav {
        grid-area: middle-left;
    }

    main {
        grid-area: middle-middle;
    }

    aside {
        grid-area: middle-right;
    }

    footer {
        grid-area: bottom;
    }

}

Example, continued

/* Fixed-width three-column layout */

@media screen and (min-width: 80em) {
    
    body {
        width: 60em;
    }
    
}

Common breakpoints

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

But,

Breakpoints

A final fix