Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Business
  2. Responsive Web Design
Business

Los 25 mejores ejemplos de sitios web de negocios con diseño adaptable

by
Length:MediumLanguages:
This post is part of a series called How to Make Responsive Business Websites (Tutorial Guide).
12 Important Advantages of Responsive Web Design
How to Make Responsive WordPress Websites (With Themes)

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.

Andersson Wise Architects Responsive Web Design Example

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.

Andersson Wise Architects Mobile

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.

Stephen Caver

También usa una tipografía agradable y limpia, así como bastante espacio vacío para que el diseño no se vea recargado.

Stephen Caver mobile

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.

Food Sense

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.

Food Sense mobile

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.

Made By Hand Responsive Website Example

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.

Made By Hand mobile

5. Skinny Ties

Skinny Ties es un sitio de comercio electrónico, así que el diseño adaptable es crucial.

Skinny Ties Responsive Design Example

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ú.

Skinny Ties mobile

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.

White Lotus Aromatics

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.

White Lotus Aromatics mobile

7. The Boston Globe

Si tienes mucho contenido para compartir en tu sitio, toma como referencia The Boston Globe.

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í.

The Boston Globe mobile

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.

Starbucks

Sus botones también funcionan muy bien en pantallas pequeñas, de manera que es fácil verlos y hacer clic en ellos.

Starbucks mobile

9. Sasquatch!

El sitio web adaptable del festival musical Sasquatch es un excelente ejemplo de sliders adaptables.

Sasquatch Responsive Website Example

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.

Sasquatch mobile

10. Tattly

Esta tienda en línea que vende tatuajes temporales simplifica muy bien la experiencia de pago en dispositivos móviles.

Tattly

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.

Tattly mobile

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.

Cantina Valpolicella Negrar

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.

Cantina Valpolicella Negrar mobile

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.

More Hazards More Heroes

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.

More Hazards More Heroes mobile

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.

Illy Italian Coffee

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.

Illy Italian Coffee mobile

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.

Sweet Hat Club

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.

Sweet Hat Club mobile

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.

Alessandro Dagnano

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.

Alessandro Dagnano mobile

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.

Authentic Jobs

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.

Authentic Jobs mobile

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.

The DO Lectures

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.

The DO Lectures mobile

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.

St Pauls School

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.

St Pauls School mobile

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.

ASU Online

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.

ASU Online mobile

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.

Rally Interactive

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.

Rally Interactive mobile

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.

Browns Court Bakery

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.

Browns Court Bakery mobile

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.

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.

LifeSeasons mobile

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ú.

Open Wear

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.

Open Wear mobile

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.

Philadelphia Criminal Defense Lawyer

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.

Philadelphia Criminal Defense Lawyer mobile

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.

Rival Fitness

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.

Rival Fitness mobile

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.

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.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.