¿Contenido como la página completa o solo el área de contenido?

Esta decisión debe tomarse de un sitio a otro , dependiendo de la situación. Sin embargo, mediante el uso de un diseño móvil primero (es decir, en orden, no en importancia), esta decisión se puede tomar más fácilmente.

La forma más fácil de obtener los mejores resultados es comenzar con lo esencial. Al comenzar con el tamaño de pantalla más pequeño que planeamos admitir, sabemos que estamos prestando atención a los aspectos más vitales de nuestro sitio o aplicación, y el resto es jugoso.

Aquí hay una estructura HTML estándar de una página con una sección de contenido principal y una barra lateral como referencia:

<div class="main">
    <div class="content">
         <!-- All of your body's content, the bulk of the page -->
    </div>
    <aside class="sidebar"> <!-- I use an aside here, but it could be something else -->
         <!-- Sidebar menu's content-->
    </aside>
</div>

Entonces la pregunta es: "¿Qué hago con la barra lateral cuando la pantalla es demasiado pequeña para caber?"

En mi blog personal, decidí que, si bien quiero que la gente vea el contenido del menú de la barra lateral, no es tan importante como el contenido principal. Como tal, comencé colocándolo debajo de mi contenido principal. Cuando haya espacio suficiente, volverá a subir junto al contenido principal para que sea visible mientras se lee. Esta es también la técnica más común que veo cuando la barra lateral es lo suficientemente importante como para tenerla en el móvil.

_{El contenido de la "barra lateral" va debajo del contenido principal en el móvil ( izquierda ) y actúa como una barra lateral cuando puede encajar bien ( derecha ).}

Este enfoque también funciona muy bien para algo como citas, comentarios y barras laterales de sugerencias útiles. La única diferencia sería que se puede insertar un enlace para que los usuarios móviles se desplacen automáticamente a la cita o comentario.

A veces, el contenido de la barra lateral puede actuar más como una navegación, en cuyo caso, colocarlo sobre el contenido principal en el dispositivo móvil es probablemente una mejor decisión, si no solo colocarlo en un menú fuera del lienzo. En este caso, puedo cambiar el orden de .contenty .sidebarcolocar la barra lateral sobre el contenido principal.

El uso de un menú fuera del lienzo también es una técnica válida para algunos sitios, según el contenido de la barra lateral. La navegación, como se mencionó, es excelente para esto, pero si se hace bien, también se puede usar para algunos tipos de contenido. Al usar menús fuera del lienzo, es importante tener en cuenta que menos personas, en términos generales, verán el contenido en lugar de algo en la página principal. Por supuesto, diseñarlo y posicionarlo de una manera fácil de usar es importante como siempre.

En resumen, casi siempre uso una estructura HTML similar a la anterior, pero el comportamiento del menú de la barra lateral para dispositivos móviles varía según el contenido de la barra lateral. El uso de un enfoque móvil primero puede ayudar a que esta decisión sea más fácil de tomar.

_{Parte de esto se tomó de mi publicación de blog sobre diseño receptivo , que proporciona más información sobre temas relacionados.}

Usualmente uso la barra lateral para mostrar enlaces como si fuera un menú. Normalmente hago la barra lateral como en iOS, separada, tienes que hacer clic para ver el contenido. Pongo los enlaces que, o para mí, son importantes para el usuario, por ejemplo: Inicio, Acerca de, Contacto, Perfil, Configuración,... o similares. Me gusta asegurarme de que el usuario lo encuentre, pero también me gusta no colocarlo como una estructura de dos columnas, me gusta centrarme en el contenido.

Espero que entiendas :)

Creo que esto depende del contenido, el contexto y los objetivos del sitio.

Cuanto más clara sea la diferenciación entre módulos que sirven para diferentes propósitos, mejor.

Recuerda que la proximidad en el diseño juega un papel en cómo relacionamos las cosas. Si dos cosas están cerca, las percibimos como relacionadas. Si están separados/separados, deben estar separados.