Cabeceras y logotipos sensibles - Consejos y escollos

El concepto de diseño web sensible ha permeado la web y se ha convertido en un elemento básico para los desarrolladores frontend. No se puede negar el valor del diseño responsivo en el mundo moderno, pero hay algunas dificultades para entender cómo diseñar diseños responsivos correctamente..

El tema puede extenderse porque hay muchas áreas únicas de un sitio web, pero centrarse en elementos individuales puede ayudarlo a comprender mejor los objetivos de un usuario y cómo esos objetivos se pueden lograr con un diseño responsivo..

Me gustaria cubrir Consejos de diseño para encabezados, logotipos., y menús de navegación, ya que pertenecen al diseño responsivo. Tome estas sugerencias como se aplican a su propio trabajo y asegúrese de diseñar sus interfaces teniendo en cuenta el comportamiento del usuario.

Barras de navegación más delgadas

En pantallas grandes, es normal tener encabezados grandes, quizás incluso encabezados de gran tamaño con niveles de enlace de múltiples niveles. Pero las pantallas más pequeñas no tienen el mismo espacio, y deben restringirse según sea necesario.

Dado que las aplicaciones móviles nativas suelen tener encabezados fijos, Esta es una práctica común en el diseño responsivo también. Un encabezado fijo también debe encogerse cuando está en dispositivos más pequeños: esto deja más espacio para el contenido, pero aún así brinda a los lectores acceso directo al encabezado y la navegación.

Tomemos, por ejemplo, el diseño de Cartoon Brew en un monitor de tamaño completo y en un dispositivo móvil.

En el punto de interrupción de 600px, la navegación se reduce a casi la mitad de su altura en la página. Esto hace que tanto el logotipo como el menú de navegación seleccionable sean más pequeños, pero están mucho más proporcional al espacio de pantalla relativo.

También tenga en cuenta que Cartoon Brew tiene un cuadro desplegable como menú sensible en la pantalla móvil. Esto significa que contenido superpuesto en la página cuando se abre, por lo que es importante dejar mucho espacio para esto.

Un ejemplo similar se puede encontrar en el sitio web de Jacksonville Art Walk. 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 porque la barra de navegación más delgada deja más espacio para el contenido en una pantalla móvil más pequeña.

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

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

Al diseñar un encabezado de respuesta siempre considere espacio de pantalla general mientras estiliza la barra de navegación. Si no desea que el encabezado permanezca fijo, está bien, pero es posible que desee reducirlo un poco para ahorrar espacio en la parte superior de la página.

Iconificar el logo

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

Esta es una técnica poderosa para encabezados de respuesta porque no siempre hay suficiente espacio para un logotipo completo. Pierde algo del brillo 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 limpio y sensible..

Consulte el logotipo de Web Designer News y vea cómo cambia a medida que cambia el tamaño del navegador..

Tal vez no todos reconocerán ese ícono cuando visiten el sitio por primera vez, pero gracias a reconocimiento de patrones esto no es un gran problema.

Las personas han estado en Internet el tiempo suficiente para saber que la esquina superior izquierda de la página suele estar reservada para un logotipo. Este pequeño icono rosado también se usa en el favicon, por lo que es fácil sacar algunas conclusiones sin profundizar demasiado en el sitio..

No siempre es necesario confiar en los gráficos para esta técnica de logotipo condensado. El encabezado de Young And Hungry usa un texto en verde brillante para el logotipo que eventualmente se condensa al texto "Y&H".

Es posible que esto no funcione en todos los sitios si la marca no es fácil de reconocer como letras individuales. Pero va a mostrar que los logos. se puede hacer más simple en ambos gráficos y texto, y ambas variantes ocupar menos espacio en pantallas más pequeñas.

Manejo de fondos de pantalla completa

Muchas páginas de destino utilizan fondos de pantalla completa para atraer más atención. Esta es una técnica poderosa pero a menudo funciona mejor en monitores grandes.

Entonces, ¿cómo manejar esto en una pantalla más pequeña? En general, los diseñadores ya sea quitar la imagen de fondo más allá de un cierto punto de ruptura, o la propia imagen se vuelve a alinear encajar en la ventana.

Cap Radio Raffle utiliza esta técnica en su página de inicio. La imagen de fondo mantiene el punto focal a la vista En todo momento, sin importar cuánto se cambie el tamaño de la pantalla..

Este tipo de solución típicamente requiere algún posicionamiento CSS Pero es realmente simple cuando aprendes el truco. Sólo mantener el punto focal a la vista en todo momento, y cambiar el tamaño del contenedor de imágenes para encajar en proporción con el dispositivo.

Más allá de fondos grandes por razones estéticas, también puede usar imágenes grandes para el contenido de la página. La página de inicio de Mashable utiliza un fondo de imagen destacado para la historia principal que abarca todo el diseño.

Su diseño de respuesta comprime la imagen mientras manteniendo un punto focal central. Es difícil hacer esto porque la imagen mostrada cambia cuando la historia cambia, por lo que las fotos deben curarse con cuidado. La solución de Mashable sigue siendo un excelente método para manejar fotografías en pantalla completa para diseños de blogs y revistas cuando se diseñan correctamente.

Simplificar la navegación

Cuando la renovación de pantallas más pequeñas, mantener tantos enlaces como sea posible en la navegación, y hazlo fácilmente accesible. Esto significa que es posible que deba abandonar algunos enlaces si tiene menús desplegables de varios niveles.

Aunque si tiene la estrategia correcta, todavía es posible mantener todos los desplegables intactos. Por ejemplo, Kidscreen usa un menú desplegable con iconos pequeños de flecha Indicando subenlaces en el menú responsivo..

Muchas personas discuten contra el menú de hamburguesas, pero he llegado a aceptarlo como un elemento necesario para los menús de navegación largos. Simplemente funciona, y la mayoría de los usuarios de teléfonos inteligentes lo han entendido como "el botón del menú".

De hecho, le resultaría difícil encontrar un sitio receptivo que no dependa del menú de hamburguesas de tres barras. CyberChimps es un gran ejemplo que utiliza un menú desplegable vertical en lugar de una diapositiva.

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

Con Más área para hacer clic y texto de enlace más grande, El proceso de navegar por las páginas se vuelve mucho más simple. Intente seguir esta filosofía con todo su encabezado sensible, y sus diseños mejorarán drásticamente..

Construye tu propio

Con estos consejos a su disposición, no debería suponer ningún problema crear encabezados sensibles y utilizables. Si bien hay muchas herramientas para ayudarlo, la única manera de entender realmente es a través de la práctica..

¡Así que llévate estas técnicas y comienza a construir sitios web! También he enumerado un puñado de recursos adicionales para encabezados de respuesta que puede consultar a continuación..

• Crear un menú de navegación receptiva de CSS móvil básico (teamtreehouse.com)
• Las mejores prácticas para encabezado de sitio web responsivo (ux.stackexchange.com)
• ¿Cómo puedo hacer que mi imagen de encabezado responda correctamente?? (stackoverflow.com)