Logo Empresa

Blog

¿Diseño Web adaptable?

10-01-2017 | Manu Burrero | Webforever.es

  • 11751.jpg
El Diseño Web adaptable o Responsive Web Design en inglés, ha evolucionado mucho en los últimos años. Frente al antiguo diseño de páginas web ahora es obligatorio que los sitios web funcionen en los dispositivos móviles, tabletas y demás dispositivos.

Diseño Web adaptable es una técnica de desarrollo para que los sitios web construidos hoy en día, sean usables en los dispositivos móviles, tabletas y pantallas de escritorio. Hasta hace unos años, los sitios web se diseñaban específicamente para equipos de escritorio con resoluciones de pantalla más o menos estándar. Esto era lo habitual hasta la llegada de los teléfonos inteligentes (smarthphone), tabletas y ahora con los televisores conectables (smarthtv). Los desarrolladores web se acercaron al nuevo reto con una gran variedad de soluciones, el principal defensor y exponente de estas nuevas tendencias de desarrollo Web fue Ethan Marcotte  con su artículo Responsive Web Design  en mayo de 2010.

El Diseño Web adaptable sigue evolucionando desde entonces. Tanto si usted es totalmente nuevo en diseño web o si usted necesita aprender lo que hay de nuevo, este artículo le ayudará a ponerse al día, ya que si usted tiene un negocio y éste tiene una Web y no es adaptable, puede perder mucha afluencia de público, ya que casi la mitad del contenido que se lee en internet se hace a través de los nuevos dispositivos.

¿Qué es?

A pesar de los años que tiene el artículo escrito por Ethan Marcotte, los principios básicos se siguen mantenimiento, cambiando más las herramientas a usar, que su filosofía.

Como ya hemos mencionado, el Diseño Web adaptable resuelve el problema de hacer una web para distintos dispositivos o resoluciones de pantalla. Ahora todas los sitios deben de ser sensibles a dichos tamaños de pantalla y deben adaptar su diseño y contenido a cada tamaño, no se traba de tener que desarrollar sitios para cada resolución (1024px * 728px, o 320px * 500px), sino que la misma Web se adapte a cada resolución, evitando tareas de mantenimiento tediosas, dado el gran número de dispositivos y de tamaños de pantalla que hay actualmente en el mercado. Muchos sitios web modernos son sensibles, y de hecho, el sitio de Webforever.es lo es. Si cambia el tamaño la ventana del navegador, verá que los elementos de la pantalla cambian de tamaño y/o distribución:

 

Hay una gran variedad de dispositivos que ya están disponibles para el público en general, y hay nuevos formatos de pantalla que salen al mercado prácticamente todos los días, por lo que es imposible hacer un diseño para cada resolución exacta. En cambio, es mejor dejar que el sitio web  responda a su entorno y adaptarse de manera fluida para el usuario.

En términos prácticos, esto implica los tres factores principales que se unen para formar el todo lo que es el diseño adaptable:

 

  • Contenedores adaptables
  • Imágenes adaptables
  • Media Queries

No se asuste, expliquemos cada una de ellas:

Contenedores adaptables

Tradicionalmente, los sitios web se han definido en términos de píxeles. Esta es una idea que vino del sector de la impresión, donde una revista o un periódico siempre iba a ser del mismo tamaño fijo. Para bien o para mal, este concepto ha pasado a mejor vida en el mundo de la Web. Ahora un sitio tiene que ser perfectamente legible, elegante y funcional en resoluciones enormes, como en un televisor, en una pequeña pantalla pequeña como un teléfono inteligente, o incluso en otra minúscula como un SmartWatch (reloj inteligente). Por esta razón, los sitios web se construyen con medidas relativas a porcentajes, en lugar de unidades fijas como píxeles.

Los que están acostumbrados a diseñar en píxeles, no hay una fórmula matemática que pueda ayudar a una transición fácil simple que puede ayudar a que la transición al uso de porcentajes. Para tener una idea podemos usar esta fórmula

espacio / contenido = resultado

Para que usted lo entienda, digamos que usted tiene un sitio web que tiene un ancho predefinido de 960 píxeles, y la ventana de su navegador maximizado es de 1920 píxeles de ancho. En este caso, la anchura de la ventana del navegador es el  espacio y su ancho predefinido es su contenido. Para que el sitio sea exactamente el mismo, se puede dividir el espacio por contenido y obtener un porcentaje.

960px / 1920px = 50%

Imágenes adaptables

Con las imágenes pasa algo parecido, antes en los diseños teníamos en cuenta en qué sitio iba cada imagen y le dábamos unos pixeles fijos. Ahora no, las imágenes se miden en porcentaje de ancho y es muy importante el mensaje que se quiera mostrar en ellas, ya que una imagen con mucho ancho y poco alto, por ejemplo: 900px*300px, en un móvil con resolución de 320px de ancho de pantalla se vería con esta dimensión: 320px*107px, teniendo en cuenta que se use el 100% del ancho sin márgenes ni otros espacios, esta imagen sería prácticamente ilegible o poco relevante, dado su tamaño. Dado que las imágenes ahora se adaptan al tamaño de pantalla son importante dos factores (en la medida de lo posible): las imágenes ocuparán el 100% de su contenido, sin textos a izquierda o derecha ni otros gráficos (en lo que ha bajas resoluciones se refiere) y el ratio es más recomendable estandarizarlo a 4x3 que ha 16x9.

 

Media Queries

Según Wikipedia: En desarrollo web, Media Queries es un módulo CSS3 que permite adaptar la representación del contenido a características del dispositivo como la resolución de pantalla (por ejemplo, un smartphone frente a pantallas de alta definición) o la presencia de características de accesibilidad como el braille. Se convirtió en un estándar recomendado por la W3C en Junio del 2012.1 y es un principio básico de la tecnología de Diseño web adaptativo.

Resumiendo, hace que la Web tenga un diseño u otro dependiendo de la resolución de pantalla. Se trata de código puro y duro, he aquí un ejemplo gráfico, el texto de arriba hace que la web cambie sola de diseño:

¿Por qué es importante el Diseño Web Adaptable?

Pues no, importante no es, es imprescindible. La web tal como la conocíamos a través del móvil es ilegible, poco fiable y molesta para los usuarios. ¿La razón? Los sitios no están optimizados, no están pensados para verse a través de una pantalla tan pequeña como la del móvil. El usuario es lo más importante, dado que nuestras empresas tienen sitios Web para usuarios ¿Qué sentido tiene que nuestra Web no sea adaptable? O mejor dicho ¿Qué sentido tiene tener una Web que no sea legible por nuestros usuarios?

Esperamos que el artículo le haya sido útil y le haga evolucionar, hoy en día después de unos cinco años cada vez más sitios Web están adaptados ¿El suyo lo está?

Suscríbase a nuestro boletín
Le mantendremos informado de nuestras últimas novedades ¡¡no lo pase por alto!!.

Este sitio utiliza cookies. Si continúa navegando da su consentimiento para su uso y la aceptación de nuestra política de cookies .