Cómo planificar un acuerdo de contenido para un diseño responsivo
En un post reciente, discutí cómo contenido visual se relaciona con plano de diseño. Sin embargo, este tema es muy detallado y se divide en muchos subtemas, uno de los cuales es Organización visual para diseños sensibles..
En esta publicación, me gustaría profundizar en el contenido sensible para ver algunas de las mejores prácticas para reorganizar el contenido para pantallas más pequeñas. En el diseño de UI y UX, no hay una única respuesta correcta para cada proyecto, pero hay tendencias que funcionan bien, Y a partir de estas tendencias podrás construir tus propias ideas..
Reorganizar rejillas a las listas
Cada sitio usa algún tipo de cuadrícula ya sea que esté visible o no. El contenido en una cuadrícula sólida a menudo se agrupa en forma horizontal en monitores más amplios, pero esto no tiene sentido en dispositivos más pequeños. El mejor remedio es descomponer estas cuadrículas en pantallas más pequeñas, y convertir los artículos en listas.
Ejemplo 1: Ayuntamiento de Wellington
Eche un vistazo a la página web del Ayuntamiento de Wellington, que utiliza una serie de secciones de estilo de cuadrícula en la página de inicio.
Hay una pequeña presentación de diapositivas de enlaces cuadrados que reduce como la ventana del navegador cambia de tamaño. La sección de pie de página también se vuelve más pequeño, y eventualmente se convierte en una lista vertical de enlaces.
En teléfonos muy pequeños con un ancho de 320px necesita diseñar para el tamaño del dispositivo. En el caso de un iPhone, el dispositivo es más alto que ancho, por lo que tiene sentido organizar el contenido de esa manera.
Ejemplo 2: Mooyah Burgers
Eche un vistazo a la página de inicio de Mooyah e intente cambiar el tamaño del diseño. Hay una pequeña área de presentación de diapositivas que contiene tres elementos en una pantalla de escritorio, pero esto se encoge para mostrar solo un elemento en el móvil (agregar más diapositivas ocultas al widget).
Las dos cajas promocionales que anuncian la aplicación y el menú de Mooyah se mantienen fijas una al lado de la otra hasta que la pantalla se vuelva lo suficientemente pequeña para reorganizarlos verticalmente.
los “Conectate con nosotros!” La sección también reorganiza el contenido para que cada publicación social. consigue tanto espacio como sea posible. En términos generales, los monitores de pantalla ancha son los más anchos y las pantallas de teléfonos inteligentes son las más altas.
Ejemplo 3: Mercado temático
Al diseñar un diseño con una cuadrícula, debe considerar estilos de diseño ancho y alto Antes de escribir una sola línea de código. De esta manera usted estará preparado para construir puntos de interrupción que tengan sentido.
Una página con un diseño de cuadrícula completo debería reducir el tamaño de las cajas Antes de romperlos en una nueva línea. Por ejemplo, Theme Market tiene una ancho máximo fijo de 1240, y la cuadrícula contiene cuatro bloques por fila.
A medida que la pantalla se agranda estos bloques. reducir en ancho, pero eventualmente Descompostura a deja tres cajas por fila. En el tamaño más pequeño, obtienes una casilla por fila, y tiene mucho espacio para que el texto y las imágenes brillen.
Siempre hay un balance de Mantener tanta información a la vista como sea posible combinado con la necesidad de hacer el texto legible. Cuanto más construyas diseños de cuadrícula, más fácil será encontrar esto. balance de arreglo de contenido.
Ocultar o eliminar columnas
Monitores mas amplios y más soporte de navegador Permitir a los desarrolladores crear diseños increíblemente complejos. A menudo veo blogs con tres o incluso cuatro columnas que ocupan una buena parte de la pantalla.
Sin embargo, los dispositivos más pequeños necesitan un flujo de contenido que tiene sentido verticalmente. He encontrado dos opciones para manejo de barras laterales excesivas:
- Colóquelos debajo del contenido principal.
- Ocúltelos por completo
Ejemplo 1: Stop Press
Echa un vistazo a la página web de Stop Press. Tiene cuatro columnas verticales en mi monitor de escritorio.
La columna de la izquierda es un menú de navegación vertical, la siguiente columna es la columna de contenido principal con artículos recientes. Luego tenemos dos columnas de barra lateral diferentes llenas de extra “aparte” contenido.
A medida que la ventana del navegador cambia de tamaño, estas columnas reducir lentamente en tamaño. El primero en ir es la navegación a la izquierda que se oculta detrás de un ícono del menú de hamburguesas.
El siguiente punto de interrupción oculta la columna del medio junto con los botones superiores para compartir redes sociales. Luego, finalmente, en las pantallas más pequeñas, la barra lateral del extremo derecho desaparece por completo. dejando solo la columna central primaria de contenido.
Ninguno de los contenidos de la barra lateral aparece debajo del contenido principal. Sus completamente oculto a la vista, y esta es una opción perfectamente aceptable para reducir la carga de la página y para mantener la altura de la barra de desplazamiento en un tamaño decente.
Por otro lado, muchos blogs. mueve la barra lateral debajo del contenido principal como en Concept Art Empire, que incluye publicaciones relacionadas en la barra lateral que eventualmente caer debajo del contenido.
Ejemplo 2: Blog de Wishpond
El blog de Wishpond también elimina completamente la barra lateral Desde la pantalla en ventanas más pequeñas. Esta área de la barra lateral normalmente contiene publicidad, formularios de registro y enlaces de publicaciones relacionadas. Ninguno de este contenido es vital, pero puede agregar valor a los visitantes..
Me gusta seguir un enfoque híbrido donde muevo la barra lateral debajo del contenido, pero también oculto algunos elementos en la barra lateral más allá de un cierto punto de interrupción.
Por ejemplo, si tengo tres bloques de anuncios en el diseño completo, puedo ocultar dos de esos espacios publicitarios en el móvil. Esta hace que el contenido de la barra lateral sea accesible pero no desordena la página con contenido excesivo.
Ejemplo 3: Madame Gautier
También me gusta cómo Madame Gautier usa sus “Últimas noticias” barra lateral en la página de inicio. Eventualmente cae debajo del contenido, y toma una posición de vista completa en la pagina.
Casi todos los sitios web tendrán al menos una barra lateral en el diseño. Si se trata de una barra lateral de todo el sitio o simplemente algo que aparece en una plantilla de página, la estilo de diseño de lado a lado es popular porque encaja mas contenido en la pantalla.
Es tu elección como manejar el contenido. Puede bajar la barra lateral, ocultarla por completo o usar un híbrido de estas dos técnicas. Pero deberías hacer tu elección. Basado en la relevancia de la barra lateral., y es necesidad a la pagina.
Ajustar y comprimir márgenes
Siempre habrá un punto donde el contenido no puede ser comprimido más allá, y una sección necesita caer por debajo de la otra.
Por ajuste de márgenes Antes de bajar el contenido de la página, le da a los lectores una mayor variedad de contenido para elegir.
Ejemplo 1: un mundo
El pie de página en One World es un gran ejemplo. Tiene enlaces a pie de página en todo el sitio flotaron bien con un formulario de registro de correo electrónico a la izquierda.
A medida que el diseño cambia de tamaño, los márgenes y los rellenos entre estos elementos se reducen. Las columnas de enlace acercarse, y el formulario de registro se vuelve un poco más pequeño, también.
Más allá de cierto punto, tiene sentido soltar los enlaces debajo del formulario de registro, y dar el pie de página mucho espacio para respirar.
Sí, hace que la página sea más larga, y sí, se necesita más esfuerzo para desplazarse hacia abajo hasta ese punto, pero en estos puntos de interrupción más pequeños puede suponer que los usuarios están en dispositivos orientados verticalmente.
Ejemplo 2: Golden Isles
Otro ejemplo que me encanta es la página de inicio de Golden Isles con su estilo de navegación único. Cuando redimensionas la ventana del navegador los enlaces de navegación apretar juntos. Eventualmente ellos romper con una sola línea en dos filas, luego hacia abajo en columnas en el tamaño más pequeño.
Otros artículos en la página. sigue el mismo patrón. Este ejemplo demuestra el poder de redimensionar márgenes antes de reorganizar completamente el diseño.
Flujo vertical en pantallas más pequeñas
Contenido de la página debe fluir naturalmente, y alineamiento vertical tiene sentido en el móvil. Esto significa que debe considerar los bloques de contenido de la página para actualizar el estilo de contenido en consecuencia. Esto incluye párrafos, encabezados, blockquotes, listas desordenadas y también cuadros de contenido personalizados.
Ejemplo 1: BodyBuilding.com Single Post
Tomemos, por ejemplo, este post BodyBuilding que utiliza cajas pequeñas para mostrar diferentes entrenamientos de glúteos.
Estas cajas incluyen miniaturas en el lado derecho Para demostrar el ejercicio. En pantallas más pequeñas, estas miniaturas descomponerse en una nueva línea, y eventualmente apilar uno encima del otro.
Su CSS sensible debe tener en cuenta estos pequeños detalles para cada página del sitio web.
Ejemplo 2: Feria de la vanidad
Para un ejemplo más grande, visite la página de inicio de Vanity Fair que reorganiza completamente el deslizador de la historia presentada. En un escritorio de pantalla completa, los títulos de la lista de historias con una imagen destacada que se muestra al lado. A medida que el navegador cambia de tamaño, esta sección de historias principales se convierte en un carrusel deslizante.
La propia interfaz cambia completamente agregando navegación de puntos, flechas e imágenes destacadas para cada historia en la lista. Su lista completa de artículos es más “vertical”, pero este diseño es más difícil de operar en una pantalla móvil, por lo que cambiarlo a un carrusel deslizante es una mejor opción.
Pensar más sobre el flujo del usuario en lugar de su flujo de contenido. Contenido No siempre es necesario forzarse en un diseño vertical. En pantalla pequeña. Solo piensa en cómo organizar el contenido de una manera que soporta una experiencia de navegación vertical.
Pensamientos de cierre
El diseño receptivo es esencial en estos días, y cada diseñador y desarrollador web debe entender cómo funciona. Los visitantes esperan que todos los sitios web sean compatible con dispositivos móviles. Cuando me topo con un sitio web que no responde, me estremezco al ver esa barra de desplazamiento horizontal.
Siga los consejos en este post para Planificación de estrategias de diseño para reorganizar el contenido. para la mejor experiencia de usuario posible en todos los dispositivos.
