CSS

RWD – Responsive Web Design

Il termine Responsive Web Design (RWD) viene utilizzato per indicare una particolare tecnica di Web design per la realizzazione di siti web in modo che le pagine adattino automaticamente il layout per fornire una visualizzazione ottimale in funzione dell’ambiente nei quali vengono visualizzati (pc su desktop con diverse risoluzioni, tablet, smartphone, cellulari di vecchia generazione, web tv) riducendo al minimo all’utente la necessità di ridimensionamento e scorrimento, in particolare quello orizzontale.

responsive-web-design-vancouver-paladin-security1

La necessità di dover adattare la visualizzazione alle diverse dimensioni e risoluzioni degli schermi, ha introdotto il concetto di Resolution breakpoints per poter suddividere in un numero discreto le tipologie di layout ovvero di organizzazione dei contenuti, in funzione della larghezza del device. Tali breakpoint sono generalmente espressi in pixel, anche se l’aumento della densità dei pixel nelle nuove generazioni di device comporta che non si possa considerare il viewport solo in termini di pixel senza considerarne l’effettiva dimensione.

Ethan Marcotte nel suo libro “Responsive web design” identifica 6 Resolution breakpoints:

  • 320 pixel per device con schermi piccoli, come cellulari, mantenuti con orientamento verticale (portrait)
  • 480 pixel per device con schermi piccoli, come cellulari, mantenuti con orientamento orizzontale (landscape)
  • 600 pixel piccoli tablet, come Kindle di Amazon (600×800) e Nook di Barnes&Noble (600×1024), tenuti con orientamento verticale
  • 768 pixel tablet da 10 pollici come l’iPad (768×1024) mantenuti con orientamento verticale
  • 1024 pixel computer da scrivania, laptop e netbook, e tablet come l’iPad (1024×768) mantenuti con orientamento orizzontale
  • 1200 pixel computer con schermi larghi, tipicamente desktop ma anche laptop

Tali tipologie possono essere più genericamente ricondotte a 4 principali:

  • mobile: per cellulari
  • narrow: per tablet
  • normal: pc desktop
  • wide: schermi di grandi dimensioni
Lisario Rinaldo | Consulente Informatico | Senior Software Developer | Senior Analyst | Project Manager