際際滷

際際滷Share a Scribd company logo

Responsive Web Design

Daniel Vedovato
Daniel Vedovato

Project Work realizzato per il corso di Social Media e Smart Apps, Universit Ca'Foscari Venezia.

1 of 21
Responsive Web Design Daniel Vedovato 842647
Che cosa 竪? Per arrivare a dare una definizione di che cosa 竪 il Responsive Web Design bisogna partire dalla definizione inglese responsive, che in italiano andrebbe tradotta con laggettivo adattivo, cio竪: (tecnol.) Capace di adattamento (sistema adattativo: capace di modificarsi per soddisfare nuovi requisiti SIN. adattivo). (Zanichelli)
Che cosa 竪? Con Responsive Design indichiamo quellapproccio per il quale la progettazione e lo sviluppo di un sito dovrebbero adattarsi al comportamento e allambiente dellutente in base a fattori come le dimensioni dello schermo, la piattaforma e lorientamento del device. La pratica consiste in un mix di griglie, layout e immagini flessibili, pi湛 un uso accorto delle media queries CSS. Kayala Knight Smash Magazine http://coding.smashingmagazine.com/2011/01/12/guidel ines-for-responsive-web-design/
Il sito web di Starbucks Credits: http://autopilotonlinesuccess.com/responsive-design/2362/
Il sito web di Adobe Credits: http://www.adobe.com/
Perch辿 utilizzare il responsive web design? Lo raccomanda Google: https://developers.google.com/webmasters/s martphone-sites/details Si adatta ad ogni dispositivo Lutilizzo del mobile 竪 in costante crescita E facile da gestire e modificare Si risparmia tempo e denaro Si guadagna in termini di posizionamento
Utilizzatori mobile Credits:http://www.businessinsider.com/mobile-will-eclipse-desktop-by- 2014-2012-6
Perch辿 non utilizzare il responsive web design? Non si adatta a tutti i tipi di siti web Costo nella conversione a responsive Lesperienza di navigazione non risulta essere la stessa di quella Desktop
Strumenti per responsive web design Esistono alcuni strumenti (framework, tool) che facilitano il responsive web design. Tra i framework pi湛 conosciuti troviamo: Foundation, Gumby, Bootstrap. Esistono anche dei software, come: Google Web Designer che tra le varie funzionalit permette di realizzare contenuti (animazioni, web apps ed altro) totalmente responsive.
Come si realizza un sito web responsive? La tecnologia utilizzata per creare siti web responsive 竪 lHTML5. Il metalinguaggio (evoluzione del linguaggio HTML) combinato con altre tecnologie (CSS3, AJAX) permette di modellare siti web (e non solo) applicando ogni genere di effetto e realizzando ogni tipo di contenuto (dal sito web alla web app).
Alcuni esempi di sito web responsive Sito web tradizionale Landing Page Web App Vediamoli nel dettaglio.
Sito web tradizionale Il sito web tradizionale non 竪 altro che il classico sito (istituzionale, blog, portale interattivo) a cui viene applicato un design responsivo e che viene sviluppato seguendo le nuove tecnologie (HTML5/CSS3/AJAX).
http://time.com/
http://foodsense.is/
http://www.barackobama.com/
Landing Page La cosiddetta pagina di atterraggio 竪 una pagina che si raggiunge attraverso un click su di un banner o su link provenienti da campagne pubblicitarie in generale (newsletter, qr-code).
http://windows.microsoft.com/it-it/windows-8/meet
Web App Una web app 竪 una applicazione che non risiede nel PC che la esegue ma in un server remoto. E scritta con linguaggi compatibili (un esempio 竪 una web app realizzata in HTML5/PHP/AJAX con layout responsive)
http://www.dropbox.com/
http://niravigad.com/responsive_man/
Sitografia https://econsultancy.com/blog/64401-responsive-web-design-five-reasons-why-it- may-not-be-the-right-answer#i.68dp61cn4f9n11 http://blog.usabilla.com/responsive-web-design/ http://blog.hubspot.com/insiders/why-responsive-web-design http://www.huffingtonpost.com/john-rampton/business-mobile-responsive- design_b_5267077.html https://econsultancy.com/blog/64823-the-five-golden-rules-of-responsive-web- design#i.68dp61cn4f9n11 http://www.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web- design/ https://www.unleashed-technologies.com/blog/2013/10/29/pros-and-cons- responsive-web-design-vs-mobile-site http://www.manuelfae.it/siti-responsive-e-siti-mobile-per-hotel-vantaggi-e- svantaggi/ http://www.html5today.it/tutorial/che-cos-html5 http://blog.hubspot.com/marketing/landing-page-examples-list

More Related Content

Responsive Web Design

  • 2. Che cosa 竪? Per arrivare a dare una definizione di che cosa 竪 il Responsive Web Design bisogna partire dalla definizione inglese responsive, che in italiano andrebbe tradotta con laggettivo adattivo, cio竪: (tecnol.) Capace di adattamento (sistema adattativo: capace di modificarsi per soddisfare nuovi requisiti SIN. adattivo). (Zanichelli)
  • 3. Che cosa 竪? Con Responsive Design indichiamo quellapproccio per il quale la progettazione e lo sviluppo di un sito dovrebbero adattarsi al comportamento e allambiente dellutente in base a fattori come le dimensioni dello schermo, la piattaforma e lorientamento del device. La pratica consiste in un mix di griglie, layout e immagini flessibili, pi湛 un uso accorto delle media queries CSS. Kayala Knight Smash Magazine http://coding.smashingmagazine.com/2011/01/12/guidel ines-for-responsive-web-design/
  • 4. Il sito web di Starbucks Credits: http://autopilotonlinesuccess.com/responsive-design/2362/
  • 5. Il sito web di Adobe Credits: http://www.adobe.com/
  • 6. Perch辿 utilizzare il responsive web design? Lo raccomanda Google: https://developers.google.com/webmasters/s martphone-sites/details Si adatta ad ogni dispositivo Lutilizzo del mobile 竪 in costante crescita E facile da gestire e modificare Si risparmia tempo e denaro Si guadagna in termini di posizionamento
  • 8. Perch辿 non utilizzare il responsive web design? Non si adatta a tutti i tipi di siti web Costo nella conversione a responsive Lesperienza di navigazione non risulta essere la stessa di quella Desktop
  • 9. Strumenti per responsive web design Esistono alcuni strumenti (framework, tool) che facilitano il responsive web design. Tra i framework pi湛 conosciuti troviamo: Foundation, Gumby, Bootstrap. Esistono anche dei software, come: Google Web Designer che tra le varie funzionalit permette di realizzare contenuti (animazioni, web apps ed altro) totalmente responsive.
  • 10. Come si realizza un sito web responsive? La tecnologia utilizzata per creare siti web responsive 竪 lHTML5. Il metalinguaggio (evoluzione del linguaggio HTML) combinato con altre tecnologie (CSS3, AJAX) permette di modellare siti web (e non solo) applicando ogni genere di effetto e realizzando ogni tipo di contenuto (dal sito web alla web app).
  • 11. Alcuni esempi di sito web responsive Sito web tradizionale Landing Page Web App Vediamoli nel dettaglio.
  • 12. Sito web tradizionale Il sito web tradizionale non 竪 altro che il classico sito (istituzionale, blog, portale interattivo) a cui viene applicato un design responsivo e che viene sviluppato seguendo le nuove tecnologie (HTML5/CSS3/AJAX).
  • 16. Landing Page La cosiddetta pagina di atterraggio 竪 una pagina che si raggiunge attraverso un click su di un banner o su link provenienti da campagne pubblicitarie in generale (newsletter, qr-code).
  • 18. Web App Una web app 竪 una applicazione che non risiede nel PC che la esegue ma in un server remoto. E scritta con linguaggi compatibili (un esempio 竪 una web app realizzata in HTML5/PHP/AJAX con layout responsive)
  • 21. Sitografia https://econsultancy.com/blog/64401-responsive-web-design-five-reasons-why-it- may-not-be-the-right-answer#i.68dp61cn4f9n11 http://blog.usabilla.com/responsive-web-design/ http://blog.hubspot.com/insiders/why-responsive-web-design http://www.huffingtonpost.com/john-rampton/business-mobile-responsive- design_b_5267077.html https://econsultancy.com/blog/64823-the-five-golden-rules-of-responsive-web- design#i.68dp61cn4f9n11 http://www.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web- design/ https://www.unleashed-technologies.com/blog/2013/10/29/pros-and-cons- responsive-web-design-vs-mobile-site http://www.manuelfae.it/siti-responsive-e-siti-mobile-per-hotel-vantaggi-e- svantaggi/ http://www.html5today.it/tutorial/che-cos-html5 http://blog.hubspot.com/marketing/landing-page-examples-list

Editor's Notes

  • #3: Ripeti quello che c竪 scritto andando pi湛 nel particolare
  • #4: Dopo aver estrapolato una idea di cosa potrebbe essere, proviamo ad applicarla al mondo del computer, arriviamo ad ottenere la definizione data da Kayal Knight di smash magazine In parole povere un sito web responsivo permette ai tuoi siti web di adattarsi in maniera fluida in schermi con differenti risoluzioni
  • #7: Cerchiamo di capire perch辿 usare il responsive web design NON SONO IN ORDINE DI IMPORTANZA Sul punto primo avrete da ridire, ma di solito Google non parla per niente Sul secondo punto anche qui c竪 poco da dire, disegnate il vostro sito una volta sola e li 竪 finita E SI RISPARMIA TEMPO E DENARO Terzo punto parla da se Quarto punto, se devo fare delle modifiche devo farlo su di un solo file e non su mille file Non servono soluzioni diverse (es sito desktop) Avere un singolo URL rende la vita pi湛 facile ai Google per fare il crawling di un sito
  • #9: Hotel, e commerce o siti istituzionali che comprendono molti menu e molte voci a volte potrebbero risultare inutilizzabili se converiti in responsive Per portare un sito da standard a responsive c竪 comunque un costo, abbastanza elevato Per quanto la risoluzione e il design si adatti allo schermo del dispositivo a volte si preferisce navigare da desktop
  • #10: Bofonchia un po sui vari strumenti e spiega cosa sono i vari framework
  • #17: A volte utilizzata anche come portfolio da parte di web deisgner