Responsive design, immagini adattive, auto-fit dei contenuti, rilevazione automatica del dispositivo corrente, orientamento degli schermi, piattaforma e browser di riferimento per le varie tipologie di utenza… ad oggi sono tante le variabili che uno sviluppatore deve tenere in considerazione nella realizzazione d’interfacce per Web applications e siti Web; ma alla base di tutti i criteri citati vi è (tra gli altri elementi) il discorso relativo alle risoluzioni, per cui potrebbe essere utile verificare quali siano quelle più frequenti e in quali device vengano utilizzate.
Partendo da queste informazioni potremo poi definire una sorta di template CSS con le media-query necessarie a stilizzare le principali risoluzioni di schermo utilizzate da chi naviga in Rete.
Le risoluzioni più utilizzate nei browser
Rispettando un ordine crescente, potremmo individuare un primo limite al di sotto dei 320 pixel, in questo caso stiamo identificando una fascia a bassa risoluzione all’interno della quale operano soprattutto i comuni "telefonini" (non smartphone o solo pochi di essi) e alcuni dei dispositivi Apple più datati; in questo caso il livello è quindi di poco superiore a quello del quadrante di un tabellone luminoso a cristalli liquidi.
Nella zona compresa tra i 320 e i 480 pixel troviamo tutta una serie di dispositivi di "prima generazione", anche all’interno di essa sono presenti alcuni device della Mela Morsicata, ma i device di riferimento sono in particolare i primi modelli di smartphone prodotti più o meno in concomitanza con l’iPhone (release 2G o EDGE); mentre tra i 480 e i 640 pixel abbiamo quella che potremmo chiamare la "smartphone zone", popolata da modelli di cellulari con caratteristiche avanzate ivi compresi modelli recenti di iPhone.
Tra i 640 e i 768 pixel vi è una maggiore distribuzione di tablet, in buona parte iPad, mentre le due aree successive riguardano rispettivamente la modalità di visualizzazione portrait ("ritratto", da 768 ai 900) e landscape ("panorama", dai 900 ai 1024 pixel) per le quali sono coinvolti soprattuto tablet, phablet e smartphone dotati di diagonali sufficientemente ampie.
Tra i 1024 e i 1280 pixel regnerebbero invece sovrani gli schermi dei desktop non di ultima generazioni, oltre i 1280 pixel si troverebbero invece computer e tablet di ultima generazione (ma non necessariamente dotati del supporto per la tecnologia Retina).
Sulla base di queste osservazioni possiamo definire una serie di breakpoint per i nostro fogli di stile.
Un template CSS per le risoluzioni più diffuse
In questa pagina vi forniamo un template CSS3 con le media queries più utilizzate, ottimizzate per le dimesioni di schermo più comuni (smartphone, tablet e computer). Un’ottima base di partenza per il responsive web design!
<style type="text/css">
/* MOBILE DEVICES */
@media only screen and (min-device-width: 320px) {
/* vecchi iPhone e altri smartphone */
}
@media only screen and (min-device-width: 480px) {
/* iPhone e smartphone più recenti */
}
@media only screen and (min-device-width: 640px) {
/* iPad e Tablet più datati o dalle dimensioni ridotte */
}
@media only screen and (min-device-width: 768px) {
/* iPad e Tablet più recenti */
}
/* TABLET LANDSCAPE, LAPTOPS, DESKTOPS */
@media only screen and (min-device-width: 900px) {
/* Tablet in modalità landscape */
}
@media only screen and (min-device-width: 1024px) {
/* Desktop e Laptop */
}
@media only screen and (min-device-width: 1280px) {
/* Desktop e Laptop più recenti */
}
</style>