MAGAZINE

28
Sep 2016

Diseño web adaptado a móviles: Responsive web design

Diseño web adaptado a móviles: Responsive web design

Si se quiere tener una web siguiendo las últimas tendencias no puedes dar soporte a navegadores obsoletos. Esta sería una máxima muy matizable siempre y cuando se cuente con recursos para llegar a todo tipo de audiencias sin importar el dispositivo de acceso a la web. En caso contrario las plataformas de prueba deberán ser elegidas teniendo en cuenta estadísticas de uso y tendencias del mercado.

La solución pasaría por establecer diferentes niveles donde la experiencia de usuario estuviera adaptada al sistema y navegador en uso. Simplemente por poner algunos ejemplos de sistemas y navegadores a tener en cuenta actualmente, cada uno con sus particularidades individuales:

  • Sistemas Operativos: Mac OSX, Windows, IOS, Android, Windows Mobile, Blackberry OS.
  • Navegadores: Internet Explorer (7, 8, 9 y 10), Firefox, Chrome, Safari, Opera.
  • Resoluciones de pantalla: 1920×1080, 1280×800, 1280×1024, 1024×768 (iPad en horizontal), 768×1024 (iPad en vertical), 640×960 (iPhone4), 480×800 (Android), 360×640 (Symbian OS), 480×360 (Blackberry), 320×480 (iPhone), 320×240.

Todo esto en ordenadores de sobremesa, portátiles y dispositivos móviles (tablets y smartphones) con diferentes densidades de píxeles (píxeles por pulgada).

responsive-web-design

Si se decide llevar a cabo un diseño responsive hay que tener claro que la accesibilidad y la disponibilidad del contenido va a estar condicionada para ciertos usuarios.

Entran en juego los conceptos de progressive enhancement y de graceful degradation.

Graceful degradation o sistema de tolerancia de fallos es un concepto que expresa la capacidad de un sistema de operar correctamente en el caso de un fallo de algunos de sus componentes. La capacidad de funcionamiento disminuye de forma proporcional a la gravedad del fallo. Esta técnica prioriza la presentación de la web y parte de arriba hacia abajo.

Progressive enhancement consistiría en tratar de que el usuario disfrute de la mejor experiencia posible teniendo en cuenta el dispositivo que utilice. Esta técnica pone el contenido en primer lugar y parte de abajo hacia arriba. Ambos son pues conceptos muy relacionados y pueden servir de punto de partida para establecer distintos niveles de soporte según sistema y navegador.

Para definir estos niveles podemos tener en cuenta:

  • Sistema/navegador identificado o desconocido.
  • Capaz o incapaz. En este caso lo recomendable es agrupar navegadores por sus capacidades.
  • Actualizado u obsoleto. A medida que aparecen nuevas versiones la relevancia de las antiguas disminuye. Sería el caso de Internet Explorer 6 y 7 una vez lanzado Internet Explorer 8 como actualización automática.

Teniendo en cuenta que los navegadores que no entiendan alguna instrucción hecha por ejemplo en HTML5 o CSS3 simplemente la ignorarán, es posible pues utilizar estas técnicas para mostrar una web adaptada a los navegadores de dispositivos móviles.

Se pueden establecer varios niveles de adaptación, siempre identificando los bugs en los sistemas/navegadores correspondientes:

  • Nivel A: Nivel avanzado de funcionalidad. Se hace uso de toda la potencia de los nuevos navegadores y de los últimos estándares web.
  • Nivel B: Nivel intermedio de funcionalidad.
  • Nivel C: Nivel básico de funcionalidad. Contenido y experiencia accesible. Disminución en diseño y funcionalidades avanzadas. Capas de estilo y comportamiento omitidas.
  • Nivel X: Este nivel da soporte a sistemas/navegadores no identificados.

Sea cual sea la técnica y el nivel de soporte que se decida al llevar a cabo un proyecto web, habrá que tener muy en cuenta los costes de diseño, desarrollo, testeo y mantenimiento asociados.

Es por esto que muchas webs que visitan a diario millones de personas aun no han emprendido el paso hacia un diseño responsive, visualizándose igual en todos los dispositivos sin importar su resolución, y confiando pues la experiencia de usuario a las funciones de zoom de las pantallas táctiles.

Si quieres conocer más al respecto puedes leer los siguientes artículos sobre Responsive Web Design.

Comments are closed.

Sobre el autor

DDmag es un proyecto de Javier Alés Ojeda. Diseñador digital, ha trabajado desde el año 2003 en diferentes agencias en Madrid, Londres y Sevilla, ciudad donde actualmente reside. En ddmag.es puedes ver sus últimos proyectos y artículos especializados en diseño digital.

También es creador de El Libro en Sevilla un proyecto de humanidades digitales destinado al estudio y difusión de la historia del libro en su ciudad. Puedes seguir las cuentas de Twitter @ddmag_es y @javierales para estar al día de nuevos contenidos.

Si continuas utilizando este sitio aceptas el uso de cookies. más información

Los ajustes de cookies de esta web están configurados para "permitir cookies" y así ofrecerte la mejor experiencia de navegación posible. Si sigues utilizando esta web sin cambiar tus ajustes de cookies o haces clic en "Aceptar" estarás dando tu consentimiento a esto.

Cerrar