Ejemplos de diseño web receptivo con consejos y trucos CSS

El diseño receptivo se está convirtiendo lentamente en sinónimo del diseño web. Con el aumento continuo en el uso de teléfonos inteligentes y tabletas, el enfoque receptivo a la web está aquí para quedarse. Pero sigue siendo una técnica relativamente nueva con algunos baches de velocidad y obstáculos que superar. A continuación, encuentre algunos de mis ejemplos favoritos de diseño web receptivo junto con algunos consejos de código para comprender mejor las técnicas utilizadas.

Descargo de responsabilidad : Va a ser bastante nerd. Si es nuevo en el diseño receptivo, es posible que desee comenzar con Diseño receptivo en el mundo real (Parte 1) o Diseño receptivo en el mundo real (Parte 2: para diseñadores y codificadores) .

1. Contenido que responde al tamaño de su pantalla (bostonglobe.com)

Boston Globe tiene uno de los sitios web receptivos más notables. Lanzado en 2011, estableció la barra muy alta para que todos los sitios receptivos lo sigan. Si bien hay muchos aspectos del sitio que se hacen excepcionalmente bien, me gustaría centrarme en un pequeño detalle que se realiza de manera simple y eficiente. El clima se muestra en la parte superior izquierda del menú en todo momento, y la cantidad de información que ve depende del ancho de su pantalla. En el ancho máximo de 1232px, se ve la temperatura en una fuente grande (39px) serif, con la descripción del clima y una ilustración para representar la descripción. El clima

es flotante: a la izquierda, y la ilustración del clima se recorta con la combinación de desbordamiento: oculto e inferior: -50px. Todas las cosas bastante estándar en las que la mayoría de los usuarios no pestañearían.

          @solo pantalla de medios y (min-width: 810px) {
         
          . Clima {float: izquierda; Altura: 7em; Ancho: 55%; desbordamiento: oculto; }
.weather img {izquierda: 0; Abajo: -50px; Max-Width: 181px;  }
.Weather-Temp {float: izquierda; Font-Family: Georgia, serif; tamaño de fuente: 3.9em; }
.Weather Nav {float: izquierda; }
         
          }

A medida que cambia el tamaño de su pantalla y llega a un ancho de 809px, el logotipo de Boston Globe se acerca demasiado a la ilustración del clima, y el sitio comienza a responder. La ilustración se encoge (ancho máximo: 120px). La gran fuente de temperatura serif se convierte en una pequeña fuente sans-serif (11px) en línea con la descripción del clima. Además, el clima obtiene una posición: absoluta y se desliza hacia la parte superior del encabezado.

           @solo pantalla de medios y (Min-width: 620px) {
          
           . Clima {posición: static; }
.weather img {izquierda: 1%; MAX-WIDTH: 120px; arriba: auto; }
.Weather-Temp {Font-Size: 1.1em; }
.Weather Nav {posición: absoluto; arriba: 1em; }
          
           }

A medida que continúa reduciendo su navegador a un ancho de 619px, el logotipo se desliza hacia la izquierda, la ilustración del clima se hace más grande (ancho máximo: 45.833% del contenedor) y se mueve a la parte superior del encabezado (posición: absoluto; arriba: 1em;).).

           @Media solo pantalla y (Min-Width: 480px) {
          
           . Weather {Position: Absolute; arriba: 1em; }
.weather img {izquierda: -10%; arriba: -40px; Max-Width: 45.833%; }
.Weather Nav {posición: relativo; flotante: izquierda; }
          
           }

La reducción de su pantalla aún más pequeña a 479px centra el logotipo y reduce el clima a una ilustración ligeramente mayor (ancho: 75% del contenedor) y la temperatura. La descripción del clima desaparece con un valor negativo a la izquierda.

           @Media solo pantalla y (Min-Width: 380px) {
          
           . Weather {Width: 75%; }
.Weather-Cond {izquierda: -1000em; }
          
           }

Este ejemplo de diseño receptivo es muy sencillo y eficiente. Todo se realiza con consultas de medios, algunas CSS simples y gran atención al detalle.

2. Menús inteligentes (FutureOfWebDesign.com)

El sitio web del futuro del diseño web se basa en una red receptiva sólida. Con código completo y preciso, el sitio web hace honor a su nombre. El menú en tabletas y tamaños móviles es lo que realmente me impresiona. A medida que escala su navegador hacia abajo, el menú desaparece y se reemplaza con un pequeño icono de menú en la parte superior izquierda. El menú luego se desliza hacia adentro y hacia afuera del lado izquierdo de la pantalla. Las opciones de menú están en

s dentro de una

s son todos los que se muestran en línea y flotan: izquierda para hacer un menú en línea simple que tenga un sistema flexible para los cambios receptivos en el futuro en tamaños más pequeños.

@solo pantalla de medios y (min-width: 48em) {

. Nav-List {posición: absoluto; } .nav-list li {display: inline-block; flotante: izquierda; }

}

En un ancho de 767px, el menú colapsa para que pueda esconderse y mostrar desde el lado izquierdo de la pantalla. Esto se realiza con un valor de izquierda: -80% que es igual al ancho: 80% del contenedor de menú. Los menús
S también se acumulan con el atributo de pantalla: bloqueo y las etiquetas dentro de algunos cambios de color y una imagen de fondo de una flecha.

@Media solo pantalla y (Min-Width: 20em) {

. Nav-List {izquierda: -80%; Ancho: 80%; } .nav-list li {display: block; }

}

Cuando se hace clic en el icono del menú, usan la nueva transformación de la técnica de transición CSS3: Traducir (80%, 0). El 80% es el valor X que es igual a la izquierda: -80% del contenedor de menú. El cuerpo también obtiene el atributo Overflow-X: Oculto para que el área de contenido principal pueda deslizarse sin agregar una barra de desplazamiento horizontal. } .js-Menu-open .wrapper {

@media screen and (max-width:20em) {

.js-menu-open body { overflow-x:hidden; } .js-menu-open .wrapper {

-WebKit-Transform: traduce (80%, 0); -Moz-transform: traducir (80%, 0); -ms-transform: traducir (80%, 0); -o-transform: traducir (80%, 0); transformar: traducir (80%, 0); -Webkit-transform: traduce3D (80%, 0,0); -Moz-Transform: traduce3D (80%, 0,0); -ms-transform: traduce3D (80%, 0,0); -O-transform: traduce3D (80%, 0,0); transformar: traduce3D (80%, 0,0);

}

}

Esta transición en realidad ocurre debido a un poco de jQuery que agrega la clase .js-Menu-Open a la etiqueta cuando se hace clic en el icono del menú.

$ (". Nav-Menu"). Toggle (

function () {

$ (‘html"). AddClass ("js-Menu-open");

}, function () {

$ (‘html’). RemoveClass ("js-Menu-open");

}

}

= En general, es una solución bastante simple y ingeniosa para una pieza de funcionalidad aparentemente compleja. Si bien realmente disfruto el efecto, el nerd de usabilidad en mí tiene un ligero problema al ocultar la navegación principal de la tableta o el usuario móvil. De todos modos, el sitio web en general es un gran ejemplo de diseño receptivo.
3. Imágenes y videos que responden correctamente (chengcrowns.com)
El diseño receptivo se trata de servir el contenido correcto para el tamaño de la pantalla correcto. Con demasiada frecuencia, veo videos e imágenes que no cambian de tamaño correctamente a las tabletas o en los tamaños de pantalla móvil. En Brolik, recientemente completamos un sitio web de comercio electrónico receptivo para la Compañía Cheng Crowns donde implementamos algunas soluciones para solucionar estos problemas. Desarrollamos un complemento jQuery llamado Responsive IMG que cambia el atributo SRC de una imagen en función del ancho de su contenedor. En términos de Layman, el sitio muestra una imagen de tamaño adecuado basada en el tamaño del navegador. Con el uso de un archivo PHP, el IMG receptivo crea nuevas imágenes en diferentes tamaños la primera vez que se necesitan y las coloca en su servidor. Por lo tanto, puede agregar IMG receptivo a cualquier sitio, sin crear nuevas imágenes en diferentes tamaños. En las coronas de Cheng, a un ancho completo de 1400px, los pancartas tienen mucho espacio horizontal para trabajar y el texto tiene el tamaño adecuado. Pero a medida que encoge la pantalla, el texto de descripción en el banner se vuelve demasiado pequeño para leer. Cuando la imagen de banner llega a un ancho de 767px, servimos una imagen de banner más pequeña con IMG receptivo y una línea de jQuery:
$ (". Slider ul Li"). Find ("img"). ResponsiveImg ({Breakpoints: {"_ pequeño": 767}});
En general, es una solución simple para un problema común que la mayoría de los diseñadores web encuentran al diseñar sitios web receptivos. De esta manera, un usuario móvil o de tableta verá imágenes de tamaño específicamente para su pantalla de tamaño. Esto le permite servir el contenido correcto a los usuarios adecuados con un mínimo esfuerzo y configuración. También utilizamos una solución simple para hacer que los videos respondan en las coronas de Cheng. Siempre estoy decepcionado cuando estoy en mi teléfono y los videos no se reducen correctamente. Así que aquí está nuestra solución, y es tan simple como estas tres líneas de jQuery:

$ (Window) .on ("Ready Load Reize", function () {

var videOwidth = $ ("#videOplayer"). Parent (). Width (); var videoHeight = videowidth*.5625; $ ("#VideOplayer"). Ancho (VideoWidth) .Height (VideoHeight);

});

Básicamente, en la ventana listo, cargue o cambia de tamaño, esta función toma el ancho del contenedor de video . Luego multiplica que por 0.5625 obtiene la relación de aspecto correcta para la altura y cambia el tamaño del video adecuadamente. Vale la pena señalar que cuando se reproduce el video, se expande a la pantalla completa. Muy simple y totalmente perfecto.
Conclusión

El diseño receptivo continuará creciendo a medida que la web continúe diversificando. Los usuarios continuarán accediendo a la web desde dispositivos que no sean computadoras de escritorio, y los diseñadores y desarrolladores web deben planificar en consecuencia. Es importante tener en cuenta los ejemplos de diseño receptivos anteriores con soluciones simples y planificación inteligente, puede crear una experiencia receptiva para adaptarse a todos los tamaños y resoluciones de pantalla de hoy y mañana.

¿Quieres más?

Visite otro artículo que escribí sobre dos técnicas para crear un menú de diseño web receptivo Con el HTML, CSS y JQuery reales para que suceda. || 144

Ejemplos de diseño web receptivo con consejos y trucos CSS

¿Quieres más?