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

Автор Тема: Современные виды верстки сайтов HTML. Требования к верстке  (Прочитано 7410 раз)

Оффлайн Владимир75Автор темы

  • Администратор
  • Бизнес оценка: (4, 100%)
  • *****
  • СПАСИБО: 7200
  • Сообщений: 10606
  • Карма: 648
  • Пол: Мужской
  • Это я такой уже старый
  • Награды Гроссмейстер поисковой оптимизации SEO Профессионал Более трех тысяч спасибо За благотворительность Почетный гражданин нашего форума
    • Просмотр профиля
    • Оптимизация и Продвижение

Оффлайн Владимир75Автор темы

  • Администратор
  • *****
  • Доп. информация
    • Бизнес оценка: (4, 100%)
    • СПАСИБО: 7200
    • Сообщений: 10606
    • Карма: 648
    • Пол: Мужской
    • Это я такой уже старый
    • Награды Гроссмейстер поисковой оптимизации SEO Профессионал Более трех тысяч спасибо За благотворительность Почетный гражданин нашего форума
      • Просмотр профиля
      • Оптимизация и Продвижение
Современные виды верстки сайтов 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%. Да, у меня на блоге адаптивный шаблон и он неплохо смотрится со смартфонов. Пока что есть ошибки в валидации, но думаю, что руки скоро наконец дойдут до этого.

В ближайшее время я хочу переделать шаблон с учетом гибкой и семантической верстки по всем правилам, и тогда он станет еще лучше.
Бесплатный курс автора
« Последнее редактирование: 01-11-2017, 11:10:50 от Владимир75 »
Seo-консультации по SkypeSeo и разработка сайтов, Облачный майнинг(Блокчейн)
Skype:service-advertising(без live)
Мобильный, Whatsap, Viber: 8(910)774-44-99


Оффлайн Clever

  • Бизнес оценка: (7, 100%)
  • Ветеран
  • *****
  • СПАСИБО: 493
  • Сообщений: 964
  • Карма: 86
  • Пол: Мужской
  • Награды КМС поисковой оптимизации
    • Просмотр профиля

Оффлайн Clever

  • Ветеран
  • *****
С начала года я занялся подтягиванием своих слабых мест в веб технологиях. Разобравшись, я описал план самостоятельного изучения 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

  • Бизнес оценка: (3, 100%)
  • Ветеран
  • *****
  • СПАСИБО: 253
  • Сообщений: 615
  • Карма: 3
    • Просмотр профиля
    • Удаление вирусов на сайте с гарантией

Оффлайн ProtectYourSite

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

Оффлайн Alexei1800

  • Бизнес оценка: (0)
  • Пользователь
  • **
  • СПАСИБО: 2
  • Сообщений: 91
  • Карма: -4
    • Просмотр профиля

Оффлайн Alexei1800

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

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

Оффлайн ProtectYourSite

  • Бизнес оценка: (3, 100%)
  • Ветеран
  • *****
  • СПАСИБО: 253
  • Сообщений: 615
  • Карма: 3
    • Просмотр профиля
    • Удаление вирусов на сайте с гарантией

Оффлайн ProtectYourSite

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


Оффлайн Alexei1800

  • Бизнес оценка: (0)
  • Пользователь
  • **
  • СПАСИБО: 2
  • Сообщений: 91
  • Карма: -4
    • Просмотр профиля

Оффлайн Alexei1800

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

Оффлайн Clever

  • Бизнес оценка: (7, 100%)
  • Ветеран
  • *****
  • СПАСИБО: 493
  • Сообщений: 964
  • Карма: 86
  • Пол: Мужской
  • Награды КМС поисковой оптимизации
    • Просмотр профиля

Оффлайн Clever

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

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

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

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

То есть с отключенным JS верстка поплывет ?
Почему не использовать возможности медиа-запросов и сss-units (от слова css) а не делать через js то же самое.
« Последнее редактирование: 10-06-2018, 15:07:56 от Clever »

Оффлайн Alexei1800

  • Бизнес оценка: (0)
  • Пользователь
  • **
  • СПАСИБО: 2
  • Сообщений: 91
  • Карма: -4
    • Просмотр профиля

Оффлайн Alexei1800

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

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

Оффлайн Clever

  • Бизнес оценка: (7, 100%)
  • Ветеран
  • *****
  • СПАСИБО: 493
  • Сообщений: 964
  • Карма: 86
  • Пол: Мужской
  • Награды КМС поисковой оптимизации
    • Просмотр профиля

Оффлайн Clever

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

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


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

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


 

Похожие темы

  Тема / Автор Ответов Последний ответ
4 Ответов
4057 Просмотров
Последний ответ 30-11-2010, 23:31:51
от armid
2 Ответов
1462 Просмотров
Последний ответ 17-01-2012, 15:34:13
от bumer
4 Ответов
1587 Просмотров
Последний ответ 06-03-2012, 11:18:29
от Sevab
31 Ответов
3618 Просмотров
Последний ответ 12-12-2016, 11:12:40
от Dominika Rose
1 Ответов
934 Просмотров
Последний ответ 30-11-2015, 09:28:25
от newpol