Верстка web страниц

Адаптивная версия сайта – предназначена для удобного отображения содержимого в мобильных устройствах. Современная адаптивная верстка сайта является важнейшим фактором успешности проекта.

По сути Верстка - это "оживление" дизайн-макета сайта. Оживления производится с помощью языка разметки HTML, каскадных таблиц стилей CSS и сценария написанного на языке JavaScript.

Верстку веб страниц заказывают как в рамках создания сайта под ключ, так и для отдельных страниц или в случае редизайна сайта.

Что нужно знать о верстке сайта?

Верстку можно разделить по типу и исполнению.

По типу она может быть:

• статичная (Rigid fixed);

  Тип верстки, в котором ширина тела сайта задана в пикселях и остается неизменной.

  Преимущества:
  -Гораздо легче разрабатывать, можно заранее предугадать, как будет выглядеть сайт.
  - У дизайнера есть возможность следить за размером строки.

  Недостатки:
  -На устройствах с разрешением, меньшим ширины сайта, появиться горизонтальный скроллинг.
  -Неудобный просмотр в мобильных устройствах

• масштабируемая (Expandable elastic) в народе "Резиновая";

  Тип верстки, в котором ширина задана в процентах от текущего разрешения экрана.

  Преимущества:
  - Сайт будет заполнять всё пространство браузера, что значительно улучшает его вид.
  - Сайт с таким дизайном будет одинаково хорошо смотреться на разных разрешениях

  Недостатки:
  - Разработка такой верстки более сложный процесс и требует большего количества согласований.
  - Необходимо более тщательно формировать контент, учитывая различные расширения.

• адаптивная (Adaptable fluid);

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

  Преимущества:
  - Сайт максимально удобен для пользователя на любых устройствах.

  Особенности:
  - Требует тщательной проработки нескольких макетов, для различных размеров экранов и мобильных устройств.

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

• табличная;

  Табличная вёрстка ранее была довольно популярным методом вёрстки. В настоящее время не рекомендуется ее использование в качестве основного каркаса сайта. Однако, в ряде случаев таблицы незаменимы для верстки отдельных элементов.

  Недостатки:
  Браузеры преднамеренно расценивают таблицу как один объект, из-за чего содержимое таблицы не отображается до тех пор, пока она целиком не будет загружена. При использовании таблицы в качестве каркаса для размещения элементов веб-страницы, её исходное преимущество обращается в недостаток, поскольку приводит к задержке вывода содержимого.

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

• блочная.

  Вёрстка при помощи блоков (тег div) и описывающих их таблиц стилей (CSS). Реализует концепцию семантичной вёрстки.
  
  В настоящее время блочная верстка является основным видом разметки страниц. Однако в исполнении она гораздо сложнее табличной.

  Преимущества:
  Блоки по сравнению с таблицами отображаются быстрее. Более высокая скорость достигается за счет компактного кода и того, что отображение содержимого слоя происходит по мере его загрузки. Правда это может привести к «скачкам» элементов страницы по мере их загрузки.