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

Автор Владимир75, 01-11-2017, 10:08:36

« назад - далее »

Владимир75Topic starter

Современные виды верстки сайтов 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%. Да, у меня на блоге адаптивный шаблон и он неплохо смотрится со смартфонов. Пока что есть ошибки в валидации, но думаю, что руки скоро наконец дойдут до этого.

В ближайшее время я хочу переделать шаблон с учетом гибкой и семантической верстки по всем правилам, и тогда он станет еще лучше.
Бесплатный курс автора
Услуги: Сайты в топ за две неделм Мобильный, WatsApp., Viber +79964788889, telegram @xiceer.
  •  


Clever

Цитата: Владимир75 от 01-11-2017, 10:08:36
С начала года я занялся подтягиванием своих слабых мест в веб технологиях. Разобравшись, я описал план самостоятельного изучения HTML и CSS, а также  HTML5 и CSS3. Я придерживался этого плана и результат получился неплохим.

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

Есть нюансы по некоторым пунктам "Виды верстки сайтов":

По поведению верстка может быть:

  • Фиксированная - имеет фиксированные параметры
  • Резиновая - растягивается/сжимается
  • Адаптивная - подстраивается(адаптируется), может менять расположение и отображение


Flexible Box - это отдельный модуль, отличный от предыдущих, с его помощью можно сделать любой из вариантов по поведению.

Grid Design или вёрстка с сеткой - одно из самых ожидаемых явлений в мире верстки, ведь уже поддержка на уровне 75%, поэтому непонятно, почему не указано в описании.

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

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


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

На уровне html, из распространенных вариантов, верстка может быть:

  • Табличной - преимущественно из таблиц
  • Блочной - еще называют версткой в дивах (<div></div>)
  • Cемантической - основной каркасс (скелет) состоит из семантических html5 элементов, а начинка может быть разной

На уровне html раньше была актуальна табличная верстка, потом появилась блочная (<div>) верстка, которая плавно перетекает в семантическую верстку.

На уровне css теперь появился Flexible Box модуль, кардинально меняющий подход к поведению, вытесняющий обтекание (float), а теперь уже на подходе Grid Design.

Также стоит отметить приближение динамических переменных CSS Variables, c помощью которых можно будет делать вещи, которые были доступны только с использованием сторонних библиотек, таких как less, sass.

Поэтому самый современный вид верстки ближайшего будущего это:

  • Семантическая адаптивная верстка на уровне html
  • Grid Design на уровне css для каркаса
  • Flexible Box на уровне css для вложенных элементов каркаса
  • CSS Variables на уровне css для динамики

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


ProtectYourSite

Тема выглядит как реклама курса, современные технологии не освящены.

Alexei1800

Я бы хотел написать о flex верстка. Вернее о главном ее минусе - не поддерживается во многих браузерах.

У меня кстати вот один раз возникла проблема, на сайте нужна была немного нестандартная верстка, в зависимости  от разрешения экрана - элементы изменялись бы % разрешению экрана. Все бы хорошо и отлично за исключению одного, но, это размер шрифта, ему нельзя задать, чтобы он изменялся пропорционально, приходилось подтягивать js. Что не есть хорошо. Может кто сталкивался с данном проблеммой
  •  

ProtectYourSite

https://learn.javascript.ru/css-units
Или для каждого разрешения прописывать.


Alexei1800

Цитата: ProtectYourSite от 10-06-2018, 10:15:27
https://learn.javascript.ru/css-units
Или для каждого разрешения прописывать.
Для каждого разрешения прописывать, тут есть один нюанс, если браузер вручную сужать, расширять, то начнет все съезжать, пока не дойдет до нужного расширения.
Поэтому  я нашел только решение через javascript.
При указании % или em, проблема та же шрифт-то фиксированный все равно, он не изменяется пропорционально экрану
  •  

Clever

#6
Цитата: Alexei1800 от 10-06-2018, 09:34:11
Я бы хотел написать о flex верстка. Вернее о главном ее минусе - не поддерживается во многих браузерах.

Например ?
На caniuse.com совсем другая картина поддержки.

Добавлено: 10-06-2018, 15:07:56


Цитата: ProtectYourSite от 10-06-2018, 10:15:27
https://learn.javascript.ru/css-units
Или для каждого разрешения прописывать.

То есть с отключенным JS верстка поплывет ?
Почему не использовать возможности медиа-запросов и сss-units (от слова css) а не делать через js то же самое.

Alexei1800

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

Да с отключенным js верстка поплывает, задача, чтобы шрифт пропорциональна менялся разрешению экрана. Ну не меняется он пропорционально экрану, в отличии от дивов. Если прописать fon-size: 1.2 em, когда див будет уменьшатся, шрифт не будет уменьшатся, я это имею ввиду
  •  


Clever

Цитата: Alexei1800 от 10-06-2018, 15:45:41
Например браузер сафари, браузеры интернет эксплорер.
Я просто использовал эту верстку очень удобно, но попался один какой-то въедливый заказчик и пришлось переделывать все.

Сафари для десктопа давно отжил свое, а IOS сафари поддерживает то что нужно, интернет эксплорер - разве что 11 (и то с 2013 не обновляется), но даже он поддерживает старый синтаксис. А чтобы проверить поддержку и свойства подстроить можно использовать @supports


Цитата: Alexei1800 от 10-06-2018, 15:45:41
Да с отключенным js верстка поплывает, задача, чтобы шрифт пропорциональна менялся разрешению экрана. Ну не меняется он пропорционально экрану, в отличии от дивов. Если прописать fon-size: 1.2 em, когда див будет уменьшатся, шрифт не будет уменьшатся, я это имею ввиду

EM берет размер от родительского блока, REM от корня, а для того чтобы шрифт менялся в зависимости от размера экрана, можно использовать VW.
Вот накидал пример использования  VW для актуальных браузеров, в нем размер шрифта меняется на разрешениях от 400px до 900px, а на остальных, (чтобы не был слишком маленьким или большим) выводится в REM. Для наглядности меняется цвет и текст пояснения.


Clever

#9
Цитата: arislav от 11-03-2020, 16:14:59
Какая платформа способна это воплотить?  DLE? Бетрикс? WordPress ? Тильда? Wix? 

Здесь больше не платформа, а руки. Воплощается на уровне верстки.

Для своих проектов уже давно использую такой вариант:


  • Каркасс сайта - семантические теги + css grid
  • Список статей - flexbox
  • Основные значения в css - с помощью динамических переменных
  • Остальное по необходимости