Перейти в раздел к "Содержанию"

Типы верстки сайта

Верстки делятся по принципу отображения и по типу:

1) Деление по принципу отображения:

а) Фиксированная (статическая) верстка.
б) Резиновая (тянущаяся) верстка.
в) Респонсивная верстка (Адаптивная верстка) - щелкните здесь.

При фиксированной верстке веб-страница имеет постоянную ширину, независимо от ширины окна браузера.
При резиновой верстке веб-страница изменяет свои размеры в зависимости от ширины окна браузера. Например, Вы растягиваете окно браузера, и веб-страница тоже растягивается.

Какая верстка лучше?
Однозначного ответа нет, обе верстки (фиксированная и резиновая) хорошие - главное правильно их использовать. Хотя резиновая верстка является более "продвинутой".

Резиновую верстку выполнять сложнее, чем фиксированную, т.к. приходится учитывать, как будет выглядеть веб-страница на экранах разной ширины. Выполняя резиновую верстку часто ориентируются на то, чтобы страница сайта хорошо отображалась на экранах шириной от 1024рх до 1280рх, т.е. содержимое веб-страницы будет растягиваться и сжиматься по ширине от 1024рх до 1280рх. Чтобы содержимое страницы (контейнеры, картинки) могло резиниться, ширину элементам веб-страницы задают в процентах - в этом случае ширина элемента вычисляется браузером относительно ширины контейнера-родителя этого элемента. В результате получается, что при увеличении ширины контейнера-родителя происходит увеличение ширины элемента страницы, а при уменьшении ширины контейнера-родителя происходит уменьшение ширины элемента страницы. Сложность резиновой верстки во многом зависит от макета - при этом не каждый дизайн веб-страницы подходит для резиновой верстки. Из-за сложности выполнения, в резиновой верстке чаще возникают ошибки, поэтому выполнение качественной резиновой верстки требует дополнительных знаний и умения. Например, наверно, Вы видели, что на квадратном мониторе сайт выглядит вроде хорошо, но этот же сайт на широкоэкранном мониторе размазывается по всей ширине экрана (дизайн сайта портится). Либо наоборот, на широкоэкранном мониторе сайт выглядит хорошо, а на квадратном мониторе дизайн сайта портится, содержимое веб-страницы начинает налезать друг на друга. Это показатели неправильно сделанной резиновой верстки.

2) Деление по принципу верстки:

а) Табличная верстка.
б) Блочная верстка.
в) Комбинированная верстка (Табличная и Блочная верстки).

Табличная верстка - в этом моменте часто возникает путаница.
Некоторые заказчики просят использовать только блочную верстку и считают таблицы чем-то устаревшим и вредным для сайта. И в этом они сильно заблуждаются. Таблицы включены в стандарт HTML5 наряду с множеством разных нововведений - и если бы таблицы были устаревшим элементом, они бы не перешли в HTML5. При этом таблицы являются семантическим элементом, когда используются для представления табличных данных.

Так в чем же дело?
Дело в том, что верстать весь сайт на таблицах, когда в ячейках одной таблицы создается другая таблица и т.д. - это устаревший подход и современные сайты так создавать не нужно (исключение можно сделать для сайтов с простой структурой, когда таблица используется для создания каркаса сайта). А вот использование на сайте таблиц для представления в них табличных данных - это правильный подход в использовании. По этой причине таблицы находятся в стандарте HTML5

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

Адаптивная (Респонсивная) верстка

Адаптивная верстка (или как ее еще называют Респонсивная верстка - от англ. Responsive) - суть этой верстки в том, чтобы сверстанная веб-страница хорошо отображалась на экранах устройств разного размера, например, смартфон, планшет, монитор компьютера. Под размер экрана каждого из указанных устройств задаются свои настройки стилей CSS. Респонсивная верстка получается путем использования техники резиновой верстки, а также применения через CSS правила @media , с помощью которого указывается размер ширины экрана устройств, под которые делается адаптив верстки.

Примеры адаптивной (респонсивной) верстки смотрите щелкнув по указанным ссылкам.

Пример 1
Пример 2
Пример 3

При заказе на выполнение респонсивной верстки сайта оговаривается, под экраны какой ширины нужно сделать адаптив. Например, разрешение смартфона 320х480 при этом экран смартфона работает в двух режимах - портретная ориентация и альбомная ориентация. Для одних сайтов можно сделать адаптив и для альбомной ориентации и для портретной ориентации. Для других сайтов практичнее сделать адаптив только для альбомной ориентации. Иногда нет практического смысла мельчить контент сайта для портретной ориентации, если сайт можно нормально посмотреть на смартфоне в режиме альбомной ориентации. Тем более большинство людей для просмотров сайтов используют не смартфон, а планшет, т.к. планшет имеет большие размеры и на нем удобнее смотреть сайты. Под что делать адаптив, практичнее определять исходя из дизайна и контента сайта.

Проблема масштабирования в мобильных браузерах

Иногда случается так - Вы сделали адаптивную верстку страниц сайта, но мобильные браузеры (Opera, Mozilla, Яндекс и др.) не обращают ни какого внимания на ваш адаптив, как будто и нет никакого адаптива. Мобильный браузер просто уменьшает масштаб всей веб-страницы, чтобы веб-страница целиком поместилась на экране устройства, в котором вы смотрите сайт.

Исправить возникшую ситуацию можно тем, что в контейнере head, в исходном коде веб-страниц, нужно написать мета тег viewport. Например,
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Разберем значение атрибута content
1) width=device-width этим мы показываем, что ширина области просмотра равняется ширине экрана устройства, на котором смотрят наш сайт.
2) initial-scale=1.0 этим мы показываем, что масштаб страницы при загрузке 100% При этом пользователь, просматривая сайт, может сам изменить масштаб.

Иногда на сайтах запрещают пользователю изменять масштаб просматриваемой страницы, т.е. пользователь всегда видит веб-страницу такой, какая она есть, и не может ее сделать крупнее или меньше. Это делается тем, что в значении атрибута content указывают maximum-scale=1.0, minimum-scale=1.0, user-scalable=no   Например.
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

Размер шрифта в мобильных браузерах

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

Есть некоторые решения через CSS, но они помогают не везде и не всегда. Например.

html * {
      max-height: 1000000px;
      text-size-adjust: none;
}

Чтобы уменьшить самоволие мобильных устройств относительно размера шрифта, каждый используемый шрифт можно подключить как файл. Для лучшей кроссбраузерности, шрифт подключается в нескольких форматах: ttf, woff, svg, eot (для IE8 и меньше). Это относится и к безопасным шрифтам. Файлы шрифтов подключаются правилом @font-face

При этом использование файлов шрифтов, может усилить разность шрифта при отображении на ПК в разных браузерах.