10 consigli per progettare un sito web responsive

11 luglio 2013 — 8 Comments

Circa un mese fa ho scitto un articolo per Webhouse che spiega come trasformare un layout fisso in layout responsive. In questo articolo invece parlo del Responsive Web Design come processo fondamentale per la realizzazione di un sito, che va pianificato dal principio adottando un’approccio per punti. I punti per me fondamentali sono 10 e includono sia la fase di progettazione che la fase di design.

Progettare un sito per un web-designer vuol dire anche tener conto della possibilità di adottare una modello di progettazione responsive, che realizzi un sito web, intelligente, flessibile e adattabile. Questo modello di progettazione è diverso da quello tradizionale, è un procedimento innovativo perchè tiene conto di una serie di concetti nuovi che sono una conseguenza della tecnologia che cambia. Nella progettazione di un sito web responsive dobbiamo tener conto di tanti aspetti importanti ed occorre per questo procedere per obiettivi graduali. Per partire con il piede giusto è importante fare brainstorming e schizzare tutte le idee che ci vengono in mente, in termini di break-point principali, cioè le larghezze espresse in pixel per le quali vogliamo che il nostro sito-web adotti quegli stili extra che permettono al sito di adattarsi alla larghezza del browser.

Riassumiamo questi aspetti in 10 punti che raccontiamo con un’infografica:

1) Perchè adottare un approccio responsive?

È importante considerare la diffusione in massa di smarthphone e tablet che secondo alcune ricerche in alcune fasi hanno superato la vendita dei computer. Orami con questi dispositivi è possibile compiere tutte quelle azioni svolte con un computer, in particolare navigare sul web.

2) Cosa è il responsive web design?

È un nuovo metodo di progettazione che mette in relazione il sito web con il tipo di dispositivo che lo visualizza, permettendo agli elementi del sito di adattarsi al suo contenitore.

3) Schizziamo il nostro layout in termini di break-point più importanti

Non potendo realizzare layout per tutte le risoluzioni esistenti è importante schizzare i layout corrispondenti ai break-point più importanti e realizzare eventualmente quelli meno importanti direttamente sul browser con il codice. Prendiamo carta e penna e cominciamo!

4) Concetti di Mobile First e Progressive enhancement

Cominciando dai layout più piccoli ed in particolare dai cellulari, ( di solito la risoluzione minima consigliata è quella di 320px) per finire poi ai layout per desktop adottiamo un procedimento innovativo che permette al web designer di migliorare le sue skills

5) Content First

Di conseguenza, con una importanza fondamentale ai contenuti, possiamo determinare una gerarchia degli stessi, pensando a quale contenuti inserire per le risoluzioni più piccole e man mano aggiungere quelli meno importanti per i layout per desktop.

6) Fluid grid

Per realizzare un sito web responsive perfetto è fondamentale realizzare un layout fluido, cioè progettato con le griglie fluide che permettono di posizionare gli elementi come una proporzione tra di essi e rispetto al loro contenitore. Dimentichiamoci dei pixel e lavoriamo con le misure relative.
7) Fluid images

È importante anche adattare le immagini alla larghezza della schermata del browser, adottando una semplice regola.

8) Media Query

Le media queries sono il terzo ingrediente chiave del processo responsive e svolgono un compito fondamentale: comunicano al viewport (l’area di visualizzazione della pagina) come comportarsi quando una pagina viene ridimensionata e quali stile adottare in quel caso.
9) Test con il browser

Prima di testare il vostro layout responsive con gli innumerevoli strumenti responsive esistenti sulla rete è importante verificare la riuscita del lavoro semplicemente restringendo il browser e verificare come gli elementi della pagina si posizionano. Se qualcosa non và, possiamo sempre fare le nostre correzioni.
10) Test con i responsive testing tools esistenti sul web

Infine consiglio una serie di strumenti che testano il nostro progetto responsive, creati dagli sviluppatori per testare il nostro layout responsive.

Ecco l’infografica:

RWD

No related content found.

alederodesign

Posts

Web design + Grafica. Specializzata in Responsive web design, Html5&Css3 ed effetto parallasse. Posso rinunciare ad una borsa griffata ma non ad un imac nuovo.

8 responses to 10 consigli per progettare un sito web responsive

  1. Interessante e ben fatta! :)
    Grazie

  2. Ciao e complimenti per il tuo articolo.
    Molto interessante ed esaustivo!

  3. Ciao
    complimenti per l’articolo ed anche per ll tuo sito…. è bellissimo !!
    Inizio adesso ad occuparmi di “responsive” e trovo non poche difficoltà.
    Sarei disposto a spendere euro per imparare ma purtroppo qui da noi (salento) è impensabile trovare uno straccio di corso. (quanto è vero ciò che scrivi nel tuo log riguardo al sud!!)
    Intanto, esiste qualche manuale o guida che possa “divorare” per aiutarmi passo paso a realizzare un sito responsive?
    A presto

  4. Ciao e complimenti Ale per tutte le info che condividi.
    E’ da qualche mese che ho intrapreso un percorso di studio per mi ha permesso d’imparare le basi del web design: HTML/5 e CSS/3. Ora ho iniziato a studiare il JAVASCRIPT. Sto imparando con i tutorial come i tuoi e video su Youtube.
    1)C’ è un buon libro che senti di potermi consigliare per imparare da zero il JAVASCRIPT? In Italiano possibilmente.
    2)Per quanto riguarda i reset CSS tu quale metodo utilizzi?
    3)Per un corretto percorso formativo secondo te dopo il JAVASCRIPT cos è più opportuno conoscere ( 2 conoscenti che fanno questo mestiere mi dicono uno il JAVA e l’altro il FLASH ). Premetto che il mio obbiettivo e diventare un buon web design freelance.
    Grazie, Robert

    • Ciao Robert,
      innanzitutto grazie per i complimenti :)

      Per quanto riguarda javascript io ti consiglierei di scegliere più che altro un corso in classe… per quanto riguarda i libri ci sono ottime risorse in inglese soprattutto video corsi. In italiano non ho mai acquistato nessun libro e non saprei cosa consigliarti…
      Per quanto riguarda flash o Java io non ritengo nessuno dei 2 fondamentali per il tuo percorso di studi, soprattutto flash ormai in disuso. Ti consiglierei invece di imparare un po di back-end ed orientarti verso il php

      Ciao a presto
      Alessandra

Lascia un Commento

*

Text formatting is available via select HTML. <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>