Верстка сайта: выбираем инструменты для создания и проверки

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

Суть и основы верстки сайтов 

Для начала давайте разберемся с определением нового термина и узнаем, что такое верстка.

Теперь перейдем к более подробному рассмотрению этих языков. HTML представляет собой язык разметки гипертекста. Именно он используется для формирования каркаса и структуры сайта. А значит, веб-разработчику без HTML не обойтись.

CSS (cascade style sheets) в переводе с английского означает «каскадные таблицы стилей». Конечно, новичкам это мало о чем говорит. Поэтому попробуем дать определение CSS более простыми словами — это всё, что каким-то образом связано с оформлением веб-страницы. 

Разумеется, вы можете создать блоки, таблицы, абзацы и многое другое при помощи одного HTML. Однако тогда эти элементы будут смотреться довольно невзрачно. Чтобы оформить каркас и реализовать действительно красивый шаблон, вам понадобится CSS.

А какую же роль во всем этом играет JavaScript? Ведь пока нам известно только то, что он является ещё одним языком программирования, который применяют разработчики. Постарайтесь вспомнить, как вы посещали какой-нибудь интернет-ресурс и своими действиями вызывали его ответную реакцию. К примеру, переключали кнопки и таким образом меняли содержимое какого-то контейнера. Или наводили мышь на один из элементов, изменяя его внешний вид. Наверняка вы также кликали на меню, чтобы раскрыть дополнительный блок. Подобные действия значительно облегчают взаимодействие пользователя с ресурсом, однако их невозможно осуществить только с помощью CSS и HTML.

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

Итак, с языками программирования мы немного разобрались. А теперь давайте вернемся к верстке сайта.

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

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

Предположим, макет у вас уже имеется. Тогда следует выбрать подходящую программу для верстки сайта.

Конечно, можно работать и в обычном блокноте (Notepad). Однако вам будет достаточно трудно и неудобно. Поэтому большинство разработчиков предпочитают использовать специальные программы-редакторы. Если вы решите последовать их примеру, то перед вами откроется довольно широкий выбор — Dreamweaver, Sublime Text, Notepad++ и пр. В рамках данной статьи мы не будет подробно разбирать все эти инструменты. Только отметим, что функционал подобных редакторов помогает быстрее писать коды даже новичкам. Некоторые из них подсвечивают стили и теги, а это очень удобно.

Предположим, вы уже подобрали нужную программу. Значит, можно приступать к делу.

Как осуществляется верстка? Сперва разработчик описывает структуру интернет-проекта с учетом слоев в макете. После чего он задает в CSS конкретные стили для структурных блоков. Затем начинает работать над более мелкими деталями макета и оформлением различных визуальных элементов. А потом пишет веб-сценарии, необходимые для данного сайта. Чтобы облегчить процесс написания кода, разработчик может использовать специальные инструменты, фреймворки, готовые библиотеки.

Основные виды верстки сайтов 

Пришло время поговорить о том, какие виды верстки существуют, а также разобрать их специфику и преимущества (подробнее о SEO- и адаптивных вариантах расскажем позже, в соответствующих разделах статьи).

Фиксированная

Довольно популярное решение на сегодняшний день.

Вот как выглядит такая вёрстка сайта на различных устройствах:

Главная особенность этого варианта заключается в том, что абсолютно все блоки и страницы интернет-ресурса имеют строго фиксированную высоту и ширину, а также не зависят от размеров экрана.

Плюсы:

• одинаковое и корректное отображение веб-ресурса на всех экранах вне зависимости от их величины;

• простая реализация (а значит, и более выгодная стоимость).

Минусы:

• масштабирование электронной страницы приводит к тому, что она увеличивается и выходит за границы экрана по ширине и по высоте;

• при отображении на широкоформатных экранах по бокам остается незаполненное место (в особенности если страница узкая — не более 900 пикселей);

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

Чаще всего фиксированную верстку сайта используют для создания лендингов (Landing Page).

Тянущаяся (резиновая)

Вот как отображается данный тип верстки на различных экранах:

«Резиновые» веб-страницы отличаются тем, что разработчик задает размеры всех расположенных на них визуальных элементов в процентах (не в пикселях). Благодаря этому на экранах с разной диагональю один и тот же блок будет иметь разные размеры и даже немного иначе отображаться.

Плюсы:

• автоматически подстраивается под размеры страницы;

• отлично выглядит на любых мониторах.

Минусы:

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

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

• сложнее реализовать (а значит, и дороже).

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

Адаптивная

На данный момент это самый распространенный вид вёрстки. Благодаря ему можно создавать максимально «живые» интернет-ресурсы, перестраивающие свои визуальные элементы и меняющие их размер с учетом типа используемого устройства.

Пример отображения такой вёрстки сайта:

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

Плюсы:

• благодаря перестройке визуальных элементов при масштабировании веб-страницы её отображение не ухудшается;

• не нужно ничего увеличивать, поэтому удобно просматривать на мобильных устройствах;

• за счет автоматической подстройки под размеры экрана страницы отлично отображаются на любых типах устройств.

Минусы:

• необходимость тестирования адаптивных сайтов с использованием разных размеров экрана (масштабирование, онлайн-сервисы, уменьшение/увеличение браузерного окна) приводит к большим временным затратам на осуществление контроля качества работы (чем больше проект, тем больше времени займет его разработка);

• довольно трудоёмкий процесс (а это напрямую влияет на стоимость).

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

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

Особенности SEO-верстки сайта 

Для чего это нужно? Чтобы оптимизировать сайт для поисковиков (а точнее, его контент), необходимо разместить нужный текст в HTML-коде и на веб-странице определенным образом. Тогда содержание страницы станет более понятным и структурированным, а поисковые роботы будут быстрее его находить. Самим контентом, а также его оформлением занимается SEO-копирайтер. А SEO-верстальщик отвечает за размещение на электронной странице блоков с готовым содержанием.

Какой интернет-ресурс, по вашему мнению, будет лучше передавать информацию — тот, в котором полезный контент начинается с 30-й строки HTML-кода или с 430-й? Конечно, навороченные веб-ресурсы выглядят довольно эффектно и могут заинтересовать пользователей. Но лишь на несколько секунд. После этого любой человек начнёт искать то, за чем он пришел на данную страницу (это отлично видно на примере лендингов). Поисковый робот действует примерно таким же образом. Поэтому предисловие в виде 400 страниц кода ему наверняка не понравится.

Получается, что чем дальше вы расположили полезный контент в ходе верстки сайта, тем меньше интересуется им робот. И это вполне объяснимо. Вспомните, для чего мы создаем веб-страницы. Чтобы разместить очень важную информацию, правильно? Тогда зачем прятать её в дальний угол? Быстрая индексация является одним из важнейших факторов ранжирования веб-страниц по запросам.

Важно понимать, что в конечном итоге всё это делается вовсе не для поисковых роботов, а для пользователей. Чем проще они смогут отыскать интересующую их информацию, тем лояльнее станут относиться к сайту. А это положительно скажется на поведенческих факторах. Поэтому не прячьте полезный контент, а размещайте его как можно ближе к началу HTML-кода страницы. Лучше всего сделать так, чтобы он находился в зоне видимости первого экрана прокрутки. И ещё: пожалуйста, пощадите эпилептиков, людей с плохим зрением, а также других посетителей своего ресурса. Не устраивайте им зрительный шок от множества ярких баннеров.

Чтобы лучше понять отличие обычной верстки от SEO, приведем пример простейшего кода.

А теперь давайте сделаем её более дружественной с точки зрения SEO. Для этого разместим блок content поближе к тегу body.

Не станем углубляться в тонкости верстки сайта CSS, а просто поменяем местами блоки content и sidebar с помощью свойства float. В результате вместо длинного меню и малозначительных элементов сразу после header размещаем свой полезный контент.

Если очень хочется, можно даже передвинуть блок content выше блока header.

Эффективность веб-ресурса во многом зависит от того, какие SEO-элементы разработчик заложит в HTML-код. Самым важным элементом страницы в SEO считается title. Но о нем довольно трудно забыть. Намного хуже обстоит дело с метатегами meta description и meta keywords. К сожалению, их зачастую недооценивают, а иногда и совсем про них забывают.

Другая важная часть верстки сайта HTML — это теги заголовков H1, H2, H3. Оформляя название товара/услуги или статьи тегом H1, вы указываете поисковому роботу на важность данного элемента. Несмотря на это, тегами H1 – H3 достаточно часто пренебрегают либо же используют их неправильно.

Очень редко встречаются такие интернет-ресурсы, в коде которых у изображений прописан атрибут ALT. Он применяется для SEO-оптимизации графических элементов по запросу и помогает рисункам занимать первые позиции в сервисах вроде Google Картинки и Яндекс.Картинки. Однако большинство верстальщиков не обращают на это никакого внимания, ведь SEO для них абсолютно ничего не значит. Такая же ситуация происходит и с атрибутом title для ссылок. Кстати, о ссылках: понятно, что специалист должен как можно точнее повторить дизайнерский макет. Тем не менее он также должен знать, что ссылки на веб-страницах всегда следует оформлять нижним подчеркиванием. Конечно, если веб-дизайнер никогда не слышал про SEO-верстку, то в его макет это может не вписываться. Поэтому данный вопрос порой выглядит неоднозначно.

Прежде всего SEO-верстка должна быть кроссбраузерной (приготовьтесь к работе с Internet Explorer 6). Тогда сайт будет отображаться у всех одинаково.

Второе условие — валидность. Код обязательно должен пройти валидацию (проверку на соответствие стандартам W3C). Это можно сделать через официальный валидатор W3C.

Рекомендации по SEO-верстке сайта:

1. Упрощайте и оптимизируйте элементы. Чем сложнее код, тем больше в нем ошибок. На первое место ставьте контент, так как именно ради него вы и создаете веб-страницу (по крайней мере, по логике поисковой оптимизации).

2. Убирайте лишние блоки.

3. Сокращайте длину страниц, иначе они будут плохо индексироваться и долго грузиться. А после 5–7 раз прокрутки у пользователя пропадет всё желание листать дальше.

4. Оптимизируйте HTML-код страницы.

5. Если все части контента будут открыты по умолчанию, вам не придется активировать какой-то элемент для полного просмотра контента.

6. Оптимизируйте таблицы стилей CSS, выделите их в отдельный файл (а лучше всего в папку).

7. Убедитесь, что все ссылки на веб-странице (особенно в тексте) подчеркнутые (underline) и отличаются по цвету от основного текста.

8. Используйте навигацию типа «хлебные крошки».

9. Выделяйте главный заголовок тегом H1. А теги H2, H3 и пр. оставьте для текстовой части контента.

10. Умеренно используйте теги STRONG и B. Причем STRONG лучше всего использовать только в тексте, а остальное можно выделить стилями.

Какой должна быть адаптивная верстка сайта 

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

Прежде всего, вам следует знать, что существует 3 разных способа изучения материалов, размещенных в Интернете.

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

Как мы видим на изображении, красно-желтые зоны образуют собой букву F. Это значит, что пользователи просто просмотрели и оценили страницу — сделали все, что необходимо при первом знакомстве с контентом.

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

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

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

Описанные выше способы изучения материалов, размещенных на веб-страницах, являются основными. Но на самом деле их гораздо больше.

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

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

Такие посетители одновременно захватывают несколько слов.

А иногда, читая одну строку, человек просматривает и следующую. Тогда его взгляд движется не только горизонтально, но ещё и скачет вертикально. Подобные движения образуют фигуру, похожую на букву F.

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

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

Самой оптимальной считается строка, состоящая из 65 символов. Иногда также срабатывают строки размером от 45 до 75 символов. По мнению директора инженерного дела в Кодези Лауры Франц, допустимо использовать даже 85 символов (с учетом всех пробелов, знаков препинания, самих букв).

• Шрифт

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

• Статические страницы

Одним из основных преимуществ адаптивных веб-страниц (касаемо чтения текста) является отсутствие необходимости применять зум или перемещать видимую часть экрана при использовании мобильных устройств.

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

• Небольшие гаджеты

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

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

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

• Широкоформатные экраны

В ходе реализации верстки сайта не забывайте о ПК и ноутбуках. Порой адаптивный дизайн представляет собой лишь создание одной колонки, подстраивающейся под размеры монитора.

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

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

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

• Межстрочный интервал

Данный параметр тоже влияет на качество чтения.

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

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

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

По словам Лауры Франц, идеального межстрочного интервала нет. Здесь главное соблюдать пропорциональность: интервал должен составлять около 150 % от размера шрифта.

Навыки, которые помогут обойтись без помощи верстальщика 

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

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

Минимальные знания, которые понадобятся администратору любого веб-ресурса:

1. Общее представление об HTML: для чего нужен этот язык гипертекстовой разметки, как и где его используют.

2. Понятие и обозначение HTML-тегов.

3. Основные теги. Зная теги ссылок, изображений, абзацев и заголовков, вы вполне сможете корректно разметить простую веб-страницу в блоге или на сайте. Для этого лишь нужно запомнить основные атрибуты.

4. Представление о браузерах и веб-страницах в целом: какие задачи решают гиперссылки? Что представляет собой структура HTML-документа? Как интернет-обозреватели отображают электронные страницы для пользователей?

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

Если вы поймете значение тегов, то сможете правильно их использовать. К примеру, очень важно знать, чем отличаются заголовки второго и третьего порядка или визуально одинаковые теги em и i.

Где можно проверить верстку сайта 

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

Полезные инструменты

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

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

W3C Валидатор. Сервис, позволяющий проверить код на мелкие ошибки. W3C — это название компании по разработке и официальной поддержке веб-стандартов. Так как данная организация сама устанавливает эти стандарты, она предоставляет и специальную программу для разработчиков — валидатор (validator.w3.org), способный проверить корректность кода любой веб-страницы. Сразу стоит отметить, что это довольно строгий инструмент.

Заказчики нередко используют именно его, чтобы оценить качество верстки сайта. Порой этот валидатор даже в хорошо написанном коде находит десятки ошибок. Но не стоит из-за этого переживать. Просто он считает ошибкой даже отсутствие пробела перед значением атрибута. А что, если вы всегда пишете код в таком стиле? Тогда проверка каждый раз будет выявлять огромное количество ошибок, несмотря на правильность верстки. Всё дело в том, что вы просто нарушите стандарты, установленные компанией W3C.

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

IETester. С помощью этой программы вы можете протестировать созданный ресурс в старых версиях браузера Internet Explorer. Большинство современных заказчиков всё ещё требуют, чтобы сайт отображался в этом браузере так же, как и в любых других. Вероятно, существуют и другие онлайн-сервисы, выполняющие аналогичную проверку. Каким бы инструментом вы ни воспользовались, достаточно будет вставить свой код и посмотреть, как он будет работать в IE 6, 7, 8.

Сегодня 6-й версией уже практически никто не пользуется, а 8-я обычно ведет себя достаточно адекватно (если только вы не используете новые CSS-свойства). Особенность старых версий IE заключается в том, что они читают комментарии в коде. А значит, можно подключить таблицу стилей, созданную специально для этих версий, в одном из комментариев.

Другие браузеры данный фрагмент просто пропустят. Поэтому если вы действительно нуждаетесь в поддержке IE, то рекомендуем попробовать этот способ.

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

Проверка адаптивной верстки

Здесь вам не обойтись без самого обычного браузерного окна. Сокращайте его ширину и оценивайте изменения дизайна. Появление горизонтальной прокрутки или некорректное отображение элементов означает, что верстку следует доработать. Уменьшите масштаб, чтобы узнать, как поведет себя сайт на большом экране. Для проверки мобильной верстки сайта загрузите её на какой-нибудь бесплатный хостинг, а затем откройте с имеющегося устройства.

Кроссбраузерность

Ещё одна обязательная проверка. Откройте свой ресурс в различных браузерах и оцените его внешний вид. При необходимости измените масштаб и размер шрифта. Ваша задача — сделать так, чтобы хотя бы у большинства пользователей сайт отображался корректно. Если версии браузеров в устройствах друзей или знакомых отличаются от ваших, то можете попросить их помочь с проверкой. Старайтесь не использовать очень специфические свойства, поддерживаемые лишь каким-то одним браузером. А если без этого не обойтись, то обязательно придумайте для них альтернативу в других браузерах. Следует добавить, что некоторые свойства до сих пор нуждаются в вендорных префиксах. Это объясняется постоянным развитием веб-стандартов и невозможностью браузеров поддерживать абсолютно всё. Проверяя сайт на кроссбраузерность, принимайте в расчет хотя бы самые популярные программы: IE, Safari, Opera, Mozilla, Chrome.

Некоторые зарубежные сервисы выполняют самую продвинутую кроссбраузерную проверку (к примеру, browserstack.com). Услуга может быть платной. Поэтому она больше пригодится тем, кто разрабатывает крупный проект и желает досконально его проверить.

Соответствие дизайнерскому макету

Самый легкий способ проверки дизайна и верстки сайта — сделать скриншот готовой страницы и добавить его в качестве нового слоя к макету в графическом редакторе. Затем необходимо установить этому слою прозрачность и оценить совпадение всех элементов сайта и макета. Также можете использовать для этого специальный плагин (к примеру, для браузера Mozilla — Pixel Perfect).

Дополнительные требования

Любая верстка должна содержать doctype и кодировку. Также профессиональные верстальщики обычно проверяют работоспособность веб-страниц при блокировке JavaScript или выключенных картинках. Как известно, у пользователя есть возможность отключить эти параметры в настройках любого браузера. Чтобы он смог хоть как-то ориентироваться в случае исчезновения изображений, нужно прописать для всех картинок атрибуты alt. Перечень требований к верстке может быть довольно длинным. Даже в Рунете существует довольно строгий список проверок. К примеру, HTML5 позволяет проверять верстку на правильность семантической разметки. С другой стороны, все эти требования не критичны. Описанных выше проверок будет вполне достаточно для того, чтобы без проблем запустить хороший работоспособный сайт.

ТОП-7 ошибок верстки сайтов 

Наиболее распространенные ошибки верстальщиков:

1. Вложенные теги

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

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

   <div id="container"> 

   <div id="header"> </div> 

   </div> 

   Как мы видим, блок шапки расположен внутри контейнера. Но! Если вы запишете так:

   <div id="container"> </div> 

   <div id="header"> </div> 

   то шапка окажется за пределами контейнера.

   Это касается и строчных элементов. Для выделения ссылки в тексте абзаца при верстке сайта нужно соблюдать следующую вложенность:

   <p><a href=""></a></p> 

   А это уже будет ошибкой:

   <p><a href=""></p></a> 

   То есть должно соблюдаться правило «abba, но не abab». К сожалению, далеко не все разработчики следуют этим важным принципам и нередко забывают записывать закрывающие теги.

   Чаще всего подобные ошибки встречаются в шаблонах для различных CMS (например, WordPress). Так как все части шаблона веб-страницы (сайдбар, подвал, шапка и пр.) находятся в разных файлах, закрывающий </div> постоянно теряется.

2. Названия на кириллице

   Далеко не всегда браузеры распознают такие имена. Зачастую названия картинок обозначают русскими словами, да еще и с пробелами, запятыми, точками и другими неприемлемыми знаками. К примеру:

   Stepa Pitersky . jpg // ошибка: лишние пробелы 

   Степа;Питерский.jpg // ошибка: точка с запятой между словами 

   Степа Питерский.jpg // ошибка: пробел между словами 

   и т. д.

   Во избежание проблем советуем всегда писать имена на латинице, маленькими буквами и желательно делать их покороче:

   stpitersky.jpg

3. В браузере IE не отображается фон страницы

   Это действительно неочевидная и странная ошибка. Дело в том, что IE довольно привередливо относится к адресации в файле CSS. Если в процессе верстки сайта вы задаёте в качестве фона какое-то изображение без повторов, обязательно поставьте пробел после адреса картинки:

   background: url(images/bg.gif)no-repeat; — неправильно 

   background: url(images/bg.gif) no-repeat; — правильно 

   Запомните, что после закрывающей скобки всегда ставится пробел!

4. Отсутствие фигурных скобок и прочих знаков

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

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

5. Огромное количество DIV

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

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

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

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

   <p class=""></p> 

   <img class="" src="" alt="" /> 

   Довольно часто встречается вот такое оформление обычного маркированного списка:

   <div id="members"> 

   <ul> 

   <li></li> 

   <li></li> 

   <li></li> 

   </ul> 

   </div> 

   Как мы видим, здесь снова используют лишний div. Хотя в ходе верстки сайта идентификатор id="members" можно задать напрямую тегу списка — ul:

   <ul id="members"> 

   <li></li> 

   <li></li> 

   <li></li> 

   </ul> 

   И таким образом избавиться от лишнего «дива».

6. Отсутствие единиц измерения

   Многие новички, занимающиеся версткой сайта, забывают указывать в листе стилей CSS единицы заданных размеров.

   Правильно:

   width: 100px; 

   font-size: 12px; 

   Неправильно:

   width: 100; 

   font-size: 12; 

7. Путаница идентификаторов и классов

   Иногда в CSS- файле для блока указывают правила так, как это делается для класса. К примеру, .header в коде страницы обозначают как для #header.

   Неверно:

   <div id="header">…</div> 

   Верно:

   .header {…} 

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

   Другая проблема — в программном коде веб-страницы записывают несколько блоков, идентификаторы которых повторяются:

   <img id="thumb" … /> 

   <img id="thumb" … /> 

   <img id="thumb" … /> 

И не стоит обращать внимания на то, что некоторые браузеры такое пропускают. Это грубая ошибка.

Скачайте полезный документ:

Чек-лист: Как добиваться своих целей в переговорах с клиентами

Для того чтобы задать одинаковые правила для разных блоков, используйте в процессе верстки сайта классы (class). Id же всегда указывает на один-единственный и уникальный в своем роде блок.

Где улучшить свои навыки и знания по верстке сайтов 

• Статьи, книги

habrahabr.ru — содержит перечень книг о веб-разработке.

htmlbook.ru — достаточно большой электронный портал, на котором размещено множество материалов на тему веб-программирования. Здесь есть вся необходимая информации об основах html и css.

html5boilerplate.com — наиболее распространенный фронтальный шаблон.

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

javascript.ru — ресурс содержит структурированную и грамотную информацию для изучения JavaScript и смежных технологий, а также современное учебное пособие по JavaScript.

css-live.ru — курс по верстке сайта с нуля, помогает систематизировать полученные навыки.

• Видеоуроки, курсы

initializr.com — генерирует интернет-проекты на основе HTML5. Позволяет делать mobilefirst-шаблоны из «коробки» (причем на последней сборке boilerplate).

codecademy.com — веселое и интерактивное обучение программированию. Подходит для тех, кто собирается создать собственные технологические организации, но не имеет необходимых для этого навыков.

IDE (к примеру, Webstorm) — интегрированная среда разработки, на которой очень удобно работать начинающим верстальщикам. Показывает недочеты и ошибки.

teamtreehouse.com — сервис, обучающий разрабатывать веб-ресурсы и приложения. Рассказывает о том, каким образом можно применить эти полезные навыки для создания собственного бизнеса.

dash.generalassemb.ly — абсолютно бесплатный и очень увлекательный онлайн-курс по обучению основам веб-разработки. Проекты можно делать в своем браузере.

htmlacademy.ru — курсы для разработчиков с интерактивными заданиями по освоению веб-технологии и созданию сайта. Хорошо подготавливают к началу карьеры в IT.

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

tutsplus.com — англоязычный аналог сайта htmlacademy. Благодаря выделенному курсу вы сможете освоить основы верстки сайта в короткие сроки.

html5+css3 — Дмитрий Охрименко рассказывает в своих видеоуроках о том, как создавать веб-страницы, используя новую семантическую разметку на CSS3 и HTML5. Вы научитесь разрабатывать интересные приложения, определяющие месторасположение пользователя, а также узнаете, что такое Geolocation API и как разместить аудио или видео на веб-странице.

Twitter Bootstrap — видеоуроки Сергея Швайцера, помогающие разрабатывать кроссбраузерные веб-ориентированные интерфейсы.

Автор статьи

Дмитрий Свистунов

Руководитель SEO-отдела и разработки

Статья опубликована: 07.07.2019

Последние статьи этого автора:

• Адаптивная верстка сайта: гайд для начинающих
• Анкор ссылки: виды, правила составления, влияние на продвижение
• Белая раскрутка сайта без перехода на темную сторону

Забрать подарки
из закрытой базы

Скачать 7,4 MB

Полезные
материалы
для руководителей

Скачать 3,2 MB