Matteo Nicoletti
Web design, photography, tinkering and other mishaps. Especially other mishaps.
Responsive Web Design
raccomandazioni su layout responsive per piattaforme e-commerce
soprattutto nel caso di panorami abbastanza difformi
Responsive Web Design
Perché fare siti web responsive?
-
Aspetti generali: vantaggi, SEO e siti di riferimento
- Approcci utilizzati: quali strategie? vantaggi e svantaggi
- Come si sceglie cosa mostrare su dispositivi diversi?
- Motivare le scelte per il nostro sito, conosciamo i nostri utenti?
Perché fare siti web responsive?
Primi passi
- Perché (e quando) un sito responsive è migliore?
- Implicazioni e vantaggi per il SEO
- Cosa significa mobile-first e perché adottare questa strategia?
Primi passi
Siti di esempio e di riferimento
Siti di esempio e di riferimento
SEO
Google supporta 3 possibili configurazioni per i siti responsive.
1ª configurazione supportata:
-
Siti responsive che servono lo stesso HTML e usano solo i CSS per cambiare aspetto (cioè utilizzano media query)
Questa è la configurazione preferita da Google
un solo URL per il contenuto aiuta l’algoritmo di Google ad assegnargli le proprietà nell’indice
SEO
SEO
2ª configurazione supportata:
-
Siti che rispondono a tutti i dispositivi con gli stessi URL ma che, dinamicamente, servono HTML e CSS diversi agli utenti su desktop o su dispositivo mobile
SEO
SEO
3ª configurazione possibile:
-
Siti che hanno URL indipendenti per desktop e per mobile
SEO
Quali problemi risolve il RWD*?
- i dispositivi che oggi permettono di navigare sul web sono molto diversi tra loro (in termini di dimensioni, funzionalità e metodi di interazione)
- gli utenti non possono essere istruiti su come funziona un sito prima di visitarlo: per loro l’esperienza sarà piacevole e funzionale se non dovranno scrollare, zoomare avanti e indietro o compensare in altro modo il nostro design inadeguato
Quali problemi risolve il RWD*?
*=Responsive Web Design
*=Responsive Web Design
Strategie a disposizione
- griglie fluide o flexible box layout
- immagini responsive o “art directed” (tag <picture>)
- media query
- contenuto dinamico (AJAX, WebSocket o Server Send Events)
Le immagini animate che illustrano le tecniche principali del rwd, sono tratte da:
http://www.fastcodesign.com/3038367/9-gifs-that-explain-responsive-design-brilliantly
Strategie a disposizione
Responsive vs. Adaptive
Il design responsive si espande in maniera fluida, mentre quello adaptive si espande di colpo quando si raggiunge certe dimensioni dello spazio disponibile.
Responsive vs. Adaptive
Unità relative e unità statiche
Posizionare gli elementi del layout usando i pixel come coordinate X e Y può portare i siti, ottimizzati per certe dimensioni, ad apparire strani o sbagliati su schermi diversi. Usando unità relative (per esempio le percentuali della dimensione dello schermo) si evita questo problema.
Unità relative e unità statiche
Breakpoint
I breakpoint sono le dimensioni a cui il layout cambia configurazione, per esempio: tre colonne sul desktop, ma solo una su un dispositivo mobile.
Breakpoint
Flow
Al diminuire delle dimensioni dello schermo, il contenuto occuperà più spazio in verticale e tutto ciò che lo segue dovrà essere spinto più in basso.
Questo è chiamato flow.
Flow
Contenuti nidificati o collegati
Se elementi del layout che hanno delle relazioni logiche vengono tenuti indipendenti l’uno dall’altro saranno difficili da controllare. Raggrupparli all’interno di un contenitore li manterrà più comprensibili e ordinati.
Contenuti nidificati o collegati
Larghezza massima
Talvolta vogliamo che il contenuto occupi tutta la larghezza disponibile (come su uno smartphone) ma lo stesso contenuto allargato al 100% su un desktop non ha molto senso e si può contenere con max-width.
Larghezza massima
Mobile-first o desktop-first
Tecnicamente non c’è differenza se un layout inizia da uno schermo piccolo per ingrandirsi (mobile-first) o viceversa (desktop-first). Ma il mobile-first aggiunge fin da subito limiti e vincoli che ci aiutano a prendere decisioni più sensate e consistenti tra i diversi layout.
Mobile-first o desktop-first
Immagini vettoriali o bitmap
Le icone del sito sono molto elaborate e dettagliate? Allora useremo immagini bitmap. Altrimenti useremo immagini vettoriali (SVG o web font): un’immagine vettoriale si adatta meglio alle diverse risoluzioni dello schermo.
Immagini vettoriali o bitmap
L’unica risposta generale a questa domanda è: dipende dal sito.
Con un’interfaccia ben progettata è possibile svolgere qualsiasi compito (per quanto complesso) su qualsiasi dispositivo, quindi la sola semplificazione non è una risposta sufficiente.
Più adatta a descrivere questo approccio è la frase: fare il meno possibile.
La domanda da porsi è: quali elementi vogliamo aggiungere all’aumentare dello spazio a disposizione e perché?
Quali elementi mostrare O NASCONDERE?
Quali elementi mostrare o nascondere?
Grazie!
Matteo Nicoletti · @kaosmos
Responsive Web Design
By Matteo Nicoletti
Responsive Web Design
Layout responsive per piattaforme e-commerce
