RWD

DON'T PANIC!

PRIMA REAZIONE

RWD

SECONDA REAZIONE

RWD

RWD

Non sempre l'RWD è la risposta giusta per tutti i siti web!

premessa

RWD

Responsive Web Design … particolare tecnica di Web design per la realizzazione di siti web in modo che le pagine adattino automaticamente il layout per fornire una visualizzazione ottimale in funzione dell'ambiente nei quali vengono visualizzati (pc su desktop con diverse risoluzioni, tablet, smartphone, cellulari di vecchia generazione, web tv) riducendo al minimo all'utente la necessità di ridimensionamento e scorrimento, in particolare quello orizzontale.

(wikipedia)

ed aggiungo, mantenendone leggibilità e scopo!

definizione

RWD

● 320 pixel per device con schermi piccoli, come cellulari, mantenuti con orientamento verticale (portrait)● 480 pixel per device con schermi piccoli, come cellulari, matenuti con orientamento orizzontale (landscape)● 600 pixel piccoli tablet, come Kindle di Amazon (600x800) e Nook di Barnes&Noble (600x1024), tenuti con orientamento verticale● 768 pixel tablet da 10 pollici come l'iPad (768x1024) mantenuti con orientamento verticale● 1024 pixel computer da scrivania, laptop e netbook, e tablet come l'iPad (1024x768) mantenuti con orientamento orizzontale● 1200 pixel computer con schermi larghi, tipicamente desktop ma anche laptop

Questi in realtà sono solo alcuni dei possibili breakpoint esistenti, con il proliferare continuo di nuovi device, larghezze ed altezze (viewport) degli schermi sono dannatamente varie.Diciamo che per presentare al cliente delle demo da approvare potremo prendere 320, 768 e 1024/1200. Ma nella realtà l'implementazione di una grafica responsive ci chiede di esser molto più flessibili.

viewport & breakpoint

RWD

.. un sito che utilizza RWD richiede una progettazione degli elementi ... in modo che possano essere ridistribuiti in funzione delle diverse risoluzioni dello schermo e delle funzionalità del terminale ..., per garantire la migliore fruizione all'utente in termini di navigabilità e leggibilità. (wikipedia)

ri-definizione

RWD● Semplificare prima di eliminare. Eliminare non è sempre la soluzione migliore (anche se è la più semplice). Prima verificare cosa è importante che ci sia, dopo cosa può essere eventualmente tolto.

● Il contenuto è Re, diamogli un maggior peso rispetto ad altri elementi secondari (es. navigazione, barre dei tools)

● Progettare graficamente con ordine, partendo dagli elementi base per gli schermi più piccoli.

● Analisi di larghezza, gerarchia, densità e interazione possono aiutare a capire meglio come e dove posizionare i contenuti.

● Disegnare le griglie dal più piccolo elemento contenitore in su. Questo ci permette di astrarci dai breakpoint connessi ai device e di concentrarci sui breakpoint connessi al nostro contenuto.

Piccolo è bello

RWD

Elementi.... quali, dove e come? il dilemma: nascondere/si o sbattersi come dei cammelli?

● Gerarchia: Qual'è l'ordine e l'importanza dell'elemento nel layout?● Densità: quantità di dettagli da visualizzare ad ogni breakpoint● Interazione: Dovrebbe essere una lista di link o un dropdown menu? Un carosello o un gruppo di immagini?● Larghezza: fisso (width: 100px), flessibile (max-width: 450px) o percentuale (width: 30%)

Piccolo è bello

RWD

FLUIDITA'

● Elemento / Contesto = %

GRIGLIE

● colonne e gutter● numero di colonne ed elemento minimo

strumenti condivisi

RWDEsempi di layout

Per lo più fluido Caduta colonne Layout mutevole

Piccole modifiche Fuori canvas

1 2 3 4 5 1 2 3 4 5 1 2 3 4 5

1 2 3 4 5 1 2

PIU' UTILIZZATO

Luke Wroblewskilukew.com

RWD

In genere niente, hanno già un sito dedicato al mobile e si guardano bene da passare al responsive, cmq alcuni esempi notabili:

Tra le 60 più grosse in termini di fatturato annuo ho trovato queste:ShellGEAllianz (gestione tabelle da paura)GDFSuez (bah!)

Questi invece sono notabili per il buon lavoro fatto:StarbucksWWFAcquiaUniversità di Siena

Le grosse che fanno?

RWD

Moduli utili:Responsive images and styles o Adaptive image styles + Media abbandonando IMCEcontext + breakpoint + context_breakpointviews_responsive_grid

Tabelle:http://css-tricks.com/responsive-data-table-roundup/jQuery Anystretch

Drupal e non

RWD

Ora potete pure strapparvi vesti e capelli, mannaggia alla continua evoluzione del web !!!

Un po' di cose utili:

raccolta ampia di siti web visti su vari breakpointhttp://mediaqueri.es

grid&psdhttp://www.awwwards.com/grid-based-web-design-resources.html

Navigazionehttp://bradfrostweb.com/blog/web/responsive-nav-patterns/Resizerhttp://lab.maltewassermann.com/viewport-resizer/

Adattabilità ai tempi dell'evoluzione