Share
El diseño web receptivo ha sido una tendencia importante durante mucho tiempo, incluso antes de que Mashable declarara 2013 como el año del diseño web responsivo. Combine eso con un mayor uso de dispositivos móviles de varios tamaños de pantalla y es fácil entender por qué Internet no deja de hablar de ello..
Pero, ¿qué significa el diseño web sensible para los propietarios de pequeñas empresas? Más importante aún, ¿por qué debería preocuparse por el diseño web sensible??
Cuando se trata de promover y comercializar su negocio, un sitio web bien diseñado puede ser su activo más valioso. Pero, si desea que sea realmente efectivo, un diseño atractivo por sí solo no es suficiente. Su sitio web también debe ser sensible.
La razón principal por la que querría un sitio web sensible es el hecho de que el uso de dispositivos móviles para navegar en Internet ha ido en aumento durante algunos años y no muestra signos de desaceleración..
Desde un punto de vista empresarial, esto significa que si su sitio web no responde bien a pantallas más pequeñas y es difícil de leer y navegar, sus visitantes estarán más inclinados a pasar al sitio de un competidor.
En pocas palabras, el diseño web responsivo no es un lujo, es una necesidad y ahora es el momento perfecto para garantizar que su sitio web sea responsivo.
Si se ha estado preguntando qué es realmente el diseño web sensible y por qué es importante, ha venido al lugar correcto. En este artículo, explicaremos cómo funciona el diseño web sensible, por qué debería considerar un sitio web sensible, y le mostraremos algunos ejemplos de diseño web sensible en la vida real. Vamos a bucear en!
El término diseño web sensible fue acuñado por Ethan Marcotte en 2010 y se refiere al proceso de diseño de sitios web que responderán al dispositivo en el que se ven, para brindar a los usuarios una experiencia de usuario óptima y sin problemas..
En su esencia, el diseño web sensible responde a los tres principios principales: redes de cuadrícula fluidas, medios sensibles y consultas de medios. En algunos casos, el diseño web adaptable también hace uso de la metaetiqueta de la ventana de visualización de medios cuando un dispositivo no puede determinar el ancho o la escala inicial de un sitio web, lo que hace que las consultas de los medios no se activen. Aquí están los principios básicos de diseño web de respuesta explicados:
Las cuadrículas fluidas funcionan como cualquier otra cuadrícula de diseño: le permiten organizar elementos en una página de una manera visualmente atractiva. Sin embargo, a diferencia de una cuadrícula tradicional, una cuadrícula fluida cambiará de tamaño según el tamaño de la pantalla y puede adaptarse a cualquier ancho porque utiliza unidades de medida relativas, como porcentajes o unidades em, en lugar de unidades fijas, como píxeles.
Las consultas de medios le permiten ser aún más específico con su diseño responsivo y ajustarlo de acuerdo con un tamaño de pantalla en particular. En términos sencillos, los sitios web utilizan consultas de medios para recopilar datos que les ayudan a determinar el tamaño de una pantalla y luego cargar los estilos CSS apropiados.
El tercer principio básico del diseño web sensible es la respuesta o los medios flexibles. Dado que los sitios web modernos utilizan muchas imágenes, videos y otros archivos multimedia, es imperativo que esos tipos de contenido respondan a diferentes tamaños de pantalla.
Normalmente, los diseñadores incluirían las dimensiones de la imagen en su hoja de estilos CSS. Pero, esto no funciona para un diseño sensible debido a las unidades de medida fijas mencionadas anteriormente. En su lugar, tiene que hacer uso de la propiedad de ancho máximo para archivos de imagen, videos y otros tipos de medios. Para asegurarse de que los archivos multimedia no pasan de su contenedor y se escalan bien en función del tamaño de la pantalla, la propiedad de ancho máximo debe establecerse en 100%.
Como se mencionó anteriormente, la metaetiqueta de la ventana gráfica entra en juego cuando las consultas de medios no se activan porque un dispositivo no puede determinar el ancho inicial de un sitio web. Para combatir esto, Apple salió con la etiqueta meta viewport.
La metaetiqueta de la ventana gráfica suele tener una escala inicial de alto o ancho de 1, lo que resuelve el problema de no reconocer la escala del sitio web mediante el uso de la relación entre la altura o el ancho del dispositivo y el tamaño de la ventana gráfica..
Ahora que hemos cubierto los principios básicos del diseño web sensible, echemos un vistazo a algunos ejemplos de diseño web sensible en el mundo real:
Al ser un desarrollador web, no es de extrañar que el sitio web de Susan Jean Robertson siga las mejores prácticas cuando se trata de diseño web, que incluye asegurarse de que su sitio web se vea bien sin importar qué dispositivo usan los visitantes..
Aunque su sitio es bastante simple y mínimo, tiene algunas imágenes que no solo se ajustan bien en función del tamaño de la pantalla, sino que también cambian de un diseño de dos columnas a un diseño apilado de una columna en pantallas más pequeñas. El menú, que a menudo cambia a un menú de hamburguesas en pantallas más pequeñas, sigue siendo el mismo porque no tiene muchos enlaces, por lo que no es necesario ocultarlo..
El sitio web de BMW utiliza muchas imágenes y videos de fondo, que pueden ser la parte más desafiante del diseño web sensible..
Sin embargo, como puede ver en la captura de pantalla a continuación, BMW hace un excelente trabajo al asegurarse de que todas las imágenes y videos respondan a diferentes tamaños de pantalla. También notará el uso de un menú de hamburguesas en dispositivos móviles.
Field Notes sirve como un buen ejemplo de un sitio web de comercio electrónico que se ve muy bien en dispositivos móviles y de escritorio.
Utilizan el menú de hamburguesas estándar en pantallas más pequeñas y las filas de productos cambian de tamaño de filas de cuatro columnas a filas de dos columnas. Las llamadas a la acción permanecen visibles y son fáciles de hacer clic incluso cuando el tamaño de la pantalla disminuye y las imágenes del producto también se escalan muy bien.
Un fondo ilustrado atractivo es lo primero que notará en el sitio web de KlientBoost y ese fondo se ve excelente sin importar cómo cambie el tamaño de la ventana del navegador..
Además de usar un menú de hamburguesas, KlientBoost también usa una versión de logotipo diferente en pantallas más pequeñas y el resto del diseño se comporta de la manera habitual: varias columnas se apilan en una columna singular.
El último ejemplo de nuestra lista proviene de WillowTree Apps, una agencia digital cuyo sitio web utiliza un diseño limpio con muchas imágenes para mostrar su contenido y cartera..
Notará que las imágenes son totalmente receptivas y seguirán el patrón estándar de apilarse antes de los extractos de publicación en una columna, similar al resto del contenido. Aquí, hay un menú de hamburguesas así como botones de CTA que permanecen claramente visibles incluso en pantallas más pequeñas.
Los sitios web de arriba son solo la punta del iceberg cuando se trata de una inspiración de diseño web sensible. Puede encontrar muchos más ejemplos en nuestro resumen de los 25 mejores ejemplos de diseño web receptivo..
El diseño web responsivo no consiste solo en seguir las últimas tendencias de diseño web. Adoptar un diseño receptivo para su sitio web tiene muchos beneficios para su negocio que pueden afectar su tráfico, SEO e ingresos. Estas son las cinco razones principales por las que debería considerar un diseño web adaptable para su sitio web.
La razón más importante para adoptar un diseño web sensible es el hecho de que brindará a sus visitantes una mejor experiencia de usuario y mejorará la usabilidad de su sitio web. Si los visitantes no están obligados a desplazarse de inmediato en todas las direcciones, pellizcar y ampliar para leer su contenido, estarán más dispuestos a permanecer en su sitio web durante un período de tiempo más prolongado. Podrán navegar fácilmente de una página a otra y no tienen problemas para completar un formulario o hacer clic en el botón de llamada a la acción.
Como mencionamos anteriormente, las estadísticas muestran que más de la mitad de todo el tráfico web del mundo proviene de dispositivos móviles, lo que significa que una vez que su sitio web sea receptivo, tendrá muchas más oportunidades de atraer a esos visitantes. Si aterrizan en su sitio web y se encuentran con un sitio web que se ve y funciona bien incluso en pantallas más pequeñas, no tendrán ninguna razón para alejarse, por lo que su empresa verá un aumento en clientes potenciales y clientes desde dispositivos móviles.
Aparte del diseño web sensible, otra tendencia de Internet que se ha convertido en una necesidad es un sitio web de carga rápida. Y gracias a las redes fluidas y los medios sensibles, los sitios web sensibles tienen mejores tiempos de carga que los sitios web que no responden. Esto lleva a los visitantes a pasar más tiempo en su sitio, lo que nos lleva al siguiente punto: las tasas de conversión..
Una vez que los visitantes pasan más tiempo en su sitio web, tiene mayores posibilidades de convertirlos de visitantes en clientes potenciales y luego en suscriptores y compradores. Según la investigación, las tasas de conversión promedio para dispositivos de teléfonos inteligentes son un 64% más altas que las tasas de conversión de escritorio. Este es un resultado directo de una mejor experiencia de usuario que proviene de tener un sitio web que es fácil de usar en varios tamaños de pantalla y tiempos de carga más rápidos.
Por último, un mejor rango de SEO es definitivamente una de las cinco principales ventajas del diseño web responsivo. Después de todo, si no puede encontrarlo en los motores de búsqueda, será casi imposible obtener tráfico orgánico para su sitio web. Según Google, desde abril de 2015, la capacidad de respuesta de su sitio web es una de las señales de clasificación que determinan cómo se muestra su sitio web en los motores de búsqueda. Sin embargo, Google no es el único motor de búsqueda que lo recomienda. Bing ha declarado claramente en su blog que crear sitios web optimizados para todas las plataformas es clave para una estrategia de SEO exitosa.
Ahora que hemos cubierto las ventajas más importantes del diseño web sensible, hablemos de cómo puede comenzar.
Lo primero que debe hacer es probar la capacidad de respuesta de su sitio web. Puedes usar una herramienta como la Prueba de Google para dispositivos móviles. Todo lo que tiene que hacer es ingresar la URL de su sitio y la herramienta analizará su sitio y le dirá si responde o no. También recibirá sugerencias sobre qué hacer para garantizar que su sitio web sea compatible con dispositivos móviles.
Una vez que sepa si su sitio responde o no, es hora de inspirarse con ejemplos de sitios web receptivos. Podrá ver exactamente cómo esos sitios web utilizan los principios básicos mencionados anteriormente, así como la forma en que implementaron otras características necesarias..
El siguiente paso es elegir una plantilla receptiva o un tema para su sitio. Si ha estado usando plantillas HTML hasta el momento y desea continuar usándolas, hay muchas plantillas HTML sensibles para elegir. Comience con nuestro resumen de las mejores plantillas HTML receptivas disponibles en nuestro mercado.
Si WordPress es su plataforma elegida, le complacerá saber que no faltan temas de WordPress que respondan, sin importar a qué industria pertenece su negocio..
Una vez que se haya asegurado de que su sitio use una plantilla o un tema receptivos, es hora de llevarlo al siguiente nivel con consejos y trucos adicionales. Utilice nuestra guía como punto de partida para ayudarlo a garantizar que su sitio web ofrezca la mejor experiencia de usuario posible y que sea totalmente receptivo.
El diseño web responsivo no va a desaparecer pronto. De hecho, es el camino del futuro y tiene una serie de ventajas que tienen un impacto en el balance final de cualquier propietario de negocio..
Si está listo para llevar su sitio web al siguiente nivel, comience por renovarlo con una de nuestras plantillas HTML sensibles o temas de WordPress, y utilice los consejos y trucos de este artículo para indicar la dirección correcta..
Accentsconagua