Responsive Headers & Logos

El concepto de diseño web de respuesta ha calado en la web, y se convierten en un elemento básico para los desarrolladores de frontend. No hay lo niega el valor de diseño de respuesta en el mundo moderno, pero hay cierta dificultad para entender completamente cómo diseñar diseños que responden correctamente.

El tema podría seguir largamente, porque hay muchas áreas únicas de un sitio web, pero centrándose en los elementos individuales pueden ayudar a entender mejor los objetivos de un , y cómo estos objetivos pueden lograrse con el diseño de respuesta.

Herramientas Web Para Los Diseñadores

Me gustaría cubrir consejos de diseño para las cabeceras, logotipos , y menús de navegación , que se relacionan con el diseño de respuesta. Tome estas sugerencias, ya que se aplican a su propio trabajo y asegúrese de diseñar sus interfaces con el comportamiento del en mente.

NavBars más delgadas

En las pantallas grandes, es normal tener grandes cabeceras, tal vez incluso cabeceras de gran tamaño con niveles de enlace de varios niveles. Pero las pantallas más pequeñas no tienen el mismo espacio, y deben ser restringidos, según sea necesario.

Desde aplicaciones móviles nativas suelen tener encabezados fijos , esto es una práctica común en el diseño de respuesta también. Una cabecera fija también debe encogerse cuando en dispositivos más pequeños: esto deja más espacio para el contenido, pero aún así da a los lectores directo a la cabecera y la navegación.

Tomemos por ejemplo el diseño de dibujos animados con cerveza en un monitor de tamaño completo, y en un dispositivo móvil.

Al 600px punto de interrupción, la navegación se reduce a casi la mitad de su altura en la página. Esto hace que tanto el logotipo y el menú de navegación se puede hacer clic más pequeño, pero son mucho más proporcional al espacio de la pantalla relativa.

También considere que la historieta con cerveza tiene un cuadro desplegable que en el menú de respuesta en la pantalla del móvil. Esto significa que se superpone el contenido de la página cuando se abre, por lo que es importante dejar suficiente espacio para esto.

Un ejemplo similar se puede encontrar en el Jacksonville Art Walk sitio web. La barra de navegación superior permanece fija mientras se desplaza, pero se encoge en dispositivos más pequeños . Esto es mejor para el diseño de respuesta debido a que la barra de navegación más delgado deja más espacio para el contenido en una pantalla móvil más pequeño.

Cada eslabón de la barra de navegación tiene un icono relacionado unido al enlace de texto. Esto se ve muy bien en un monitor de pantalla ancha, pero es demasiado detallada para pantallas más pequeñas.

Los cambios de navegación Art Walk a un menú desplegable con enlaces fijos de todo el 770px punto de interrupción. Los iconos están ocultos en el menú desplegable porque serían demasiado pequeños y demasiado estrecha en dispositivos más pequeños.

Al diseñar un encabezado de respuesta siempre tenga en cuenta el espacio total de la pantalla mientras que el estilo de la barra de navegación. Si no desea que el encabezado de mantenerse fijo que es totalmente bien, pero aún podría querer reducir su tamaño un poco de dejar espacio en la parte superior de la página.

El logotipo iconificar

La mayoría de los logotipos incorporan un texto y un icono o gráfico para representar a la marca. Esto significa que siempre se puede iconificar (sí, es una palabra real ) este tipo de logotipos abajo a un símbolo de su versión completa.

Esta es una técnica poderosa para las cabeceras de respuesta, ya que no siempre hay suficiente espacio para un logotipo completo. Usted hace perder parte de la ostentación y el glamour de un logotipo de tamaño completo, pero ese es el precio que podría tener que pagar por un diseño que responde limpia.

Salida del logotipo para la Web Designer Noticias y ver cómo cambia a medida que cambia el tamaño del navegador.

Tal vez no todo el mundo reconocerá que el icono cuando se visita por primera vez el sitio, pero gracias al reconocimiento de patrones que esto no es un problema enorme.

La gente ha estado en el Internet el tiempo suficiente para saber que la esquina superior izquierda de la página es típicamente reservado para un logotipo. Este pequeño icono de color rosa también se utiliza en el favicon, por lo que es fácil de hacer algunas conclusiones sin cavar demasiado lejos en el sitio.

No siempre se necesita confiar en los gráficos de esta técnica logotipo condensada. La cabecera de la joven y hambriento utiliza el texto de color verde brillante para el logotipo que a la larga se condensa con el texto "Y & H".

Concedido esto puede no funcionar para todos los sitios si la marca no es fácil de reconocer las letras como individuales. Pero sirve para demostrar que los logos pueden ser más simples en ambos gráficos y texto, y las dos variantes ocupan menos espacio en las pantallas más pequeñas.

Manejo de Fondos de pantalla completa

Muchas páginas de destino utilizan completos fondos de pantalla para llamar más la atención. Esta es una técnica poderosa, pero a menudo funciona mejor en monitores de gran tamaño.

Así que, ¿cómo manejar esto en una pantalla más pequeña? En general, los diseñadores ya sea eliminar la imagen de fondo más allá de cierto punto de interrupción, o la propia imagen consigue reajustado para encajar en la ventana.

Cap Radio Rifa utiliza esta técnica en su página principal. La imagen de fondo se mantiene el punto focal a la vista en todo momento, no importa cuánto se cambia el tamaño de la pantalla.

Este tipo de solución por lo general requiere un poco de posicionamiento CSS , pero es muy simple cuando usted consigue la caída de ella. Sólo mantener el punto focal a la vista en todo momento, y cambiar el tamaño del contenedor de la imagen para encajar en proporción con el dispositivo.

Más allá de los grandes fondos por razones estéticas, también puede utilizar imágenes de gran tamaño para el contenido de la página. La página de inicio de Mashable utiliza un fondo de imagen ofrecida por la historia principal que se extiende por todo el trazado.

Su diseño sensible comprime la imagen , mientras que mantener un punto focal central . Es difícil hacer esto debido a que la imagen ofrecida cambia cuando cambia la historia, por lo que las fotos tienen que ser curada con cuidado. La solución de Mashable es todavía un gran método de manipulación de fotos a pantalla completa para los blogs y diseños de la revista cuando se diseñan adecuadamente.

Simplificar la navegación

Cuando la modernización para pantallas más pequeñas, mantener el mayor número posible de enlaces en la navegación, y que sea de fácil . Esto significa que puede que tenga que deshacerse de algunos enlaces si tiene menús desplegables de varios niveles.

Aunque si usted tiene la estrategia correcta es todavía posible para mantener a todos los menús desplegables en el tacto. Por ejemplo Kidscreen utiliza un menú flotante con pequeños iconos de flecha que indican subenlaces en el menú de respuesta.

Muchas personas argumentan en contra del menú de hamburguesa , pero he llegado a aceptar como un elemento necesario para largos menús de navegación. Simplemente funciona, y ha llegado a ser ampliamente entendido por la mayoría de los s de teléfonos inteligentes como "el botón de menú".

De hecho, estaría en apuros para encontrar un sitio sensible que no se basa en el menú de hamburguesa de tres barras. CyberChimps es un gran ejemplo que utiliza un menú desplegable vertical, en lugar de un slide-in.

La estructura de navegación para CyberChimps se reorganizó a deslizarse hacia abajo en la parte superior de la página. El menú cae desde arriba con grandes elementos de bloque de enlaces .

Con un área mayor para hacer clic y mayor texto del enlace , el proceso de páginas que navegan vuelve mucho más simple. Tienen como objetivo seguir esta filosofía con toda su cabecera de respuesta, y sus diseños mejorarán drásticamente.

Construye tu propio

Con estos consejos a su disposición debe ser ningún problema para la construcción de las cabeceras de respuesta utilizables. Si bien hay un montón de herramientas para ayudarle a cabo, la única manera de entender realmente es a través de la práctica.

Así que toma estas técnicas con usted y empezar a construir sitios web! También he enumerado un puñado de nuevos recursos para los encabezados de respuesta que se puede comprobar a continuación.