consulente web marketing

Perchè è importante il Responsive Web Design?

Pubblicato il 13-09-2012 da - Archiviato in Mobile
responsive web design

Che cos’è il  Responsive Web Design? Molto semplicemente  è una tecnica di sviluppo attraverso la quale si cerca di costruire un sito web accessibile a tutti i dispositivi che consentano la navigazione sul web: Desktop, Laptop, Tablet e Smartphone.

Ma l’attenzione maggiore per l’utilizzo di questa tecnologia è sicuramente legato al settore del mobile , settore che in questi ultimi anni ha avuto un vero boom! Secondo le ultime statistiche rilasciate da comScore sul mercato mobile negli Stati Uniti, ci sono circa 234 milioni di americani dai 13 anni in su utilizzano strumenti mobile; fra questi, sono 110 milioni i possessori di smartphone (+5% rispetto a febbraio 2012).

Uno dei primi problemi che sorge quando si affronta questa tematica è che tipo di tecnologia scegliere per sviluppare un sito che abbia tutte queste caratteristiche. Una delle tecniche più utilizzate si chiama  “Media Queries CSS”. Tramite questa caratteristica dei CSS possiamo indirizzare stili specifici ai diversi dispositivi presenti nel mercato, con particolare attenzione agli Smartphone e Tablet.  Provate a pensare cosa succede quando un dispositivo mobile viene ruotato, il browser riorganizza il layout in base alle dimensioni della finestra; con questa tecnica si risolvono non pochi problemi di visualizzazione.

Esempi di responsive Web Design

Per avere un’idea tangibile su cosa sia effettivamente il Responsive Design ho raccolto 20 esempi pratici di siti che utilizzano questa tecnologia. Tra quelli che mi hanno impressionato di più c’è sicuramente il “The Boston Globe” noto magazine americano. Provate anche voi a ridurre la finestra del vostro browser per vedere l’effetto che fa!

  1. The Boston Globe
  2. Smashing Magazine
  3. Forefathers
  4. Stonehenge Veterinary Hospital
  5. Frontend 2011
  6. Sphero
  7. Bloom
  8. Reverse Büro
  9. CSS Tricks
  10. Cappuccino Digital
  11. Social Marketers Summit
  12. Warface
  13. Atlason
  14. Lancaster University
  15. Heathlife
  16. Food Sense
  17. Grey Goose
  18. New Adventures In Web Design
  19. Fork
  20. BMW Community

Dove inizia la storia?

La storia di questa fantastica tecnologia nasce non molto tempo fa, nel Maggio 2010 quando si è incominciato a pensare di web design reattivo. Abbiamo superato quindi i vecchi stili di progettazione legati all’HTML4 e CSS2 per passare a nuove modalità di progettazione:  con l’HTML5 e CSS3 si iniziano a vedere dei progetti interessanti.

WordPress, CMS che utilizzo da anni per lo sviluppo di siti web dinamici, ha introdotto recentemente un tema gratuito, chiamato Tweenty Twelve, che rende fruibile al meglio i contenuti del tuo sito web su qualunque dispositivo tu lo legga. Per incrementarne la leggibilità Twenty Twelve fa uso dell’ottima font Open Sans (parte dei Google Web Fonts). Nettamente diverso dai font di default del recente passato, a parere dell’autore questa font riesce a far risaltare i testi e a dar loro un look moderno e molto “pulito”.

3 ragioni per scegliere questa tecnologia

Quale sono le principali ragioni che possono spingere una società a scegliere questa tecnologia?

  1. Connect With Your Audience
    La prima domanda a cui dobbiamo dare una risposta è capire che dispositivi utilizzano i nostri utenti per navigare su internet. Riporto un altro interessante studio condotto nel  2012 da MobiThinking che evidenzia il fatto che in tutto il mondo ci sono 1.2 miliardi di utenti che utilizzo dispositivi mobili per andare sul web. Dato impressionante! Secondo un altro studio condotto questa volta da Morgan Stanley nel 2010, previse che nel 2015 la navigazione su internet tramite mobile superi quella da desktop.  Scegliere questa tecnica di sviluppo ci consente di venire incontro alle esigenze degli utenti, sempre più esigenti dal punto di vista tecnologico.
  2. Occhio al Budget!
    Quanti di voi hanno il budget per costruire un sito in doppia versione? Una per desktop e una per mobile? La risposta a questo interrogativo è molto semplice ed intuitiva: risparmiare soldi e tempo per avere un sito web accessibile a 360 gradi.
  3. Uno sguardo al Futuro
    Non è solo una questione di costi! Bisogna cercare di stare al passo con in tempi, in una società dove la tecnologia viaggia alla velocità della luce. Attraverso il responsive web design è possibile costruire un sito web compatibile con tutti i dispositivi, indipendentemente dalla dimensione dello schermo.

Responsive Web Design Tools

Vi segnalo 5 tool che vi aiuteranno a sviluppare un sito reattivo.

  1. Screenqueri.es
  2. Responsinator
  3. Bricss
  4. Screenfly
  5. Responsivepx

Che libri mi consigli?

Su questo argomento consiglio di comprare  l’e-book pubblicato da A Book Apart: Responsive Web Design.


lascia un commento

  • http://www.4-flying.com loris

    Molto interessante! Grazie per la condivisione