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

Аксиомы типографики, или Правила, которые лучше не нарушать
1. Удобство чтения прежде всего!
Используйте шрифты, которые легко читаются и приятны для визуального восприятия. Исключением из этого правила могут стать написания названий брендов или начертания логотипов. Но и тут стоит знать меру.

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

3. Буквы должны иметь высокую различимость
Именно поэтому для основного текста совершенно не подходят декоративные шрифты, целью которых является создание художественного образа, а не удобство чтения. Как, например, шрифт Шалтай, выпущенный несколько лет назад и подходящий исключительно для печатной продукции, да и то в умеренных количествах.

4. Цвет — важная составляющая типографики
Существует несколько версий оптимального цветового решения в выборе фона и шрифта. Кто-то утверждает, что приятнее всего глазу сочетание светло-желтого фона и темно-серого шрифта (на мониторе компьютера или ноутбука), а кто-то предлагает в качестве идеального фона черный, а шрифта — зеленый или желто-зеленый (эта рекомендация для электронных книг). Но по-прежнему главный параметр в выборе пары фон-шрифт — контрастность. А дальше уже на ваш вкус. Например, такое сочетание лучше не использовать:

5. Нужна ли шрифту засечка?
В интернет-пространстве — определенно «нет». Засечки будут лишний раз отвлекать глаза, заставляя «спотыкаться» на слове без видимых на то причин. Оставьте шрифты с засечками для бумажных носителей — там они пригодятся гораздо больше.

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

А теперь давайте поговорим про колонки, строки, заголовки — все то, что придает текстам формы и очертания. На размер колонки могут влиять разные обстоятельства, но одно правило существует всегда: не растягивайте текст по ширине страницы — читатель вам этого не простит. 

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

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

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

Но не шрифтом единым жив текст…
… а еще и версткой. Так называется специальный код страницы, который позволяет пользователю видеть один и тот же материал одинаково через разные браузеры, а поисковикам ­— проще индексировать сайт. Чтобы сверстать веб-страницу, надо разбить дизайн на элементы, перевести их в формат HTML, а затем отформатировать. Можно использовать и дополнительные средства, например, таблицы стилей CSS.

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

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

Технические особенности верстки
Современным стандартом предусмотрена кодировка UTF-8: она применяется во всех файлах HTML, CSS, JS. Тип текущего документа, или DOCTYPE, при верстке следует выбирать строго HTML для корректного отображения страницы. Не забывайте и про кроссбраузерность ресурса, синхронизирующую данные в Google Chrome, Internet Explorer (последней версии), Firefox, Opera, Safari.

Назвать страницу сверстанной невозможно без ее валидности — кода, доступного для всех поисковых систем, обладающего чёткой структурой и обеспечивающего верное отображение во всех распространенных браузерах и стандартных разрешениях выше 1024: 1024x768, 1280x1024, 1680x1050 и 1920x1080. При добавлении или убавлении текста правильно сверстанная страница не тянется, не теряет внешнего вида и не «разваливается».

Советы начинающим верстальщикам
Структурируйте сайт при помощи заголовков H1 и H2 — позвольте поисковым системам правильно воспринимать информацию. Кроме того, этим вы сделаете тексты комфортнее для пользователей.

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

[16:21:25] Марина Замятина: Подумайте о тех, кто будет читать вас с мобильных устройств. Возможно, после этого вы не станете искусственно увеличивать шрифт или менять межстрочный интервал (на дисплее мобильного хорошо читаются мелкие шрифты, а интервалы изначально меньше, чем на компьютере).

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

Комплексное продвижение при ограниченном бюджете
15 октября, ведущий: Дмитрий Сидорин

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

Создание сайтов
15 октября, ведущий: Алексей Пучков

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

Создание сайта для заработка
16 октября, ведущий: Дмитрий Шучалин

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

Базовый курс SEO
17 октября, ведущие: Александр Митник и Леонид Лукин

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

Google унифицировал дизайн SERP для мобильных гаджетов
Обновление состоялось 29 сентября, о чем сообщило интернет-издание Search Engine Land. Страница выдачи поисковых результатов для мобильных устройств выполнена в духе минимализма: дизайн простой, без лишних отвлекающих деталей, а интерфейс по-прежнему лаконичен и интуитивно понятен любому пользователю. К тому же усовершенствованная страница оптимизирована для устройств с сенсорным экраном. Как и ожидалось, результаты выдачи теперь построены на основе «Карточек», прошедших масштабное тестирование на экранах различных устройств в течение минувшего месяца. Преимуществом «Карточек» являются специальные блоки, насыщенные текстовым и визуальным контентом.

Google отметил свое пятнадцатилетие обновлениями
Сразу несколько нововведений представила компания ко дню своего рождения, сообщает The Next Web. Новые возможности поиска Google — это расширенные ответы на вопросы, введение разнообразных фильтров, обновление интерфейсов и добавление голосовых запросов в Google Search на Android. Кроме того, push-уведомления c заметками, полезными «здесь и сейчас», стали доступными не только в приложениях для Android, но и для iOS. Компания обновила алгоритм Caffeine, сменивший в свое время Page Rank, на более крупный — Hummingbird, охватывающий 90% всех мировых запросов.

Facebook тестирует Graph Search на поиск по постам
Graph Search — введенная в начале года функция поиска людей по параметрам, фотографий по характеристикам, а бренды и места по популярности среди знакомых, — расширилась на поиск фраз по постам. Данное дополнение запущено в тестовом режиме выборочной группе англоязычных пользователей в США, сообщает Techcrunch. Оно даёт возможность найти все комментарии к посту, ответы в текстовом режиме и в виде фотографий, чекины, заметки и обновления статуса. Как только тестовая группа пользователей сформирует мнение об этой опции, Facebook внесет в нее необходимые изменения и добавит в общую версию Graph Search. Следует отметить, что в начале января именно отсутствие поиска по постам отмечалось пользователями в числе основных недостатков бета-версии Graph Search.

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

Продолжение читайте в нашем блоге.

• Занятный гибрид технологий прошлого и будущего.

• Комикс в тему нашего сегодняшнего выпуска: