Diseños de HTML/CSS para texto pesado contenido mundano

Question

Tengo la tarea de actualizar una familia de sitios web que promueven conferencias científicas que se adaptan a un campo científico de nicho. Los sitios se escriben actualmente con un diseño de CSS modesto para la estructura de plantilla de página común compartida, pero los detalles de cada página son una mezcolanza de <p>, <br> y & nbsp; para posicionar el contenido Esto hace que sea difícil actualizar el contenido, ya que los espacios siempre cambian y la página termina fea a la menor mod.

Entonces, me gustaría cambiar esto a un estado más CSS-feliz. Hay muchos sitios que ofrecen consejos para los objetivos de diseño de CSS específicos, pero soy un desarrollador sin muchas habilidades artísticas en el sitio web y no tengo una estructura ya en mente. ¿Existen buenos sitios que enseñen CSS en el contexto de un contenido comercial relativamente mundano, pero presentado de manera efectiva? Cosas como el zen garden de CSS son geniales, pero estoy buscando algo que me brinde algunas ideas sencillas de posicionamiento de datos comerciales, y, presente esas ideas como una oportunidad de aprendizaje de CSS.

¿Existe tal sitio?

Answer 1

Lamentablemente, si no tiene mucho control sobre el HTML, es difícil obtener una presentación sólida y consistente de CSS. Esto es especialmente cierto si no puede agregar clases/ID especiales a sus elementos. Y las etiquetas <br/>, usadas de manera incosistente, causarán estragos con cualquier intento de estandarizar el diseño.

Si solo está limitado al HTML que se le ha proporcionado, su objetivo principal debe ser hacerlo lo más legible posible. Asegúrese de que el tamaño de la fuente sea lo suficientemente grande como para que la gente la pueda leer cómodamente recostándose en una silla. O parado sobre el hombro de alguien. No es necesario que sea demasiado grande, pero si el texto es tan pesado como usted afirma, los 12pt tradicionales pueden parecer demasiado pequeños para una gran cantidad de lecturas.

Qué fuente usar es otra consideración. Verdana es más ancha que Arial, por lo que ocupa más espacio horizontal, pero tiende a ser más fácil para los ojos. Otros tienden a preferir una fuente serifed como Georgia, que puede resistir bien en tamaños más grandes.

El espaciado vertical es importante. Asegúrese de incluir un montón de ruptura visual entre las áreas de la página. Puede lograr esto con un estilo de subtítulo obvio y consistente. También asegúrese de que el line-height entre cada línea sea lo suficientemente amplio: a la gente no le gusta leer los 'ladrillos' de texto.

Y no te olvides de espacio horizontal. Una regla general es que una columna de texto probablemente no debe abarcar más de 60-70 caracteres por línea, o se vuelve más difícil de leer.

Recuerde que las personas están llegando a su sitio para obtener información, y cuanto antes puedan acceder y obtener esa información, más felices serán.Visual Eye Candy es agradable, pero su primera prioridad siempre debe ser hacer que el sitio sea tan fácil de usar y legible como sea posible.

En cuanto a la inspiración, soy un gran admirador del diseño de texto en Information Architects. También es posible que desee echar un vistazo a Subtraction.com. Los blogs probablemente serán una buena fuente de inspiración, ya que suelen ser muy pesados ​​en texto.

Buena suerte.

Answer 2

Tuve una situación similar y aprendí mucho descargando y estudiando algunos de los diseños en http://www.openwebdesign.org/. Hay una gran cantidad de diseños y los foros están llenos de personas dispuestas a ayudar.

Answer 3

Eric Meyer es siempre un buen recurso de CSS.

Answer 4

Diría que A List Apart es un buen lugar para comenzar.

Puede elegir entre una amplia gama de temas (y estructurados) y luego seguir los enlaces relacionados de un tema que le parezca interesante.

Answer 5

Lo primero es lo primero. Use XHTML simple y semántico. Si corresponde, elimine los <br> s para <p></p> s. Use <h1>,<h2>,<h3>, etc. consistentemente. Sabes que estás en el camino correcto si tu página se ve limpia y legible sin una referencia al archivo CSS. David Shea tiene una gran guía de marcado.

David Shea's Markup Guide

En cuanto a las directrices de estilo ... me gusta el diseño web de Ben Hunt desde cero a pesar de que sus proxenetas libros electrónicos sin cesar. El contenido es bueno

Web Design From Scratch: Style Guide

Web Design From Scratch: Current Styles

Si usted está buscando para los sitios de ASP.NET de muestra con una inclinación hacia CSS adecuada echa un vistazo a las plantillas gratuitas de Microsoft.

ASP.net Design Starter Kits

Por último, y esto es una verdadera joya aquí, si es necesario con el estilo de datos tabulares, Smashing Magazine tiene la mercancía. Estos diseños de mesa son extravagantes. Código de muestra incluido. En realidad, podrías pasar horas en el sitio de Smashing Mag. Tantos buenos ejemplos y cosas gratis.

Smashing Magazine: Top 10 CSS Table Designs

Smashing Magazine: All CSS Articles

la paz | dewde

Answer 6

Battle of the CSS Frameworks es otro buen recurso para empezar. Es posible que pueda reducir el tiempo de desarrollo de CSS adoptando un marco bueno y simplificador.