Spanish (Español) translation by Elena Pari (you can also view the original English article)
El diseño web adaptable ha sido una gran tendencia por mucho tiempo, incluso antes de que Mashable declarara el 2013 como el año del diseño web adaptable. Si esto se combina con el aumento en el uso de dispositivos móviles con pantallas de diferentes tamaños, es fácil entender por qué la red no deja de hablar sobre esto.
¿Pero qué significa el diseño web adaptable para los propietarios de pequeños negocios? Más importante aún, ¿por qué deberíamos estar interesados en el diseño web adaptable?
Cuando se trata de promocionar tu negocio, un sitio web bien diseñado puede ser tu herramienta más valiosa. Sin embargo, si quieres que sea realmente efectivo, un diseño atractivo no es suficiente; tu sitio web también tiene que ser adaptable.
La principal razón por la que necesitas un sitio web adaptable es que el uso de dispositivos móviles para navegar en internet ha ido en constante aumento por años y no hay señales de que disminuya.
Desde el punto de vista de un negocio, esto significa que si tu sitio web no se adapta bien a pantallas más pequeñas haciendo que sea difícil leer y navegar en él, tus visitantes preferirán ir al sitio de la competencia.
En términos sencillos, el diseño web adaptable no es un lujo, es una necesidad, y ahora es el momento perfecto para asegurarte de emplearlo.
Si te has estado preguntando qué es realmente el diseño web adaptable y por qué es importante, has llegado al lugar correcto. En este artículo explicaremos cómo funciona el diseño web adaptable, por qué deberías usar un sitio web adaptable y te mostraré algunos ejemplos de la vida real. ¡Comencemos!
¿Qué es el diseño web adaptable?
El término fue acuñado por Ethan Marcotte en el 2010 y hace referencia al proceso de diseñar sitios web que se adapten al dispositivo en el que son vistos a fin de proveer a los usuarios una experiencia óptima y fluida.
En su eje, el diseño web adaptable sigue estos tres principios básicos: cuadrículas fluidas (fluid grids), medios adaptables (responsive media), y cosulta de medios (media queries). En algunos casos, el diseño web adaptable también usa la metaetiqueta viewport cuando un dispositivo no puede determinar el ancho inicial o escala de un sitio web, lo cual impide que las consultas de medios se activen. A continuación paso a explicar los principios básicos del diseño web adaptable:
1. Cuadrículas fluidas
Las cuadrículas fluidas funcionan como cualquier otra cuadrícula de diseño, es decir, permiten distribuir los elementos en una página de manera visualmente atractiva. Sin embargo, a diferencia de una cuadrícula tradicional, una cuadrícula fluida cambiará de tamaño según las dimensiones de la pantalla y se adapta a cualquier ancho porque usa unidades de medida relativas, como porcentajes o unidades em, en lugar de unidades fijas como los píxels.
2. Consultas de medios
Las consultas de medios permiten ser aún más específico con el diseño adapatable y ajustarlo según un tamaño particular de pantalla. Los sitios web usan las consultas de medios para recolectar datos que les ayuden a determinar el tamaño de la pantalla y luego cargar los estilos apropiados de CSS.
3. Medios adaptables
El tercer principio fundamental del diseño web adaptable son los medios flexibles o adaptables. Dado que los sitios web modernos usan muchas imágenes, videos y otros archivos de medios, estos tipos de contenido también tienen que adaptarse a los diferentes tamaños de pantalla.
Normalmente los diseñadores incluían las dimensiones de la imagen en su hoja de estilo CSS, pero esto ya no funciona para el diseño adaptable debido a las limitaciones de las unidades fijas de medida mencionadas anteriormente. En lugar de ello, para los archivos de imagen, videos y otros tipos de medios se tiene que usar la propiedad de ancho máximo. A fin de asegurar que los archivos de medios no sobrepasen sus límites y que se vean bien a la escala de la pantalla, se debe establecer el ancho máximo al 100%.
4. Metaetiqueta viewport
Como ya lo mencioné, la metaetiqueta viewport funciona cuando las consultas de medios no se activan debido a que el dispositivo no puede determinar el ancho inicial de un sitio web. Para solucionar esto, Apple creó la metaetiqueta viewport.
La metetiqueta viewport por lo general tiene una escala inicial de altura o anchura establecida en 1. Esto soluciona el problema que se presenta cuando la escala del sitio web no es reconocida, pues se usa la proporción entre el alto o el ancho del dispositivo y el tamaño del viewport, es decir, el área del contenido.
- Diseño web adaptable Consejo rápido: No te olvides de la metaetiqueta viewport Ian Yates
Cómo funciona el diseño web adaptable en la vida real
Ahora que hemos hablado de los principios básicos del diseño web adaptable, démosle una mirada a unos cuantos ejemplos de la vida real.
1. Susan Jean Robertson
Al ser desarrolladora web, no es de extrañar que el sitio web de Susan Jean Robertson siga las mejores prácticas en lo que respecta al diseño web, lo cual incluye el asegurarse de que su sitio se vea genial al margen de qué dispositivo estén usando sus visitantes.
A pesar de que su sitio es más bien simple y minimalista, este tiene unas cuantas imágenes que no solo adaptan su tamaño a las dimensiones de la pantalla, sino que su organización cambia de dos columnas a una sola cuando se ve en pantallas pequeñas. El menú, que en las patallas pequeñas por lo general cambia a un menú tipo hamburguesa, queda igual porque no tiene muchos enlaces, así que no hay necesidad de ocultarlo.
2. BMW
El sitio web de BMW usa muchas imágenes y videos de fondo, lo cual puede ser la parte más desafiante del diseño adaptable.
Sin embargo, como puedes ver en las capturas de pantalla abajo, BMW hace un excelente trabajo al asegurarse de que las imágenes y videos se adapten a diferentes tamaños de pantalla. También notarás el uso de un menú hamburguesa para la visualización en los dispositivos móviles.
3. Field Notes
Field Notes es un buen ejemplo de sitio web para comercio electrónico que se ve fantástico tanto en dispositivos móviles como en los de escritorio.
En las pantallas pequeñas, el sitio usa el menú hamburguesa y las filas de productos se acortan de cuatro columnas a dos. Las llamadas a la acción permanecen visibles y es fácil hacer clic en ellas incluso si el tamaño de la pantalla es reducido. Además, las imágenes de los productos también se ven bien en diferentes tamaños.
4. KlientBoost
Un fondo ilustrado atractivo es lo primero que llama la atención en el sitio web de KlientBoost y el fondo se ve muy bien sin importar cuánto cambie el tamaño de la ventana del navegador.
Para las pantallas pequeñas, además de usar el menú hamburguesa, KlientBoost también usa una versión diferente del logo, mientras que el resto del diseño se comporta de la manera usual: varias columnas se reducen a una sola.
5. WillowTree
El último ejemplo en nuestra lista es el de WillowTree Apps, una agencia digital cuyo sitio web usa un diseño limpio con muchas imágenes para mostrar su contenido y portafolio.
Notarás que las imágenes se adaptan completamente y siguen el patrón estándar de reorganizarse en una sola columna antes de los fragmentos inciales de los artículos, de manera similar al resto del contenido. Aquí también está presente el menú hamburguesa, así como los botones de llamada a la acción que quedan claramente visibles incluso en las pantallas pequeñas.
Los sitios mencionados son solo la punta del iceberg en cuanto a inspiración para diseño web adaptable. Puedes encontrar muchos más ejemplos en nuestra selección de los 25 mejores diseños web adaptables.
Por qué necesitas un diseño web adaptable para tu sitio
El diseño web adaptable no se trata simplemente de seguir las últimas tendencias de diseño. Usar un diseño adaptable para tu sitio web trae muchos beneficios para tu negocio que pueden beneficiar tu tráfico, SEO y ganancias. Estas son las cinco principales razones por las que debes considerar usar el diseño web adaptable en tu sitio.
1. Mejor experiencia para el usuario y facilidad de uso del sitio
La razón más importante para usar un diseño web adaptable es que les proveerás a tus visitantes una mejor experiencia y será más fácil usar tu sitio web. Si los visitantes no se ven forzados a desplazarse en todas las direcciones ni hacer zoom para leer tu contenido, estáran más dispuestos a quedarse en tu sitio por más tiempo. Podrán navegar fácilmente de una página a otra y no tendrán problemas para llenar un formulario o hacer clic en el botón de llamada a la acción.
2. Más visitas desde dispositivos móviles
Como ya lo mencioné, las estadísticas demuestran que más de la mitad de todo el tráfico a nivel mundial se realiza a través de dispositivos móviles, lo cual quiere decir que una vez que tu sitio web es adaptable, tendrás mejores oportunidades de atraer a esos visitantes. Si llegan a tu sitio web y este se ve y funciona muy bien incluso en pantallas pequeñas, no tendrán razón para irse, entonces tu negocio estará destinado a ver un aumento en el número de visitantes y clientes que usan dispositivos móviles.
3. Un sitio web más rápido
Aparte del diseño web adaptable, otra tendenecia en Interet que se ha vuelto imperativa es que el sitio web cargue rápido. Y gracias a las cuadrículas fluidas y a los medios adaptables, los sitos web adaptables cargan más rápido que los sitios web que no lo son. Esto hará que los visitantes pasen más tiempo en tu sitio, lo que nos lleva al siguiente punto: las tasas de conversión.
4. Mejores tasas de conversión
Una vez que los visitantes pasan más tiempo en tu sitio, tienes mejores oportunidades de convertirlos en clientes potenciales y luego en tus suscriptores y compradores. Según las investigaciones, las tasas promedio de conversión en el caso de los usuarios de teléfonos inteligetes superan en 64% a las tasas de conversión provenientes de dispositivos de escritorio. Este es un resultado directo asociado a una mejor experiencia por parte del usuario al contar con un sitio web fácil de usar en varios tamaños de pantalla y con tiempos de descarga más rápidos.
5. Mejor ranking SEO
Por último, un mejor ranking SEO es definitivamente una de las cinco mayores ventajas que proporciona un diseño web adaptable. Al fin y al cabo, si no se te puede encontrar en los motores de búsqueda, conseguir tráfico orgánico para tu sitio será casi imposible. Según Google, desde abril de 2015, la adaptabilidad del sitio web es una de los indicadores de ranking que determina cómo este aparece en los motores de búsqueda. Sin embargo, Google no es el único motor de búqueda que lo recomienda. Bing ha dicho claramente en su blog que construir sitios web optimizados para todas las plataformas es clave para una estrategia de SEO exitosa.
Por dónde empezar
Ahora que hemos cubierto las ventajas más importantes del diseño web adaptable, veamos cómo puedes empezar.
1. Prueba si tu sitio web es adaptable
Lo primero que debes hacer es probar la adaptabilidad de tu sitio web. Puedes usar una herramienta como la Prueba de optimización para móviles de Google. Todo lo que tienes que hacer es ingresar la dirección URL. La herramienta analizará tu sitio y te dirá si es adaptable o no. También recibirás sugerencias sobre qué hacer para asegurar que tu sitio se vea bien en las pantallas de los dispositivos móviles.
2. Inspírate con ejemplos de diseño web adaptable
Una vez que sabes si tu sitio es adaptable o no, es hora de inspirarte con ejemplos de sitios web adaptables. Podrás ver exactamente cómo esos sitios usan los principios fundamentales que mencioné líneas arriba y cómo han implementado otras características necesarias.
3. Elige una plantilla o tema adaptable
El siguiente paso es elegir una plantilla o tema adaptable para tu sitio. Si hasta ahora has estado usando plantillas HTML y quieres continuar usándolas, hay muchas plantillas HTML entre las cuales elegir. Comienza con nuestra selección de las mejores plantillas HTML adaptables disponible en nuestra tienda.
Si eliges trabajar en WordPress, te alegrará saber que abundan los temas adaptables de esta plataforma para cualquier industria.
4. Mejora tu sitio web con estos trucos de diseño web adaptable
Después de asegurarte de usar una plantilla o tema adaptable, es hora de pasar al siguiente nivel con estos consejos y trucos adicionales. Usa nuestra guía como punto de partida para asegurarte de que tu sitio web ofrece la mejor experiencia posible al usuario y de que es totalmete adaptable.
Incorpora el diseño web adaptable
El diseño web adaptable no va a desaperecer a corto plazo. De hecho, ha llegado para quedarse y tiene muchas ventajas que benefician el balance final de cualquier negocio.
Si estás listo para mejorar tu sitio, comienza por renovar su apariencia con una de nuestras plantillas HTML o temas adaptables de WordPress y usa los consejos y trucos de este artículo para encaminarte en la dirección correcta.
