Non è per niente facile creare un sito web che funzioni correttamente su un dispositivo mobile. Le problematiche da affrontare sono molte, non c'è dubbio. Ed esiste più di un motivo che porta ad escludere la possibilità di creare una versione mobile del sito servita attraverso un redirect su una url specifica (es. sitoweb.it/mobile).
Per fortuna, in rete ormai è possibile trovare utilissimi articoli, framework, generatori e risorse di vario genere che aiutano developer e designer a creare o a ottimizzare un sito web per buona parte dei device in circolazione.
Usare un design responsivo aiuta molto a creare layout che si adattano a tutte le larghezze degli schermi (o quasi), ma non risolve in primis uno dei focus principali di un sito mobile: l'ottimizzazione delle performance.
Una connessione a velocità ridotta e i limiti hardware di alcuni dispositivi, possono vanificare facilmente gli sforzi investiti per l'adozione di media queries
Spesso si ignora l'enorme varietà di dispositivi mobili in circolazione, tenendo a mente solo iPhone, iPad e dispositivi Android .
Ci torna quindi molto utile il concetto di Pragmatic Responsive Design , presentato da Stephanie Rieger di Yiibu il 19 Settembre di quest'anno presso il Breaking Development Conference 2011 di Nashville in America attraverso delle slide facilmente comprensibili e un case study d'eccezione come il nuovo sito responsivo http://browser.nokia.com/ creato per Nokia.
Il Pragmatic Responsive Design si pone l'obiettivo di supportare anche i dispositivi mobili low-end (la maggior parte di quelli in circolazione) partendo da un approccio "Mobile First" aumentando gradualmente la web experience con fogli di stile a cascata.
Un CSS per tutti i device
Il primo foglio di stile è interpretato da qualsiasi device (mobile e desktop) e prevede l'uso di un mini CSS reset, di un layout fluido, stili di default per la navigazione, per i testi e per i contenuti e nessuna media query.
/* CSS Mini Reset */
html, body, div, form, fieldset, legend, label, ul, ol, li, h1, h2, h3, h4, h5, h6, blockquote, footer, header, nav {
margin: 0;
padding: 0;
}
table {
border-spacing: 0;
border-collapse: collapse;
}
li {
list-style: none;
}
a, a:hover {
text-decoration: none;
outline: none;
}
th, td {
text-align: left;
vertical-align: top;
}
img, fieldset {
border: 0;
height: auto;
}
h1, h2, h3, h4, h5, h6, th, td, p, caption {
font-weight: normal;
font-size: 1em;
line-height: 1em;
}
footer, header, nav, section {
display: block;
}
/* typography */
h1 {
font-size: 1.8em;
margin-bottom: .5em;
font-weight: 100;
}
h1 strong {
font-weight: bolder;
}
h2 {
font-size: 1.1em;
margin-bottom: .5em;
font-weight: bold;
line-height: 1.3em;
color: #174a8d;
}
h3 {
font-size: 1em;
margin-bottom: 1em;
font-weight: bold;
}
h4 {
font-size: 1em;
margin-bottom: .2em;
}
p {
font-size: .9em;
margin: 0 0 1em 0;
line-height: 1.4em;
font-style: lighter;
}
strong { font-weight: bolder; }
body { color: #333; }
/* layout */
html { overflow-y: scroll; }
body > header {
clear: both;
display: block;
margin: 0px auto;
padding: 0.533em;
min-width: 100px;
max-width: 910px;
overflow: hidden;
margin: 0 auto 0 auto;
}
body > header nav { padding: .8em 0; }
body > header nav > ul {
font-size: .9em;
margin: 0;
padding: 0;
text-align: center;
}
body > header nav > ul li {
padding: .5em 0 .2em 0;
display: inline-block;
border-bottom: 2px solid white;
zoom: 1;
*display: inline;
color: #174a8d;
font-weight: lighter;
}
body > article, body > section {
clear: both;
display: block;
margin: 0px auto;
padding: 0.533em;
min-width: 100px;
max-width: 910px;
}
div, ul.links li {
margin: 0;
padding: 0;
vertical-align: top;
display: inline-block;
zoom: 1;
*display: inline;
}Il CSS per i device più grandi
Il secondo foglio di stile è interpretato solo da dispositivi con schermi maggiori di 320px e prevede l'uso di un layout fisso, media query e in generale tutti gli stili che aumentano la web experience in proporzione al media specificato.
/* clearfix */
.group:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* fixed layout */
body > article, body > section {
clear: both;
display: block;
margin: 0px auto;
padding: 0.8em;
min-width: 100px;
max-width: 910px;
padding-bottom: 0.8em;
margin-bottom: 2em;
}
body > header {
clear: both;
display: block;
margin: 0px auto;
padding: 0.8em;
min-width: 100px;
max-width: 910px;
padding-top: 0;
}
body footer nav {
clear: both;
display: block;
margin: 0px auto;
padding: 0.8em;
min-width: 100px;
max-width: 910px;
padding: 1.5em .5em .5em .5em;
}
@media screen and (min-width: 360px) {
}
@media screen and (min-width: 480px) {
}
@media screen and (min-width: 640px) {
}Il terzo e ultimo foglio di stile viene letto solo da schermi maggiori di 720px (tablet e desktop) e aggiunge stili per layout multicolonna e fa uso di proprietà CSS3.
/* web fonts */
@font-face {
font-family: 'EauSans';
src: url('../fonts/eau/eau_sans.eot');
src: url('../fonts/eau/eau_sans.eot?#iefix') format('embedded-opentype'),
url('../fonts/eau/eau_sans.woff') format('woff'),
url('../fonts/eau/eau_sans.ttf') format('truetype'),
url('../fonts/eau/eau_sans.svg#EauSans') format('svg');
font-weight: normal;
font-style: normal;
}
/* mixins */
h1, h2, h3, h4, h5, h6 {
font-family: "EauSans", Arial, sans-serif;
}
/* insert enhanced styles here
big backgrounds, css3 rules, etc..
*/
@media screen and (min-width: 860px) {
}
@media screen and (min-width: 910px) {
}Eccoli tutti e 3 insieme, pronti per essere inseriti nella head:
Volendo è possibile anche scrivere un'altro css con min-width di 960px per schermi wide e TV.
Con questa tecnica è possibile utilizzare media queries che non sovrappongono stili a quelli già specificati e che rispettino la cascata. È facile supportare un gran numero di dispositivi che hanno prestazioni ridotte (low-speed 3G) e che hanno mobile browser proprietari che non supportano CSS3.
Purtroppo c'è da dire che invece di aggiungere media queries per adattare un sito desktop anche al mobile, bisogna riscrivere l'intero CSS. Inoltre l'utilizzo di più fogli di stile nella head aggiunge http requests.
