Diseño web adaptativo

La técnica de diseño web adaptativo (en inglés, responsive) hace que una misma página web cambie su aspecto dinámicamente, adaptándose a diferentes anchos de pantalla, principalmente para hacerla accesible desde dispositivos móviles.
La técnica de diseño web adaptativo (en inglés, responsive) hace que una misma página web cambie su aspecto dinámicamente, adaptándose a diferentes anchos de pantalla, principalmente para hacerla accesible desde dispositivos móviles.

Cada día un mayor número de usuarios accede a la web desde dispositivos móviles, tales como teléfonos inteligentes (smartphones) y tabletas. Por esta razón, y ante el crecimiento de la la demanda de páginas web para móviles, se ha estandarizado la técnica de diseño web adaptativo que ofrece las siguientes ventajas:

  • la misma web es accesible desde su dirección principal
    no se utilizan direcciones aparte, ni es necesario detectar el tipo de dispositivo que utiliza el usuario
  • la presentación de la página cambia automáticamente con el tamaño de pantalla
    por ejemplo, al girar el dispositivo móvil de vertical a horizontal o viceversa, o al reducir el tamaño de la ventana del navegador en un PC

Cuatro anchos de pantalla

La web adaptativa considera cuatro resoluciones de pantalla (ancho) conforme a la siguiente tabla:

 

1024px o mayores

ordenadores de sobre mesa (PC/Mac) y portátiles.

 

de 768px a 1023px

Tabletas en horizontal.

 

de 480px a 767px

Tabletas en vertical y móviles en horizontal.

 

por debajo de 480px

Móviles en vertical.

Para cada versión se lleva a cabo un trabajo de adaptación específico que afecta individualmente a cada componente del sitio web.

Convierta su web adaptativa

Según la situación de partida hay diferentes opciones para incorporar el diseño web adaptativo.

Sitios web existentes

Si ya cuenta con un sitio web y desea adaptarlo para móviles, existen dos opciones:

  1. mantener el diseño gráfico existente y reprogramarlo para hacerlo adaptativo
    Dado que se trata de un trabajo de programación a medida, esta opción requiere de una evaluación preliminar. Opte por esta solución sólo si el diseño gráfico existente debe mantenerse obligatoriamente.
  2. cambiar el diseño gráfico por otro basado en una plantilla web con diseño adaptativo ya incorporado
    Se tratará en este caso de un trabajo de adaptación de los contenidos y funcionalidades existentes, así como de personalización de la plantilla web

Sitios web de nuevo desarrollo

Según el diseño gráfico elegido para el nuevo sitio web:

  1. para páginas con diseño gráfico web original a medida realizado por un diseñador gráfico desde cero, se realizará una evaluación preliminar
  2. si el diseño de su página se basará en una plantilla web, ésta deberá venir ya con el soporte adaptativo, realizándose sólo un trabajo de personalización de cada versión

Cuéntenos su caso

Háganos llegar el perfil de su proyecto para realizar una evaluación preliminar gratuita.