El diseño web responsive | Artrivity

Blog

El diseño web responsive

responsive_web_design

En un mundo donde vamos en camino de que haya más dispositivos móviles que personas, dice mucho del camino que va la humanidad y el futuro próximo, la tendencia de estar conectado ya sea con nuestro Smartphone o con nuestras Tablets, ya sea desde casa o en la calle, en la oficina o en el metro, nos obliga a pensar, a la hora de crear nuestro diseño web a tener que adaptarnos a estas pantallas sí o sí.

Ante este hecho, explicaremos qué es el diseño web adaptativo o como se le conoce mundialmente ‘responsive web design’ o  también por las siglas RWD. Pues muy sencillo, el diseño web adaptativo es una técnica de diseño y desarrollo web en el que un sitio web se adaptará mediante un uso de estructuras e imágenes fluidas al dispositivo.

Hace unos años, para conseguir adaptarse a varios dispositivos, se tenía que crear varias páginas webs, lo que incrementaba el precio final y el trabajo a realizar. A los usuarios se les redireccionaba a la versión adaptada para su dispositivo. Pero no sólo eso, sino que si quisiéramos tener compatibilidad con ciertos dispositivos u otras resoluciones, había que crear tantas webs como posibilidades quisieras ofrecer, lo que para el cliente le era bastante inviable por lo económico y el volumen de trabajo a realizar, además, los usuarios que se conectaban desde teléfonos móviles eran una minoría, el desembolso quizá no era tan rentable. Por suerte, la tecnología ha evolucionado muy rápido y han surgido alternativas más asequibles.

¿Qué beneficio se obtiene con el ‘responsive’?

Al usar esta técnica, con una sola versión de la página en HTML y CSS se cubren todas las resoluciones de pantalla y para todos los dispositivos, desde monitores de grandes pulgadas hasta la resolución más pequeña. De esta forma se minimizan costes de cara al cliente final para poder ofrecer a sus usuarios una página adaptada.

Hablando de resoluciones, por poner algunos ejemplos, el último dispositivo de Apple que ha sacado al mercado, el iPhone 5S tiene una pantalla de 1136×640 píxeles. Y Google, con su nuevo Nexus 5, tiene una pantalla de 1920×1080, lo que intento explicar es que, aunque hoy en día existen dispositivos móviles con resoluciones más grandes que un  monitor de 17”, la experiencia de uso es muy diferente al que se haría en un ordenador de sobremesa.  Por esto mismo, es importante adaptar la web a todos los dispositivos  clasificándolos como mínimo en cuatro categorías, que serían:

  • Versión móvil.
  • Versión móvil modo apaisado (horizontal).
  • Versión para tablets.
  • Y versión de escritorio.

Para finalizar y entender cómo funciona, pueden entrar en este interesante Blog (mediaqueri.es), ahí os muestran diferentes páginas web de diseños web adaptativos, en los ejemplos corresponden a una única web pero adaptada en las cuatro tamaños diferentes.

Como información adicional, para saber si la página tiene esta tecnología, es tan sencillo como redimensionar horizontalmente vuestro navegador, si a medida que vais disminuyendo el ancho veis que los elementos se van adaptando, enhorabuena, estás viendo una web ‘responsive’.

Subir
Este sitio web utiliza cookies, si continuas navegando supone la aceptación de la Política de Cookies. Acepto No acepto