Siti web realizzati con Responsive Design

Torna a Articoli
Cosa significa responsive design checker caratteristiche realizzazione siti web adattativi

Siti web realizzati con Responsive Design

Nel mondo di oggi, ci sono molti dispositivi mobili tra cui scegliere e può essere scoraggiante cercare di realizzare un sito web con le migliori esperienze utente su tutti i dispositivi. Tuttavia, è importante rimanere aggiornati con le dimensioni dello schermo e le risoluzioni più popolari durante la progettazione di siti Web e mobili poichè un sito internet oggi deve essere realizzato e si deve adattare a ogni dimensione dello schermo di qualsiasi dispositivo mobile.

Basta osservare le tabelle che seguono per farsi un’idea di quanto sia diversa la dimensione dello schermo nei diversi modelli di dispositivi mobili presenti sul mercato.

 

Prodotti Apple

Dimensione pixel viewport
i phone
iPhone XR 828 x 1792 414 x 896
iPhone XS 1125 x 2436 375 x 812
iPhone XS max 1242 x 2688 414 x 896
iPhone X 1125 x 2436 375 x 812
iPhone 8 Plus 1080 x 1920 414 x 736
iPhone 8 750 x 1334 375 x 667
iPhone 7 Plus 1080 x 1920 414 x 736
iPhone 7 750 x 1334 375 x 667
iPhone 6 Plus / 6S Plus 1080 x 1920 414 x 736
iPhone 6 / 6S 750 x 1334 375 x 667
iPhone 5 640 x 1136 320 x 568
iPod
Ipod touch 640 x 1136 320 x 568
iPad
iPad Pro 2048 x 2732 1024 x 1366
iPad di terza e quarta generazione 1536 x 2048 768 x 1024
iPad Air 1 e 2 1536 x 2048 768 x 1024
iPad Mini 2 e 3 1536 x 2048 768 x 1024
Ipad mini 768 x 1024 768 x 1024

Dispositivi Android

Dimensione pixel viewport
Cellulari
Nexus 6P 1440 x 2560 412 x 732
Nexus 5X 1080 x 1920 412 x 732
Google Pixel 3 XL 1440 x 2960 412 x 847
Google Pixel 3 1080 x 2160 412 x 824
Google Pixel 2 XL 1440 x 2560 412 x 732
Google Pixel XL 1440 x 2560 412 x 732
Google Pixel 1080 x 1920 412 x 732
Samsung Galaxy Note 9 1440 x 2960 360 x 740
Samsung Galaxy Note 5 1440 x 2560 480 x 853
LG G5 1440 x 2560 480 x 853
One Plus 3 1080 x 1920 480 x 853
Samsung Galaxy S9 + 1440 x 2960 360 x 740
Samsung Galaxy S9 1440 x 2960 360 x 740
Samsung Galaxy S8 + 1440 x 2960 360 x 740
Samsung Galaxy S8 1440 x 2960 360 x 740
Samsung Galaxy S7 Edge 1440 x 2560 360 x 640
Samsung Galaxy S7 1440 x 2560 360 x 640
compresse
Nexus 9 1536 x 2048 768 x 1024
Nexus 7 (2013) 1200 x 1920 600 x 960
Samsung Galaxy Tab 10 800 x 1280 800 x 1280
Chromebook Pixel 2560 x 1700 1280 x 850

 

Prendendo in considerazione le due tabelle in alto ci si può rendere conto sin da subito che risulta quasi impossibile (e se possibile molto oneroso in termini di tempo e costi) progettare siti web diversi per ogni dimensione di schermo nasce così l’esigenza di strumenti che permettano di progettare siti web  che si “adattino” automaticamente allo schermo sul quale vengono visualizzati.

Con il termine Responsive Design si indicano tutte le tecniche e gli approcci che vengono utilizzati nella fase di realizzazione di un sito web per far si che si adatti automaticamente alle dimensioni dello schermo sul quale viene visualizzato, all’orientamento del device e alla piattaforma sul quale viene visualizzato.

Il termine responsive design è stato presentato per la prima volta nel 2010 dal web designer Ethan Marcotte che ha evidenziato la necessità di utilizzare un insieme di tecniche che permettono di realizzare delle grafiche flessibili in modo da poter essere visualizzate in modo ottimale su molti schermi di dimensioni differenti.

Il semplice fatto che un sito web venga visualizzato su un dispositivo mobile non implica che questo sia realizzato con tecniche adattive.

Caratteristiche di un sito web realizzato secondo le regole del responsive design

Seguono una serie di caratteristiche che ha un sito web responsive quando viene visualizzato su uno schermo diverso e più piccolo:

Come capire se un sito web è responsive - responsive design checker

  • il layout si adatta al più ampio numero di risoluzioni di schermo possibile (dai telefoni cellulari al desktop);
  • le dimensioni delle immagini (e in genere di tutti i contenuti a larghezza fissa) si adattano alla risoluzione e alle dimensioni dello schermo;
  • le immagini vengono fornite in modo ottimizzato e “meno pesante”;
  • il layout viene semplificato, gli elementi troppo piccoli vengono ingranditi e vengono nascosti quelli non necessari;
  • l’interfaccia utente si adatta all’interazione touch per i device che la supportano

In generale l’utente di un dispositivo che ha un schermo più piccolo non deve ingrandire il testo o le immagine e non deve spostare il testo per poterlo leggere ma tutto deve essere ad una dimensione tale da rendere facile la consultazione del sito web.

 

Design per mobile

Ormai il Mobile-design ha la precedenza!! Questo non significa dover presentare un sito web magro di testo o di immagini, piuttosto, significa presentare la parte dello scenario più significativa per poi aggiungere elementi man mano che lo spazio diventa sempre più grande.

 

Come faccio a sapere se il mio sito web è responsive?

Online è possibile trovare molti strumenti che verificano se un sito web è di tipo responsive o no tra cui il sito di google

Responsive design checker google test sito web responsiveTEST RESPONSIVE DESIGN»

Accedendo alla pagina sopra è possibile inserire la url del proprio sito e verificare se il sito web è di tipo responsive.

 

Perché utilizzare il responsive design

Ti consigliamo di utilizzare il responsive web design perché:

  • Semplifica la condivisione dei contenuti e il reindirizzamento degli utenti ai tuoi contenuti con un singolo URL.
  • Consente agli algoritmi di Google di attribuire in modo preciso le proprietà di indicizzazione alla pagina, senza dover segnalare l’esistenza di pagine corrispondenti per dispositivi mobili/desktop.
  • Richiede un tempo di progettazione inferiore per la manutenzione di più pagine per gli stessi contenuti.
  • Riduce il rischio che si verifichino errori comuni che incidono sui siti per dispositivi mobili.
  • Non richiede alcun reindirizzamento per offrire agli utenti una visualizzazione ottimizzata in base al dispositivo in uso, riducendo quindi il tempo di caricamento. Il reindirizzamento basato su user-agent è inoltre soggetto a errori e può peggiorare l’esperienza utente con il tuo sito (per informazioni dettagliate, leggi la sezione Insidie durante il rilevamento degli user-agent).
  • Consente di risparmiare risorse quando Googlebot esegue la scansione del tuo sito. Per le pagine responsive web design, il recupero di tutte le versioni dei contenuti richiede una sola scansione di un solo user-agent Googlebot, anziché più scansioni di user-agent Googlebot diversi. Indirettamente, grazie a questa maggiore efficienza di scansione, Google è in grado di indicizzare un numero maggiore di contenuti del tuo sito e di mantenerli debitamente aggiornati.

 

Utilizzare meta name=”viewport”

Per segnalare ai browser che la tua pagina si adatterà a tutti i dispositivi, aggiungi un meta tag all’intestazione del documento (HTML), come segue:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Il meta tag viewport indica al browser come regolare le dimensioni e il ridimensionamento della pagina in base alla larghezza del dispositivo. In assenza di tale elemento, i browser per dispositivi mobili applicano l’impostazione predefinita, ovvero eseguono il rendering della pagina alla larghezza utilizzata per gli schermi desktop (di solito circa 980 px, anche se questo valore può variare da un dispositivo all’altro).

 

Bootstrap

Bootstrap è il framework più popolare del Web per la progettazione di applicazioni Web Responsive. Offre agli sviluppatori front-end la possibilità di creare rapidamente pagine Web fluide con una serie di componenti HTML e CSS comuni. È facile da usare perché non richiede l’apprendimento di un codice diverso, ma solo una serie di convenzioni di denominazione applicate ai nomi delle classi HTML.

 


 

Condividi questo post

Lascia un commento

Torna a Articoli