La web no es estática; cambia todo el tiempo y también la forma en la que accedemos a ella. Un signo visible de esta verdad es la cantidad de dispositivos móviles que están a nuestro alcance y que usamos para conectarnos a internet
Este cambio de paradigma tan grande que se dio en estos tiempos debido al gran uso de teléfonos inteligentes y tabletas nos hizo notar (a todos aquellos que construimos la web) que no basta con una sola vista de nuestro sitio para toda la gama de ordenadores móviles y de escritorio desde la que nuestros clientes consumen lo que les ofrecemos
Es por ello que nacen un conjunto de técnicas que nos permitirán hacer adaptable al entorno del usuario nuestros sitios web. A este conjunto de técnicas las denominamos Responsive design
El diseño adaptable o responsivo es un conjunto de técnicas de desarrollo web que, mediante el uso de estructuras fluidas y media-queries, permiten adaptar un sitio al entorno del usuario
Aquí les dejo un ejemplo de un sitio web con un diseño adaptable: www.spigotdesign.com
La idea y creación de estas técnicas provienen de la W3C en su recomendación “Mobile Web Best Practices”, donde se hace referencia a que deberíamos construir una web para todos y accesible desde cualquier dispositivo
Aplicar un diseño adaptable tiene sus ventajas:
Este cambio de paradigma tan grande que se dio en estos tiempos debido al gran uso de teléfonos inteligentes y tabletas nos hizo notar (a todos aquellos que construimos la web) que no basta con una sola vista de nuestro sitio para toda la gama de ordenadores móviles y de escritorio desde la que nuestros clientes consumen lo que les ofrecemos
Es por ello que nacen un conjunto de técnicas que nos permitirán hacer adaptable al entorno del usuario nuestros sitios web. A este conjunto de técnicas las denominamos Responsive design
El diseño adaptable o responsivo es un conjunto de técnicas de desarrollo web que, mediante el uso de estructuras fluidas y media-queries, permiten adaptar un sitio al entorno del usuario
Aquí les dejo un ejemplo de un sitio web con un diseño adaptable: www.spigotdesign.com
La idea y creación de estas técnicas provienen de la W3C en su recomendación “Mobile Web Best Practices”, donde se hace referencia a que deberíamos construir una web para todos y accesible desde cualquier dispositivo
Aplicar un diseño adaptable tiene sus ventajas:
- 1 sólo código: No quedamos atados a plataformas, tecnologías o resoluciones
- Experiencia de usuario mejorada: Diseño según resoluciones y según orientación de nuestro dispositivo
- Mejor lectura y usabilidad para personas con discapacidad
- Actualizaciones eficientes y mejores búsquedas
- Mejor SEO: Google localiza mejor el contenido
Y también algunos detalles que debemos tener en cuenta:
Links de interés:
- Google te odia: Las imágenes se redimensionan, pero hacen esto desde el máximo posible (Un tamaño que seguramente en un dispositivo móvil no usemos). Así, penalizamos a nuestro móvil en una descarga de imágenes que finalmente no utilizará y a nuestro sitio por tardar en descargarse, e iremos a parar a las catacumbas de los resultados de Google
- Estresando las máquinas: Para el CPU del dispositivo o el PC no es gratuito redimensionar las imágenes
- Reestructuración de sitios existentes: Algunos sitios (Al estar pensados para grandes resoluciones) pueden ser complicados de aplicar un diseño responsivo. Quizás se deba modificar la estructura original para obtener claridad y luego recién, trabajar en las diferentes vistas para resoluciones inferiores a la inicial
La aplicación de estas técnicas tiene su éxito en aprovechar las bondades de cada dispositivo para ofrecer la mejor experiencia de usuario posible, bajo ningún punto de vista requiere que la información y funcionalidad esté implementada de la misma manera para el universo de puntos de acceso
En un próximo artículo veremos la aplicación práctica!Links de interés:
- W3C – Mobile Web Best Practices: www.w3.org/TR/mobile-bp
- Diseño web adaptativo: http://e-cheide.com/el-diseno-web-adaptativo-o-responsive-design/
