Responsive | CSS cursus

Youtube: totaaldemo ‐ responsive

Deze video maakt deel uit van een HTML + CSS totaaldemo uit de Basic Web Development playlist, die begint met de video BWD 01. HTML - deel 8: praktijkdemo

https://www.youtube.com/watch?v=ruw_w5PB4Rc

Definitie

Responsive design is gericht op het bieden van een optimale gebruikservaring over een breed gamma aan schermresoluties en toestellen met één enkele code.

De site moet zich dus optimaal aanpassen ('respond') aan elke schermbreedte. Je kan in de browser inspector verschillende toestellen testen met de device toggle:

→ het is dus één site, één code die er op alle toestellen geven goed moet uitzien

Content choreografie

Bij smaller wordende schermen zullen elementen (teksten, afbeeldingen, kaders, kolommen...) moeten herschalen / verspringen / verdwijnen. Dit noemt men de content choreografie:

elementen uitrekken / platduwen → flexibiliteit
elementen herschikken → fluïditeit
elementen toevoegen / verwijderen
...

Er zijn geen echte regels over wat precies wanneer moet gebeuren; dit is geheel aan jou. Probeer bredere / smallere schermen, en kijk wat goed voelt.

Responsive in 3 stappen

stap 1: controleer of de viewport meta aanwezig is in de <head>
stap 2: maak de layout flexibel (wrapper, kolommen, foto's, boxen...)
- gebruik zoveel mogelijk flexbox voor layout
- maak de eventuele wrapper flexibel: vervang width door min-width en max-width
- maak eventuele kolommen flexibel: zet breedtes in percentages in plaats van vaste waarden
- maak de hoogte van container elementen flexibel: verwijder height
- maak kaders en foto's flexibel: stel width op 100% en stel eventueel max-width in
stap 3: voeg media queries toe
- versmal/verbreed het browservenster en kies een breekpunt
- voeg een media query toe voor dit breekpunt (gebruik altijd min-width)
- voeg responsive CSS toe aan de media query en verander/verwijder eventueel andere CSS
- controleer het resultaat en keer terug naar punt a tot je tevreden bent

Stap 1: viewport metatag

Laat je mobiel toestel weten dat de site responsive is, zoniet zal het proberen de desktopversie van de site te herschalen en persen in het kleine scherm. Het is niet meer dan één viewport metatag toevoegen aan je HTML:

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

Irritant genoeg kom je soms ook deze versie tegen, maar die laat de gebruiker niet inzoomen:

<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">

Stap 2: flexibele layout

2A: gebruik flexbox

Gebruik voor layout zoveel mogelijk flexbox, zeker geen positionering, bv.:

header #logo {
   position: absolute;
   top: 20px;
   left: 10px;
}

header #login {
   position: absolute;
   top: 20px;
   right: 10px;
}

header {
   align-items: flex-start;
   display: flex;
   justify-content: space-between;
   padding: 20px 10px;
}

→ zou normaal gezien al ok moeten zijn

2B: flexibele wrapper

Stel flexibele min-width en max-width in op wrappers in plaats van vaste width:

.wrapper {
   width: 960px;
}

.wrapper {
   max-width: 960px;
   min-width: 320px;
}

2C: flexibele kolommen

Gebruik geen vaste width: ...px kolombreedtes, maar flex:

.leftcol {
   width: 640px;
}
.rightcol {
   width: 280px;
}

.leftcol {
   flex: 1 1 640px; 
}
.rightcol {
   flex: 0 0 280px;
}

2D: flexibele hoogtes

Elementen moeten zich verticaal in hoogte kunnen aanpassen naargelang de herschikking van de content. Verwijder daarom height van verticaal flexibele elementen, bv. de header:

header {
   height: 250px; /* geen vaste hoogte */
}

2E: flexible blokken

Stel voor afbeeldingen en andere flexibele blokken met een maximum breedte de width en max-width properties in:

main img {
   max-width: 100%; /* mag nooit breder dan de parent zijn */
   width: 450px; /* natuurlijke breedte */
}

Stap 3: media queries

3A: bepaal breekpunt

Een breekpunt is de browserbreedte vanaf waar veranderingen aan de CSS nodig zijn. Een breekpunt bepalen is makkelijk:

open je pagina in de browser
maak je browservenster smaller (het zou al flexibel moeten zijn)
de breedte waar het design er niet meer goed uitziet, is je breekpunt

Er zijn geen 'aanbevolen' breekpunten; kies wat past bij je design.

2B: voeg media query toe

Stel dat je een overgang wil op 800px, dan komt er onderaan je CSS dit blok bij:

/* CSS voor smalste schermen *
...

/* ===============
Media queries
=============== */

@media (min-width: 800px) { /* deze CSS wordt uitgevoerd vanaf 800px */

}

2C: responsive CSS

Voeg nu CSS toe aan de media query en pas eventueel andere CSS aan. Wil je bijvoorbeeld een groter lettertype en wat meer ondermarge voor <h2> vanaf 800px?

/* standaardinstelling */
h2 {
   font-size: 16px;
   margin: 10px 0;
}

/* vanaf 800px */
@media (min-width: 800px) { 
   h2 {
      font-size: 20px; /* iets groter lettertype */
      margin-bottom: 15px; /* wat meer ondermarge */
   }
}

→ meer dan dat is het niet! het is even wennen, maar daarna gaat het vanzelf

2D: meer breekpunten

Controleer je resultaat, en voeg eventueel meer breekpunten toe, van klein naar groot:

/* CSS voor smalste schermen */
...

/* ===============
  Media queries
  =============== */

/* vanaf 600px */
@media (min-width: 600px) { 
   ...
}

/* vanaf 800px */
@media (min-width: 800px) { 
   ...
}

/* vanaf 1000px */
@media (min-width: 1000px) { 
   ...
}

zet je media queries op het einde van je CSS
sorteer je breekpunten van klein naar groot
gebruik enkel min-width, geen max-width of een combinatie, of het wordt een soep!

Stap voor stap demo

Gewenst resultaat

We willen deze pagina responsive maken:

Stap 1: viewport meta

De HTML code, mét viewport metatag in de <head>, en de niet-flexibele, niet-responsive CSS code:

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Classical Page Layout</title>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="css/styles.css">
</head>
<body>
   <div id="wrapper">
      <header>
         <h1><a href="#">My Blog</a></h1>
         <p class="header_login">You are not logged in – <a href="#">login</a></p>
      </header>
      <nav id="mainmenu">
         <ul>
            <li><a href="#">home</a></li>
            <li><a href="#">link1</a></li>
            <li><a href="#">link2</a></li>
         </ul>
      </nav>
      <main>
         <nav id="leftmenu">
            <h3>Submenu</h3>
            <ul>
               <li><a href="#">item1</a></li>
               <li><a href="#">item2</a></li>
               <li><a href="#">item3</a></li>
               <li><a href="#">item4</a></li>
               <li><a href="#">item5</a></li>
               <li><a href="#">item6</a></li>
            </ul>
         </nav>
         <section id="content">
            <h3>Lorem Ipsum</h3>
            <aside>
               <section>
                  <p>
                     For further reading, see also this
                     <a href="#">more detailed article</a>
                  </p>
               </section>
               <article class="ad">
                  <h1>Advertisement</h1>
                  <p>Buy our <a href="#">brand new T-shirt</a> today!</p>
                  <img src="img/shirt.png" alt="shirt" class="article_visual">
                  <p>© <a href="#">someCompany</a></p>
               </article>
            </aside>
            <p class="content_header">Posted on 2018-11-03 by Bobby Peru</p>
            <h4>Part 1</h4>
            <p>
               But I must explain to you how all this mistaken idea of denouncing pleasure
               and praising pain was born and I will give you a complete account of the
               system, and expound the actual teachings of the great explorer of the truth,
               the master-builder of human happiness. No one rejects, dislikes, or avoids
               pleasure itself, because it is pleasure, but because those who do not know.
            </p>
            <h4>Part 2</h4>
            <p>
               Nor again is there anyone who loves or pursues or desires to obtain pain of
               itself, because it is pain, but because occasionally circumstances occur in
               which toil and pain can procure him some great pleasure. To take a trivial
               example, which of us ever undertakes laborious physical exercise, except to
               obtain some advantage from it? But who has any right to find fault with a
               man who chooses to enjoy a pleasure that has no annoying consequences, or
               one who avoids a pain that produces no resultant pleasure?
            </p>
            <p><img src="img/picture.jpg" alt="just some picture" class="content_picture"></p>
            <h4>Part 3</h4>
            <p>
               On the other hand, we denounce with righteous indignation and dislike men who
               are so beguiled and demoralized by the charms of pleasure of the moment, so
               blinded by desire, that they cannot foresee the pain and trouble that are
               bound to ensue; and equal blame belongs to those who fail in their duty
               through weakness of will, which is the same as saying through shrinking from
               toil and pain.
            </p>
            <section id="comments">
               <h4>Comments</h4>
               <article class="comment">
                  <h5 class="comment_title">
                     I love Lorem Ipsum <span class="comment_author">
                     — Alice, 3 hours ago</span>
                  </h5>
                  <p>
                     “I personally believe Lorem Ipsum is the most sensitive poem ever
                     written”. As it so contrasted oh estimating instrument. Size like
                     body some one had. Are conduct viewing boy minutes warrant expense.
                  </p>
               </article>
               <article class="comment">
                  <h5 class="comment_title"
                     >Lorem Ipsum Sucks <span class="comment_author">
                     — Bob, 2 hours ago</span>
                  </h5>
                  <p>“Tolerably behaviour may admitting daughters offending her ask own.
                  Praise effect wishes change way and any wanted. There, I said it!”</p>
               </article>
            </section>
         </section>
      </main>
      <footer>
         <p>© Rogier van der Linde, 2010</p>
         <ul>
            <li><a href="#">disclaimer</a>
            <li><a href="#">sitemap</a>
            <li><a href="#">contact</a>
         </ul>
      </footer>
   </div>
</body>
</html>

/**
 *
 * Styles
 * @author Rogier van der Linde
 *
**/
  
  
/* Reset
/* ============== */

* {
   box-sizing: border-box; /* corrigeer het box model */
   margin: 0; /* wis verschillen tussen browsers uit */
   padding: 0; /* wis verschillen tussen browsers uit */
}

img {
   border: 0;
}

/* General
/* ============== */

body {
   background-color: #999;
   font-family: Verdana;
   font-size: 16px;
}
h2, h3, h4, h5 {
   margin: 1em 0;
}
h3 {
   font-size: 16px;
   font-weight: normal;
}
h4 {
   font-size: 14px;
}
h5 {
   font-size: 12px;
   font-weight: normal;
}

/* site wrapper */
#wrapper {
   width: 900px;
   margin: 0 auto;
   background-color: white;
}


/* Header
/* ============== */

header {
   align-items: flex-start;
   background-color: #333;
   color: #ccc;
   display: flex;
   flex-flow: row nowrap;
   justify-content: space-between;
   height: 100px;
   padding: 20px;
   position: relative;
}
header h1 a {
   font-weight: normal;
   text-decoration: none;
}
header a {
   color: #ddd;
}
.header_login {
   text-align: right;
}
.header_login a:hover {
   color: white;
}


/* Menu
/* ============== */

/* top menu */
nav {
   background-color: #666;
   padding: 10px 20px;
}
#mainmenu {
   display: block;
}
#mainmenu li {
   display: inline-block;
}
#mainmenu a {
   color: #ccc;
   display: inline-block;
   height: 28px;
   line-height: 24px;
   padding: 2px 5px;
   text-align: center;
   width: 50px;
}
#mainmenu li + li:before {
   color: #999;
   content: '|';
}


/* Main
/* ============== */

main {
   display: flex;
   flex-flow: row nowrap;
}

/* sub menu */
#leftmenu {
   background-color: #FEFF99;
   padding: 10px 20px;
   width: 190px;
}
#leftmenu ul {
   list-style: none;
}

/* content */
#content {
   padding: 10px 20px;
   width: 710px;
}
.content_header {
   font-size: smaller;
   font-style: italic;
   margin-bottom: 15px;
   margin-top: 25px;
}
.content_picture {
   margin: 20px 0;
   width: 450px;
}

/* aside */
main aside {
   border: 1px solid gray;
   float: right;
   font-size: smaller;
   margin: 15px 0 10px 10px;
   padding: 10px;
   width: 160px;
}
main aside article {
   font-size: 12px;
   margin-top: 10px;
   text-align: justify;
}
.article_visual {
   display: block;
   margin: 0 auto;
   width: 80%;
}
main aside article p:last-child {
   margin-top: 5px;
}
main aside article h1 {
   margin: 10px 0;
}

/* comments */

#comments {
   border-top: 1px dotted #ccc;
   font-size: 12px;
   margin-top: 40px;
}
.comment {
   width: 500px;
}
.comment_title {
   margin-bottom: 0.5em;
   font-weight: 600;
}
.comment::after {
   border-top: 1px solid #ccc;
   content: "";
   display: block;
   margin: 10px 0;
   width: 100px;
}
.comment_author {
   font-style: italic;
}

/* Footer
/* ============== */

footer {
   background-color: #666;
   color: #eee;
   font-size: smaller;
   padding: 10px;
   text-align: center;
}

footer a {
   color: #ccc;
}

footer p, footer ul  {
   margin: 10px 0;
}

footer ul {
   list-style: none;
   padding: 0;
}

footer li {
   display: inline-block;
}

footer ul a {
   display: inline;
   line-height: 24px;
   padding: 2px 5px;
}
footer li + li:before {
   content: ' | ';
   color: #999;
}

niet flexibel of responsive: horizontale scrollbar verschijnt

Stap 2: flexibel maken

Aanpassingen:

wrapper: max-width en min-width gebruikt i.p.v.width
header: height verwijderd, vervangen door padding-bottom
main kolommen: absolute breedtes vervangen door flex
content foto en comments: width veranderd naar 100%, max-width ingesteld

...
#wrapper {
   width: 900px;
   max-width: 900px;
   min-width: 240px;
   ...
}

header {
   height: 100px;
   padding-bottom: 40px;
}
  
#leftmenu {
   width: 190px;
   flex: 0 0 190px; 
}

#content {
   width: 710px;
   flex: 1 1 710px;
}

.content_picture {
   width: 450px;
   max-width: 450px;
   width: 100%;
}

.comment {
   width: 500px;
   width: 100%;
}

flexibel: geen horizontale scrollbar meer, maar nog niet responsive: content verschuift niet

Stap 3: media queries

Aanpassingen:

media queries toegevoegd voor 480px en 600px
header property display: flex verhuisd naar eerste media query (actief vanaf 480px)
aside properties float, width en linkermargin verhuisd naar eerste media query (actief vanaf 480px)
main property display: flex verhuisd naar tweede media query (actief vanaf 600px)

...
header {
   ...
   display: flex;
}

main {
   ...
   display: flex;
}

main aside {
   ...
   float: right;
   margin: 15px 0 10px 10px;
   width: 160px;
   margin: 15px 0 10px 0;
}
/* Media queries
/* ============== */

@media (min-width: 480px) {
   main aside {
      float: right;
      margin-left: 10px;
      width: 160px;
   }
   header {
      display: flex;
   }
}
@media (min-width: 600px) {
   main {
      display: flex;
   }
}

responsive: geen horizontale scrollbar meer, en content herschikt naargelang schermbreedte

Best practices (belangrijk!)

zet je media queries altijd op het einde van je CSS
gebruik alleen min-width, geen max-width en zeker niet beiden
sorteer je breekpunten van smal naar breed
voorzie 2 tot 3 breekpunten voor een goede choreografie; één is te weinig, meer is overkill

er mag geen horizontale scrollbar meer verschijnen, anders heb je een fout gemaakt
vermijd dubbele code; CSS staat ofwel in een media query, ofwel daarbuiten — niet in beiden
zet in media queries niet meer dan strikt nodig; properties als justify-content kunnen vaak erbuiten blijven staan

05. CSS responsive

Youtube: totaaldemo ‐ responsive

Definitie

Content choreografie

Responsive in 3 stappen

Stap 1: viewport metatag

Stap 2: flexibele layout

2A: gebruik flexbox

2B: flexibele wrapper

2C: flexibele kolommen

2D: flexibele hoogtes

2E: flexible blokken

Stap 3: media queries

3A: bepaal breekpunt

2B: voeg media query toe

2C: responsive CSS

2D: meer breekpunten

Stap voor stap demo

Gewenst resultaat

Stap 1: viewport meta

Stap 2: flexibel maken

Stap 3: media queries

Best practices (belangrijk!)