Блог Дмитрия Ивлева
Автор:      Рубрика: Веб-технологии 2017-08-09

Современные виды верстки сайтов HTML. Требования к верстке

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

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

Верстка сайтов на HTML/HTML5 и CSS/CSS3



С начала года я занялся подтягиванием своих слабых мест в веб технологиях. Разобравшись, я описал план самостоятельного изучения HTML и CSS, а также  HTML5 и CSS3. Я придерживался этого плана и результат получился неплохим.

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

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

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

Что такое верстка сайта, долго объяснять я думаю не стоит. Если коротко, то это создание HTML кода и CSS-таблиц стилей по задуманному ранее дизайну. Чаще всего страницы верстают на основе подготовленного заранее в фотошопе psd-макета.

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

Требования к современной верстке

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

  • кроссбраузерность
  • адаптивность
  • минимум кода
  • высокая скорость загрузки страниц
  • семантичность
  • валидность

Давайте разберем какие бывают виды верстки сегодня и вам станет понятно что все это значит.

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



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

  • Фиксированная верстка или статическая. Вне зависимости от размеров окна браузера или устройства ширина страниц будет постоянной. Все элементы занимают строго определенную ширину в пикселях на странице. Если разрешение экрана большое и окно браузера развернуто на весь экран, то, как правило, по бокам остается свободное место. И наоборот, на мобильных устройствах при фиксированной верстке снизу на странице появляется полоса прокрутки.
  • Резиновая верстка. Страница занимает всю ширину браузера, каких бы размеров она не была и на каком бы устройстве вы не открыли эту страницу. Ширина элементов страницы задается в процентах от ширины окна, и поэтому занимают всю доступную область. При этой верстке тяжело добиться хорошего удобного дизайна при всех возможных разрешениях экранов, ведь страницы будут выглядеть по-разному.
  • Табличная верстка или верстка таблицами. В данном случае сетка страницы строится с помощью таблиц. Представьте, что на странице есть главная таблица, а в ее ячейках при необходимости располагают вложенные таблицы, а в их ячейках могут быть новые таблицы и так до бесконечности. Код получается громоздким, это очень неудобно, да и надобности в этом уже нем. Сегодня так страницы уже давно не верстают. Более того, поисковики не любят такие страницы и плохо их индексируют. Если вам нужно, вы можете разместить на странице таблицу или несколько, но только не делайте с их помощью структуру страницы.
  • Блочная верстка, верстка блоками или div-верстка. Это, пожалуй, самая распространенная верстка сегодня. Сетка страниц конструируется из множества блоков <div> и <span>, которые вложены друг в друга. Для доступа к ним используются атрибуты id и class. Откройте исходный код (Ctrl + U) практически любой веб-страницы и вы увидите такую верстку.
  • Адаптивная верстка или мобильная верстка. Ее еще иногда называют респонсивная верстка. Ключевая особенность в том, что страницы хорошо адаптируются под любое разрешение экрана пользователя. Не важно, отрыли вы страницу на стационарном ноутбуке, на здоровенном широкоформатном мониторе или на смартфоне — в любом случае страница должна хорошо смотреться и быть удобной для пользователя. Это достигается тем, что используют несколько таблиц стилей под разные разрешения.
  • Гибкая верстка или flex верстка. Вначале применяется известная всем блочная верстка, а потом нужные блоки превращают во флекс-контейнеры (флексбоксы). В стилях элемента указывают display: flex; Элементу можно указать направление главной оси и выравнивание. Эти возможности стали доступны с приходом CSS3. Теперь страницы становятся очень гибкими. Этот механизм подробно разбирается на продвинутых курсах в HTML Academy. Рекомендую ознакомиться, за этим настоящее и будущее верстки.
  • Семантическая верстка. Она явилась логичным продолжением блочной верстки и стала доступна в HTML5. Новые теги делают станицу более структурированной. Поисковики любят такие страницы. Что это за новые теги в HTML5, можете посмотреть в другой моей статье.
  • Валидная верстка или по-другому верста без ошибок. Это верстка, выполненная в соответствии со стандартами W3C. Проверить свою HTML-страницу на корректность вы можете с помощью специального валидатора W3C.
  • Кроссбраузерная верстка. Как понятно из названия, при такой верстке страницы выглядят одинаково в разных браузерах. Первое, с чего обычно начинают — подключают к странице специальный CSS файл — сброс стилей.



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

По собранной мной статистике около 40% людей посещают страницы моего блога с мобильных устройств. Причем со смартфонов более 30% и с планшетов около 7%. Да, у меня на блоге адаптивный шаблон и он неплохо смотрится со смартфонов. Пока что есть ошибки в валидации, но думаю, что руки скоро наконец дойдут до этого.

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

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

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

  • Практика по основам адаптивной верстки в HTML5 и CSS3
  • Практика верстки сайта под мобильные устройства
  • Веб-дизайн: практический курс создания лендинга
  • Веб-дизайнер — профессионал. Создание востребованных макетов
  • Современные тенденции веб-разработки
  • Научись создавать красивые, современные подписные и продающие страницы
  • Все о создании сайтов
  • Пошаговый план создания сайта
  • Школа блоггинга

Надеюсь, что статья была интересной, и вы нашли для себя что-то полезное.

Желаю профессиональной верстки вашим сайтам и блогам!



Вам может быть интересно:

HTML и CSS уроки для начинающих с нуля

Разработка сайтов на HTML5. Что нового в HTML5?

CSS практика — верстка сайта

Защитить сайт или блог на wordpress. Защита в несколько уровней

Как создать блог самому?

Как научиться быстро печатать на компьютере, 2 тренажера

Как научиться английскому языку самостоятельно с нуля

7 лучших способов заработка в интернете

С уважением, Дмитрий Ивлев.



Сундук с сокровищами
Получите ключ от сундука с сокровищами.

Узнайте много интересного и сделайте свою жизнь ярче!
ELA English AcademyМеждународный Финансовый ЦентрMBA - City Business SchoolПоказать все обучающие курсы
Оставьте Ваш комментарий или вопрос
  • Галина

    Для меня эта статья интересна. Во первых я очень рада, что познакомилась с этим блогом. Во вторых не перестаю удивляться разносторонним интересам автора. Мне нравится доступность изложения. Здорово, что то, чем интересуется автор, выкадывается на страницах блога. Меня это мотивирует . Я многим интересуюсь, но вот блоги как-то свои пустила на самотек. Что в корне неправильно.
    Спасибо. Дмитрий, за пинок!!!!!

    в 10:49 | Ответить
    • Дмитрий Ивлев

      Благодарю, Галина! Очень приятно осознавать, что мои статьи действительно несут пользу людям. На днях напишу небольшую статью на совершенно другую тему и расскажу о своих переменах в личной жизни =)

      в 4:00 | Ответить
  • Инна

    Да, интересна, много новых слов узнала :-D .

    в 7:41 | Ответить
  • eun

    Мне кажется было бы уместным упомянуть про вёрстку динамических и статических страниц. %)

    в 12:16 | Ответить
    • Дмитрий Ивлев

      Хорошее замечание. Спасибо! Можешь своими словами в комментарии дополнить ;)

      в 7:15 | Ответить
  • eun

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

    в 5:55 | Ответить
    • Дмитрий Ивлев

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

      в 7:54 | Ответить
  • Илья

    Статья интересная. По крайней мере, пытается хоть немного ввести в курс дела.
    Мои пять копеек:
    — таблицы в верстке нужно использовать исключительно для табличных данных;
    — резиновая верстка не занимает всю ширину браузера (думаю, Вы слышали про min-width и max-width);
    — мобильная и адаптивная верстка — разные вещи;
    — смысл семантической верстки — поддержка чтения сайтов различными устройствами (например, экранные ридеры, помогающие слабовидящим людям)

    в 5:52 | Ответить
    • Дмитрий Ивлев

      Хорошие копейки у вас! Если еще расскажите разницу между мобильной и адаптивной версткой, то будет здорово.

      в 7:00 | Ответить
      • Илья

        Ну раз Вы просите — не могу отказать =)
        Все довольно просто. Мастера делали сайты фиксированной ширины или резиновые. Со временем доля мобильных устройств при просмотре сайтов начала резко расти. Появилась мобильная верстка. Т.е. для сайта создавалось две версии — стационарная и мобильная. Мобильную версию создавали с учетом разницы способов управления сайтом (особенно актуально для мобильных устройств с сенсорными экранами). Это и есть мобильная верстка.
        Однако, создавать две версии для сайта — довольно трудозатратно. А поддерживать две версии одновременно — совсем невесело. Поэтому было найдено отличное решение: создавать сайты адаптивные, т.е. автоматически подстраивающиеся под устройство просмотра. Об этом типе верстки Вы уже рассказали. Хочу только внести небольшое замечание: адаптивная верстка — это не просто «резина» + перестраивающиеся блоки (сетка). Это, в обязательном порядке, еще и изменение реакции элементов веб-страницы на действия пользователя. Например, оставлять активным функционал выпадающего меню при просмотре на мобильном устройстве — большая глупость.
        Надеюсь, я отстоял свои «5 копеек» =)

        в 12:23 | Ответить
        • Дмитрий Ивлев

          На все сто)
          Благодарю, Илья! Очень ценное дополнение ;)

          в 1:34 | Ответить
  • Эдуард

    Интересно! спасибо подпишусь!

    в 11:00 | Ответить
  • Александр

    Доброго времени суток!Интересно,кто нибудь знает,как правильно называется вёрстка в программе adobe muse (Это своего рода визуальный редактор html кода)?Жду ответа! =)

    в 1:46 | Ответить
    • Дмитрий Ивлев

      Мне тоже интересно))

      в 7:28 | Ответить
  • Георгий

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

    в 1:18 | Ответить
    • Александр

      Наша веб-студия занимается,разработкой сайта под ключ. Спасибо Дмитрию за интересный блог!

      в 1:26 | Ответить