Текст книги "Создание сайтов"

«Пять причин для редизайна сайта»: http://www.cmsmagazine.ru/library/items/internet-marketing/five-reasons-for-redesign-site/

Подробно о редиректах для специалистов: http://htmlweb.ru/php/htaccess.php

«301-й редирект: был ваш сайт – и сайта нет»: http://seopult.tv/programs/seo/301_redirekt_byl_vash_sayt_i_sayta_net/

Про инструменты для проверки сайтов: http://www.design-sites.ru/material/site-checking.php

«Как изменить структуру сайта без потери позиций»: http://habrahabr.ru/company/seopult/blog/170915/

«Как удержать позиции сайта при смене CMS»: http://www.optimization.com.ua/articles/uderjat-pozicii-sajta.html

«Переезд сайта на новый домен» («Яндекс. Помощь»): http://help.yandex.ru/webmaster/?id=1108951

«Как переместить сайт» («Справка Google», «Инструменты для веб-мастеров»): https://support.google.com/webmasters/answer/83105

«Восемь SEO-шагов, которые нужно сделать в ходе редизайна сайта»: http://www.optimism.ru/blog/vsem-seo-shagov-v-hode-redizajna-sajta/

Глава 11. Верстка и типографика: дьявол в деталях

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

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

В веб-разработке все ровно так же. Когда верстка норовит «съехать», шрифты непропорциональны, а тексты набраны сплошняком, без абзацев, то никакие красивые слайдеры не спасут сайт, как не спасли Москву редкие велодорожки.

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

Верстка представляет собой разделение графического макета (чаще всего в формате Photoshop —.psd) на составляющие и его сборку в веб-страницу средствами HTML и CSS. Вспоминаются жутковатые народные сказки: чтобы воскресить погибшего витязя, тело его сначала рассекают на части, сбрызгивают их мертвой водой, правильно приставив друг к другу, после чего они срастаются, и наконец их окропляют живой водой. Между прочим, метафора крайне точная: разъять, собрать и заставить двигаться. Лишь бы пятку к голове ненароком не прикрепить. Избегать подобных курьезов следует и при верстке сайта, достаточно соблюсти несколько разумных условий.

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

Требование кроссбраузерности означает, что сайт должен одинаково (с точки зрения «принципиальной схемы»; точности до пикселя не требуется) и без ошибок отображаться в наиболее популярных браузерах: Chrome, Firefox, Safari, Opera, Internet Explorer последних двух версий. Побудьте сами себе отделом контроля качества. Во-первых, вслед за верстальщиком смотрите своими глазами, каким предстает сайт в перечисленных интернет-обозревателях. Во-вторых, задействуйте сервисы онлайн-тестирования, как то CrossBrowserTesting.com, BrowserShots.org, Browsera.com.

• Валидный код – значит код с четкой, прозрачной структурой, который отвечает требованиям Консорциума Всемирной паутины (W3G), составляющего и внедряющего технические стандарты Интернета. Главный онлайн-сервис для проверки гипертекста на валидность расположен по адресу http://validator.w3.org. Чтобы протестировать CSS-код по тому же критерию, прибегните к другому инструменту: http://jigsaw.w3.org/css-validator/. Написаны и аналогичного назначения плагины для браузеров, и наипервейший из них – Firebug для Firefox.

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

Наконец, все актуальнее микроформаты – стандарты семантической разметки HTML– и XHTML-страниц. С их помощью сайт структурируют и размечают так, чтобы роботы его индексировали с большей точностью, различая, где что лежит. Модель проста: определенным HTML-элементам присваиваются дополнительные атрибуты. В Рунете на конец 2013 года поддерживалось два основных вида семантической разметки – от Schema.org и от Microformats.org. Мы советуем вам остановить выбор на первом (см. блок «Полезно знать» – справочные материалы по ссылкам «Что такое Shema.org?» и «Что такое микроформаты?»).

• И код, и контент сайта оптимизированы под Веб. Код – минималистичный и валидный, картинки – легкие, в формате. jpg или. png. Для подгонки изображений под выкладку в Интернет создано изрядное количество инструментов, как онлайновых (Picrecize.com, Smushit.com и пр.), так и офлайновых, включая внутренние опции фоторедакторов.

У изображений должны быть заполнены теги alt и title (во втором в умеренном количестве указываются ключевые слова), название самого файла – вразумительное, понятное человеку, и не столь важно, написано оно по-английски или дано транслитом. Само собой, недопустимо использование взятых наобум из Сети картинок, тем более украденных с сайтов конкурентов.

Нелишним будет создать отдельную карту сайта по картинкам. Как и карта сайта, она имеет формат XML и сохраняется на веб-сервере. Составляется по тому же принципу.

Из HTML-кода необходимо удалять все лишние и дублирующие элементы и, насколько возможно, выносить в отдельные файлы JavaScript. Понять, что еще замедляет сайт, помогает утилита Google PageSpeed Insights: https://developers.google.com/speed/pagespeed/insights. Проверять скорость загрузки интернет-ресурса также умеет система Pingdom.com.

• Используем правильную кодировку. За годы существования компьютерных технологий было создано множество кодировок – наборов правил, по которым машинные команды (последовательности битов) превращаются в символы человеческого языка и наоборот. Стандарт де-факто сегодня – UTF-8. Эту кодировку нужно указывать для всех файлов верстки (HTML, CSS, JavaScript).

• Перед самим гипертекстом – место непарного тега doctype. Он идентифицирует тип документа и сообщает браузеру, согласно какому стандарту показывать страницу. Самый простой вариант предусмотрен HTML5, и в соответствии с ним первая строка в коде страницы должна выглядеть так: <!DOCTYPE html>. В большинстве случаев уместно использовать в веб-верстке именно doctype версии HTML5: старые браузеры, «увидев» его, подстроятся.

• Сайт понятен и при отключенной графике. Необходимо, чтобы структура сайта была прозрачна и тексты на странице отображались адекватно, если показ графики отключен у пользователя в браузере или картинки попросту долго загружаются. Кроме того, в таком случае на месте изображений должны выводиться пояснительные надписи, заданные через атрибут alt тегов <image>. Так ли это, проверяется в браузере Firefox через плагин Web Developer (https://addons.mozilla.org/ru/firefox/addon/web-developer/).

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

• Заголовки – корректные, с правильной структурой. Теги h1, h2 и другие улучшают структуру кода и делают его более «съедобным» для роботов поисковых систем. Заголовок страницы должен быть прописан в h1 (раньше требовалось, чтобы h1 был один на страницу, но, судя по практике продвижения сайтов, нарушителей правила сейчас не казнят). Крайне желательно, чтобы <h1></h1> содержал ключевые слова, по которым будет продвигаться страница, но не был ими напичкан «до тошноты».

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

• Думайте о том, как «донести» шрифт до пользователя. Если в операционной системе посетителя почему-то нет используемого на вашем сайте шрифта, тот будет подменен в браузере стандартным, что нарушит ваш замысел или, того хуже, развалит верстку. При использовании каскадных таблиц стилей эту нестыковку помогает обойти CSS-правило @font-face: вы конвертируете свой небанальный шрифт в нужный формат с помощью инструмента FontSquirrel.com, и через ранее упомянутое правило конечный файл внедряется на сайт. Тот же результат дает онлайн-сервис Google Web Fonts. Еще один способ доставить какой-либо редкий шрифт до пользователя – применение JavaScript-плагина Cufоn.

• При изменении размера шрифта сайт отображается адекватно. Когда посетитель увеличивает или уменьшает шрифт, верстка не должна рассыпаться. Еще один довод в пользу «резиновой» верстки (см. ниже).

• Сайт должен нормально выглядеть в ряде стандартных разрешений экрана. Минимально приемлемое на сегодняшний день – 1024 × 768. Приведем список наиболее распространенных: 1024 × 600, 1024 × 768, 1152 × 864, 1280 × 800, 1280 × 1024, 1440 × 900, 1680 × 1050 и 1920 × 1080.

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

Посмотреть, как ваш сайт будет выглядеть на экранах разных устройств, в том числе мобильных гаджетов, позволяет сервис Screenfly (рис. 22 и 23, https://quirktools.com/screenfly/).

^{Рис. 22. Сервис Screenfly в действии. Так выглядит сайт www.doctor-kolbasa.ru на 13-дюймовом ноутбуке…}

^{Рис. 23.…а так – на iPhone. Неплохая адаптация под гаджеты}

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

• размещайте в мобильных версиях только самый важный материал, желательно на первом же экране;

• используйте шрифт не слишком крупного размера (люди держат смартфоны и планшеты близко к лицу, расстояние между глазами читателя и экраном при сидении ноутбуком обычно больше);

• межстрочный интервал на телефонах может быть меньше, чем на ноутбуках и компьютерах;

• минимизируйте оформление через стили (CSS): запретите показ некритически важных элементов, сократите поля у оставшихся и т. д., укрупните совсем мелкий, но значимый текст, например в меню.

• Выбираем подходящий вид верстки. С возникновением «плюрализма гаджетов» остро потребовались методы, которые позволяли бы гибко, на лету подстраивать сайты под отображение на экранах разных устройств – от монитора компьютера-десктопа до дисплея смартфона. Расскажем о трех главных на сегодняшний день видах верстки.

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

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

Выполненный в адаптивной верстке сайт растягивается или сужается пропорционально размеру окна браузера и разрешению экрана, на каком бы устройстве ни был открыт, но какие-то блоки зафиксированы, а какие-то перемещаются или даже меняют вид. Композиция макета модифицируется по ситуации: так, может исчезнуть одна из трех колонок, боковой блок «Новые поступления» уйти за пределы видимости вниз, на второй экран и т. д. Адаптивная верстка, отметим, гораздо гибче, чем «резиновая», реагирует на изменение ширины экрана. Фишка метода – эксплуатация CSS3 Media Queries «медиазапросов CSS3», посредством которых как раз и реализуется преобразование макета исходя из величины области просмотра. От «резиновой» верстки адаптивная отличается главным образом тем, что призвана «по-умному» реструктуризовать макет сайта в соответствии с возможностями устройства вывода.

Статус-кво пока таков, что каждый вид верстки подходит под свои цели. Хотя фиксированную теперь рекомендовать немодно, она, повторимся, тоже имеет сферы применения, в которых раскрывает свои достоинства.

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

В центре типографики находится шрифт – набор графических начертаний символов (букв алфавита, цифр, знаков пунктуации и пр.) в едином стиле, с общей композиционной структурой. Гарнитура – рисунок, узнаваемый характер шрифта, часто объединяющий несколько шрифтов в одно семейство.

Если слова – содержание вашего высказывания, то шрифт – манера, с которой вы его подаете: аристократичная или панибратская, снобская или нейтральная. Только не смейтесь, но в конечном счете от того, какой приговор сайту выносит посетитель: «Дешевка» или «Дорого сделано!», «Шик!» или «Да, сэкономили…», зависит, сколько своего времени и денег он будет готов вам отдать в дальнейшем (рис. 24). Так что верстка вкупе с типографикой – гормон роста для добавленной стоимости.

^{Рис. 24. Не самое удачное типографическое веб-решение}

Чтобы типографика была на высоте и укрепляла положительный образ сайта, уделяйте внимание следующим деталям.

• Слишком много шрифтов на сайте – мало проку. В среднем случае – максимум два-три. На автомобильном портале Am.ru без трений уживаются Tahoma, Arial и Helvetica, однако мы не знаем, каких трудов стоило верстальщикам и дизайнерам сделать их сочетание невырвиглазным.

Исключение делаем для логотипа и начертания названия компании в шапке. Хотя нельзя не отметить, что на Западе более раскованны в экспериментах с гарнитурами и шрифтовыми композициями, особенно в случае с онлайн-сервисами. Здесь большее значение имеют общие тренды веб-дизайна. Например, в 2013 году были популярны чуть «вдавленные», а также псевдорукописные шрифты.

• Засечки: быть или не быть? По нашему мнению, для отображения на экране предпочтительны шрифты без засечек (так называемые гротески) – чуть расширяющихся штрихов на концах линий. Однако не бросайтесь в крайности. Например, в онлайн-издании Afisha.ru сами статьи набраны шрифтом Georgia (с засечками), а надписи в меню, подписях к иллюстрациям, служебных и рекомендательных блоках – Arial (без засечек), что создает прекрасный контраст и помогает читателю интуитивно ориентироваться на портале. На такой игре нюансов и зиждется успех многих веб-проектов.

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

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

• Правильный кегль. Кегль – упрощенно «высота шрифта», а точнее, высота строчной буквы с самым длинным выносным элементом по вертикали и пробельным расстоянием под ней. Традиционно измеряется в типографских пунктах (см. § 81 «Ководства» Артемия Лебедева), в Вебе – обычно в пикселях (фиксированная величина) или в em (масштабируемая).

Немало веб-дизайнеров для основного шрифта оптимальной считают высоту 12–16 пикселей, или 10–12 пунктов: наблюдается устойчивый тренд на сравнительно крупные шрифты. Распространен стереотип, согласно которому не рекомендуется использовать кегль больше двенадцати пунктов, поскольку иначе не удастся разместить самую важную информацию на первом экране. Но если текст раздражающе мелкий, его с высокой степенью вероятности вообще читать не станут.

В коде сайта часть экспертов советует указывать кегль не в абсолютных (пиксели и пункты), а в относительных величинах, например em. Хотя в предпочтениях дизайнеры и верстальщики не едины.

• Внятная иерархия шрифтового решения. В текстах на сайте используются самые разные элементы: заголовки, подзаголовки, выносы, подписи к иллюстрациям и т. д. Задача дизайнера и верстальщика – продумать варианты использования шрифта, которые будут четко обозначать тип контента и упрощать его восприятие. Чтобы посетитель, еще не прочтя слово, понимал его функцию на сайте. Мастерски комбинируя жирное и курсивное начертание, размер кегля, вышеописанное сочетание гротесков и шрифтов с засечками и т. д., настоящий профи сделает различные виды текстового контента гораздо приятнее для глаза.

Приведем пример: Georgia неплохо сочетается с Verdana, но лучше первым набирать заголовки, а вторым – основной текст, чем наоборот: у Verdana великовато среднее расстояние между буквами, отсюда ощущение легкой «размазанности» при крупном кегле.

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

Важно, чтобы и вы и верстальщик четко себе представляли, какие именно типы надписей будут в ходу на вашем сайте, насколько сложной будет иерархия заголовков. Чтобы рассчитать кегль заголовков и основного текста, часто применяется последовательность чисел Фибоначчи (или золотое сечение), где каждый член начиная с третьего равен сумме двух предыдущих, например: 0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55 – и далее. Таким образом, кегль шрифта у основного текста может составлять 13 пикселей, у подзаголовка – 21, а у заголовка – 34; везде плюс-минус один-два пикселя. Или 14, 22, 36 соответственно.

Когда верстка будет сдана и проверена и вы или ваш контент-менеджер примется заполнять сайт материалами, постарайтесь не злоупотреблять различными формами выделения текста. Каждое слово, набранное жирным или курсивом, служит дополнительным фокусом. Будет чересчур много таких вкраплений – и внимание посетителя рассеется, а в глазах у него зарябит. Если же их использовать умеренно и к месту, то они упростят ориентирование на сайте.

• Шрифт должен быть и разборчивым и удобочитаемым. Это не синонимы. Разборчивость означает, насколько легко читатель идентифицирует отдельные символы и различает их. Затейливые декоративные шрифты не годятся в качестве основных. А моноширинные, с одинаковой шириной символов, например Courier, при прочих равных обычно читаются хуже, чем пропорциональные.

Обратите внимание

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

• Межстрочное расстояние, или интерлиньяж. Стандартный, по умолчанию, интерлиньяж принимается за единицу. Его лучше избегать: когда строчки плотно утрамбованы, с нужной при чтении оказывается очень легко сбиться. Тексту требуется пространство. Оптимальное межстрочное расстояние в веб-верстке – приблизительно 1,4–1,5. Точное значение зависит от гарнитуры, размера шрифта и длины строки.

• Цвет шрифта должен контрастировать с фоном. Джентльменское, по справедливости самое популярное сочетание – черный шрифт на белом фоне. В любой ситуации, когда необходимо иное, следует глубоко задуматься: а так ли оно необходимо? Трудно придумать, в чем сакральный смысл серых букв на желтом фоне. По рекомендации ранее упомянутого W3G, коэффициент контрастности текста по отношению к фону должен быть не меньше 4,5:1 (см. блок «Полезно знать»). Для проверки соответствующего показателя подходит онлайн-сервис Color Contrast Check.

• Умеренная длина строки. Излишне короткие строки заставляют глаза играть в чехарду, излишне длинные снижают скорость чтения. Золотая середина – семь-восемь слов, не считая предлогов, союзов и других служебных частей речи. Или 45–70 символов. При значительном отклонении в ту или другую сторону взгляду будет труднее скользить по тексту. Хорошо, чтобы вдобавок читатель сразу мог просканировать написанное на странице по диагонали. Если текст оформлен правильно, с выраженными подзаголовками, списками, выделением значимых слов, посетитель быстро схватывает его смысл и с большей вероятностью совершит действие, которого вы от него ждете.

Обратите внимание

Хороший дизайнер или верстальщик не будет повсеместно использовать при верстке протухшую «рыбу» – стандартные тексты-заполнители, особенно набивший оскомину пассаж Lorem ipsum dolor sit amet… – вместо релевантных содержанию сайта материалов, и обязательно попросит вас предоставить таковые.

Обратите внимание

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

Если вы вознамерились заниматься веб-проектами всерьез, то без изучения спецлитературы вам не обойтись. Первым делом штудируйте «Новую типографику» Яна Чихольда, которая подводит под типографику масштабную научную базу и обобщает принципы рационального использования шрифтовых решений. С 1928 года, когда книга впервые была опубликована, она не утратила актуальности. В пару к ней мы настоятельно рекомендуем фундаментальный труд «Основы стиля в типографике» Роберта Брингхерста.

Не менее полезен «Справочник издателя и автора. Редакционно-издательское оформление издания» за авторством Аркадия Мильчина и Людмилы Чельцовой, рассказывающий о правилах оформления текста в практике советской и российской печати: из него вы узнаете, в частности, как грамотно составлять списки, расставлять знаки пунктуации при цитатах, сокращать слова, делать сноски и т. д. Да по большому счету не откуда-нибудь, а из «Справочника издателя и автора…» растут ноги у половины рекомендаций Артемия Лебедева, о которых мы говорим в конце главы.

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

Итак, кавычки в русскоязычных текстах – либо исключительно «елочки» («»), либо «елочки» вместе с немецкими «лапками» („“). «Лапки» используются, когда внутри одних кавычек находятся другие, например: «Сайт „Студии Артемия Лебедева“ – кладезь информации для дизайнеров».

Непосредственно в тексте используйте длинное тире (на десктопной клавиатуре при включенном NumLock набирается сочетанием Alt+0151, в HTML-коде обозначается как &#8212), а не короткое или не дай бог два состыкованных дефиса. В свою очередь, короткое (Alt+0150 и &#8211 соответственно) находит применение в обозначении числовых диапазонов, дат и т. д.

Ссылки должны быть подчеркнуты и выделены цветом. Правильно оформленная ссылка «реагирует» на действия пользователя: при наведении курсора на нее меняет цвет (например, красный вместо исходного голубого); если по ней совершили переход, принимает другой, третий цвет постоянно (по умолчанию сиреневый). Распространена рекомендация сопровождать URL дополнительными иконками, если по нажатии на них начнется скачивание файла или будет осуществлен переход на RSS-канал, – в общем, такое действие, которое может оказаться неожиданностью для посетителя, гуляющего по страницам сайта. Ну а ссылки, ведущие на сторонние сайты, должны открываться в новом окне.

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

Эти правила укоренились в Рунете главным образом благодаря «отцу российского дизайна» Артемию Лебедеву, чьи заслуги действительно трудно переоценить. Периодически вокруг его безапелляционных утверждений разгорается полемика, и по поводу оформления ссылок споров хватало. Однако в том, что касается типографики, советуем отталкиваться от постулата: «Лебедев прав почти всегда». Так что за прочими рекомендациями мы отсылаем вас к его «Ководству».

Обратите внимание

Не подчеркивайте текст на сайте, если он не является ссылкой.

Для выверения части элементов типографики на сайте можно использовать онлайн-сервисы, такие как Typograf.ru (http://www.typograf.ru). Однако куда лучше будет, если вы сами научитесь разбираться по крайней мере в азах оформления текстов.