SlideShare a Scribd company logo
RWD



      DON'T PANIC!
RWD
 PRIMA
 REAZIONE
RWD
      SECONDA REAZIONE
RWDpremessa


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

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!
RWDviewport & breakpoint

●
  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.
RWDri-definizione


.. 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)
RWDPiccolo è bello
●
  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.
RWDPiccolo è bello

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%)
RWDstrumenti condivisi

FLUIDITA'
●
    Elemento / Contesto = %



GRIGLIE
●
  colonne e gutter
●
  numero di colonne ed elemento minimo
RWDEsempi di layout
 Per lo più fluido               Caduta colonne   Layout mutevole


                         T   O
                   IZ ZA
           UT IL
     PI U'



 12345                           12345            12345

 Piccole modifiche               Fuori canvas


                                                       Luke Wroblewski
                                                       lukew.com




 12345                           12
RWDLe grosse che fanno?
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:
Shell
GE
Allianz (gestione tabelle da paura)
GDFSuez (bah!)

Questi invece sono notabili per il buon lavoro fatto:
Starbucks
WWF
Acquia
Università di Siena
RWDDrupal e non

Moduli utili:
Responsive images and styles o
Adaptive image styles + Media abbandonando IMCE
context + breakpoint + context_breakpoint
views_responsive_grid

Tabelle:
http://css-tricks.com/responsive-data-table-roundup/
jQuery Anystretch
RWD                 Adattabilità ai tempi
                    dell'evoluzione


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 breakpoint
    http://mediaqueri.es
grid&psd
    http://www.awwwards.com/grid-based-web-design-resources.html
Navigazione
http://bradfrostweb.com/blog/web/responsive-nav-patterns/
Resizer
http://lab.maltewassermann.com/viewport-resizer/

More Related Content

Viewers also liked

Nau-UCDavisConferenceFinal(2)
Nau-UCDavisConferenceFinal(2)Nau-UCDavisConferenceFinal(2)
Nau-UCDavisConferenceFinal(2)Yuqian Jiang
 
FAO - livestock's long shadow
FAO - livestock's long shadowFAO - livestock's long shadow
FAO - livestock's long shadowWouter de Heij
 
Dr. Sara Place - Beef Sustainability
Dr. Sara Place - Beef SustainabilityDr. Sara Place - Beef Sustainability
Dr. Sara Place - Beef Sustainability
John Blue
 
7. aspetti etici degli allevamenti intensivi
7. aspetti etici degli allevamenti intensivi7. aspetti etici degli allevamenti intensivi
7. aspetti etici degli allevamenti intensiviLuciana Petillo
 
Inquinamento atmosferico e patologia legata all'ambiente
Inquinamento atmosferico e patologia legata all'ambienteInquinamento atmosferico e patologia legata all'ambiente
Inquinamento atmosferico e patologia legata all'ambienteDario
 
Expo 2015
Expo 2015Expo 2015
Expo 2015
Luca Simonetti
 
L ambiente (2)
L ambiente (2)L ambiente (2)
L ambiente (2)
Dina Malgieri
 
Impact on Air Quality and Climate Change: Where the Dairy Industry Stands- Fr...
Impact on Air Quality and Climate Change: Where the Dairy Industry Stands- Fr...Impact on Air Quality and Climate Change: Where the Dairy Industry Stands- Fr...
Impact on Air Quality and Climate Change: Where the Dairy Industry Stands- Fr...
DAIReXNET
 
I passi per creare una presentazione in PowerPoint
I passi per creare una presentazione in PowerPointI passi per creare una presentazione in PowerPoint
I passi per creare una presentazione in PowerPoint
romolo
 
Lancement de PISA 2015 en France
Lancement de PISA 2015 en FranceLancement de PISA 2015 en France
Lancement de PISA 2015 en France
EduSkills OECD
 

Viewers also liked (13)

Nau-UCDavisConferenceFinal(2)
Nau-UCDavisConferenceFinal(2)Nau-UCDavisConferenceFinal(2)
Nau-UCDavisConferenceFinal(2)
 
FAO - livestock's long shadow
FAO - livestock's long shadowFAO - livestock's long shadow
FAO - livestock's long shadow
 
Dr. Sara Place - Beef Sustainability
Dr. Sara Place - Beef SustainabilityDr. Sara Place - Beef Sustainability
Dr. Sara Place - Beef Sustainability
 
7. aspetti etici degli allevamenti intensivi
7. aspetti etici degli allevamenti intensivi7. aspetti etici degli allevamenti intensivi
7. aspetti etici degli allevamenti intensivi
 
Inquinamento atmosferico e patologia legata all'ambiente
Inquinamento atmosferico e patologia legata all'ambienteInquinamento atmosferico e patologia legata all'ambiente
Inquinamento atmosferico e patologia legata all'ambiente
 
Gli allevamenti intensivi
Gli allevamenti intensiviGli allevamenti intensivi
Gli allevamenti intensivi
 
Expo 2015
Expo 2015Expo 2015
Expo 2015
 
L ambiente (2)
L ambiente (2)L ambiente (2)
L ambiente (2)
 
Carra L. Inquinamento e salute
Carra L. Inquinamento e saluteCarra L. Inquinamento e salute
Carra L. Inquinamento e salute
 
Gli Ogm
Gli OgmGli Ogm
Gli Ogm
 
Impact on Air Quality and Climate Change: Where the Dairy Industry Stands- Fr...
Impact on Air Quality and Climate Change: Where the Dairy Industry Stands- Fr...Impact on Air Quality and Climate Change: Where the Dairy Industry Stands- Fr...
Impact on Air Quality and Climate Change: Where the Dairy Industry Stands- Fr...
 
I passi per creare una presentazione in PowerPoint
I passi per creare una presentazione in PowerPointI passi per creare una presentazione in PowerPoint
I passi per creare una presentazione in PowerPoint
 
Lancement de PISA 2015 en France
Lancement de PISA 2015 en FranceLancement de PISA 2015 en France
Lancement de PISA 2015 en France
 

Similar to RWD

Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
Simone Viani
 
Responsive web design spiegato semplice
Responsive web design spiegato sempliceResponsive web design spiegato semplice
Responsive web design spiegato semplice
Lucio Vacchi
 
Confronto tra GstarCAD e ZWCAD
Confronto tra GstarCAD e ZWCADConfronto tra GstarCAD e ZWCAD
Confronto tra GstarCAD e ZWCAD
cgaldini
 
Responsive Web Design: 7 Problemi da Evitare – 6^ parte
Responsive Web Design: 7 Problemi da Evitare – 6^ parteResponsive Web Design: 7 Problemi da Evitare – 6^ parte
Responsive Web Design: 7 Problemi da Evitare – 6^ parteFormazioneTurismo
 
Twitter Bootstrap: an Introduction
Twitter Bootstrap: an IntroductionTwitter Bootstrap: an Introduction
Twitter Bootstrap: an Introduction
Andrea Signorile
 
Mobile UI Design
Mobile UI DesignMobile UI Design
Mobile UI Design
Simone Viani
 
Responsive Web Design & Mobile
Responsive Web Design & MobileResponsive Web Design & Mobile
Responsive Web Design & Mobile
Giovanni Buffa
 
Drupal Day 2011 - MobileD!
Drupal Day 2011 - MobileD!Drupal Day 2011 - MobileD!
Drupal Day 2011 - MobileD!
DrupalDay
 
Sketch per la prototipazione - Lesson 2
Sketch per la prototipazione - Lesson 2Sketch per la prototipazione - Lesson 2
Sketch per la prototipazione - Lesson 2
Edoardo Sportelli
 
HTML5 e Css3 - 5 | WebMaster & WebDesigner
HTML5 e Css3 - 5 | WebMaster & WebDesignerHTML5 e Css3 - 5 | WebMaster & WebDesigner
HTML5 e Css3 - 5 | WebMaster & WebDesigner
Matteo Magni
 
Android Introduzione All Architettura Programmazione Sicurezza Serate A Tema ...
Android Introduzione All Architettura Programmazione Sicurezza Serate A Tema ...Android Introduzione All Architettura Programmazione Sicurezza Serate A Tema ...
Android Introduzione All Architettura Programmazione Sicurezza Serate A Tema ...jekil
 
Qr code eas
Qr code easQr code eas
Qr code eas
Laura Antichi
 
Joomla! Override
Joomla! OverrideJoomla! Override
Joomla! Override
µhack
 
Joomla! Override : Template for dummies
Joomla! Override : Template for dummiesJoomla! Override : Template for dummies
Joomla! Override : Template for dummies
Andrea Rossi
 
Cloud computing 101
Cloud computing 101Cloud computing 101
Cloud computing 101
Eduard Roccatello
 
Android Sabella
Android SabellaAndroid Sabella
Android Sabella
mauro_sabella
 
Presentazione GstarCAD
Presentazione GstarCADPresentazione GstarCAD
Presentazione GstarCAD
cgaldini
 
Marta leo smau 2014
Marta leo smau 2014Marta leo smau 2014
Marta leo smau 2014
Marta Leo
 
Responsive design: la rivoluzione del mobile applicata ai siti web
Responsive design: la rivoluzione del mobile applicata ai siti webResponsive design: la rivoluzione del mobile applicata ai siti web
Responsive design: la rivoluzione del mobile applicata ai siti web
Jservice
 
... thinking about Microformats!
... thinking about Microformats!... thinking about Microformats!
... thinking about Microformats!Stefano Fago
 

Similar to RWD (20)

Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
Responsive web design spiegato semplice
Responsive web design spiegato sempliceResponsive web design spiegato semplice
Responsive web design spiegato semplice
 
Confronto tra GstarCAD e ZWCAD
Confronto tra GstarCAD e ZWCADConfronto tra GstarCAD e ZWCAD
Confronto tra GstarCAD e ZWCAD
 
Responsive Web Design: 7 Problemi da Evitare – 6^ parte
Responsive Web Design: 7 Problemi da Evitare – 6^ parteResponsive Web Design: 7 Problemi da Evitare – 6^ parte
Responsive Web Design: 7 Problemi da Evitare – 6^ parte
 
Twitter Bootstrap: an Introduction
Twitter Bootstrap: an IntroductionTwitter Bootstrap: an Introduction
Twitter Bootstrap: an Introduction
 
Mobile UI Design
Mobile UI DesignMobile UI Design
Mobile UI Design
 
Responsive Web Design & Mobile
Responsive Web Design & MobileResponsive Web Design & Mobile
Responsive Web Design & Mobile
 
Drupal Day 2011 - MobileD!
Drupal Day 2011 - MobileD!Drupal Day 2011 - MobileD!
Drupal Day 2011 - MobileD!
 
Sketch per la prototipazione - Lesson 2
Sketch per la prototipazione - Lesson 2Sketch per la prototipazione - Lesson 2
Sketch per la prototipazione - Lesson 2
 
HTML5 e Css3 - 5 | WebMaster & WebDesigner
HTML5 e Css3 - 5 | WebMaster & WebDesignerHTML5 e Css3 - 5 | WebMaster & WebDesigner
HTML5 e Css3 - 5 | WebMaster & WebDesigner
 
Android Introduzione All Architettura Programmazione Sicurezza Serate A Tema ...
Android Introduzione All Architettura Programmazione Sicurezza Serate A Tema ...Android Introduzione All Architettura Programmazione Sicurezza Serate A Tema ...
Android Introduzione All Architettura Programmazione Sicurezza Serate A Tema ...
 
Qr code eas
Qr code easQr code eas
Qr code eas
 
Joomla! Override
Joomla! OverrideJoomla! Override
Joomla! Override
 
Joomla! Override : Template for dummies
Joomla! Override : Template for dummiesJoomla! Override : Template for dummies
Joomla! Override : Template for dummies
 
Cloud computing 101
Cloud computing 101Cloud computing 101
Cloud computing 101
 
Android Sabella
Android SabellaAndroid Sabella
Android Sabella
 
Presentazione GstarCAD
Presentazione GstarCADPresentazione GstarCAD
Presentazione GstarCAD
 
Marta leo smau 2014
Marta leo smau 2014Marta leo smau 2014
Marta leo smau 2014
 
Responsive design: la rivoluzione del mobile applicata ai siti web
Responsive design: la rivoluzione del mobile applicata ai siti webResponsive design: la rivoluzione del mobile applicata ai siti web
Responsive design: la rivoluzione del mobile applicata ai siti web
 
... thinking about Microformats!
... thinking about Microformats!... thinking about Microformats!
... thinking about Microformats!
 

More from TourTools

Influencer Marketing | Social Media Strategies 2015
Influencer Marketing | Social Media Strategies 2015Influencer Marketing | Social Media Strategies 2015
Influencer Marketing | Social Media Strategies 2015
TourTools
 
Google Hangouts: guida alla video chiamata
Google Hangouts: guida alla video chiamataGoogle Hangouts: guida alla video chiamata
Google Hangouts: guida alla video chiamata
TourTools
 
Google plus tools
Google plus toolsGoogle plus tools
Google plus tools
TourTools
 
Google plus e la Social Search: dall'identità alla notorietà.
Google plus e la Social Search: dall'identità alla notorietà.Google plus e la Social Search: dall'identità alla notorietà.
Google plus e la Social Search: dall'identità alla notorietà.
TourTools
 
Come accompagnare il turista verso la prenotazione e proporre il prezzo che c...
Come accompagnare il turista verso la prenotazione e proporre il prezzo che c...Come accompagnare il turista verso la prenotazione e proporre il prezzo che c...
Come accompagnare il turista verso la prenotazione e proporre il prezzo che c...
TourTools
 
Come valutare il preventivo di un sito web.
Come valutare il preventivo di un sito web.Come valutare il preventivo di un sito web.
Come valutare il preventivo di un sito web.TourTools
 
Primi sui motori di ricerca? Non sempre la scelta migliore.
Primi sui motori di ricerca? Non sempre la scelta migliore.Primi sui motori di ricerca? Non sempre la scelta migliore.
Primi sui motori di ricerca? Non sempre la scelta migliore.TourTools
 

More from TourTools (7)

Influencer Marketing | Social Media Strategies 2015
Influencer Marketing | Social Media Strategies 2015Influencer Marketing | Social Media Strategies 2015
Influencer Marketing | Social Media Strategies 2015
 
Google Hangouts: guida alla video chiamata
Google Hangouts: guida alla video chiamataGoogle Hangouts: guida alla video chiamata
Google Hangouts: guida alla video chiamata
 
Google plus tools
Google plus toolsGoogle plus tools
Google plus tools
 
Google plus e la Social Search: dall'identità alla notorietà.
Google plus e la Social Search: dall'identità alla notorietà.Google plus e la Social Search: dall'identità alla notorietà.
Google plus e la Social Search: dall'identità alla notorietà.
 
Come accompagnare il turista verso la prenotazione e proporre il prezzo che c...
Come accompagnare il turista verso la prenotazione e proporre il prezzo che c...Come accompagnare il turista verso la prenotazione e proporre il prezzo che c...
Come accompagnare il turista verso la prenotazione e proporre il prezzo che c...
 
Come valutare il preventivo di un sito web.
Come valutare il preventivo di un sito web.Come valutare il preventivo di un sito web.
Come valutare il preventivo di un sito web.
 
Primi sui motori di ricerca? Non sempre la scelta migliore.
Primi sui motori di ricerca? Non sempre la scelta migliore.Primi sui motori di ricerca? Non sempre la scelta migliore.
Primi sui motori di ricerca? Non sempre la scelta migliore.
 

RWD

  • 1. RWD DON'T PANIC!
  • 3. RWD SECONDA REAZIONE
  • 4. RWDpremessa Non sempre l'RWD è la risposta giusta per tutti i siti web!
  • 5. RWDdefinizione 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!
  • 6. RWDviewport & breakpoint ● 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.
  • 7. RWDri-definizione .. 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)
  • 8. RWDPiccolo è bello ● 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.
  • 9. RWDPiccolo è bello 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%)
  • 10. RWDstrumenti condivisi FLUIDITA' ● Elemento / Contesto = % GRIGLIE ● colonne e gutter ● numero di colonne ed elemento minimo
  • 11. RWDEsempi di layout Per lo più fluido Caduta colonne Layout mutevole T O IZ ZA UT IL PI U' 12345 12345 12345 Piccole modifiche Fuori canvas Luke Wroblewski lukew.com 12345 12
  • 12. RWDLe grosse che fanno? 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: Shell GE Allianz (gestione tabelle da paura) GDFSuez (bah!) Questi invece sono notabili per il buon lavoro fatto: Starbucks WWF Acquia Università di Siena
  • 13. RWDDrupal e non Moduli utili: Responsive images and styles o Adaptive image styles + Media abbandonando IMCE context + breakpoint + context_breakpoint views_responsive_grid Tabelle: http://css-tricks.com/responsive-data-table-roundup/ jQuery Anystretch
  • 14. RWD Adattabilità ai tempi dell'evoluzione 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 breakpoint http://mediaqueri.es grid&psd http://www.awwwards.com/grid-based-web-design-resources.html Navigazione http://bradfrostweb.com/blog/web/responsive-nav-patterns/ Resizer http://lab.maltewassermann.com/viewport-resizer/