HTML / CSS-дизайн для обычного текстового контента

У меня была похожая ситуация, и я многому научился, скачав и изучив некоторые проекты на http://www.openwebdesign.org/. Существует множество дизайнов, а на форумах полно людей, желающих помочь.

Эрик Мейер - всегда хороший ресурс CSS.

Я бы сказал, что Список отдельно - хорошее место для начала.

Вы можете выбирать из очень широкого (и структурированного) диапазона тем, а затем переходить по ссылкам по теме, которая вам интересна.

К сожалению, если у вас нет большого контроля над HTML, трудно получить надежное, последовательное представление с помощью CSS. Это особенно верно, если вы не можете добавлять специальные классы / идентификаторы к своим элементам. А теги <br/>, которые используются случайно, нанесут ущерб любой попытке стандартизировать макет.

Если вы ограничены только предоставленным HTML-кодом, ваша основная цель должна заключаться в том, чтобы сделать его как можно более читабельным. Убедитесь, что размер шрифта достаточно большой, чтобы людям было удобно читать, откинувшись на спинку стула. Или стоя через чье-то плечо. Он не должен быть слишком большим, но если он тяжелый, как вы утверждаете, традиционный 12pt может показаться слишком маленьким для чтения.

Другой вопрос, какой использовать шрифт. Verdana шире, чем Arial, поэтому занимает больше места по горизонтали, но, как правило, приятнее для глаз. Другие, как правило, предпочитают шрифт с засечками, такой как Georgia, который хорошо подходит для больших размеров.

Вертикальный интервал важен. Убедитесь, что между областями страницы есть много визуальных разрывов. Вы можете добиться этого с помощью очевидного и последовательного стиля подзаголовков. Также убедитесь, что line-height между каждой строкой достаточно широк - люди не любят читать «кирпичики» текста.

И не забывайте о горизонтальном пространстве. Общее практическое правило состоит в том, что столбец текста, вероятно, не должен занимать более 60-70 символов в строке, иначе его будет труднее читать.

Помните, что люди приходят на ваш сайт за информацией, и чем быстрее они смогут получить доступ к этой информации, тем счастливее они будут. Визуальная привлекательность - это хорошо, но ваша первоочередная задача всегда должна заключаться в том, чтобы сайт был как можно более простым в использовании и разборчивым.

Что касается вдохновения, я довольно большой поклонник текстового дизайна на Информационные архитекторы. Вы также можете взглянуть на Subtraction.com. Блоги, вероятно, станут хорошим источником вдохновения, поскольку они обычно очень много текстовые.

Удачи.

Перво-наперво. Используйте простой и семантический XHTML. Если возможно, откажитесь от этих <br> для <p></p>. Последовательно используйте <h1>,<h2>,<h3> и т. д. Вы знаете, что вы на правильном пути, если ваша страница выглядит чистой и читаемой без ссылки на файл CSS. У Дэвида Ши есть отличное руководство по разметке.

Руководство по разметке Дэвида Ши

Что касается руководящих принципов по стилю ... Мне нравится "Веб-дизайн с нуля" Бена Ханта, хотя он постоянно сводит свои электронные книги. Содержание хорошее.

Веб-дизайн с нуля: руководство по стилю

Веб-дизайн с нуля: современные стили

Если вы ищете образцы сайтов ASP.net с уклоном в сторону правильного CSS, ознакомьтесь с бесплатными шаблонами Microsoft.

Стартовые наборы ASP.net Design

Наконец, и это настоящая жемчужина, если вам нужно стилизовать табличные данные, в Smashing Magazine есть товары. Эти дизайны таблиц выходят за рамки графиков. Пример кода включен. На самом деле, вы можете часами сидеть на сайте Smashing Mag. Так много отличных примеров и бесплатных вещей.

Smashing Magazine: 10 лучших дизайнов таблиц CSS

Smashing Magazine: все статьи по CSS

мир | роса

Битва CSS-фреймворков - еще один хороший ресурс для начала. Возможно, вам удастся сократить время разработки CSS, приняв хороший упрощающий фреймворк.