Responsive Design: cómo y porqué de las webs Adaptables
Tu sitio es responsive?
Tus visitantes pueden acceder fácilmente desde cualquier dispositivo? Cuando hablamos de "responsive design", hablamos de movilidad, de aplicaciones web visibles en cualquier dispositivo y en cualquier rincón del universo.
Antes de hablar de Design responsive, tenemos que refrescar un poco el pasado para entender qual es la razón que esta técnica sea hoy por hoy la que ofrece más fiabilidad.
Hasta hace poco, unos 5 años, los que tenían acceso a la web era mayoritariamente a través de un PC de sobremesa o un portátil. El tamaño de pantalla más común era desde 14 "a 17" y los diseñadores y programadores teniamos que ofrecer la visibilidad del web a resoluciones de 870píxels, solo más tarde de 1024 a 1280 píxels de ancho. La verdad es que crear un sitio web no es complicado, pero la optimización para los diferentes formatos de pantallas, sin contar con los diferentes navegadores, siempre ha sido un rompecabezas.
Debido a esta razón el esándar css ha influido a grosso modo en simplificar el quid, que se resolvió en el "magic number" de 960 pixels (numero que siempre hemos pensado que es un poco diabólico ;))
Con la arrogante irrupción de notebook, smartphone, tableta, pantalla, Full-HD Display Retina, y Web-TV, el medio se ha diversificado, relegando la importancia al medio en si mismo y no al browser, o navegador web.
Hoy …
Las consecuencias ya las conocemos. En el metro o autobús miramos el correo electrónico o las últimas noticias. En vacaciones nos perdemos las visitas turísticas y visitamos sitios web cada vez más numerosos. En la cocina, no abrimos más la receta de la abuela,sino la aplicación o un sitio web especializado. Y por la tarde en la sala de estar aburridos de una TV populista, nos dirigimos a Google y merodeamos por la red.
Hoy en día, el acceso a los sitios web se hace mediante una gran variedad de terminales.
¿Qué es el Diseño Responsive o Adaptable?
En este punto, todos están de acuerdo, tanto desde el lado del usuario como del diseñador, un sitio web debe hacerse para funcionar correctamente en varios dispositivos. Así nació el diseño adaptable .
El término se ha extendido tras la genial publicación de Ethan Marcotte con el título de Responsive Web Design. Responsive en castellano se traduce como la capacidad de adaptación , y en el caso de la web es obvio que los contenidos deben adaptarse a la anchura y la altura de su vehículo físico, la pantalla.
Al diseñador se le ha multiplicado el trabajo: tiene que hacer el diseño para los smartphones, para tablets, netbooks para el escritorio común y las pantallas de ordenador portátil (el orden no es accidental sino intencional) . Hay quien recomienda que lo primero es pensar en el sitio para móviles, y poco a poco el diseño para resoluciones más altas. El código debe ser escrito para varios dispositivos, o más bien para múltiples tipos de resoluciones de pantalla.
Cómo escribir la hoja de estilos CSS?
Antes de comenzar a escribir el código necesario para diferentes dispositivos, hay que centrar los aspectos comunes y más importantes. Estos elementos comunes pueden ser el fondo, el color del texto y los enlaces, los bordes de las imágenes , por nombrar sólo unos pocos. El logo, la barra de navegación y el contenido principal de la página.
La mejor manera que tenemos para hacer que nuestro sitio web sea Adaptable es usar CSS3. En la primera pieza de código se debe dar los elementos necesarios comunes, y luego dividir el resto del código de tipo de pantalla.
En CSS3 indicar el tipo de pantalla se hace simplemente con la declaración
@media only screen and (min-width: 960px), only screen and (min-device-width: 960px) {
.content {
margin:0 auto;
max-width:1020px;
min-width:940px;
padding:0 10px 10px;
text-align:center;
}
/*mas codigo css*/
}
Desde el HTML no cambia nada. Esto se debe a que el CSS hace todo el trabajo, y, en teoría, incluso los sitios más antiguos pueden ser adaptados a las nuevas necesidades.El uso único y exclusivo de CSS3, sin embargo, implica algunos problemas de compatibilidad. Lo que queremos de nuestro sitio es que sea visiblea cuantas más personas posible. ¿Cierto? Aqui es donde nos topamos con Internet Explorer.
Por tanto, es necesario recurrir a jQuery. El uso de la biblioteca Selectivizr o de Bootstrap pueden activar los selectores CSS3 también en las versiones anteriores de IE.
En estas dos webs, dispones de downloads que nos proporcionan todo el paquete.
Conclusiones
El diseño web adaptable es realmente interesante porque es escalable y universal, almenos por el momento