Responsive / Adaptive Web Design: scelta obbligatoria - Smau Milano 2014

Responsive / Adaptive Web Design: scelta obbligatoria

Sito nuovo o vecchio, deve essere adatto ai nuovi dispositivi mobili, avere un sito non basta.

CLAUDIO CARRERA Sviluppatore si7 internet Brescia www.3rd-‐graphic.it


Claudio Carrera Sono un sviluppatore siti web freelance, mi occupo principalmente di realizzazione d’interfacce web per CMS proprietari e open source, in particolar modo siti web realizzati con CMS Joomla.

Ho lavorato presso molte aziende in tutta Italia. Seguendo non solo lo sviluppo grafico, ma anche la programmazione di estensioni e il posizionamento sui motori di ricerca.

International Webmasters Association l  Prima associazione al mondo che

raggruppa chi lavora nel Web

l  Obiettivo di IWA: creare rete tra soci, partecipare all'evoluzione del Web, divulgare conoscenza tramite soci con eventi ed iniziative

l  A s s o c i a z i o n e p r o f e s s i o n a l e rappresentanza delle professionalità Web

l  unica Associazione del settore ICT attualmente censita dal Ministero dello Sviluppo Economico

International Webmasters Association l  Associazione Professionale che

raggruppa i soggetti che - ai sensi della legge 4/2013, sono definibili come "professionisti Web"

l  H a r i l a s c i a t o i p r i m i p r o f i l i professionali (G3 Web Skill Profiles) in linea con i dettami dell'agenda digitale europea e italiana ed ha avviato accordi di collaborazione con realtà di tutela del lavoro (sindacati) e di domanda/offerta di lavoro: ancora una volta il ruolo di IWA è quello di unire, far collaborare e tutelare chi opera nel Web

International Webmasters Association l  Potrai ottenere uno sconto sulla

quota associativa* che pagherai euro 50,00 anziché euro 65,00. Lo sconto vale sia per i nuovi soci che per i rinnovi. http://www.iwa.it/join/

l  Per usufruire dello sconto usa in fase di registrazione o rinnovo il seguente codice promozionale:

SMAUMILANO2014

* valido sono nel periodo fieristico


?


Vendite + 30% circa

smartphone /tablet

Fonte: hDp://www.techeconomy.it/2014/01/28/idc-‐record-‐smartphone-‐nel-‐2013-‐oltre-‐un-‐miliardo-‐di-‐vendite/ Fonte: hDp://www.tomshw.it/cont/news/il-‐2013-‐e-‐stato-‐l-‐anno-‐peggiore-‐per-‐il-‐computer-‐calo-‐del-‐10/52318/1.html

Computer

-  6,9%

Responsive / Adaptive Web Design: scelta obbligatoria ProdoDo unico del

suo genere realizzato da pochi

Prezzi molto al7

Successo di vendite

Aumentano modelli immessi sul

mercato

Diventa di uso comune

Si abbassano i prezzi

Nasce nuova 7pologia di prodoDo


hDp://www.techadvisor.co.uk/test-‐centre/mobile-‐phone/iphone-‐5s-‐vs-‐peppa-‐pig-‐phone/

VS


Fonte: hDp://www.florence-‐7ckets.com/it/palazzo-‐vecchio-‐con-‐guida-‐su-‐tablet.html


hDp://www.apvd.it/promuovere-‐la-‐tua-‐app-‐offline/


Fonte: hDp://www.ilgiornaledellusso.it/2014/07/24/eataly-‐fare-‐la-‐spesa-‐con-‐lo-‐smartphone/


Fonte : hDp://www.markeven.it/blog/tendenze-‐del-‐mobile-‐internet-‐2012/


.

utente

computer smartphone tablet

Sito web

UTENTE

TABLET COMPUTER SMARTPHONE

SITO WEB


utente tablet

smartphone

Sito web

computer

Responsive / Adaptive Web Design: scelta obbligatoria cliente

Motore di ricerca SEO

Pay per click

Pagina social Condivisione o

like Banner

pubblicitario

Pubblicità cartacea

SITO WEB


Buongiorno mi dica

Ah … Ma no io l’ho provato sul mio

smartphone e il sito lo vedo

Ho un sito web e vorrei migliorarlo, il sito è

www… cosa potrei fare?

Potrei realizzarle …. e poi … e potrei renderle il sito adaDo ai nuovi

disposi7vi mobili

(ah ridaje, un altro) certo che è visibile, ma non è comunque adaDo ai nuovi

disposi7vi ! Ah… Cioè?


Perché non è di tipo RESPONSIVE / ADAPTIVE!

COSA VUOL DIRE RESPONSIVE:

I CONTENUTI SONO VISIBILI SU TUTTI I DISPOSITIVI: SMARTPHONE, TABLET, COMPUTER

COSA VUOL DIRE ADAPTIVE:

CHE I CONTENUTI SI ADATTANO AL DISPOSITIVO CHE LO VISUALIZZA


UN UNICO SITO WEB PER:

Responsive / Adaptive Web Design: scelta obbligatoria Ma non è

sufficiente che sia visibile il sito?

No, non basta!


Problema 1: Ogni volta che apre una pagina web:


Problema 2:

Che riporta al problema 1


Problema 2B: Problema 3:


VS

SELECT Toggle


E’ IL SITO WEB AD ADATTARSI ALL’ UTENTE E NON L’UTENTE A DOVERSI ADATTARE AL SITO WEB:


DETTAGLI PORTRAIT LANDSCAPE


VS


hDp://fortawesome.github.io/Font-‐Awesome/


www.960.gs


VS Desktop first Mobile first


StruDura del Vero Responsive

Alcuni siQ sembrano Responsive Ma in realtà non lo sono:

Utente apre sito web

Disposi7vo carica sito web

Il sito si adaDa al disposi7vo

Responsive / Adaptive Web Design: scelta obbligatoria Falso responsive: sito desktop + sito mobile di 7po 1

Utente trova sito web

Server rivela 7pologia di disposi7vo u7lizzato

È un tablet? Reinderizza su www.tablet.sito.it

È uno smartphone

Reinderizza su www.mobile.sito.it

È un computer Carica il sito desktop

A google non piace!


Falso responsive: sito desktop + sito mobile di 7po 2

Utente trova sito

web

Inizia caricamento sito web

Script javascript cerca di capire che 7pologia di dispo7vo stà u7lizzando utente

A seconda del

disposi7vo u7lizzato, cambia i file carica7 nella pagina web

Migliore rispeDo al metodo uno ma comunque sconsigliato


Apri il tuo sito web con un computer e prova a ridimensionare la finestra del browser, in questo modo, simuli le diverse risoluzioni dei monitor.

Domande e Risposte:

Un sito responsive / adaptive viene trovato più facilmente dai motori di

ricerca?


Domande dei precedenti workshop:

Quali siti possono essere resi

Adattivi / responsivi ?



Passare da desktop a responsive

Mi può far perdere posizioni Sui motori di ricerca?



Quali sono i framework migliori per

Realizzare un sito responsive /adaptive?


E le vostre domande?

Per maggiori informazioni: www.3rd-graphic.it


Responsive / Adaptive Web Design: scelta obbligatoria - Smau Milano 2014

Design

Transcript of Responsive / Adaptive Web Design: scelta obbligatoria - Smau Milano 2014