Spanish (Español) translation by Elena Pari (you can also view the original English article)
El diseño web adaptable está de moda ya desde hace un tiempo. Si consideras todos los beneficios que aporta para cualquier propietario de un sitio web, no hay duda de por qué la gente no puede dejar de hablar del tema.
Un sitio web adaptable no solo te ayuda a mejorar tu ranking en los motores de búsqueda, sino que también incrementa tu tasa de conversión y eleva el trafico proveniente de teléfonos móviles. No nos olvidemos de que un sitio web adaptable le ofrece una mejor experiencia a tus visitantes y ayuda a generar enlaces externos de calidad y aumenta tu contenido compartido en las redes sociales.
Lo que es aún mejor es que elaborar un sitio web adaptable ya no es tan difícil como solía serlo. Gracias a los numerosos temas y plantillas, puedes transformar tu sitio web estático en uno adaptable que atraiga más tráfico y más ganancias.
Sin embargo, tener un diseño adaptable no es suficiene, Tu sitio web también necesita contar con las características correctas para tu rubro específico, y esas características tienen que cumplir con las mejores prácticas y principios básicos para la adaptablidad. En el artículo de hoy mostraremos unos cuantos ejemplos de los mejores sitios web de algunas compañías para que puedan servirte de inspiración.
¿Qué hace que un sitio web adaptable sea visualmente irresistible?
Las cuadrículas fluidas, imágenes adaptables y consultas de medios son los principios fundamentales que hacen posible la estructura del diseño web adaptable. Sin embargo, hay algunos otros elementos que todo sitio web adaptable visualmente atractivo debe tener. He aquí algunas reglas para tener en cuenta:
- Diseño atractivo. No hace falta decir que tu sitio web debe contar con un diseño visualmente agradable que proyecte la mejor imagen de tus productos o servicios. Si bien el atractivo de un diseño es altamente subjetivo, puedes seguir unos cuantos principios básios, como usar fuentes legibles, espacios vacíos y evitar malas combinaciones de color, para asegurarte de que tu sitio web sea estéticamente agradable.
- Imágenes optimizadas. Hemos mencionado la importancia de las imágenes adaptables. Sin embargo, tus imágenes también deben estar optimizadas para la web. Esto quiere decir que además de cambiar de tamaño junto con el diseño, deben estar guardadas en el formato correcto. Usa JPG para imágenes de retratos, paisajes de fondo o cualquier otra imagen que tenga varios colores. Usa PNG para imágenes como logos, íconos y cualquier otra imagen que necesite fondo transparente.
- Desactiva el efecto "lightbox" para los dispositivos móviles. Si tienes un sitio web de portafolio, considera deshabilitar el efecto "lightbox" para los dispositivos móviles. En una pantalla pequeña es más difícil pasar a la siguiente imagen o cerrar el cuadro emergente propio del efecto lightbox, lo cual puede hacer que los visitantes abandonen tu sitio.
- Revisa las dimensiones de los formularios en todos los dispositivos. Como propietario de un sitio web, probablemente tienes unos cuantos formularios en tu sitio web. Asegúrate de probar los formularios en varios dispositivos para asegurarte de que los campos se ven correctamente y que son lo suficientemete grandes incluso para las pantallas pequeñas.
- Deshabilita las ventanas emergentes para los teléfonos móviles. De manera similar a las imágenes que se abren en lightbox, las ventanas emergentes para promocionar tu boletín pueden ser difíciles de cerrar en pantallas más pequeñas. Así que considera deshabilitarlas con la consulta de medios adecuada.
- Usa los botones para compartir. Finalmente, asegúrate de que tus botones para compartir sean adaptables y no obstruyan tu contenido en las pantallas pequeñas.
Los 25 mejores sitios web de negocios con diseño adaptable
Los sitios web en esta lista tienen un diseño adaptable atractivo que se ve fantástico tanto en los dispositivos móviles como en aquellos para escritorio. Veamos algunos ejemplos:
1. Adersson Wise Architects
Andersson Wise Architects usa fotos para mostrar sus habilidades, lo que es natural en el portafolio de un arquitecto. En la versión de escritorio, el menú es pequeño y discreto. Además, la página de inicio deja claro por qué es conocido este estudio.
En un dipositivo móvil, el menú se desplaza a la parte superior de la pantalla, y como solo tiene unos cuantos enlaces, no es necesario usar el formato hamburguesa. Las imágenes se colocan una debajo de la otra, haciendo que este sitio web sea fácil de usar en cualquier dispositivo.
2. Stephen Caver
Stephen Caver es un diseñador y desarrollador, así que no es sorprendente que su sitio web sea el ejemplo perfecto de un portafolio en línea adaptable. Él solo incluye algunos ejemplos de su trabajo cuyas miniaturas conservan muy bien la escala en las pantallas pequeñas.
También usa una tipografía agradable y limpia, así como bastante espacio vacío para que el diseño no se vea recargado.
3. Food Sense
El blog de este "foodie" muestra un diseño a dos columnas para las pantallas de escritorio y laptops. El diseño se reduce a una sola columna en las pantallas pequeñas.
El logo y el menú que estaban en la barra izquierda se desplazan a la parte superior de la pantalla sin hacer que sea difícil hacer clic en ellos o esconderlos detrás de un menú de hamburguesa.
4. Made By Hand
Made By Hand es un ejemplo perfecto de cómo asegurarse de que tus medios son adaptables. El sitio web muestra una serie de películas cortas en honor a las personas que hacen cosas a mano y para ello usa imágenes y videos.
Tanto las imágenes como los videos se ven genieales en las patallas de escritorio y en las de los dispositivos móviles. Asimismo, la elegate fuente serif hace que el texto sea agradable de leer.
5. Skinny Ties
Skinny Ties es un sitio de comercio electrónico, así que el diseño adaptable es crucial.
Si cambias el tamaño de la ventana en el navegador o si visitas el sitio a través de un dispositivo móvil, notarás el uso inteligente del megamenú que se expande cuando pasas el cursor sobre él, de manera que es extremadamente fácil hacer clic en cada opción del menú.
6. White Lotus Aromatics
Este sitio web adaptable es otro ejemplo de tienda electrónica. El sitio tiene dos menús principales: uno para acceder a otras páginas del sitio y el otro les permite a los visitantes acceder al catálogo de productos en PDF y a su carrito de compras.
Quienes entran al sitio desde un teléfono móvil también pueden acceder fácilmente a los dos menús que se reubican por encima y por debajo del logo.
7. The Boston Globe
Si tienes mucho contenido para compartir en tu sitio, toma como referencia The Boston Globe.
Los periódicos y revistas normalmente tienen muchas categorías que en el sitio del The Boston Globe quedan ocultas detrás de un menú de hamburguesa, incluso en los dispositivos para escritorio. Esto les permite a los lectores concentrarse en lo más importante para la mayoría de los sitios de publicaciones: el contenido en sí.
8. Starbucks
Starbucks hace un excelente uso de los menús despleglables y de un menú móvil escondido para llamar la atención sobre su contenido y, al mismo tiempo, ofrecer a sus visitates una manera fácil de navegar en el sitio.
Sus botones también funcionan muy bien en pantallas pequeñas, de manera que es fácil verlos y hacer clic en ellos.
9. Sasquatch!
El sitio web adaptable del festival musical Sasquatch es un excelente ejemplo de sliders adaptables.
La imagen se adapta bien a la visualización en dispositivos móviles y es fácil acceder a la información más importante.
10. Tattly
Esta tienda en línea que vende tatuajes temporales simplifica muy bien la experiencia de pago en dispositivos móviles.
Es muy fácil hacer clic en el botón de Amazon Pay o continuar más abajo para llenar el formulario de pago, que cuenta con campos amplios y botones en los que es fácil hacer clic.
11. Cantina Valpolicella Negrar
Esta cooperativa vinícola italiana usa un video en su página de inicio. Es fácil verlo incluso en pantallas pequeñas gracias al botón de reproducción.
Aparte de los medios adaptables, otra cosa que este sitio web hace bien es usar el menú "sticky" o pegajoso, que permite acceder fácilmente a otras páginas.
12. More Hazards More Heroes
El minimalismo y la alta velocidad de carga son las principales ventajas del sitio web para el dúo folk de Nashville, More Hazards More Heroes. En el escritorio puedes reproducir canciones, leer las letras, descargar el álbum y más.
Si visitas el sitio a través de un dispositivo móvil solo encontrarás lo mínimo indispensable junto con la posibilidad de descargar su álbum más reciente.
3. Illy Italian Coffee
Cuando visitas el sitio web de Illy en un escritorio o laptop, notarás una ventana emergente que ofrece un código del 15% de descuento.
Si embargo, en los dispositivos móviles, la ventana emergente es reemplzada por un botón lateral sutil y una barra en la parte superior que no te impiden ver el contenido principal.
14. Sweet Hat club
El menú simplificado y la galería son las dos mayores ventajas de Sweet Hat club cuando se accede a su sitio en un dispositivo móvil. Gracias a los colores brillantes, los botones son fáciles de ubicar.
Este sitio web adaptable también muestra que las animaciones sutiles funcionan muy bien en pantallas pequeñas para llamar la atención sobre las llamadas a la acción.
15. Alessandro D'agnano
El diseñador italiano y director de arte Alessandro D'agnano se especializa en el diseño adaptable, así que su portafolio está optimizado para todos los tamaños de pantalla.
Las vistas en miniatura se apilan una sobre otra como bloques en las pantallas pequeñas, mientras que la fuente sans serif, simple y elegante, todavía es legible.
16. Authentic Jobs
Authentic Jobs es un directorio en línea que se ve increíble en los dispositivos móviles y en los de escritorio gracias al diseño tradicional en forma de lista.
Notarás el ligero cambio de las opciones de filtro que se transforman de una barra lateral a un menú desplegable que se ubica sobre el contenido principal cuando visualizas el sitio en un dispositivo móvil.
17. The DO Lectures
The DO Lectures usa un diseño a tres columas que permite mostrar mucho contenido en la página de inicio.
En los dispositivos móviles, el menú está claramente etiquetado como tal con letras en negrita, mientras que los videos y el contenido aparecen en dos columnas.
18. St. Paul's School
St Paul's School mantiene su página simple y minimalista. Podrás ver la gran imagen de fondo y unos cuantos botones que permiten navegar fácilmente a las principales secciones del sitio web.
En los dispositivos móviles, la imagen de fondo conserva bien la escala y los botones se ubican uno sobre otro para conservar la facilidad de navegación.
19. ASU Online
Esta universidad local deja muy claro qué debes hacer cuando llegas a su sitio. En la parte superior hay dos botones de llamada a la acción que se desplazan a la parte inferior de la pantalla si el sitio se visualiza en un dispositivo móvil, de manera que es imposible no verlos.
Los sliders e imágenes adaptables y una fuente fácil de leer hacen que este sitio web cuente con todo lo deseable en lo que respecta al diseño web adaptable.
20. Rally Interactive
Rally Interactive es un excelente ejemplo de un diseño basado en la tipografía y prueba que no se necesitan imágenes para crear un sitio web visualmente interesante.
Además de ser fácil de usar y de verse my bien tanto en los dispositivos móviles como en los de escritorio, el sitio web también es interactivo.
21. Brown's Court Bakery
Brown's Court Bakery es otro ejemplo de un sitio web minimalista que se ve fantástico en pantallas pequeñas.
Quienes visitan el sitio en un equipo de escritorio verán un menú simple, así que no hay necesidad de un ícono de hambuerguesa. Las dos columnas del diseño se reducen a una sola cuando se visualiza el sitio en un dispositivo móvil.
22. LifeSeasons
Un excelente uso del color y una tipografía grande, en combinación con coloridos botones de llamada a la acción y cuadrículas fluidas, son las principales características del sitio web de LifeSeasons.
Por este motivo, es fácil comprar los suplementos que ofrece o averiguar más sobre ellos sin importar qué dispositivo estés usando para ver el sitio.
23. Open War
El sitio de Open War no solo es adaptable, sino que también ofrece otros detalles visualmente atractivos mediante microinteracciones que ocurren cuando pasas el cursor por encima de varias opciones del menú.
Las microinteracciones son visibles incluso en las pantallas pequeñas. Sin embargo, las opciones están escondidas tras un tradicional ícono de hamburguesa para que no causen demasiada distracción.
24. Philadelphia Criminal Defense Lawyer
El sitio web adaptable de Lloyd Long es un excelente ejemplo del uso de colores brillantes para añadir énfasis visual a las llamadas a la acción, que funcionan muy bien en los dispositivos móviles.
Igualmente, el formulario de consultas funciona muy bien gracias a sus campos amplios y al botón en el que es fácil hacer clic.
25. Rival Fitness
Rival Fitness tiene una página de inicio minimalista y opta por un patrón de fondo simple, en lugar de una gran imagen de fondo, para la versión móvil.
Resulta fácil acceder a otras áreas del sitio web con los botones que aumentan ligeramente de tamaño en las pantallas pequeñas, mientras que el menú queda oculto tras un ícono de hamburguesa.
Más ejemplos de diseño web adaptable
Espero que esta colección de ejemplos de diseño web adaptable te haya parecido útil. Para ver más buenos ejemplos, revisa estos artículos sobre plantillas para diseño web disponibles en Envato Elements y GraphicRiver.
- Temas de WordPress Los 21+ mejores temas adaptables de WordPress (para el 2018) Brenda Barron
- Diseño web adaptable Las 20 mejores plantillas para diseñar sitios web adaptables en HTML5 para negocios Brenda Barron
Inspírate con estos ejemplos de sitios web adaptables para negocios
Los ejemplos de arriba son solo la punta del iceberg en lo que respecta a ejemplos de sitios web adaptables, pero esperamos que te hayan servido de inspiración para dar el primer paso y asegurarte de que tu sitio web sea adaptable. Comienza por elegir una plantilla adaptable o un tema adecuado para tu sitio y luego aplica nuestros consejos de diseño web para crear tu nuevo sitio web con facilidad.
