Цитаты из книги «Создание сайтов»

Обсудите с дизайнером, какие именно элементы он для вас разработает. Не все трактуют фирменный стиль одинаково с точки зрения состава. В джентльменский набор входят: • логотип и/или товарный знак; • цветовая гамма; • набор шрифтов; • примеры употребления всего вышеперечисленного на практике (визитные карточки, папки, конверты и т. д.). Помните, кстати, что лого нетождествен товарному знаку, хотя часто одно равно другому. Изначально под логотипом подразумевался символ-идентификатор компании вместе с ее каноническим

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

Полезно знать «Рассылка SeoPult. Выпуск № 26: оптимизация сайта для “Яндекс. Картинок”»: http://seopult.ru/subscribe.html?id=26 «Что такое Shema.org?» («Яндекс. Помощь»): http://help.yandex.ru/webmaster/?id=1122752 «Что такое микроформаты?» («Яндекс. Помощь»): http://help.yandex.ru/webmaster/?id=1111670 Основы веб-типографики: http://www.dejurka.ru/web-design/typography_basics/ «Какой doctype выбрать…»: http://webcareer.ru/kakoj-doctype-vybrat.html Плагин для определения шрифтов на сайтах: http://chengyinliu.com/whatfont.html О разнице между пунктами, пикселями, процентами, em: http://habrahabr.ru/post/42151/ Сопоставление шрифтов с засечками и без засечек: http://digilinux.ru/2013/05/13/sans-serif-legibility/ Инструмент для проверки цветового контраста «шрифт – фон»: http://www.snook.ca/technical/colour_contrast/colour.html «Леттердей – проект о шрифтах, типографике, леттеринге и буквах»: http://letterday.ru «Руководство по обеспечению доступности веб-контента (WCAG) 2.0»: http://www.w3.org/Translations/WCAG20-ru/ «Ководство» на сайте «Студии Артемия Лебедева»: http://www.artlebedev.ru/kovodstvo/sections/

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

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

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

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

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

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

Во-вторых, задействуйте сервисы онлайн-тестирования, как то 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 (во втором в умеренном количестве указываются ключевые слова), название самого файла – вразумительное, понятное человеку, и не столь важно, написано оно по-английски или дано транслитом. Само собой, недопустимо использование взятых наобум из Сети картинок, тем более украденных с сайтов конкурентов.