/ Tips Dimarts, 6 de Març de 2012
Si has arribat a aquesta pàgina probablement ja sàpigues de què va el tema, així que per a una introducció al Responsive Web Design, o Disseny Web Adaptable, remetré a aquest interessant article de Juan Díaz-Bustamante.
El que vull explicar aquí és com posar en pràctica aquestes tècniques sense morir-se en l'intent; al mirar en el codi font dels exemples m'adonava que la majoria estaven molt treballats, arribant a tenir diverses fulles d'estils per tenir en compte de forma específica la majoria de dispositius i resolucions, més d'altres css per tapar cada forat de el “infalible” internet explorer. Molt treball per a clients que no volen invertir molts recursos. Seguí llegint fins a caure en un altre article l'enllaç del qual no he sabut tornar a trobar, en el qual es recomanava no complicar-se massa i quedar-se amb dues fulles d'estils: una bàsica, que es carregarà en tots els dispositius i navegadors independentment de la seva resolució, i una altra per a resolucions de 768 píxels cap amunt, o sigui de tablet iPad cap amunt, on col·locar totes els “detallets”: imatges de fons, canviar d'una a dues o més columnes, mostrar fotos que no són estrictament necessàries; aquesta solució em va semblar més que acceptable, a més en realitat ni tan sols és necessari utilitzar dos css diferents, així sota aquests criteris vaig tornar a maquetar aquesta mateixa web que esteu llegint i que podreu provar vosaltres mateixos carregant www.vinx.info en els vostres mòbils o tablet, o simplement redimensionant al vostre gust la pantalla del navegador en un ordinador.
El primer a tenir en compte, evidentment, serà el disseny; ja no cal concebre la web per a pantalles d'ordinador, sinó que fa falta pensar-la abans per a dispositius petits, i només després afegir-li el toc per a resolucions més amples.
Quant al codi, és tan senzill com integrar aquestes línies al vostre codi habitual:
<meta name="viewport" content="width=device-width" />
<!--[if lt IE 9]>
<script src="/js/respond.min.js"></script>
<![endif]-->
Com veureu les versions de l'explorer anteriors a la 9 necessiten una petita empenta per funcionar, per a això el respond.js fa una bona feina.
La vostra fulla d'estil és la que necessitarà ser modificada, concretament tindrà una primera part feta de forma tradicional per a la versió bàsica de la web, i una altra part adaptada a les resolucions escollides; en el nostre cas, afegiríem el següent:
@media screen and (min-width: 768px) {
/* Aquí va el codi especial per a resolucions de 768 cap amunt */
/* Ensenyem una imatge de fons en la capçalera */
#cabecera {max-width:900px;background:url(/images/header.jpg) no-repeat top center;}
/* mostrem les imatges dels llistats, prèviament declarats amb .listado .imagen {display:none} */
.listado .imagen {float:left;width:150px;display:block !important;}
/* posem en dues columnes el que abans per defecte anava en una */
.columna1 {float:left;width:49% !important;}
.columna2 {margin-left:51% !important;}
}
Conclusió: el Responsive Web Design és bastant senzill d'engegar a nivell de programació, no obstant això el disseny i la maquetació requereixen un petit canvi de xip, havent-se d'ara concebre les webs per a mides menors per després afegir-li els detalls que es mostraran a resolucions majors.
