Nuestro sitio web, con diseño adaptativo
Lo aprendido durante estos últimos meses ya lo estamos aplicando en los nuevos desarrollos que hacemos para nuestros clientes, pero también decidimos aplicarnos la fórmula a nosotros mismos.
¿Que es el diseño adaptativo?
Cada vez es más importante que el diseño de un sitio web se vea bien, sea funcional y completo, en cualquier dispositivo: ordenador de sobremesa, tableta, móviles y también en las televisiones que vienen. Al hacer diseño adaptativo, una serie de técnicas aseguran que un sólo código y un sólo web sirve igual de bien a todos los dispositivos.
El aprendizaje lleva tiempo, y estamos en ello desde hace varios meses. De hecho, esto no acaba nunca. Lo que más tiempo nos toma es aplicar en la práctica todo lo que en teoría hemos ido conociendo.
Fundamentalmente, hemos adaptado las hojas de estilo CSS y hemos dado un ancho líquido al diseño de CodeSyntax.com, de modo que se vea bien en distintas resoluciones. Y también, claro, en tabletas y móviles, en los que hay que pensar sí o sí en 2012.
Podéis ver el resultado en distintos formatos en esta dirección: responsive.is/codesyntax.com. La siguiente imagen también muestra tres visualizaciones básicas:
Así pues, nuestro web se adapta a distintos anchos ahora, pero no sólo eso. El uso de mediaquery nos permite eliminar ciertas imágenes o contenidos en anchos concretos, los menús cambian de disposición, las dos columnas se convierten en una sola, y otros cambios relacionados.
Todo ello, sin versiones añadidas de código. Un sólo HTML, que tiene trabajo configurar claro, pero que permite una resultado que consideramos óptimo.
Para aplicar el diseño adaptativo con fundamento, conviene pensar en las versiones móviles y flexibles desde el primer momento. Al hacer wireframes, pruebas de diseño, al elegir el grid... programadores y diseñadores tienen que estar compinchados en el trabajo y ser conscientes de estos conceptos. Teniendo en cuenta todo eso, es así como podemos trabajar para los clientes ofreciendo un desarrollo completo. Y adaptativo.
