03.RWD Responsive Web Design Tablet
Come fatto per la sezione smartphone, analizziamo e progettiamo il comportamento della nostra pagina con una risoluzione più grande, decidiamo in che modo il contenuto deve disporsi all'interno della pagina.
Per avere un versione stabile, pulita e pronta per questa esercitazione, puoi scaricare l'archivio da questo link https://github.com/marcocasario/codemotion2014/tree/responsive-tablet-dev. Oppure puoi spostare il tuo ramo di sviluppo sul branch responsive-tablet-dev:
git checkout responsive-tablet-dev
Apriamo la nostra index.html sul browser.
Portiamola alla risoluzione tablet (almeno 600px) restringendo la finestra del browser e leggendo i valori nel box del mediaQuery tool.
Definiamo quindi i seguenti punti:
- cosa deve succedere al sito quando visualizzo la pagina con una risoluzione simile.
- qual'è il suo comportamento.
- come si deve disporre il contenuto.
Anche a questa risoluzione lo spazio è ancora abbastanza ridotto, mostreremo solo le immagini all'interno delle notizie principali. Il banner resterà nascosto. Tutto il contenuto avrà una disposizione verticale. Tutti i contenitori adattano la propria dimensione in modo tale che la barra orizzontale non venga mai visualizzata.
Sempre con un approccio Mobile First, la nostra seconda media query che vogliamo intercettare è quella che scatta ad una risoluzione tra 480px e 767px.
/* Small Tablet */
@media only screen and (min-width: 480px) and (max-width: 767px) {
}
Come abbiamo già fatto per la parte smartphone, al suo interno implementeremo le istruzioni per definire il comportamento dei componenti principali:
- container
- header
- main_section
- aside
- footer
Il layout anche a questa risoluzione si dovrà sviluppare verticalmente, con tutti gli elementi renderizzati uno sotto l'altro. Il menù ed il banner centrale continueranno a rimanere nascosti, mostreremo solo le immagini delle notizie centrali, mentre quelle inserite all'interno dell'aside resteranno non renderizzate.
Il "#container" in questo caso avrà una larghezza massima di: 480px. Il resto degli oggetti all'interno della nostra pagina (#header, .main_section, #aside, #footer) avranno una dimensione di: 440px;
Le immagini del corpo centrale della pagina avranno una dimensione di circa 417px senza impostare alcun allineamento.
.main_section .article .figure {
width: 417px;
float: none;
}
A questo punto non ci resta che regolare tutti i margini dei nostri oggetti all'interno della pagina per avere un risultato come questo:
Portiamola alla risoluzione tablet (almeno 800px) restringendo la finestra del browser e leggendo i valori nel box del mediaQuery tool.
Definiamo quindi i seguenti punti:
- cosa deve succedere al sito quando visualizzo la pagina con una risoluzione simile.
- qual'è il suo comportamento.
- come si deve disporre il contenuto.
Sempre con un approccio Mobile First, la nostra seconda media query che vogliamo intercettare è quella che scatta ad una risoluzione tra 768px e 1023px.
/* Tablet */
@media only screen and (min-width: 768px) and (max-width: 1023px) {
}
Come abbiamo già fatto per la parte smartphone, al suo interno implementeremo le istruzioni per definire il comportamento dei componenti principali:
- container
- header
- main_section
- aside
- footer
Il layout a questa risoluzione si dovrà sviluppare in parte verticalmente. Abbiamo abbastanza spazio per visualizzare il menù in alto, ed abbiamo lo spazio necessario per mostrare anche il banner.
Tutte le immagini all'interno della pagina vengono visualizzate.
Il "#container" in questo caso avrà una larghezza massima di: 768px. Il resto degli oggetti all'interno della nostra pagina (#header, .main_section, #aside, #footer) avranno una dimensione di: 688px;
Il corpo centrale, dopo il banner, occuperà tutto lo spazio disponibile in orizzontale e le immagini avranno una dimensione di circa 250px con allineamento a sinistra.
.main_section {
width: 768px;
float: none;
padding: 40px 0;
}
.main_section .article {
border-bottom: 1px solid #ccc;
margin-bottom: 40px;
padding: 0 40px 40px;
}
.main_section .article .figure {
width: 250px;
float:left;
}
.main_section .form_box .input { width: 290px; }
.main_section .form_box .textarea { width: 686px; }
Aggiorniamo la pagina all'interno del browser, il risultato dovrebbe essere molto simile a questo:
La barra di destra (aside) si sposta subito dopo le notizie principali, occupando l'intera area in orizzontale:
#aside {
width: 688px;
float: none;
padding: 0 40px;
border-left: none;
border-top: 1px solid #ccc;
}
#aside .callout_text {
float: left;
width: 410px;
margin-top: 50px;
}
#aside .callout_text li {
margin: 30px 0 80px;
}
#aside .callout_images {
float: right;
width: 200px;
padding: 20px 0 20px 40px;
border-left: 1px solid #ccc;
margin-top: 0;
}
#aside .callout_images li { padding: 10px 0; margin: 0; }
Aggiorniamo la pagina all'interno del browser, il risultato dovrebbe essere molto simile a questo:
Aprire il browser e lanciare la seguente url: http://nerd.vasilis.nl/code/measure-help/
Questo semplice tool ci fa capire meglio come il contentuo si dispone in base all'aumentare o diminuire degli em, ovvero dell'area di visualizzazione relativa.
Riferimenti: http://webtypography.net/
La regola è:
target / context
Dove target è il breakpoint mentre il context è la dimensione del base font che setto a 16 px.
Esempio:
@media all and (max-width: 25em) { /* 400/16 */
@media screen and (min-width: 37.5em) { /* 600 / 16 */
@media screen and (min-width: 51.875em) { /* 830/16 */
@media all and (min-width: 62.5em) { /* 1000/16 */
@media screen and (min-width: 75em) { /* 1200/16 */