02.RWD Responsive Web Design Smartphone
Il mediaQuery Bookmarklet è uno strumento utile in fase di progettazione e di test delle mediaqueries.
Il tool funziona su:
- Chrome 9+
- Safari 5.1.5
- iOS 5.1.1
A questo indirizzo trovi la pagina ufficiale per installare il tool.
Dovo aver aggiunto il bookmark sulla barra, per utilizzarlo sarà sufficiente cliccare sul relativo elemento. Così facendo il tool verrà immediatamente eseguito.
Una volta lanciato il bookmarklet mostrerà una nuova piccola "finestra" all'interno della pagina web con le informazioni riguardo la dimensione in pixel della finestra del browser, la posizione del mouse in coordinate x e y, e il valore del min-width espresso in em.
Cambiando la dimensione della finestra i valori nel box cambieranno di conseguenza. Questo tool ci permetterà, in fase di progettazione del sito, di capire a che risoluzioni applicare le mediaquery, ed in fase di test di vedere con precisione quando le mediaqueries verranno applicate.
Segue una lista di tool utili per lo sviluppo con le mediaquery:
L'approccio mobile first (o mobile up) è quello che parte dalla progettazione della pagina alle basse risoluzioni per vedere come si comporta il contenuto.
Aprire nel browser la pagina index.html (dalla cartella codemotion2014 se avete usato git)
Aprire il codice sorgente e studiare velocemente la struttura semantica della pagina.
Analizzare come la pagina si comporta all'interno del browser.
Lanciare il bookmarklet. Comparirà un box in alto a sinistra con le informazioni riguardo la dimensione in pixel della finestra del browser, la posizione del mouse in coordinate x e y, e il valore del min-width espresso in em.
La pagina che stiamo visualizzando non ha nessuna specifica impostata relativa alla media query.
Portiamo alla risoluzione più bassa (almeno 400px) 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 risoluzioni basse.
- qual'è il suo comportamento.
- come si deve disporre il contenuto
ES: nella maggior parte dei casi i contenuti si dispongono verticalmente per facilitare la lettura.
Una volta definito in che modo la pagina dovrà visualizzarsi all'interno del browser, si comincia con la progettazione della prima media query, quella che definirà come il contenuto dovrà disporsi nella viewport del browser.
Tenendo sempre in considerazione che lo spazio è decisamente ridotto, non mostreremo immagini all'interno delle notizie. Quindi il banner viene 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.
Stiamo usando l'approccio Mobile First (o Mobile Up) e partiamo quindi dalla risoluzione più bassa.La prima media query che vogliamo intercettare è quella che scatta dalla risoluzione più bassa alla risoluzione massima di 479px.
Step 1. Cominciamo inserendo alla fine del file style.css il blocco che mi permette di definire gli statement CSS per la media query:
/***** Media Queries *****/
/* Small screen */
@media only screen and (max-width: 479px) {
}
Al suo interno cominciamo ad implementare le istruzioni per definire il comportamento dei componenti principali:
- container
- header
- main_section
- aside
- footer
Aggiunta la media query, questa sarà presa in considerazione non appena la risoluzione del browser sarà minore uguale a 479px. Al suo interno possiamo comunicare al browser in che modo deve ricalcolare gli stili.
Il layout a questa risoluzione deve svilupparsi verticalmente, con tutti gli elementi renderizzati uno sotto l'altro. Cominciamo nascondendo gli elementi come menù e banner che non devono essere visualizzati da un device come lo smartphone applicando il "display:none;"
#header #nav ul { display: none; }
.banner_section { display: none; }
Modifichiamo quindi anche la dimensione del contenitore della nostra pagina.
#container { width: 320px; box-shadow: none; }
Salva ed aggiorna la pagina per visualizzare i cambiamenti
Il risultato ottenuto dovrebbe essere molto simile a questo:
Sempre all'interno della nostra media queries, diamo le nuove dimensioni al container principale all'header ed al footer:
#header { width: 300px; height: 80px; padding: 0 10px; }
#header .logo {
background: url('../img/logo_small.png') center center no-repeat;
width: 130px;
height: 42px;
text-indent: -9999px;
float: left;
margin: 0 auto;
float: none;
padding-top: 40px;
}
#header #nav .menu {
display: block;
visibility: visible;
width: 34px;
height: 24px;
background: url('../img/menu.png') center center no-repeat;
position: absolute;
top: 30px;
right: 10px;
text-indent: -9999px;
}
Analizziamo nel dettaglio cosa è cambiato:
- #header .logo: cambia la dimensione, il formato del logo, i margini e l'allineamento;
- #header #nav .menu: viene mostrato con i margini e l'allineamento a destra;
Salva ed aggiorna la pagina per visualizzare i cambiamenti Il risultato ottenuto dovrebbe essere il seguente:
Step 4. Definiamo ora il comportamento che la parte centrale e della parte destra (aside) del sito web.
.main_section {
width: 320px;
float: none;
padding: 20px 0;
}
.main_section .article {
border-bottom: 1px solid #ccc;
margin-bottom: 40px;
padding: 0 10px 40px;
}
.main_section .article .figure { display: none; }
.main_section .article h1 { width: 300px; float: none; }
.main_section .article p { width: 300px; float: none; }
Analizziamo nel dettaglio cosa è cambiato con queste modifiche:
- .main_section: nuove dimensioni, modifica dei margini, ed è stato rimosso l'allineamento.
- .main_section .article: aggiunto il bordo inferiore, sistemati i margini dell'oggetto
- .main_section .article .figure: tutte le immagini non vengono renderizzate
- .main_section .article h1/p: nuova dimensione ed allineamento
Salva ed aggiorna la pagina per visualizzare i cambiamenti
Il risultato dovrebbe essere molto simile a questo:
Fino ad ora abbiamo lavorato sulla parte superiore e centrale della nostra pagina, il prossimo passo è quello di definire il comportamento della barra destra della pagina.
Il contenuto di essa deve scorrere dopo la parte centrale, quindi definiamo allineamenti e margini, anche in questo caso le immagini non devono essere renderizzate:
#aside {
width: 300px;
float: none;
padding: 20px 10px;
border-left: none;
border-top: 1px solid #ccc;
}
#aside .callout_text {
float: none;
width: 300px;
margin-top: 30px;
}
#aside .callout_text li { margin: 30px 10px; }
#aside .callout_images { display: none; }
Salva ed aggiorna la pagina per visualizzare i cambiamenti
Come ultimo step non ci resta che modificare anche il footer, in questo casolo solo per le dimensioni ed i margini:
#footer {
width: 300px;
padding: 30px 10px;
text-align: center;
}
#footer .copy { float: none; margin-bottom: 20px; }
#footer .privacy { float: none; }
Salva ed aggiorna la pagina per visualizzare i cambiamenti, in questo modo abbiamo terminato lo sviluppo della versione mobile.
Il risultato del lavoro fatto:
