Варианты верстки сайта

Standart

Стандартные блоки.

Grid

Привязкой к сетке 12 колонок.

Window

Привязка к границам окна.

AutoScale

Масштабированием контента.
Standart
  • плюсы
- простая, быстрая и дешевая верстка.
- Заказчику просто вносить изменения.


  • минусы
- Сложно верстать изображение на весь экран под разные разрешения ПК.
- Дизайн выглядит скучным и однообразным.





  • применение
- Быстрый запуск.
- Сборка прототипа.
  • Не важные страницы.


Grid
  • плюсы
- Контент не меняет позиционирование экрана любых мониторах.
- Хорошо сочетается со стандартными блоками.

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



  • применение
- Сложные, большие, сервисные сайты.
- Минималистичные.
- Корпоративные сайты.
- Возрастная аудитория.
Window
  • плюсы
- Положение и размеры элементов и шрифтов адаптируются под разрешение экрана, не изменяя масштаба.

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


  • применение
- Креативные сайты.
- Необычная сетка.
- Подходит для большинства проектов.
AutoScale
  • плюсы
- Можно сверстать только разрешения 320,960,1200.
- Меняется автоматически блока.
- Одинаково выглядит на всех разрешениях и в адаптивах.
  • минусы
- Масштаб текста, сложно подбирать. Обычно это 12-14pt .
- Фото нужны в очень высоком качестве и отключать lazyload.
- Плохо сочетается со стандартными блоками.
- Могут быть проблемы с текстовым контейнером в адаптивах.
  • применение
- Гигантизм, брутализм,
- Молодежные,
- Художественные,
- Портфолио, конкурсные.

Варианты верстки сайта

Сравнение первого блока
Сравнение подвалов