Верстка и типографика

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

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

Текст должен быть удобным для чтения
Исключение: названия бренда, компании — начертание логотипа.

Удобнее читать шрифты с высокой различимостью букв
Т.е. одна буква должна хорошо отличаться от другой. Для чтения не подходят декоративные шрифты.

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

Ширина колонки должна быть удобной длины
Например, 7-8 слов. Если ваш текст будет растянут по ширине экрана 1680, такой текст будет очень плохо читаться.

Расстояние между строками
Немаловажный параметр. В меру увеличенное расстояние повышает удобочитаемость, особенно при длинной строке.

Кегль
Кегль — это высота шрифта. Шрифт на сайте должен быть умеренным. Для основного текста считается оптимальным шрифт размером 12-16 пикселей. В частности при выборе кегля стоит учитывать, для кого предназначается текст. Например, пожилым людям текст лучше увеличить. Также существуют возможности подстраивания размера шрифта под пользователя.

Шрифт с засечками и без
Шрифты без засечек проще для восприятия в интернете. В печати используются шрифты с засечками.

Цвет шрифта
Цвет шрифта должен быть контрастным с фоном. Например, черный шрифт на белом фоне читается легче, чем красный.

Соблюдайте иерархию заголовков
Самый важный заголовок (например, заголовок страницы, должен быть самым большим, подпункты — поменьше, а текст — стандартного размера (12-16).

Не сочетайте слишком много шрифтов на одной странице
Максимум 2 шрифтовых решения. Не больше.

Верстка
Код страницы, который облегчает индексацию сайта поисковыми системами и одинаково отображается различными браузерами. Верстка включает разбиение дизайна на отдельные элементы, а также формирование страницы с помощью html и css. Верстка бывает резиновой, адаптивной и нерезиновой.

Нерезиновая верстка
Макет имеет заданную ширину и при изменении ширины экрана не меняет свой размер.

Резиновая верстка
Макет полностью изменяется пропорционально размеру окон. Для резиновых макетов обязательно должна быть задана минимальная и максимальная ширина.

Адаптивная верстка
Макет изменяется пропорционально размеру окна браузера, но некоторые блоки фиксированы, т.е. сохраняют заданный размер.

Что важно в верстке сайта
Кроссбраузерность, кодировка и DOCTYPE
Кодировка должна быть UTF-8, это современный стандарт. Данная кодировка должна использоваться для всех файлах верстки (html, css, js).

DOCTYPE: html. Необходимо для отображении страницы в соответствии со стандартами.

Кроссбраузерность: Firefox, Chrome, Safari, Opera, IE7+. Просматривать сайт в описанных браузерах последней версии.

Валидность, доступность, микроформаты
Код верстки должен быть доступен для поисковых систем. Валидный код обладает понятной структурой и упорядоченностью.

Микроформаты упорядочивают код и делают его доступным для обработки роботами.

Отображение в стандартных разрешениях
Сайт должен нормально смотреться во всех стандартных разрешениях от 1024 и выше и не иметь горизонтального скролла

Список классических разрешений: 1024x768, 1280x1024, 1680x1050, 1920x1080

Надежность верстки
Сайт должен корректно отображаться при вбивании реального текста: верстка должна тянуться, не разваливаться и не терять вид при изменении контента на странице (может быть как больше, так и меньше контента).

Проверка и оптимизация скорости загрузки
Картинки должны быть оптимизированы (не использовать тяжелые в частности), java script максимально вынесен во внешние файлы. Скорость загрузки является ключевым фактором при доступности сайта, активности пользователей.

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

Доступность при выключенных картинках
Надписи должны быть читабельными, у всех картинок должны быть подписи. Особенно эти правила касаются логотипа и основного меню сайта.

Правильная структура заголовков (H1, H2,... и т.д. и TITLE)
Заголовки структурируют сайт и делают его корректным документом для восприятия поисковыми системами.

Работоспособность при выключенном javascript
Сайт должен сохранять работу и вид при выключенном javascript. Самый важный функционал на сайте должен быть доступен без JS.

Работоспособность при выключенном Flash
В идеале весь критически важный функционал сайта должен быть доступен без Flash. Также нужно: выводить фоновую графику в блок, где отображается flash; предлагать установить Adobe Flash Player. Но лучше не использовать, поскольку flash плохо индексируется.

Отсутствие багов при увеличенном шрифте
Сайт должен корректно отображаться при увеличении пользователем шрифта.

Мобильные устройства
На мобильных экранах сложнее читать, а значит, нужно сделать, чтобы было максимально удобно читать. Увеличить шрифт до максимума — не выход.

Итак, для мобильных устройств нужно:

Делать шрифт небольшого размера: пользователи близко держат телефоны относительно глаз, поэтому мелкий текст будет неплохо читаться.
Межстрочный интервал на телефонах может быть меньше, чем на ноутбуках и компьютерах.
Размещайте только важный материал.
Выводы
Каким бы простым не был сайт, важно, чтобы он одинаково хорошо отображался у всех его посетителей. Используйте готовые плагины, проверяйте сайт в различных браузерах.

Истории из жизни
По опыту надежность верстки должна закладываться еще на этапе прототипирования сайта. Даже если прототипа нет, важно, чтобы дизайнер, создавая макет, применял «живой» контент и отображал реальные заголовки и текст. Один раз пришлось переделывать целый блок на сайте, только потому, что он не был разработан под разную длину текста, а по высоте сайт имел фиксированный размер.