Web разработка > Разработка сайтов

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

(1/2) > >>

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

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

Clever:

--- Цитата: Владимир75 от 01-11-2017, 11: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
Или для каждого разрешения прописывать.

Навигация

[0] Главная страница сообщений

[#] Следующая страница

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