Diseño Web Adaptativo: Las Mejores Prácticas en 50 Ejemplos

Diseño web adaptativo es un término que se refiere al desarrollo de sitios web de forma tal que su apariencia pueda cambiar según la resolución de pantalla del ordenador del usuario. Más precisamente, el concepto permite que un formato avanzado de 4 columnas de 1292 píxeles de ancho, en una pantalla de 1025 píxeles de ancho, se simplifique en 2 columnas. También hace que quepa correctamente en las pantallas de teléfonos inteligentes y tabletas. Esa técnica particular de diseño es lo que llamamos “diseño adaptativo”.

El diseño web adaptativo es una versión totalmente diferente al diseño web tradicional, y los desarrolladores (especialmente los más inexpertos) deben conocer sus puntos a favor y en contra. Este blog es un ejemplo evidente de esa concepción; por eso vamos a desvelar algunos datos acerca de los usos del diseño web adaptativo. Puede que por instinto elijamos media queries para desarrollar un sitio adaptativo. Sin embargo, la molestia que enfrentamos con media queries es que pueden abrirse nuevas queries de un momento a otro; toda vez que esto ocurre el usuario experimenta cambios drásticos y repentinos en la apariencia y el orden del sitio. Los expertos sugieren usar transiciones CSS para facilitar el pasaje.

Las páginas que incluyen tablas de datos suponen un desafío especial para los diseñadores adaptativos. Las tablas de datos son extremadamente anchas por definición, y cuando alguien aleja el visor para ver el cuadro entero, se hace tan pequeño que no es legible. Cuando uno trata de acercarse para leer, se ve obligado a desplazarse tanto horizontal como verticalmente para ver su contenido. Bueno, hay varias maneras de evitar este problema. Reformatear los datos como gráfico circular o gráfico en miniatura es una solución válida. Los gráficos en miniatura incluso caben en pantallas angostas.

Las imágenes en diseños web adaptativos son dependientes del contexto. Esta técnica particular sirve verdaderamente a la adaptabilidad del diseño ya que las imágenes se adaptan a diferentes resoluciones, desde pantallas anchas hasta otras más estrechas. Las imágenes en escala cambian fácilmente con la ayuda de las herramientas de desarrollo y los lenguajes de codificación más recientes, permitiendo que los diseños mantengan su atractivo en cualquier contexto. El diseño web adaptativo es notablemente diferente del tradicional en términos de recursos técnicos y creativos, y un uso cuidadoso de ello puede lograr maravillas a la hora de diseñar.

Ejemplos de diseño web adaptativo

Simon Collison

Responsive Web Design

Aunque hoy en día este diseño web grisáceo cuadriculado y estático parezca algo aburrido e insulso, cuando fue presentado, sin embargo, causó una suerte de furor con su configuración de alto nivel.

La razón principal por la cual el diseñador centró su atención primordialmente en la conducta adaptativa fue solo la de ganar popularidad, ofreciéndoles desde entonces a los desarrolladores comunes un ejemplo representativo del modo en que se puede transformar con gracia un formato cuadriculado normal.

Arquitectos Andersson-Wise

Por estar dedicado a un estudio de arquitectura y diseño, no nos sorprende que el sitio web se destaque por sus fotos, que ilustran vistosamente las capacidades, la experiencia y los clientes de la empresa.

La página de aterrizaje incluye 3 secciones principales, cada una de las cuales se basa en imágenes de fondo. La solución flexible ayuda a darle una correcta estructura a cada tamaño estándar de pantalla, haciendo que el contenido fluya de forma agradable para el lector.

Stephen Caver

Stephen Caver tiene un sitio web de primer nivel en lo que se refiere a adaptabilidad. Te preguntarás qué lo hace tan especial. La respuesta es simple: mira más de cerca la página principal y verás; consiste en

  • un enorme mensaje de bienvenida presentado con tipografía irregular;
  • un conjunto de bloques enormes que es un duplicado del menú principal en la parte alta;
  • configuración normal de blog.

Por así decirlo, 3 aspectos esenciales que pueden encontrarse en cualquier sitio web. El diseñador nos da una pista sobre cómo la tipografía, el estilo cuadriculado y la sección de blog deberían cambiar de acuerdo a las dimensiones de las pantallas.

Sparkbox

Sparkbox muestra una estructura básica de sitio corporativo. El formato es bastante simple; se basa en un conjunto de líneas horizontales estándar que presentan los datos de forma discreta. Dicha estructura es muy fácil de adaptar a varios tamaños de pantalla. La disposición secuencial de los bloques sin adornos recargados sufre cambios de forma bastante fácil y fluida, brindándoles a los usuarios una configuración bonita y bien organizada.

Food Sense

Responsive Design

De un formato de revista estilo blog, común, alineado a la izquierda y lleno de apetitosas fotos, a un formato simple hecho bloque por bloque: he aquí cómo se ve el principal proceso de adaptación en este sitio web.

Sin embargo, no hay nada sobrenatural; creemos que es una solución típica de un montón de blogs que quieren atraer lectores digitales de la web móvil, ganar público nuevo y, al mismo tiempo, evitar la sobrecarga visual de la estética del sitio.

The Boston Globe

The Boston Globe es un ejemplo excelente de sitio de noticias bien planeado que se basa en el diseño adaptativo. El sitio muestra un abordaje convencional que es útil para quienes tengan muchas ganas de lanzar su propia revista en línea con actualizaciones frecuentes.

Aunque, como es el caso, a primera vista pareciera que el sitio tuviera un aspecto exterior complejo y algo caótico que lo hace difícil de manejar, en realidad la solución es bastante primitiva. El diseñador, sabiamente, ha dividido todos los datos en 3 columnas, cuyo número disminuye según el tamaño de pantalla, para mostrar gradualmente la información en 2 columnas y luego en una. De esta manera también podrás fijar un orden necesario en la aparición de bloques.

Think Vitamin

Responsive Design Example

Honestamente, Think Vitamin no puede jactarse de nada en particular en cuanto al diseño de su blog. Tiene las mismas marcas que cualquier otro. Posee una columna principal con una barra lateral a la derecha con widgets, un encabezado lleno de botones para la navegación, un logotipo y una barra de búsquedas, con un pie de página que presenta datos a través de un conjunto de bloques.

Sin embargo, el equipo no usa sin cuidado su marco adaptativo de base; muestra además el empleo conveniente de algunos elementos de estilo. Así, una paleta de colores contrastantes ayuda a distinguir los bloques de contenido y algunos elementos funcionales como redes sociales y avisos, mejorando la percepción visual en usuarios móviles y aumentando la legibilidad.

Sasquatch! Music Festival

Sasquatch! Music Festival debe procesar mucho contenido multimedia que incluye vídeos y efectos dinámicos que además se complementan con tipografías artísticas de escritura a mano y unos gráficos fantásticos. Por eso, para este equipo, es un desafío considerable que todo aparezca correctamente en móviles y tabletas.

No obstante, la conducta adaptativa aquí está muy elaborada. Casi llega al más mínimo detalle, logrando una apariencia visual agradable que no pierde su encanto de originalidad y creatividad ni siquiera en pantallas pequeñas.

Internet Images

Este es otro sitio prolijamente organizado que se basa en un formato flexible de líneas horizontales. La adaptabilidad aquí también se ve favorecida con éxito por una diferenciación de colores que separa visualmente un bloque lógico del otro.

Esa combinación tan simple pero poderosa ayuda a incrementar la legibilidad sobre todo en dispositivos pequeños en los que, normalmente, todo se presenta como flujo continuo de datos, lo cual fácilmente puede destruir el diseño atrevido y hacer que disminuya el interés de los lectores.

Staffanstorp

Aquí, la belleza de su hábil adaptabilidad a pantallas tanto grandes como pequeñas trae beneficios tales como:

  • perfecta legibilidad sin importar en qué dispositivo se abra el sitio;
  • apariencia bien estructurada para mayor jerarquización de los datos;
  • fácil transmisión de mensajes al lector que usa sobre todo tabletas y móviles.

Aunque el diseño del blog no difiere del de otros, su deseo de satisfacer las necesidades de los internautas de hoy lo lleva a un nivel superior.

Si quieres mantenerte al día con nuestros artículos, puedes seguirnos en Twitter, Facebook, Google+, o incluso suscribiéndote a nuestro hilo RSS.

Boletín de noticias

0 Comentarios

No hay comentarios aún

Deja tu respuesta

*
* Longitud mínima: 20 caracteres