Diseño Web: ¿Es buena idea centrar una sección de contenido?

Estoy indeciso bebiendo un refresco acerca de publicar esto como una respuesta, pero la respuesta que les daré, podría convertirla en una referencia más adelante cuando otros hagan esta pregunta similar.

Como dijiste, ya estás en la fase de diseño... Si seguiste un flujo de trabajo adecuado (ya que no mencionaste SI tenías una maqueta, una evaluación de contenido, un evento de estructura alámbrica), diré que este es un excelente ejemplo de por qué la PLANIFICACIÓN es clave para un sitio web eficaz. Ahora, como muchos, luchan para que su sitio funcione y se vea atractivo a la vista, pero enfrentan problemas con contenido mal diseñado y clientes insatisfechos.

Dicho esto en el párrafo anterior, dudo que cualquier respuesta sea útil. Digo que no trato de ser grosero, pero debe retroceder unos pasos y evaluar su contenido, estructura y LUEGO el diseño. Dado que no conocemos su carga de contenido, el plan futuro del sitio, cómo funciona y qué debe hacer, voy a asumir, según su pregunta, lo siguiente:

(incluya páginas como sobre nosotros, términos de uso, mi tablero, mi perfil, mis pagos que actualmente tienen una sola columna de contenido)

Por lo general, las personas usan elementos de navegación, pero es posible que tenga problemas en el ámbito de la tableta y el teléfono. Según lo citado anteriormente, menciona la moneda, por lo que tal vez evaluaría una barra lateral con un carrito. Nuevamente, no sé cuál es el contenido, cómo se está diseñando, no puedo hacer una sugerencia efectiva porque es posible que haya redundancia de contenido y si estoy en un sitio y veo lo mismo más de 4 veces, a menos que sea crucial para el sitio, Voy a suponer que estaba mal hecho.

Para responder al título de su pregunta: ¿Es una buena idea centrar una sección de contenido? Depende del diseño del sitio y de lo que quiera el cliente. Esa es otra cosa que no se ha mencionado. Afirmas que estás en la fase de diseño con este problema, pero en lugar de decidir el diseño, da un paso atrás y crea una estructura metálica. Juega con el contenido, si lo tienes. Si eres el propietario del sitio, da un paso atrás y mira cómo quieres que sitio para funcionar y fluir.

elmonjedigital!

Soy diseñador y desarrollador web y creo que esto es algo con lo que la gente se encuentra bastante. No siempre es la misma respuesta, así que creo que algunas capturas de pantalla serían útiles.

Sin embargo, tiendo a agregar una barra lateral. De lo contrario, la página se ve mal si el contenido está centrado o no. Se ve desequilibrado, especialmente cuando hay otras páginas que tienen un aspecto más equilibrado con la barra lateral.

La "barra lateral" podría incluso ser algún tipo de aspecto de diseño (alguna obra de arte abstracta, etc.) si es necesario. Pero incluso solo agregar algunos enlaces de redes sociales o algo por el estilo ayudaría.

el ancho ideal para una buena legibilidad... no debe tener más de 600-700px de ancho

Esto es más o menos cierto, pero solo para las secciones de contenido , por lo general, grandes bloques de texto. Tener un tipo legible, en algún lugar de 13px a 17px (generalmente 15-17px) dependiendo de la naturaleza del sitio, si es muy importante y el ancho de la sección debe ser legible con el tamaño de fuente utilizado. Tener barras laterales al lado de la sección de texto principal es perfectamente aceptable, incluso recomendado a veces, para pantallas grandes.

Es importante hacer uso del tamaño de pantalla adicional que proporcionan las ventanas gráficas grandes, pero solo debe usarse como mejora progresiva , lo que significa que debe (en orden, sin importancia) diseñar primero para pantallas pequeñas móviles.

En cuanto al uso de contenido posicionado a la izquierda o a la derecha, no hay una desventaja de usabilidad real al usarlos, siempre que restrinja el ancho a algunosmax-width para que el texto no se extienda a lo largo de una pantalla grande (como debería hacerlo con un diseño de posición centrada). El único momento que queda para posicionar correctamente el contenido podría ser malo es en pantallas muy grandes si tiene una sección de contenido con un ancho pequeño. En este caso, centrarlo puede hacer que parezca que ocupa un poco más de espacio de la página dado que el espacio en blanco adicional se distribuye entre ambos lados en lugar de solo uno.

Si está centrando el contenido, es una buena práctica y diseño centrar también el encabezado. Esto generalmente significa que también debe tener lo mismo max-widthque la sección de contenido principal, si la hay. El primer ejemplo de esto que me viene a la mente es el diseño de FaceBook para escritorios.

Dicho esto, haga uso de lo que se le da . Eso significa agregar progresivamente más funciones para pantallas que pueden manejar más, siempre que siga siendo un buen diseño. En los sitios que estoy diseñando, a menudo escondo la barra lateral para dispositivos móviles o hago que fluya debajo de la sección de contenido principal para las pantallas en las que no cabe (para obtener más información sobre esto, consulte mi otra respuesta ).

Esta es quizás una cuestión de gusto, pero hay algunos problemas obvios con su enfoque.

He estado leyendo sobre el ancho ideal para una buena legibilidad y descubrí que el ancho del contenido no debe tener más de 600-700px de ancho.

Esto no es cierto, depende de cómo dimensione su texto y qué tipo de letra esté usando. El proceso tipográfico real es elegir una medida. Hay varias reglas generales para elegir la medida, pero debe calcular el ancho de carácter promedio para su tipo de letra y luego determinar la longitud de la línea a partir de eso (que variará en la web dependiendo de cómo esté dimensionando el texto en su CSS). Hay una sección sobre esto en The Elements of Typographic Style de Robert Bringhurst que se encuentra en la web aquí .

Dicho esto, el documento al que se ha vinculado tiene una medida utilizable, por lo que debería estar bien con ese diseño.

Para abordar el problema del diseño más amplio, diría que es un proceso de elegir el menor de dos males. Puede agregar una barra lateral para crear un diseño mejor alineado, pero desde una perspectiva de diseño , solo está agregando contenido superfluo que distraerá a sus usuarios al tener más texto y elementos de diseño en su campo visual. Entonces, desde una perspectiva de usabilidad, deshazte de la barra lateral y alinea tu contenido al centro, porque tu contenido es la razón por la que las personas van a tu sitio ( no tu diseño ).

Alternativamente, prefiero alinear a la izquierda ya que el espacio negativo rara vez es negativo en la web y los usuarios occidentales no lo notarán mucho ya que están acostumbrados a leer de izquierda a derecha.

También debe darse cuenta de que no todos tienen el mismo tamaño de ventana gráfica que usted. Puede haber una gran cantidad de usuarios para los que el contenido alineado a la izquierda o centrado se verá bien (si su ventana gráfica es más pequeña, tienen menos espacio vacío). No importa el tamaño de su ventana gráfica, una pantalla abarrotada nunca es una mejor opción.

Es posible que desee consultar los análisis del sitio para determinar los tamaños de las ventanas gráficas.