Адаптивная верстка или мобильная верстка
Ее еще иногда называют респонсивная или отзывчивая верстка. Ключевая особенность в том, что страницы хорошо адаптируются под любое разрешение экрана пользователя. Не важно, отрыли вы страницу на стационарном ноутбуке, на здоровенном широкоформатном мониторе или на смартфоне — в любом случае страница должна хорошо смотреться и быть удобной для пользователя. Это достигается тем, что используют несколько таблиц стилей под разные разрешения.
Блочная верстка, верстка блоками или div-верстка.
Самая распространенная верстка на сегодня. Сетка страниц конструируется из множества блоков, которые вложены друг в друга. Для доступа к ним используются атрибуты id и class. Откройте исходный код (Ctrl + U) практически любой веб-страницы, и вы увидите такую верстку.
Гибкая верстка или flex верстка
Сначала применяется блочная верстка, а потом нужные блоки превращают во флекс-контейнеры (флексбоксы). Если говорить сложным языком, в стилях элемента указывают display: flex; элементу можно указать направление главной оси и выравнивание. Эти возможности стали доступны с приходом стандарта CSS3. Теперь страницы становятся очень гибкими. Если по-простому – элементы объединяются в специальные контейнеры, задаются простые настройки и браузеры сами выстраивают элемент максимально органично. Этот механизм является наиболее перспективным, и, хотя технология плохо поддерживается старыми браузерами, в будущем ее применения будет расширяться.
Семантическая верстка
Стала логичным продолжением блочной верстки, появилась в HTML5. Простыми словами – теги должны соответствовать информации, находящейся в них. Новые теги делают станицу более структурированной и понятной. Поисковики любят такие страницы.
Валидная верстка или по-другому верстка без ошибок
Это верстка, выполненная в соответствии со стандартами W3C. Проверить HTML-страницу на корректность вы можете с помощью специального валидатора W3C, а невалидно сверстанные страницы нагоняют.
Следующие виды верстки устарели, но о них все же стоит упомянуть:
Фиксированная верстка или статическая
Вне зависимости от размеров окна браузера или устройства ширина страниц будет постоянной. Все элементы занимают строго определенную ширину в пикселях на странице. Если разрешение экрана большое и окно браузера развернуто на весь экран, то, как правило, по бокам остается свободное место. И наоборот, на мобильных устройствах при фиксированной верстке снизу на странице появляется полоса горизонтальной прокрутки. Такая верстка считается устаревшей, а поисковики понижают сайты с такой версткой в выдаче.
Резиновая верстка
Страница занимает всю ширину браузера, каких бы размеров она не была и на каком бы устройстве вы не открыли эту страницу. Ширина элементов страницы задается в процентах от ширины окна, и поэтому занимают всю доступную область. При этой верстке тяжело добиться хорошего удобного дизайна при всех возможных разрешениях экранов, ведь страницы будут выглядеть по-разному.
Табличная верстка или верстка таблицами
В данном случае сетка страницы строится с помощью таблиц. Представьте, что на странице есть главная таблица, а в ее ячейках при необходимости располагают вложенные таблицы, а в их ячейках могут быть новые таблицы и так до бесконечности. Код получается громоздким, это очень неудобно.
Сегодня так страницы уже не верстают. Поисковики также не любят такие страницы и плохо их индексируют. Если вам нужно, вы можете разместить на странице таблицу или несколько, но не нужно делать с их помощью структуру страницы.
С видами разобрались.
Итак, сверстанный HTML-макет – это уже не картинка в фотошопе, это – набор файлов HTML, CSS, JS с нарезкой картинок. Обрабатывая этот набор, браузер показывает посетителю картинку, которая полностью(при соблюдении всех требований) соответствует дизайн-решению сайта.
Для того, что бы производители браузеров и разработчики сайтов «говорили на одном языке» и браузеры корректно отображали HTML-макеты, организацией W3C разработаны технологические стандарты.
Так вот валидная верстка – это по сути верстка в соответствии с технологическими стандартами W3C.
Причины по которым ваш сайт может не проходить валидацию:
Во-первых, мелкие ошибки в макете, которые браузер проигнорирует, но валидатор заметит. Не всегда приметны глазу, по этому часто допускаются.
Во-вторых, даже при идеальном макете, у вас может быть сотни страниц и проверять каждую страницу после очередного редактирования повлечет за собой огромные трудозатраты и по этому подобные этапы часто пропускаются в целях экономии. В таком случае мелкие ошибки низбежны.
В-третьих, есть огромный ряд приемов, которые не соответствуют стандартам W3C, но при этом нормально поддерживаются и отображаются всеми браузерами.
И четвертая причина – это действительно грубые ошибки в коде. Это могут быть незакрытые теги, ошибки в написании атрибутов. Они видны на стадии тестирования макета, особенно, если тестирование ведется сразу в нескольких браузерах эти ошибки сразу же «вылезают» наружу и исправляются верстальщиком.
Так получается, что грамотный верстальщик по сути не нуждается в валидации своего кода? Рассмотрим критерии качественного проекта.
Качественный макет:
1. Оптимизированный. Содержит минимум кода для решения поставленной задачи.
2. Легкий. С минимумом картинок.
3. Чистый. Без «костылей».
4. Структурированный. Когда стили имеют осознанные названия, понятную вложенность, вплоть до того, что их можно спокойно менять местами без потери вида. Это обеспечивает легкую поддержку и модификацию макета.
5. Корректно отображается всеми браузерами.
6. Код макета грамотно оформлен в едином стиле.
Так вот, кривой, тяжелый макет с кучей «костылей», со стилями в духе «some-block-100-1-2-blalblabla», с 20-уровневой вложенностью тегов, даже, элементарно и запросто пройдет валидацию. В новых браузерах он будет выглядеть отлично.
Но при использовании возникнут проблемы:
· Трафик выше в 1,5–3 раза.
· Плохая индексация поисковыми роботами.
· Зависания и «тормоза» в браузере.
· Некорректное отображение в старых и мобильных браузерах.
· Доработка и поддержка в 1,5–3 раза дороже.
Какие можно сделать из этого выводы:
Валидация – не панацея.
Если ваш макет проходит валидацию – это не является гарантией его качества.
Валидация макета ни о чем не говорит, это не преимущество и не показывает ваш профессионализм, но знать технологические стандарты все же нужно, для того, что бы мелкие ошибки и «костыли» не превратили ваш проект в кривую и тяжелую ношу для программистов, которые будут его поддерживать. Пожалейте бедолаг, начинайте кодить «красиво». J