siti responsive - realizzazione e costruzione siti internet a Taormina

//Gi. Pu. Sitiweb/
   +39.339.73.52.717   gipusitiweb@tiscali.it
_______________________________________________________________________________________________________________________________________________
/ a cura di Giuseppe Puzzolo //
09:00-12:00 / 15:00-18:00
   +39.339.73.52.717   info@gipusitiweb.org
//Gi. Pu. Sitiweb/
/ a cura di Giuseppe Puzzolo //
_______________________________________________________________________________________________________________________________________________
09:00-12:00 / 15:00-18:00
   +39.339.73.52.717   info@gipusitiweb.org
09:00-12:00 / 15:00-18:00
_______________________________________________________________________________________________________________________________________________
//Gi. Pu. Sitiweb/
/ by Giuseppe Puzzolo //
  +39.339.73.52.717 - info@gipusitiweb.org
//Gi. Pu. Sitiweb/
by Giuseppe Puzzolo

-
Vai ai contenuti

Menu principale:

Tipi di siti ▼
Realizzazione Siti Web Responsive
responsive siti web


- Sviluppo e gestione del vostro sito web

- Navigabile anche su Tablet e Smartphone

- Connesso ai Social Network

- Strategia di marketing e SEO
DESIGNE RESPONSIVE
Il design responsivo,o responsive web design (RWD) o sito responsive, indica una tecnica di web design per la realizzazione di siti in grado di adattarsi graficamente in modo automatico al dispositivo coi quali vengono visualizzati (computer con diverse risoluzioni, tablet, smartphone, cellulari, web tv), riducendo al minimo la necessità dell'utente di ridimensionare e scorrere i contenuti. Il design responsivo è un importante elemento dell'accessibilità,  la quale tiene conto inoltre di numerosi altri fattori, incentrati non  solo sui dispositivi ma anche sulle caratteristiche dell'utente (quali:  capacità cognitive, vista, difficoltà fisiche, e così via).
STORIA
Il design responsivo nasce con la necessità di rendere i siti web facilmente accessibili con ogni tipo dispositivo e risoluzione video, necessità rilevata e studiata sin dagli anni 1990, anche dal gruppo del World Wide Web Consortium. Un libro del 2010 di Zoe Mickley Gillenwater sui fogli di stile 3.0 includeva guide sull'impaginazione flessibile. La locuzione Responsive Web Design (RWD) è stata invece coniata da Ethan Marcotte in un articolo sulla rivista A List Apart, descrivendone poi teoria e pratica in un breve saggio del 2011. .net Magazine ha indicato il design responsivo come una delle principali tendenze del 2012. Il 29 agosto 2012 il W3C ha pubblicato in versione bozza la proposta HTML Responsive Images Extension,  contenente le specifiche per la creazione di un nuovo tag html  <picture> al fine di superare i limiti del tag <img> e  consentire alle pagine web di visualizzare diverse immagini in funzione  di fattori quali risoluzione e densità dello schermo utilizzato  dall'utente. Luke Wroblewski ha riassunto alcune delle sfide progettuali del  design responsivo, pubblicando un catalogo di modelli di impaginazione  multi-dispositivo e suggerendo di focalizzare l'attenzione in particolare sull'esperienza dell'utente. AdWords Targeting (Device Platform Targeting).
CARATTERISTICHE
Un sito responsivo fa uso di una impaginazione grafica con griglie a proporzioni fluide, struttura e immagini flessibili, e, generalmente, dei fogli di stile 3.0; in particolare di un'estensione della regola @media, per adattare l'impaginazione grafica all'ambiente nel quale il sito è visualizzato.
  • Le media queries consentono alla pagina di usare diversi fogli di stile in base alle caratteristiche del dispositivo utilizzato.
  • Il concetto di griglia flessibile richiede che gli elementi siano  dimensionati tramite unità relative come percentuali ed em, e non con  unità assolute come pixel o punti.
  • Le immagini flessibili devono poter essere visualizzate con  dimensioni diverse, in modo da potersi adattare all'impaginazione  evitando di sovrapporsi agli altri elementi.
Come risultato, gli utenti che utilizzano diverse periferiche e browser, hanno accesso a un singolo sorgente  i cui contenuti vengono però disposti in modo differente tale da essere  sempre facilmente consultabili, e senza dover compiere troppe  operazioni di ridimensionamento, scorrimento e spostamento.

Risoluzione breakpoint
La necessità di adattare l'impaginazione alle diverse dimensioni e risoluzioni  degli schermi, ha introdotto il concetto di "Resolution breakpoint"  ("punti di interruzione della risoluzione"), in modo da stabilire delle  soglie alle quali modificare la presentazione grafica in funzione della  larghezza del dispositivo.
Tali soglie sono generalmente espresse in pixel, anche se l'aumento  della densità dei pixel nelle nuove generazioni di dispositivi comporta  che non si possa considerare l'area di visualizzazione solo in termini  di pixel, senza considerarne l'effettiva dimensione.
Il framework Bootstrap identifica (in riferimento al "max-device-width") quattro tipi di device e corrispondenti resolution breakpoint:.
  • extra small device con risoluzione inferiore a 768 pixel
  • small device con risoluzione fino a 992 pixel
  • desktop con risoluzione inferiore a 1200 pixel
  • large device con risoluzione superiore a 1200 pixel
mentre Ethan Marcotte ne identifica sei:
  • 320 pixel per dispositivi con schermi piccoli, come cellulari, con orientamento verticale (portrait)
  • 480 pixel per dispositivi con schermi piccoli, come cellulari, con orientamento orizzontale (landscape)
  • 600 pixel piccoli tablet, come Kindle di Amazon (600x800) e Nook di Barnes&Noble (600x1024), con orientamento verticale
  • 768 pixel tablet da 10 pollici, come l'iPad (768x1024), con orientamento verticale
  • 1024 pixel computer da scrivania, fissi o portatili e tablet come l'iPad (1024x768), con orientamento orizzontale
  • 1200 pixel computer con schermi larghi, tipicamente fissi ma anche alcuni portatili
Tali tipologie possono essere più genericamente ricondotte a quattro principali:
  • mobile: per cellulari
  • narrow: per tablet
  • normal: computer fisso o portatile
  • wide: schermi di grandi dimensioni

Impaginazione grafica
Le strategie per riorganizzare i contenuti in funzione dei  dispositivi, hanno portato alla classificazione di diverse tipologie di  impaginazioni grafiche:
  • Reflowing
  • Equal Width
  • Off Canvas
  • Source-Order Shift
  • List
  • Grid Block
L'impaginazione di tipo Reflowing contiene diverse sottocategorie:  Mostly Fluid (multi colonna con margini più larghi su grandi schermi, e  su schermi narrow le aree vengono allineate su un'unica colonna), Column  Drop, Layout Shifter, Tiny Tweaks.
L'impaginazione di tipo Equal Width divide lo schermo in colonne  delle stesse dimensioni, e il numero di colonne può aumentare o  diminuire proporzionalmente alla larghezza dello schermo.
L'impaginazione di tipo Off Canvas divide lo schermo in aree,  principalmente verticali, che al diminuire della risoluzione non vengono  mostrate in funzione della loro importanza fino a mostrare una sola  colonna con il contenuto principale.
L'impaginazione di tipo Source-Order Shift sfrutta le proprietà flexbox e box-ordinal-group dei css per cambiare l'ordine con i quali i blocchi di contenuti vengono visualizzati nella pagina.
L'impaginazione di tipo List organizza la pagina in semplici liste di  elementi che, analogamente a quanto succede sulle impaginazioni di tipo  Equal Width, sono visualizzate su un numero di colonne proporzionali  alla larghezza dello schermo così come le impaginazioni di tipo Grid  Block che suddividono il layout in una griglia di rettangoli o quadrati.
RIVELAZIONE DEL DISPOSITIVO E COMPATIBILITA'
Un tema di particolare interesse per il design responsivo è quello  della compatibilità. Non tutti i browser e dispositivi, infatti,  riconoscono le istruzioni più utilizzate per il ridimensionamento fluido  dei contenuti o supportano le tecnologie necessarie. È inoltre  fondamentale la rilevazione corretta del dispositivo, per fornire la  relativa impaginazione grafica e individuare il livello di compatibilità  possibile. I browser dei primi cellulari non sono in grado di interpretare funzioni quali media queries o JavaScript,  ed è pertanto più conveniente creare una impaginazione specificamente  adatta alla visualizzazione su smartphone e computer, piuttosto che  tentare una "degradazione graduale" per adattare un sito complesso e  carico di immagini alla maggior parte dei cellulari. L'identificazione dello user agent,  ovvero del browser, e l'identificazione del dispositivo mobile sono due  modi di dedurre se JavaScript e alcune istruzioni dell'HTML e dei fogli di stile sono supportate. L'utilizzo di librerie JavaScript come Modernizr, jQuery, e jQuery mobile può essere utile allo scopo, verificando direttamente le caratteristiche e lo user agent usati dall'utente.
_______________________________________________________________________________________________________________________________________________
© Copyright by gipusitiweb - All right reserved 2017

Il sottoscritto, ai fini dell'applicazione dell'art 4 comma 2 lettera h del Decreto legislativo del 31 Marzo 1998 n.114 DICHIARA QUANTO SEGUE di esporre e porre in vendita tramite questo sito in maniera occasionale e saltuaria le proprie opere risultato della mia creatività e ingegno, così come consentito dall'art. 4 comma 2 del D. Lgs 114/98 e di non essere obbligato a iscrivermi in nessuno dei Registri presso nessuna Camera del Commercio del Territorio italiano in relazione agli articoli trattati. Di non esercitare l'attività di commercio bensì di praticarla in modo sporadico (commercio occasionale) non soggetto quindi alle discipline commerciali contenute nel D. Lgs 114/98 il quale, viceversa, regola le attività di commercio in forma professionale e continuativa.
_______________________________________________________________________________________________________________________________________________
© Copyright by gipusitiweb - All right reserved 2017

Il sottoscritto, ai fini dell'applicazione dell'art 4 comma 2 lettera h del Decreto legislativo del 31 Marzo 1998 n.114 DICHIARA QUANTO SEGUE di esporre e porre in vendita tramite questo sito in maniera occasionale e saltuaria le proprie opere risultato della mia creatività e ingegno, così come consentito dall'art. 4 comma 2 del D. Lgs 114/98 e di non essere obbligato a iscrivermi in nessuno dei Registri presso nessuna Camera del Commercio del Territorio italiano in relazione agli articoli trattati. Di non esercitare l'attività di commercio bensì di praticarla in modo sporadico (commercio occasionale) non soggetto quindi alle discipline commerciali contenute nel D. Lgs 114/98 il quale, viceversa, regola le attività di commercio in forma professionale e continuativa.
_______________________________________________________________________________________________________________________________________________
© Copyright by gipusitiweb - All right reserved 2017

Il sottoscritto, ai fini dell'applicazione dell'art 4 comma 2 lettera h del Decreto legislativo del 31 Marzo 1998 n.114 DICHIARA QUANTO SEGUE di esporre e porre in vendita tramite questo sito in maniera occasionale e saltuaria le proprie opere risultato della mia creatività e ingegno, così come consentito dall'art. 4 comma 2 del D. Lgs 114/98 e di non essere obbligato a iscrivermi in nessuno dei Registri presso nessuna Camera del Commercio del Territorio italiano in relazione agli articoli trattati. Di non esercitare l'attività di commercio bensì di praticarla in modo sporadico (commercio occasionale) non soggetto quindi alle discipline commerciali contenute nel D. Lgs 114/98 il quale, viceversa, regola le attività di commercio in forma professionale e continuativa.
© Copyright by gipusitiweb - All right reserved 2017
Torna ai contenuti | Torna al menu