Progettazione di siti web
a.a. 2021/22

Responsive web design

Maria Simi
Aprile, 2022

[Responsive web design, Ethan Marcotte (2011); Mobile first, Luke Wroblewski (2011)]

Due piccoli e-book del 2011

Accesso al web


access stats

Immagine da StatCounter

Statistiche più recenti: Italia


access stats

Immagine da StatCounter

Le sfide del web oggi e domani


The web The web
The web

Immagini di Brad Frost

Come affrontare tutto ciò

Fogli di stile alternativi per media diversi

Fogli di stili per media diversi: uso

<link rel="stylesheet"  
      media="screen, projection" href="stile_schermo.css" />

<link rel="stylesheet"
      media="print" href="stile_stampa.css" />

Il primo è utilizzato per lo schermo o la proiezione, il secondo per la stampa (visibile con anteprima di stampa).

In alternativa, nel foglio di stile:

@media screen {
   body {font-size: 0.8em;}
}
@media print {
    body {font-size: 15pt;}
    nav {display: none}
}

Responsive web design

Arrendersi alla marea

The control which designers know in the print medium, and often desire in the print medium, is simply a function of the limitations 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" (2000)

Nella filosofia cinese "dao" sta per "la via" (il processo in cui la natura si manifesta in continuo mutamento)

La tela e i suoi vincoli


access stats

Immagine dal libro di E. Marcotte

Design for flexibility!

Responsive architecture

21 aprile 2015: giorno del Mobilegeddon

Mobilegeddon

Il libro di E. Marcotte

Griglia flessibile: un esempio

<div id="page">
  <div class="blog section">
    <h1 class="lede">Recently in 
         <a href="♯">The Bot Blog</a>
    </h1>
    <div class="main">
      …
    </div><!-- /end .main -->
    <div class="other">
      …
    </div><!-- /end .other -->
  </div><!-- /end .blog.section -->
</div>

Griglia flessibile in tre passi

Come calcolare le misure relative

Immagini flessibili

Immagini di sfondo: false colonne

Immagini di sfondo flessibili

Stili alternativi per tipo di media

Media query

@media screen and (min-width: 1024px) {
    body {font-size: 100%}
}

oppure anche (nella head del documento HTML):

<link rel="stylesheet" href="wide.css" 
      media="screen and (min-width: 1024px)" />

Attributi nelle media query

widthampiezza browsermin, max
heightaltezza browsermin, max
device-widthampiezza dispositivomin, max
device-heightaltezza dispositivomin, max
orientationportrait, landscape-
aspect-ratioampiezza:altezza, es 16:9min, max
device-aspect-ratioampiezza:altezzamin, max
colorn. di bit per il coloremin, max
color-indexn. di colori nella palettemin, max
monochromen. di colori per pixelmin, max
resolutiondefinizione in dpimin, max

Media query combinate

@media screen and 
       (min-device-width: 480px) and 
       (orientation: landscape) {
    body { ... }
    }

@media screen and (max-width: 320px) {
  #page {
    margin: 20px; 
    width: auto; 
    }
    
  #extras {
    display: none;
    }
  }

Controllo dello "scaling" con viewport

Normalmente i dispositivi mobili scalano le pagine per adattarle al dispositivo. Rimpiccioliscono tutto. Meglio che tagliare!

Da includere sempre nell'head dei siti ottimizzati per i dispositivi mobili

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

L'ampiezza della pagina viene adattata all'ampiezza del dispositivo, e la scala è fissata 1:1, evitando ridimensionamenti da parte del browser.

Da provare con il cellulare:          Normale    No scaling

Media query in azione

<div id="page">  <!-- Struttura della pagina -->
  <h1 class="logo"> ... </h1>
  <ul class="nav"><li>...</li><li>...</li><li>...</li><li>...</li></ul>
  <div class="welcome"> ... </div>
  <div class="main">
     <h1 class="main_title">You can never be too sure.</h1> ... </div>
  <div class="other"> ... </div>
  <div class="gallery"> ... </div>
  <div class="footer"> ... </div>
</div>

Versione in piccolo (< 768)

@media screen and (max-width: 768px) {
  ♯page { /* margini più piccoli, ampiezza al massimo */
    margin: 20px;  /* invece che 38px */
    width: auto;   /* invece che 90% */
  }
  .welcome, .blog, .gallery { 
      margin: 0 0 30px; /* margini piu' piccoli */
      width: auto;      /* ampiezza al massimo */
   }
  .main-title { /* Titolo piu' piccolo e in una font diversa */
      font: normal 1.5em Calibri, Candara, Segoe, ...  sans-serif; 
   }
}

Versione in molto piccolo (< 520)

@media screen and (max-width: 520px) {
  .nav-primary li {
    clear: left; float: left; width: 48%;
   }
  li♯nav-rated, li♯nav-contact {       /* li:nth-child(even) { */
    clear: right; float: right;
   }
  .nav-primary a {
    display: block; padding: 0.45em;
   }
}

Robot or not (in molto piccolo)

Versione molto grande (> 1200)

@media screen and (min-width: 1200px) {
  .welcome, .blog, .gallery {
    width: 49.375%;
  }
  .welcome, .gallery {
    float: right;
    margin: 0 0 40px;
  }
  .blog {
  float: left;
  margin: 0 0 20px;
  }
  ♯footer {clear: both}
}

Robot or not (in wide screen)

Robot or not (finito)

Una base fluida e punti di rottura

www.yourinspirationweb.com

Resolution breakpoint e dispositivi


cmswire.com

Responsive design o versioni diverse?

Mobile first

Mobile first in pratica

.page {      /* Default, linear layout */
   margin: 0 auto;
   max-width: 700px;
   width: 93%;
}
@media screen and (min-width: 600px) { … }    /* Small screen! */
@media screen and (min-width: 860px) { … }    /* Desktop */
@media screen and (min-width: 1200px) { … }   /* wide-screen */

Suggerimenti e strumenti di sviluppo

Conclusioni