La presentazione mostra l'anteprima della home page e del form del sito web Lorenzini Rooms per l'esercitazione di responsive design per il Corso di Progettazione di Interfacce e Valutazione dell'Usabilità, Prof. Fabio Paternò, Università di Pisa. Per la realizzazione del progetto è stato utilizzato il framework Bootstrap, i linguaggi markup HTML5 e CSS3 rispettando i principi di responsive design stabiliti dal W3C (http://www.w3schools.com/html/html_responsive.asp).

1. Responsive Design
Ilaria Tiezzi

2. Desktop
Home

3. TabletHome
SmartphoneHome

4. Adattamento
• PC (larghezza >= 992px)
– Menu orizzontale
– Slide show immagini
– Font più grandi
– Immagini più grandi e affiancate orizzontalmente
– Più spazio tra le sezioni del testo
– Footer suddiviso in due box affiancati orizzontalmente
• Tablet (larghezza >= 768px)
– Menu orizzontale
– Slide show immagini
– Font più piccolo
– Immagini più piccole e affiancate verticalmente
– Footer suddiviso in due box affiancati verticalmente
• Smartphone (larghezza < 768px)
– Menu dropdown
– Immagine fissa
– Font più piccolo
– Immagini più piccole e affiancate verticalmente
– Footer suddiviso in due box affiancati verticalmente
Home

5. Desktop
Form

6. TabletForm
SmartphoneForm

7. Adattamento
• PC (larghezza >= 992px)
– Menu orizzontale
– Titolo con font più grande
– Testi con font più grandi
– Form con testo affiancato al campo di input
– Footer suddiviso in due box affiancati orizzontalmente
• Tablet (larghezza >= 768px)
– Menu orizzontale
– Titolo con font più piccolo
– Sezione Call me per agevolare la chiamata immediata da mobile
– Testo con font più piccolo
– Form con testo affiancato al campo di input
– Footer suddiviso in due box affiancati verticalmente
• Smartphone (larghezza < 768px)
– Menu dropdown
– Titolo con font più piccolo
– Sezione Call me per agevolare la chiamata immediata da mobile
– Testo con font più piccolo
– Form con testo centrato antecedente il campo di input
– Footer suddiviso in due box affiancati verticalmente
Form

8. Usabilità generale
L’applicazione è intuitiva, l’uso dei colori e la varietà della grandezza dei font rende più
veloce la consultazione e l’individuazione delle aree principali del sito.
La semplificazione del grouping è efficace. La sostituzione dello slide show con i vari
elementi di navigazione delle immagini presenti nella versione desktop è stato
sostituito con un’immagine fissa per l’utente che visualizza il sito con uno smartphone,
in modo da alleggerire il caricamento del sito ed evitare distrazioni. La funzionalità
dell’applicazione non risulta compromessa dalla semplificazione.

9. Media query
Per il supporto di responsive design viene utilizzato il framework Bootstrap, pertanto le pagine
sono disposte su 12 colonne e sulla base dei seguenti breakpoint:
• Smartphone (width < 768px);
• Tablet (width ≥ 768px);
• PC ( width ≥ 992px);
• PC (width ≥ 1200px).
Inoltre all’interno del foglio di stile si è reso opportuno configurare ulteriormente alcuni
componenti dell’interfaccia differenziando le proprietà dei vari elementi in base al tipo di
piattaforma sulla base dei seguenti media query:
• Proprietà generali e per dispositivi con larghezza inferiore a 768px;
• @media (min-width: 768px);
• @media (min-width: 992px).

10. Esempio di stylesheet
Per i dispositivi con uno schermo inferiore a 768px è stato creato un box contenente l’immagine
da visualizzare nella pagina mobile. Dunque nel foglio di stile lo slide show è stato rimosso
dichiarando la seguente proprietà:
#carousel-example-generic {
display: none;
}
La visualizzazione dello slide show per i dispositivi con schermo maggiore o uguale a 768px è
invece possibile tramite la dichiarazione della proprietà display:
@media (min-width: 768px) {
.mobilePhoto {
display: none;
}
#carousel-example-generic {
display: block;
}
}
Aggiunta/rimozione dello slide show

11. Tag HTML5 utilizzati
<nav> per definire il menu di navigazione del documento
<section> per l’individuazione della seziona di testo principale
<footer> per rappresentare il box in fondo alla pagina
<input type=‘tel’> per l’indicazione del numero di telefono
<input type=‘email’> per l’indicazione dell’ indirizzo email
<input type=‘date’> per l’indicazione della data