Inicio > Redes Sociales > 23 Ejemplos de Grandes Sitios de Diseño Web Responsive

23 Ejemplos de Grandes Sitios de Diseño Web Responsive

Si trabaja en la industria Web lo más probable es que haya prestado atención al diseño Responsive, que nos golpea como un tsunami. La palabra “Responsive” es casi tan caliente como “La Nube”, que ha sido en el sector de los proveedores de alojamiento durante los dos últimos años. La razón de la popularidad del diseño Responsive de los sitios web ahora está en la necesidad de creación de sitios web accesibles para los usuarios de los móviles, que están a punto de ser responsables del 18% de las solicitudes de Internet. Un buen ejemplo de esta tendencia es la repentina gran disponibilidad de los temas Responsive premium para WordPress que se venden como pan recién horneado.

 

StatCounter-mobile_vs_desktop-ww-monthly-200812-201308

Yo creo que las técnicas de diseño Web Responsive, listas para usar con temas Responsive y marcos, es probable que tengan un fuerte efecto negativo sobre la forma de construir los sitios web en el futuro. Muy pronto los clientes no aceptarán soluciones que no tomen en cuenta a los usuarios móviles y a las aplicaciones especiales, mientras que los sitios móviles todavía son opciones válidas para los grandes proyectos, supongo que lo Responsive está aquí para quedarse.

Como siempre la comprobación de lo que otros diseñadores han hecho puede ser una gran inspiración para sus propios proyectos. El diseño de páginas Web Responsive como respuesta a un enfoque que aún está bastante nuevo, y puede ser difícil imaginar muchas de las nuevas posibilidades que ofrece. Algunos diseños más sencillos responden simplemente a ampliar los gráficos, mientras que otros aplican diseños únicos para cada tamaño de pantalla estándar. A continuación he recopilado algunos ejemplos realmente impresionantes de sitios web, pero primero echemos un vistazo a como investigar un sitio Web Responsive y eche un vistazo a los diseños fantásticos. Este post será actualizado con más ejemplos y consejos.

 

La Forma de Comprobar de Forma Sencilla Todos los Diseños de un Sitio Web Responsive

 

Cuando busca inspiración para un mejor diseño, es importante ver cómo el diseño se va a representar en diferentes tamaños de pantalla.

Por supuesto, la mejor forma de ver los diseños de sitio Web Responsive es hacer una prueba en todos los diferentes navegadores, los tamaños de pantalla, los dispositivos, etc, que es necesario apoyar. Sin embargo, el efecto Responsive implementado por Media Queries funciona tan bien en un explorador con escritorio moderno si el tamaño de la ventana es cambiado. De esta manera puede simular cómo la presentación será presentada en diferentes dispositivos con una menor resolución en los visores.

Un camino bastante fácil es el de poner el tamaño de ventanas en el navegador para simular un visor específico ‘Responsive‘ como resizeMyBrowser. Esto permite que abra las ventanas en dimensiones predefinidas.

 

resizeBrowser

Otra herramienta bastante chula es ResponsivePx que trabaja en el mismo camino que resizeMyBrowser, pero tiene más control de los tamaños de ventana. Si tiene una necesidad específica esta trabaja para usted.

 

responsivePx

Realmente Geniales Diseños Web Responsive

 

Ahora es tiempo para obtener los ejemplos de la tabla. Les presento en cuatro tamaños típicos (ancho) 320px, 480px, 768px y 1024px. Sugerencia: Una muy buena manera de ver más diseños a la vez es con el uso de la herramienta de presentación Responsive por Matt Kersley que se muestra a continuación.

 

Herramienta de Matt Kersley

Si sus sitios Web Responsive son buenos y han sido excluidos abajo me gustaría tener noticias de usted y consideraré para añadirlos.

 

The Boston Globe

 

Boston Globe es un gran ejemplo Responsive que muestra como un diario puede ser diseñado y adaptado a los diferentes tamaños de pantalla de forma elegante.

 

The Boston Globe

The Boston Globe Responsive

Food Sense

 

Food Sense

Se trata de un diseño de estilo de revista que se adapta muy bien a los distintos tamaños de pantalla. Preste atención a la parte izquierda de la navegación que salta a la parte superior, donde se reduce la anchura.

 

Food Sense Responsive

Smashing Magazine

 

Smashing Magazine

Smashing Magazine es probablemente uno de los mejores y más avanzados diseños de sitios Web Responsive que he visto. Todos saben de este sitio, supongo, pero si no lo ha visto en varios estados Responsive, hay que ir y verlo. En las ventanas de arriba 1500px (ancho) el diseño tiene toda la navegación y la pone a la izquierda, haciendo un uso óptimo del espacio disponible. Intente probar el sitio en ResponsivePx y ver por ti mismo.

 

Smashing Magazine Responsive

Webdesigner Wall

 

web design wall

Webdesigner Wall es otro muy buen ejemplo de un buen diseño Responsive del blog que se puede hacer.

 

Web Designer Wall Responsive

Fork

 

Fork

Fork es una plataforma CMS y su sitio realmente muestra cómo el diseño Responsive se puede implementar con elegancia. El texto clave sigue siendo el lema en todos los modelos y me gusta que forma iconos que se utilizan para mostrar y las extensiones. A medida que la ventana está reduciendo el número de iconos se reduce, pero no es una opción ‘más extensiones’. Esta idea permite el sitio móvil para trabajar / convertir después los mismos principios de diseño como el diseño por defecto de los navegadores, pero de una manera amistosa en el móvil.

 

Fork Responsive

Colly

 

Mr. Simon Collins

Mr. Simon Collins Responsive

Bluegg

 

Bluegg

Bluegg también es un blog de diseño Responsive, pero más sencillo que los dos anteriores. La forma en que se hace es lo que vemos en la mayoría de los diseños de respuesta hasta el momento. El diseño es el mismo pero ampliado hasta el tamaño de la pantalla que es muy pequeña (tamaño del teléfono inteligente con alrededor de 640 píxeles). A continuación, la disposición se cambia a una columna y la barra lateral etc, que se coloca por debajo de la página principal.

 

Bluegg Responsive

Sweethatclub

 

The Sweetest Hat Club

Sweehatclub no se trata sólo de dulces sombreros… el diseño Responsive aquí es muy dulce y tiene cuatro únicas presentaciones.

 

SweetHat

Bootstrap

 

Bootstrap

Boostrap es un ejemplo de cómo el diseño de la columna y la navegación se pueden hacer Responsive de una manera fresca. En lugar de mostrar el menú todo el tiempo (tomando el espacio de más desplazamiento) se trata de un menú desplegable. Otra forma típica de hacer la navegación es utilizar un cuadro de selección como se ha visto anteriormente en Smashing Magazine.

 

Bootstrap Responsive

Heathlife

 

heatlife

Este sitio tiene una imagen completa con slider de fondo y el mapa giratorio en todos los tamaños y se ve muy hermosa.

 

heatlife Responsive

Love & Luxe

 

Love Luxe

La tipografía es muy fuerte en este sitio Responsive en todos los tamaños y en algunos muy bien para moverse en la navegación.

 

Love Luxe Responsive

Oliver Russell

 

Oliver Russell

Yo creo que la idea de tener la dirección de texto para la navegación al cambiar a vertical es genial. Sin embargo, he comprobado que se hace realidad mediante la utilización de imágenes y no se carga al cambiar el tamaño. Funciona cuando se carga la página en el tamaño de la pantalla por ejemplo, en un iPhone. También se debe tener en cuenta que el logotipo cambia de texto.

 

Oliver Rusell Responsive

Andersson-Wise Architects

 

Andersson Wise

Andersson Wise Responsive

Jchebly

 

jChebly

jChebly Responsive

Lancaster University

 

Lancaster University

Lancaster University Responsive

Palantir

 

Palantir

Palantir Responsive

Rachel Nabors

 

Latest Greatest

Latest Gratest Responsive

CSS Off

 

CSSOff

CSSOff Responsive

Open Medical Device Research Library

 

Archimedes

Archimedes Responsive

United Pixelworkers

 

United Pixelworkers

United Pixelworkers

dConstruct 2012

 

Playing with future

Playing with future 2

Performance Marketing Awards

 

PERFORMACE

PERFORMACE Marketing

 

Artículos relacionados:

 

Tema “Expression” Responsive de Fotografías para WordPress

+ 30 Herramientas útiles de Diseño Web Responsive

33 Estupendos Temas de Comercio Electrónico para WordPress

10 plantillas excelentes para OpenCart que sus clientes no pueden resistirse

Diseño Responsive – aprovechar el poder del Media Queries

+10 Temas de WordPress para Colegios, Escuelas y Universidades

+40 Grandes Temas de Fotografía Para WordPress

 

Temas Responsive para WordPress de ThemeForest

  1. 30 de septiembre de 2013 en 5:04 PM | #1

    Yo he utilizado Fork para varios clientes, y han quedado muy satisfechos con el resultado final.
    Saludos

  2. Cervantes
    11 de diciembre de 2013 en 3:47 PM | #2

    Chaval, antes de seguir escribiendo busca el libro de Lengua Española del colegio y repásalo, porque escribes como el culo.

  3. 20 de enero de 2014 en 9:49 PM | #3

    Hola muy bueno yo hice la página web de http://www.fotografiabogota.com con un diseño responsive y si que va muy bien, la fotografía profesional y demás es parte de nosotros porque no te pasas y ves como quedó el diseño responsive de la página web. un saludo

  4. 27 de febrero de 2014 en 7:36 PM | #4

    deberas que estan grandiosos estos diseños en verdad sirven de mucha ayuda a alguien que apenas empieza en este mundo de diseño web exitos

  5. 13 de abril de 2014 en 1:12 AM | #5

    Hola muy interesante e ilustrativo articulo, te invito a ver http://www.olimpicastereo.com.co de las pocas páginas comerciales de Colombia que ya aplica este concepto.

  1. No trackbacks yet.

Deja un comentario

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

Seguir

Recibe cada nueva publicación en tu buzón de correo electrónico.

Únete a otros 5.498 seguidores

%d personas les gusta esto: