Создание сайтов. Верстка сайта .

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

   Верстка представляет собой разделение графического макета (чаще всего в формате 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-кода необходимо удалять все лишние и дублирующие элементы и, насколько возможно, выносить в отдельные файлы J avaScript. Понять, что еще замедляет сайт, помогает утилита Google PageSpeed Insights: https://developers.google.com/speed/pagespeed/insights. Проверять скорость загрузки интернет-ресурса также умеет система Pingdom.com.

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

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

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

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

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

  

 

 

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

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

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

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

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

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

 

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

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

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

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