Guía para principiante: diseño web adaptativo (responsive)

Diseño Web Responsive

No importa si eres un principiante o un profesional web experimentado, al principio la creación de una página web responsivpuede parecer confusa, sobre todo debido al cambio radical en el pensamiento que se requiere. Con el paso del tiempo, el diseño web adaptativo se vuelve algo ampliamente usado y común. De hecho, este cambio es similar a la transición de los diseños basados en tablas a los diseños de CSS. Si alguna vez abres un sitio web adaptativo, su diseño “mágicamente” se ajustará a la anchura del navegador web, incluso si abres esta página en tu teléfono móvil. En pocas palabras, se trata de una forma muy diferente de diseñar sitios web que representa el futuro. Durante los últimos años, el diseño responsive se ha convertido en el tema ardiente en la comunidad de diseñadores web y aquí te ofresco una simple guía que espero te sea útil.

Es difícil hablar del diseño responsive sin mencionar a su creador, Ethan Marcotte. Si todavía no has leído su artículo sobre el diseño web adaptativo, te recomendamos que lo hagas (en serio, es una lectura obligatoria). En el artículo, Ethan analiza todas las ideas claves que forman el concepto del diseño web responsivo; es decir, él habla del aspecto técnico del diseño adaptativo. No se trata de una sola pieza de tecnología, sino de conjuntos de técnicas e ideas que forman algo único.

¿Qué es el diseño adaptativo?

En realidad, sería mejor preguntar, ¿qué problema resuelve el diseño responsive? Bueno, como puedes haber notado, por el momento las computadoras ya no son los únicos hardware con navegadores web. Hay muchos otros dispositivos modernos que integran navegadores y permiten navegar por la Web. El panorama cambiante de los navegadores web llevó al cambio en las expectativas de los usuarios. Hoy en día, la gente espera poder navegar por la Web por medio de sus teléfonos con la misma facilidad con la que navega desde sus computadoras regulares. Así pues, en respuesta a esto, la comunidad del diseño web comenzó a crear versiones móviles de sitios web. En retrospectiva, esta solución no era un progreso real, sino una idea razonable. Muy pronto cada sitio web obtuvo una versión normal de «escritorio», y, como extra, una versión «móvil».

La tecnología nunca deja de desarrollar, por lo que hace pocos años el mercado del hardware del teléfono revolucionó y otros factores ganaron popularidad. Además de los teléfonos y ordenadores personales, los dispositivos como las tabletas con pantallas táctiles y las computadoras portátiles pequeñas (netbooks, si prefieres este término) comenzaron a aparecer en todas partes. Tampoco se trata solo de las pantallas pequeñas. Las pantallas enormes de alta resolución se vuelven mucho más comunes de lo que solían ser, y sería un desperdicio no aprovechar esto. En resumen, el espectro de tamaños de pantalla y resoluciones se está ampliando cada día, y crear una versión diferente para cada dispositivo particular aún no es una buena práctica. Este es precisamente el problema que resuelve el diseño adaptativo.

El diseño web adaptativo no es una sola pieza de tecnología, sino una colección de técnicas e ideas. Ahora, echemos un vistazo a las partes claves de esta solución.

Fluid Grids

La primera idea en la que se basa el diseño adaptable es el uso de lo que se conoce como “fluid grid” (rejilla fluida). Hace pocos años, crear un «diseño líquido» que se expandiera no fue tan popular como crear diseños de ancho fijo, es decir, diseños centrados de un número fijo de píxeles. Sin embargo, teniendo en cuenta el gran número de resoluciones de pantallas presentes en el mercado actual, no se puede ignorar el beneficio de los diseños líquidos.

Las “rejillas fluidas” van más allá del layout líquido tradicional. En lugar de crear un diseño basado en píxeles rígidos o valores porcentuales arbitrarios, el fluid grid se diseña con más cuidado en términos de proporciones. De esta manera, cuando un diseño se estrecha en una pantalla de un pequeño dispositivo móvil o se extiende en una pantalla enorme, todos los elementos del diseño respectivamente cambian sus dimensiones.

Para calcular las proporciones de cada elemento de la página, es necesario dividir el elemento determinado por su contexto. En la actualidad, la mejor manera de hacerlo es primero creando un prototipo de alta fidelidad en un editor de imágenes basado en píxeles como, por ejemplo, Photoshop. Con la ayuda de este prototipo de alta fidelidad, puedes medir un elemento de página y dividirlo por el ancho completo de la página. Por ejemplo, si tu diseño tiene un tamaño típico de 960 píxeles, entonces este sería tu valor de «contenedor». Digamos que nuestro elemento objetivo es un valor arbitrario de 300 píxeles de ancho. Si multiplicamos el resultado por 100, obtenemos el valor porcentual del 31.25% que podemos aplicar al elemento objetivo.

Nota: Si tus valores no funcionan tan ordenadamente, y obtienes un valor con muchos números después del decimal, no redondees este valor. Nosotros, seres humanos, tendemos a usar números “agradables” y ordenados y hacer que nuestro código parezca bonito. En cambio, tu computadora (y el aspecto final de tu diseño) se beneficiará de la precisión matemática aparentemente excesiva.

Los fluid grids son una parte muy importante del diseño adaptable, pero no son todo lo que necesitamos. Cuando el ancho del navegador se vuelve demasiado estrecho, el diseño puede romperse completamente. Por ejemplo, un layout complejo de tres columnas no va a funcionar muy bien en un teléfono móvil pequeño. Afortunadamente, el diseño responsive ha resuelto también este problema mediante el uso de media queries.

Media Queries

La segunda parte del diseño adaptable son CSS3 media queries. Actualmente estas gozan de la compatibilidad decente con muchos navegadores web modernos. Las “consultas de medios CSS3” permiten recoger datos sobre el visitante del sitio y usarlos para aplicar varios estilos CSS. Para alcanzar nuestros propósitos, principalmente necesitamos la característica del ancho mínimo que nos permite aplicar los estilos CSS específicos en caso de que la anchura de la ventana del navegador sea menor al ancho especificado por nosotros. Si queremos aplicar algo de estilo a los teléfonos móviles, nuestro media query podría tener este aspecto:

Usando una serie de consultas como esta, podemos hacer nuestro camino hacia resoluciones más grandes. Algunos de los anchos (en píxeles) que recomendamos especificar son los siguientes:

  • 320px
  • 480px
  • 600px
  • 768px
  • 900px
  • 1200px.

En un mundo ideal, ajustarías tu diseño para que se adapte perfectamente al ancho de cada dispositivo, pero a menudo tienes que dedicar tu tiempo y esfuerzo a muchas otras cosas. Desde un punto de vista más práctico, las resoluciones a las que se adapta un diseño deben ser las resoluciones de pantallas de las personas que usan ese diseño. Como siempre debemos tener en cuenta las limitaciones de tiempo y presupuesto, las situaciones altamente contextuales, etc. En resumen, al decidir cuáles resoluciones son necesario especificar, guíate por tu instinto.

P.S. Para ver un diseño responsive en acción, puedes hacer clic en el botón “Demo” de cualquiera de las plantillas WordPress de TemplateMonster.

0 comentarios

Dejar un comentario

¿Quieres unirte a la conversación?
Siéntete libre de contribuir

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *