SlideShare una empresa de Scribd logo
1 de 26
Descargar para leer sin conexión
Responsive design
                                           il web mobile diventa primo

                      La navigazione in internet da dispositivi mobili è esplosa negli ultimi anni e ha un trend di crescita molto
                      importante. Sviluppando design per il web è giunto quindi il momento di pensare:  "mobile-first"? Ossia, di
                      dare importanza primaria ai design che si  adattano principalmente ai dispositivi mobili?
                      In questo workshop vedremo che, da un punto di vista tecnologico, il "responsive design" potrebbe risultare
                      l'uovo di colombo per risolvere le annose ricerche di compatibilità cross-browser e cross-device, ma che
                      potrebbe introdurre ed evidenziare problematiche strategiche tutt'altro che secondarie.




                      Fabrizio Caccavello



lunedì 18 giugno 12
Responsive design
                                                      il web mobile diventa primo


             About me: Fabrizio Caccavello


                      Web Project Manager e User Experience Designer.
                      Mi occupo di strategie di comunicazione online, e di sviluppo di
                      applicazioni web con particolare riferimento ai temi
                      dell'accessibilità.

                      Cerco di applicare ai miei progetti processi di semplificazione e
                      riduzione in modo da renderli più efficienti e semplici.

                                      Sono amministratore e fondatore di Akebia
                                      società di servizi per il web.

                                      Sono membro del Consiglio Direttivo di IWA Italy.
                                      Sono relatore di IWA/HWG ai workshop formativi
                                      di SMAU.




lunedì 18 giugno 12
Responsive design
                                        il web mobile diventa primo




                              IWA/HWG è un’Associazione professionale no profit
                              riconosciuta leader mondiale nella fornitura dei principi e delle
             Partecipazioni
                              certificazioni di formazione per i professionisti della Rete
                              Internet; è presente in 100 paesi, con 130 sedi ufficiali in
                              rappresentanza di più di 165.000 associati.
                              La sua missione:
                              • Fornire programmi formativi di qualità;
                              • Fornire agli associati supporto e collaborazione a livello
                                regionale, nazionale e internazionale, nonché un marchio di
             Partecipazioni     affiliazione riconosciuto a livello mondiale;
                              • Promuovere i principi universali di etica e di pratica
                                professionale per tutti i professionisti della Rete Internet;
                              • Fornire supporto per la definizione e lo studio di normative
                                nei Paesi in cui è presente

                               Network:
                               http://www.iwa.it
                               http://blog.iwa.it
                               http://webaccessibile.org
                               http://skillprofiles.eu




lunedì 18 giugno 12
Responsive design
                                                        il web mobile diventa primo


              Perché IWA?


                      • Fare rete tra professionisti
                      – Scambiarsi informazioni / esperienze
                      – Condividere buone pratiche di lavoro
                      • Apprendere
                      – Consultare documentazione condivisa
                      – Discutere con gli altri soci
                      – Partecipare ad eventi formativi / informativi
                      • Divulgare
                      – Effetto “ebola”: condividere la conoscenza
                      – Proporsi come discenti per seminari e corsi




                        Fabrizio Caccavello                   fabrizio@akebia.it      cfabry   4


lunedì 18 giugno 12
Responsive design
                                            il web mobile diventa primo


           Mobile First




                        Nel web design pensare prima alla
                         progettazione per il web mobile



                                      perché

                      Fabrizio Caccavello       fabrizio@akebia.it        cfabry   5


lunedì 18 giugno 12
Responsive design
                                             il web mobile diventa primo


           Mobile First




                   Si prevede che 2014 la
                 navigazione da dispositivi
                   mobili supererà (forse)
                         quella da desktop




                       Fabrizio Caccavello       fabrizio@akebia.it        cfabry   6


lunedì 18 giugno 12
Responsive design
                                            il web mobile diventa primo


           Mobile First




                                                                     anche se per
                                                                     ora la marcia di
                                                                     avvicinamento
                                                                     sembra più
                                                                     lenta del
                                                                     previsto




                      Fabrizio Caccavello       fabrizio@akebia.it         cfabry       7


lunedì 18 giugno 12
Responsive design
                                            il web mobile diventa primo


           Mobile First




                                               ... e dovremmo anche
                                               stabilire cosa intendiamo per
                                               “navigazione mobile”



                                                         ... e concentrarci
                                                         sul contesto d’uso


                      Fabrizio Caccavello       fabrizio@akebia.it        cfabry   8


lunedì 18 giugno 12
Responsive design
                                                 il web mobile diventa primo




                      COSA C’È DI NUOVO
                         nell’idea di pensare prima al mobile?



                            NIENTE                                 TUTTO

                        Per chi ha sempre
                           pensato con                     Il responsive design è
                      l’accessibilità in testa             una strategia e molto
                       può anche essere un                    poco una tecnica
                         raffinato deja vu


                         Fabrizio Caccavello         fabrizio@akebia.it        cfabry   9


lunedì 18 giugno 12
Responsive design
                                                il web mobile diventa primo




                                          Mobile First
                                          è raffinare progressivamente una
                                          strategia per ottenere il massimo dei
                                          risultati nella maggior parte degli casi
                                          possibili

                      come in una gara di Formula 1


                      Fabrizio Caccavello             fabrizio@akebia.it      cfabry   10


lunedì 18 giugno 12
Responsive design
                                              il web mobile diventa primo


           Mobile First - il budget




           l’accessibilità non ha un costo              l’approccio mobile first
           un buon progetto web è pensato               non ha un costo
           già accessibile e non è ipotizzabile         aggiuntivo può essere una
           una cosa a minor prezzo non                  strategia di sviluppo
           accessibile                                  standard




                      2000                                  2012


                        Fabrizio Caccavello       fabrizio@akebia.it        cfabry   11


lunedì 18 giugno 12
Responsive design
                                                  il web mobile diventa primo


           Mobile First - il budget




                          il costo è relativo alla progettazione consapevole,
                          professionalmente evoluta




                      Fabrizio Caccavello              fabrizio@akebia.it       cfabry   12


lunedì 18 giugno 12
Responsive design
                                            il web mobile diventa primo


           Content First



                           partire dai contenuti
            significa concentrarsi su ciò che è veramente
         importante e tralasciare i dettagli o la tecnologia
                 con la quale si realizzeranno le strutture



       che strategicamente è esattamente l’opposto di quando si parte
                      dalla scelta di un tema da scaricare per un CMS


                      Fabrizio Caccavello        fabrizio@akebia.it       cfabry   13


lunedì 18 giugno 12
Responsive design
                                            il web mobile diventa primo


           Content First




                      Fabrizio Caccavello       fabrizio@akebia.it        cfabry   14


lunedì 18 giugno 12
Responsive design
                                            il web mobile diventa primo


           Lo schermo




                              http://resizemybrowser.com/

                      Fabrizio Caccavello       fabrizio@akebia.it        cfabry   15


lunedì 18 giugno 12
Responsive design
                                            il web mobile diventa primo


           Lo schermo




             non possiamo pensare di testare tutti i dispositivi sul mercato




                                              ...diamoci delle priorità



                      Fabrizio Caccavello       fabrizio@akebia.it        cfabry   16


lunedì 18 giugno 12
Responsive design
                                                               il web mobile diventa primo


           Breakpoint principali
           ma ognuno potrà aggiungere o eliminare altri breakpoint in base al proprio progetto




                 320px               480px                         768px                         1024px




              Progressive enhancement

                          Fabrizio Caccavello                         fabrizio@akebia.it             cfabry   17


lunedì 18 giugno 12
Responsive design
                                                                     il web mobile diventa primo


           Partiamo con il piede giusto


                                                         user agent
           $iphone = strpos($_SERVER['HTTP_USER_AGENT'],"iPhone");
                                                                                         Stiamo pensando
           $android = strpos($_SERVER['HTTP_USER_AGENT'],"Android");

           $palmpre = strpos($_SERVER['HTTP_USER_AGENT'],"webOS");
                                                                                         di indirizzare i
           $berry = strpos($_SERVER['HTTP_USER_AGENT'],"BlackBerry");                    device mobile
           $ipod = strpos($_SERVER['HTTP_USER_AGENT'],"iPod");                           verso siti dedicati?
           $ipad = strpos($_SERVER['HTTP_USER_AGENT'],"iPad");



           if ($iphone || $android || $palmpre || $ipod || $berry || $ipad == true){

                ...

           }




                            Fabrizio Caccavello                              fabrizio@akebia.it    cfabry       18


lunedì 18 giugno 12
Responsive design
                                                             il web mobile diventa primo


           Partiamo con il piede giusto



                                                E’ giusto mantenere la stessa
                                                user experience?



                               mantenere                         non mantenere
           perché l’utente di solito ha già avuto una UX         se in fase di progettazione si è già
                 in modalità desktop, proporgli una UX           individuata una precisa strategia di
                       completamente diversa potrebbe            comunicazione da destinare all’utente
                                             disorientarlo       mobile

                        Un progetto web è strategia e
            comunicazione, una diversa UX potrebbe
         modificare le strategie studiate per il desktop


                         Fabrizio Caccavello                     fabrizio@akebia.it            cfabry    19


lunedì 18 giugno 12
Responsive design
                                                    il web mobile diventa primo


           Partiamo con il piede giusto


                                          media query

                             @media screen and (min-width: 480px) { ... }
                              
                             @media screen and (min-width: 768px) { ... }
                              
                             @media screen and (min-width: 1024px) { ... }
                              
                             @media screen and (min-width: 1200px) { ... }



                      possiamo modellare il layout in base alle
                             dimensioni del dispositivo

                       Fabrizio Caccavello               fabrizio@akebia.it       cfabry   20


lunedì 18 giugno 12
Responsive design
                                            il web mobile diventa primo


           Partiamo con il piede giusto




                      Fabrizio Caccavello       fabrizio@akebia.it        cfabry   21


lunedì 18 giugno 12
Responsive design
                                            il web mobile diventa primo


           Partiamo con il piede giusto




                      Fabrizio Caccavello       fabrizio@akebia.it        cfabry   22


lunedì 18 giugno 12
Responsive design
                                                              il web mobile diventa primo


           La criticità delle immagini


                                                 immagini fluide

           img {
             max-width: 100%;
           }




                      http://www.italianalistapart.com/articoli/42-numero-29-15-giugno-2011/168-immagini-fluide



                           Fabrizio Caccavello                       fabrizio@akebia.it                 cfabry   23


lunedì 18 giugno 12
Responsive design
                                            il web mobile diventa primo


           un passo alla volta




                                accontentarsi del minimo
                                  non fare tanto per fare



               Progressive enhancement




                      Fabrizio Caccavello       fabrizio@akebia.it        cfabry   24


lunedì 18 giugno 12
Responsive design
                                            il web mobile diventa primo


           la riscossa dell’accessibilità




                      Fabrizio Caccavello       fabrizio@akebia.it        cfabry   25


lunedì 18 giugno 12
Responsive design
                                            il web mobile diventa primo




                                   Fabrizio Caccavello

                                            cfabry




                      Fabrizio Caccavello       fabrizio@akebia.it        cfabry   26


lunedì 18 giugno 12

Más contenido relacionado

Similar a Responsive Web Design

Applicazioni web e web design responsive
Applicazioni web e web design responsiveApplicazioni web e web design responsive
Applicazioni web e web design responsiveFabrizio Caccavello
 
Applicazioni web e web design responsive - SMAU Bologna 2013
Applicazioni web e web design responsive - SMAU Bologna 2013Applicazioni web e web design responsive - SMAU Bologna 2013
Applicazioni web e web design responsive - SMAU Bologna 2013Fabrizio Caccavello
 
Responsive Design: Mobile, più che una Moda uno Tsunami – 5^ parte
Responsive Design: Mobile, più che una Moda uno Tsunami – 5^ parteResponsive Design: Mobile, più che una Moda uno Tsunami – 5^ parte
Responsive Design: Mobile, più che una Moda uno Tsunami – 5^ parteFormazioneTurismo
 
Webapp HTML5/CSS3 nelle strategie di territorio
Webapp HTML5/CSS3 nelle strategie di territorioWebapp HTML5/CSS3 nelle strategie di territorio
Webapp HTML5/CSS3 nelle strategie di territorioFabrizio Caccavello
 
Mobile learning Bologna - Tra html 5 e applicazioni native.
Mobile learning Bologna - Tra html 5 e applicazioni native.Mobile learning Bologna - Tra html 5 e applicazioni native.
Mobile learning Bologna - Tra html 5 e applicazioni native.Fabrizio Caccavello
 
I siti web della PA per dispositivi mobili - ForumPA 2015
I siti web della PA per dispositivi mobili - ForumPA 2015I siti web della PA per dispositivi mobili - ForumPA 2015
I siti web della PA per dispositivi mobili - ForumPA 2015Fabrizio Caccavello
 
Applicazioni, web e strategie di territorio
Applicazioni, web e strategie di territorioApplicazioni, web e strategie di territorio
Applicazioni, web e strategie di territorioFabrizio Caccavello
 
Responsive Design: dall'identità al web
Responsive Design: dall'identità al webResponsive Design: dall'identità al web
Responsive Design: dall'identità al webCarlo Frinolli Puzzilli
 
Responsive web design RT
Responsive web design RTResponsive web design RT
Responsive web design RTJservice
 
Strategie per applicazioni web prima o meglio dell'app nativa
Strategie per applicazioni web prima o meglio dell'app nativaStrategie per applicazioni web prima o meglio dell'app nativa
Strategie per applicazioni web prima o meglio dell'app nativaDiego La Monica
 
Responsive Design: Guida Pratica – 3^ Parte
Responsive Design: Guida Pratica – 3^ ParteResponsive Design: Guida Pratica – 3^ Parte
Responsive Design: Guida Pratica – 3^ ParteFormazioneTurismo
 
ForumPA - App no grazie, lunga vita a Responsive Design
ForumPA - App no grazie, lunga vita a Responsive DesignForumPA - App no grazie, lunga vita a Responsive Design
ForumPA - App no grazie, lunga vita a Responsive DesignFabrizio Caccavello
 
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
 
La filiera della fiducia nella progettazione web e nel social marketing - Fab...
La filiera della fiducia nella progettazione web e nel social marketing - Fab...La filiera della fiducia nella progettazione web e nel social marketing - Fab...
La filiera della fiducia nella progettazione web e nel social marketing - Fab...Fabrizio Caccavello
 
Progetti web vincenti: 10 requisiti, tra design e normativa, per sviluppare b...
Progetti web vincenti: 10 requisiti, tra design e normativa, per sviluppare b...Progetti web vincenti: 10 requisiti, tra design e normativa, per sviluppare b...
Progetti web vincenti: 10 requisiti, tra design e normativa, per sviluppare b...Fabrizio Caccavello
 
Project management: Gestire progetto web con Agilità (con DSDM, Agile Project...
Project management: Gestire progetto web con Agilità (con DSDM, Agile Project...Project management: Gestire progetto web con Agilità (con DSDM, Agile Project...
Project management: Gestire progetto web con Agilità (con DSDM, Agile Project...Simone Onofri
 
Drupal Day 2012 - IL RESPONSIVE WEB DESIGN NON È SOLO UNA QUESTIONE DI LAYOUT...
Drupal Day 2012 - IL RESPONSIVE WEB DESIGN NON È SOLO UNA QUESTIONE DI LAYOUT...Drupal Day 2012 - IL RESPONSIVE WEB DESIGN NON È SOLO UNA QUESTIONE DI LAYOUT...
Drupal Day 2012 - IL RESPONSIVE WEB DESIGN NON È SOLO UNA QUESTIONE DI LAYOUT...DrupalDay
 
La filiera della fiducia nella progettazione web e nel social marketing
La filiera della fiducia nella progettazione web e nel social marketingLa filiera della fiducia nella progettazione web e nel social marketing
La filiera della fiducia nella progettazione web e nel social marketingFabrizio Caccavello
 
Il project management degli avatar
Il project management degli avatarIl project management degli avatar
Il project management degli avatarRoberto Cobianchi
 

Similar a Responsive Web Design (20)

Applicazioni web e web design responsive
Applicazioni web e web design responsiveApplicazioni web e web design responsive
Applicazioni web e web design responsive
 
Applicazioni web e web design responsive - SMAU Bologna 2013
Applicazioni web e web design responsive - SMAU Bologna 2013Applicazioni web e web design responsive - SMAU Bologna 2013
Applicazioni web e web design responsive - SMAU Bologna 2013
 
Responsive Design: Mobile, più che una Moda uno Tsunami – 5^ parte
Responsive Design: Mobile, più che una Moda uno Tsunami – 5^ parteResponsive Design: Mobile, più che una Moda uno Tsunami – 5^ parte
Responsive Design: Mobile, più che una Moda uno Tsunami – 5^ parte
 
Webapp HTML5/CSS3 nelle strategie di territorio
Webapp HTML5/CSS3 nelle strategie di territorioWebapp HTML5/CSS3 nelle strategie di territorio
Webapp HTML5/CSS3 nelle strategie di territorio
 
Mobile learning Bologna - Tra html 5 e applicazioni native.
Mobile learning Bologna - Tra html 5 e applicazioni native.Mobile learning Bologna - Tra html 5 e applicazioni native.
Mobile learning Bologna - Tra html 5 e applicazioni native.
 
I siti web della PA per dispositivi mobili - ForumPA 2015
I siti web della PA per dispositivi mobili - ForumPA 2015I siti web della PA per dispositivi mobili - ForumPA 2015
I siti web della PA per dispositivi mobili - ForumPA 2015
 
Applicazioni, web e strategie di territorio
Applicazioni, web e strategie di territorioApplicazioni, web e strategie di territorio
Applicazioni, web e strategie di territorio
 
Responsive Design: dall'identità al web
Responsive Design: dall'identità al webResponsive Design: dall'identità al web
Responsive Design: dall'identità al web
 
Responsive web design RT
Responsive web design RTResponsive web design RT
Responsive web design RT
 
Strategie per applicazioni web prima o meglio dell'app nativa
Strategie per applicazioni web prima o meglio dell'app nativaStrategie per applicazioni web prima o meglio dell'app nativa
Strategie per applicazioni web prima o meglio dell'app nativa
 
Responsive Design: Guida Pratica – 3^ Parte
Responsive Design: Guida Pratica – 3^ ParteResponsive Design: Guida Pratica – 3^ Parte
Responsive Design: Guida Pratica – 3^ Parte
 
ForumPA - App no grazie, lunga vita a Responsive Design
ForumPA - App no grazie, lunga vita a Responsive DesignForumPA - App no grazie, lunga vita a Responsive Design
ForumPA - App no grazie, lunga vita a Responsive Design
 
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
 
La filiera della fiducia nella progettazione web e nel social marketing - Fab...
La filiera della fiducia nella progettazione web e nel social marketing - Fab...La filiera della fiducia nella progettazione web e nel social marketing - Fab...
La filiera della fiducia nella progettazione web e nel social marketing - Fab...
 
Progetti web vincenti: 10 requisiti, tra design e normativa, per sviluppare b...
Progetti web vincenti: 10 requisiti, tra design e normativa, per sviluppare b...Progetti web vincenti: 10 requisiti, tra design e normativa, per sviluppare b...
Progetti web vincenti: 10 requisiti, tra design e normativa, per sviluppare b...
 
Responsivedesign
ResponsivedesignResponsivedesign
Responsivedesign
 
Project management: Gestire progetto web con Agilità (con DSDM, Agile Project...
Project management: Gestire progetto web con Agilità (con DSDM, Agile Project...Project management: Gestire progetto web con Agilità (con DSDM, Agile Project...
Project management: Gestire progetto web con Agilità (con DSDM, Agile Project...
 
Drupal Day 2012 - IL RESPONSIVE WEB DESIGN NON È SOLO UNA QUESTIONE DI LAYOUT...
Drupal Day 2012 - IL RESPONSIVE WEB DESIGN NON È SOLO UNA QUESTIONE DI LAYOUT...Drupal Day 2012 - IL RESPONSIVE WEB DESIGN NON È SOLO UNA QUESTIONE DI LAYOUT...
Drupal Day 2012 - IL RESPONSIVE WEB DESIGN NON È SOLO UNA QUESTIONE DI LAYOUT...
 
La filiera della fiducia nella progettazione web e nel social marketing
La filiera della fiducia nella progettazione web e nel social marketingLa filiera della fiducia nella progettazione web e nel social marketing
La filiera della fiducia nella progettazione web e nel social marketing
 
Il project management degli avatar
Il project management degli avatarIl project management degli avatar
Il project management degli avatar
 

Más de Fabrizio Caccavello

Non esiste UX senza accessibilità Le città per tutti sono in un web per tutti
Non esiste UX senza accessibilità Le città per tutti sono in un web per tuttiNon esiste UX senza accessibilità Le città per tutti sono in un web per tutti
Non esiste UX senza accessibilità Le città per tutti sono in un web per tuttiFabrizio Caccavello
 
Non esiste UX senza accessibilità. Costruire un web per tutti
Non esiste UX senza accessibilità. Costruire un web per tuttiNon esiste UX senza accessibilità. Costruire un web per tutti
Non esiste UX senza accessibilità. Costruire un web per tuttiFabrizio Caccavello
 
Accessibility Days 2018 - GAAD - Accessibility overview
Accessibility Days 2018 - GAAD - Accessibility overviewAccessibility Days 2018 - GAAD - Accessibility overview
Accessibility Days 2018 - GAAD - Accessibility overviewFabrizio Caccavello
 
Come vengono percepiti i siti delle PA da parte degli utenti - forum pa 2017
Come vengono percepiti i siti delle PA da parte degli utenti -  forum pa 2017Come vengono percepiti i siti delle PA da parte degli utenti -  forum pa 2017
Come vengono percepiti i siti delle PA da parte degli utenti - forum pa 2017Fabrizio Caccavello
 
ForumPA 2016: Dieci requisiti per i siti web della Pubblica Amministrazione ...
ForumPA 2016: Dieci requisiti per i siti web della  Pubblica Amministrazione ...ForumPA 2016: Dieci requisiti per i siti web della  Pubblica Amministrazione ...
ForumPA 2016: Dieci requisiti per i siti web della Pubblica Amministrazione ...Fabrizio Caccavello
 
Strategie digitali per creare servizi online efficienti e credibili - Smau mi...
Strategie digitali per creare servizi online efficienti e credibili - Smau mi...Strategie digitali per creare servizi online efficienti e credibili - Smau mi...
Strategie digitali per creare servizi online efficienti e credibili - Smau mi...Fabrizio Caccavello
 
Progettazione web: 5 punti strategici
per valutare professionalità e qualità ...
Progettazione web: 5 punti strategici
per valutare professionalità e qualità ...Progettazione web: 5 punti strategici
per valutare professionalità e qualità ...
Progettazione web: 5 punti strategici
per valutare professionalità e qualità ...Fabrizio Caccavello
 
Smau bologna 2014 strategie per la progettazione web: i clientie vogliono i...
Smau bologna 2014   strategie per la progettazione web: i clientie vogliono i...Smau bologna 2014   strategie per la progettazione web: i clientie vogliono i...
Smau bologna 2014 strategie per la progettazione web: i clientie vogliono i...Fabrizio Caccavello
 
Iwa italy - Le professioni del Web - Festival d'Europa 2013
Iwa italy - Le professioni del Web - Festival d'Europa 2013Iwa italy - Le professioni del Web - Festival d'Europa 2013
Iwa italy - Le professioni del Web - Festival d'Europa 2013Fabrizio Caccavello
 
Marketing territoriale come strategia relazionale
Marketing territoriale come strategia relazionaleMarketing territoriale come strategia relazionale
Marketing territoriale come strategia relazionaleFabrizio Caccavello
 
Le aziende verso facebook - (Fabrizio Caccavello)
Le aziende verso facebook - (Fabrizio Caccavello)Le aziende verso facebook - (Fabrizio Caccavello)
Le aziende verso facebook - (Fabrizio Caccavello)Fabrizio Caccavello
 
Se non sei su facebook non esisti
Se non sei su facebook non esisti Se non sei su facebook non esisti
Se non sei su facebook non esisti Fabrizio Caccavello
 
Progettare layout per il mobile, riflessioni per un design di successo
Progettare layout per il mobile, riflessioni per un design di successoProgettare layout per il mobile, riflessioni per un design di successo
Progettare layout per il mobile, riflessioni per un design di successoFabrizio Caccavello
 

Más de Fabrizio Caccavello (15)

Non esiste UX senza accessibilità Le città per tutti sono in un web per tutti
Non esiste UX senza accessibilità Le città per tutti sono in un web per tuttiNon esiste UX senza accessibilità Le città per tutti sono in un web per tutti
Non esiste UX senza accessibilità Le città per tutti sono in un web per tutti
 
Non esiste UX senza accessibilità. Costruire un web per tutti
Non esiste UX senza accessibilità. Costruire un web per tuttiNon esiste UX senza accessibilità. Costruire un web per tutti
Non esiste UX senza accessibilità. Costruire un web per tutti
 
Accessibility Days 2018 - GAAD - Accessibility overview
Accessibility Days 2018 - GAAD - Accessibility overviewAccessibility Days 2018 - GAAD - Accessibility overview
Accessibility Days 2018 - GAAD - Accessibility overview
 
Come vengono percepiti i siti delle PA da parte degli utenti - forum pa 2017
Come vengono percepiti i siti delle PA da parte degli utenti -  forum pa 2017Come vengono percepiti i siti delle PA da parte degli utenti -  forum pa 2017
Come vengono percepiti i siti delle PA da parte degli utenti - forum pa 2017
 
ForumPA 2016: Dieci requisiti per i siti web della Pubblica Amministrazione ...
ForumPA 2016: Dieci requisiti per i siti web della  Pubblica Amministrazione ...ForumPA 2016: Dieci requisiti per i siti web della  Pubblica Amministrazione ...
ForumPA 2016: Dieci requisiti per i siti web della Pubblica Amministrazione ...
 
Strategie digitali per creare servizi online efficienti e credibili - Smau mi...
Strategie digitali per creare servizi online efficienti e credibili - Smau mi...Strategie digitali per creare servizi online efficienti e credibili - Smau mi...
Strategie digitali per creare servizi online efficienti e credibili - Smau mi...
 
Progettazione web: 5 punti strategici
per valutare professionalità e qualità ...
Progettazione web: 5 punti strategici
per valutare professionalità e qualità ...Progettazione web: 5 punti strategici
per valutare professionalità e qualità ...
Progettazione web: 5 punti strategici
per valutare professionalità e qualità ...
 
Smau bologna 2014 strategie per la progettazione web: i clientie vogliono i...
Smau bologna 2014   strategie per la progettazione web: i clientie vogliono i...Smau bologna 2014   strategie per la progettazione web: i clientie vogliono i...
Smau bologna 2014 strategie per la progettazione web: i clientie vogliono i...
 
Iwa italy - Le professioni del Web - Festival d'Europa 2013
Iwa italy - Le professioni del Web - Festival d'Europa 2013Iwa italy - Le professioni del Web - Festival d'Europa 2013
Iwa italy - Le professioni del Web - Festival d'Europa 2013
 
Marketing territoriale come strategia relazionale
Marketing territoriale come strategia relazionaleMarketing territoriale come strategia relazionale
Marketing territoriale come strategia relazionale
 
Le aziende verso facebook - (Fabrizio Caccavello)
Le aziende verso facebook - (Fabrizio Caccavello)Le aziende verso facebook - (Fabrizio Caccavello)
Le aziende verso facebook - (Fabrizio Caccavello)
 
Le aziende verso facebook
Le aziende verso facebookLe aziende verso facebook
Le aziende verso facebook
 
Se non sei su facebook non esisti
Se non sei su facebook non esisti Se non sei su facebook non esisti
Se non sei su facebook non esisti
 
Progettare layout per il mobile, riflessioni per un design di successo
Progettare layout per il mobile, riflessioni per un design di successoProgettare layout per il mobile, riflessioni per un design di successo
Progettare layout per il mobile, riflessioni per un design di successo
 
Smau Business 2010 Roma
Smau Business 2010 RomaSmau Business 2010 Roma
Smau Business 2010 Roma
 

Responsive Web Design

  • 1. Responsive design il web mobile diventa primo La navigazione in internet da dispositivi mobili è esplosa negli ultimi anni e ha un trend di crescita molto importante. Sviluppando design per il web è giunto quindi il momento di pensare:  "mobile-first"? Ossia, di dare importanza primaria ai design che si  adattano principalmente ai dispositivi mobili? In questo workshop vedremo che, da un punto di vista tecnologico, il "responsive design" potrebbe risultare l'uovo di colombo per risolvere le annose ricerche di compatibilità cross-browser e cross-device, ma che potrebbe introdurre ed evidenziare problematiche strategiche tutt'altro che secondarie. Fabrizio Caccavello lunedì 18 giugno 12
  • 2. Responsive design il web mobile diventa primo About me: Fabrizio Caccavello Web Project Manager e User Experience Designer. Mi occupo di strategie di comunicazione online, e di sviluppo di applicazioni web con particolare riferimento ai temi dell'accessibilità. Cerco di applicare ai miei progetti processi di semplificazione e riduzione in modo da renderli più efficienti e semplici. Sono amministratore e fondatore di Akebia società di servizi per il web. Sono membro del Consiglio Direttivo di IWA Italy. Sono relatore di IWA/HWG ai workshop formativi di SMAU. lunedì 18 giugno 12
  • 3. Responsive design il web mobile diventa primo IWA/HWG è un’Associazione professionale no profit riconosciuta leader mondiale nella fornitura dei principi e delle Partecipazioni certificazioni di formazione per i professionisti della Rete Internet; è presente in 100 paesi, con 130 sedi ufficiali in rappresentanza di più di 165.000 associati. La sua missione: • Fornire programmi formativi di qualità; • Fornire agli associati supporto e collaborazione a livello regionale, nazionale e internazionale, nonché un marchio di Partecipazioni affiliazione riconosciuto a livello mondiale; • Promuovere i principi universali di etica e di pratica professionale per tutti i professionisti della Rete Internet; • Fornire supporto per la definizione e lo studio di normative nei Paesi in cui è presente Network: http://www.iwa.it http://blog.iwa.it http://webaccessibile.org http://skillprofiles.eu lunedì 18 giugno 12
  • 4. Responsive design il web mobile diventa primo Perché IWA? • Fare rete tra professionisti – Scambiarsi informazioni / esperienze – Condividere buone pratiche di lavoro • Apprendere – Consultare documentazione condivisa – Discutere con gli altri soci – Partecipare ad eventi formativi / informativi • Divulgare – Effetto “ebola”: condividere la conoscenza – Proporsi come discenti per seminari e corsi Fabrizio Caccavello fabrizio@akebia.it cfabry 4 lunedì 18 giugno 12
  • 5. Responsive design il web mobile diventa primo Mobile First Nel web design pensare prima alla progettazione per il web mobile perché Fabrizio Caccavello fabrizio@akebia.it cfabry 5 lunedì 18 giugno 12
  • 6. Responsive design il web mobile diventa primo Mobile First Si prevede che 2014 la navigazione da dispositivi mobili supererà (forse) quella da desktop Fabrizio Caccavello fabrizio@akebia.it cfabry 6 lunedì 18 giugno 12
  • 7. Responsive design il web mobile diventa primo Mobile First anche se per ora la marcia di avvicinamento sembra più lenta del previsto Fabrizio Caccavello fabrizio@akebia.it cfabry 7 lunedì 18 giugno 12
  • 8. Responsive design il web mobile diventa primo Mobile First ... e dovremmo anche stabilire cosa intendiamo per “navigazione mobile” ... e concentrarci sul contesto d’uso Fabrizio Caccavello fabrizio@akebia.it cfabry 8 lunedì 18 giugno 12
  • 9. Responsive design il web mobile diventa primo COSA C’È DI NUOVO nell’idea di pensare prima al mobile? NIENTE TUTTO Per chi ha sempre pensato con Il responsive design è l’accessibilità in testa una strategia e molto può anche essere un poco una tecnica raffinato deja vu Fabrizio Caccavello fabrizio@akebia.it cfabry 9 lunedì 18 giugno 12
  • 10. Responsive design il web mobile diventa primo Mobile First è raffinare progressivamente una strategia per ottenere il massimo dei risultati nella maggior parte degli casi possibili come in una gara di Formula 1 Fabrizio Caccavello fabrizio@akebia.it cfabry 10 lunedì 18 giugno 12
  • 11. Responsive design il web mobile diventa primo Mobile First - il budget l’accessibilità non ha un costo l’approccio mobile first un buon progetto web è pensato non ha un costo già accessibile e non è ipotizzabile aggiuntivo può essere una una cosa a minor prezzo non strategia di sviluppo accessibile standard 2000 2012 Fabrizio Caccavello fabrizio@akebia.it cfabry 11 lunedì 18 giugno 12
  • 12. Responsive design il web mobile diventa primo Mobile First - il budget il costo è relativo alla progettazione consapevole, professionalmente evoluta Fabrizio Caccavello fabrizio@akebia.it cfabry 12 lunedì 18 giugno 12
  • 13. Responsive design il web mobile diventa primo Content First partire dai contenuti significa concentrarsi su ciò che è veramente importante e tralasciare i dettagli o la tecnologia con la quale si realizzeranno le strutture che strategicamente è esattamente l’opposto di quando si parte dalla scelta di un tema da scaricare per un CMS Fabrizio Caccavello fabrizio@akebia.it cfabry 13 lunedì 18 giugno 12
  • 14. Responsive design il web mobile diventa primo Content First Fabrizio Caccavello fabrizio@akebia.it cfabry 14 lunedì 18 giugno 12
  • 15. Responsive design il web mobile diventa primo Lo schermo http://resizemybrowser.com/ Fabrizio Caccavello fabrizio@akebia.it cfabry 15 lunedì 18 giugno 12
  • 16. Responsive design il web mobile diventa primo Lo schermo non possiamo pensare di testare tutti i dispositivi sul mercato ...diamoci delle priorità Fabrizio Caccavello fabrizio@akebia.it cfabry 16 lunedì 18 giugno 12
  • 17. Responsive design il web mobile diventa primo Breakpoint principali ma ognuno potrà aggiungere o eliminare altri breakpoint in base al proprio progetto 320px 480px 768px 1024px Progressive enhancement Fabrizio Caccavello fabrizio@akebia.it cfabry 17 lunedì 18 giugno 12
  • 18. Responsive design il web mobile diventa primo Partiamo con il piede giusto user agent $iphone = strpos($_SERVER['HTTP_USER_AGENT'],"iPhone"); Stiamo pensando $android = strpos($_SERVER['HTTP_USER_AGENT'],"Android"); $palmpre = strpos($_SERVER['HTTP_USER_AGENT'],"webOS"); di indirizzare i $berry = strpos($_SERVER['HTTP_USER_AGENT'],"BlackBerry"); device mobile $ipod = strpos($_SERVER['HTTP_USER_AGENT'],"iPod"); verso siti dedicati? $ipad = strpos($_SERVER['HTTP_USER_AGENT'],"iPad"); if ($iphone || $android || $palmpre || $ipod || $berry || $ipad == true){ ... } Fabrizio Caccavello fabrizio@akebia.it cfabry 18 lunedì 18 giugno 12
  • 19. Responsive design il web mobile diventa primo Partiamo con il piede giusto E’ giusto mantenere la stessa user experience? mantenere non mantenere perché l’utente di solito ha già avuto una UX se in fase di progettazione si è già in modalità desktop, proporgli una UX individuata una precisa strategia di completamente diversa potrebbe comunicazione da destinare all’utente disorientarlo mobile Un progetto web è strategia e comunicazione, una diversa UX potrebbe modificare le strategie studiate per il desktop Fabrizio Caccavello fabrizio@akebia.it cfabry 19 lunedì 18 giugno 12
  • 20. Responsive design il web mobile diventa primo Partiamo con il piede giusto media query @media screen and (min-width: 480px) { ... }   @media screen and (min-width: 768px) { ... }   @media screen and (min-width: 1024px) { ... }   @media screen and (min-width: 1200px) { ... } possiamo modellare il layout in base alle dimensioni del dispositivo Fabrizio Caccavello fabrizio@akebia.it cfabry 20 lunedì 18 giugno 12
  • 21. Responsive design il web mobile diventa primo Partiamo con il piede giusto Fabrizio Caccavello fabrizio@akebia.it cfabry 21 lunedì 18 giugno 12
  • 22. Responsive design il web mobile diventa primo Partiamo con il piede giusto Fabrizio Caccavello fabrizio@akebia.it cfabry 22 lunedì 18 giugno 12
  • 23. Responsive design il web mobile diventa primo La criticità delle immagini immagini fluide img { max-width: 100%; } http://www.italianalistapart.com/articoli/42-numero-29-15-giugno-2011/168-immagini-fluide Fabrizio Caccavello fabrizio@akebia.it cfabry 23 lunedì 18 giugno 12
  • 24. Responsive design il web mobile diventa primo un passo alla volta accontentarsi del minimo non fare tanto per fare Progressive enhancement Fabrizio Caccavello fabrizio@akebia.it cfabry 24 lunedì 18 giugno 12
  • 25. Responsive design il web mobile diventa primo la riscossa dell’accessibilità Fabrizio Caccavello fabrizio@akebia.it cfabry 25 lunedì 18 giugno 12
  • 26. Responsive design il web mobile diventa primo Fabrizio Caccavello cfabry Fabrizio Caccavello fabrizio@akebia.it cfabry 26 lunedì 18 giugno 12