Responsive web design, l'altra faccia dell'accessibilità

Titolo della presentazione /20

3/20

Fabrizio Caccavello

Responsive Web Design, l'altra faccia dell'accessibilità

martedì 23 ottobre 12

09/05/1 Titolo della presentazione /20

3/20

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 Akebiasocietà di servizi per il web.

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

About me: Fabrizio Caccavello



3/20

Partecipazioni internazionali

Partecipazioni nazionali

INTERNATIONAL WEBMASTERS ASSOCIATION

Prima associazione al mondo (dal 1996) che raggruppa chi lavora nel Web, sia nel settore pubblico che privato

Obiettivo di IWA è creare rete tra i soci, partecipare all'evoluzione della rete e divulgare conoscenza tramite i soci con eventi ed iniziative

media

http://www.iwa.it


http://www.iwa.it/

http://www.iwa.it/


3/20

media partner

1 rete tra professionisti

partecipazione a gruppi di lavoro anche internazionali

convenzioni per tutela professionalità (esempio: studi legali)

2

3

quota speciale SMAU: euro 50,00 presso stand IWA

Perché associarsi

INTERNATIONAL WEBMASTERS ASSOCIATIONhttp://www.iwa.it


http://www.iwa.it/

http://www.iwa.it/


3/20Fabrizio Caccavello


Linea guida 1.3 Adattabile: Creare contenuti che possano essere rappresentati in modalità differenti (ad esempio, con layout più semplici), senza perdere informazioni o la struttura.

http://www.w3.org/Translations/WCAG20-it/

CHI SCRIVE LE REGOLE PER PROGETTARE IL WEB E PER L’ACCESSIBILITA’?

Le informazioni e i componenti dell'interfaccia utente devono essere presentati agli utenti in modo che possano essere percepiti.

Principio 1: Percepibile



3/20


Mobile First

Nel web design pensare prima alla progettazione per il web mobile

perché

Fabrizio Caccavellomartedì 23 ottobre 12


3/20


Mobile First

Si prevede che 2014 la navigazione da dispositivi

mobili supererà (forse) quella da desktop



3/20


Mobile First

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



3/20


Mobile First

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

... e concentrarci sul contesto d’uso



3/20


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

Per chi ha sempre pensato con

l’accessibilità in testa può anche essere un

raffinato déjà vu

NIENTE TUTTO

Il responsive design è una strategia e molto

poco una tecnica



3/20


Mobile First

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

come in una gara di Formula 1



3/20


Mobile First - il budget

l’accessibilità non ha un costo un buon progetto web è pensato già accessibile e non è ipotizzabile una cosa a minor prezzo non accessibile

2000 2012

l’approccio mobile first non ha un costo aggiuntivo può essere una strategia di sviluppo standard



3/20


Mobile First - il budget

il costo è relativo alla progettazione consapevole, professionalmente evoluta



3/20


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



3/20


Content First



3/20


Lo schermo

http://resizemybrowser.com/


http://resizemybrowser.com

http://resizemybrowser.com


3/20


Lo schermo

17

non possiamo pensare di testare tutti i dispositivi sul mercato

...diamoci delle priorità



3/20


18

Progressive enhancement

320px 480px 768px 1024px

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


http://en.wikipedia.org/wiki/Progressive_enhancement



3/20


19

Partiamo con il piede giusto

user agent

$iphone = strpos($_SERVER['HTTP_USER_AGENT'],"iPhone");

$android = strpos($_SERVER['HTTP_USER_AGENT'],"Android");

$palmpre = strpos($_SERVER['HTTP_USER_AGENT'],"webOS");

$berry = strpos($_SERVER['HTTP_USER_AGENT'],"BlackBerry");

$ipod = strpos($_SERVER['HTTP_USER_AGENT'],"iPod");

$ipad = strpos($_SERVER['HTTP_USER_AGENT'],"iPad");

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

...

}

Stiamo pensando di indirizzare i device mobile verso siti dedicati?



3/20


20


E’ giusto mantenere la stessa user experience?

mantenere non mantenereperché l’utente di solito ha già avuto una UX

in modalità desktop, proporgli una UX completamente diversa potrebbe

disorientarlo

Un progetto web è strategia e comunicazione, una diversa UX potrebbe

modificare le strategie studiate per il desktop

se in fase di progettazione si è già individuata una precisa strategia di comunicazione da destinare all’utente mobile



3/20


21


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



3/20


un sito non è una brochure

monitor 28 pollici



3/20



monitor 19 pollici



3/20



smartphone



3/20



monitor 19 pollici

caratteri molto ingranditi



3/20


cos’è questa confusione?semplicemente la posta di Google

ingrandita come farebbe un ipovedente



3/20


Framework

http://960.gs/

http://yuilibrary.com/yui/docs/cssgrids/

http://www.responsivegridsystem.com/

http://www.netmagazine.com/features/50-fantastic-tools-responsive-web-design



3/20


Framework

http://www.responsivegridsystem.com/



3/20


Criticità

?

HTML5 non è ancora uno standard



3/20


La criticità delle immagini

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

immagini fluide

img { max-width: 100%;}

http://adaptive-images.com/una possibile soluzione





3/20


Criticità

i framework possono importare un bel mucchio di codice inutile



3/20


un passo alla volta

32

Progressive enhancement

accontentarsi del minimo

non fare tanto per fare





3/20


cfabry


Responsive web design, l'altra faccia dell'accessibilità

Documents

Transcript of Responsive web design, l'altra faccia dell'accessibilità