2. Особенности верстки

Вёрстка веб-страниц — процесс формирования (вёрстка) веб-страниц в текстовом редакторе, следующий этап после веб-дизайна; а также результат этого процесса, то есть собственно веб-страницы.

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

Блочная вёрстка происходит при помощи блоков (тег <div>) и описывающих их таблиц стилей (CSS). До недавнего времени в качестве основных инструментов верстки выступали таблицы и фреймы (фреймы, ввиду их некоторых проблем, уходят в прошлое: например, стандарт HTML 5 более не включает в себя поддержку фреймов). В настоящее время блочная используется гораздо шире. Однако табличная вёрстка в исполнении гораздо проще блочной вёрстки. Плюсы и минусы блочной верстки:

• Слой можно перемещать, прятать и показывать без перезагрузки всей страницы. С помощью всего нескольких инструкций можно создавать разные эффекты, вроде выпадающих меню, всплывающих подсказок, движущихся элементов и другое. Добавление подобных трюков хотя и увеличивает объем кода, но не требует повторной загрузки и обновления документа и происходит без лишних задержек со стороны браузера. Кроме того, выразительность и привлекательность сайта во многом повышается благодаря использованию подобных приемов со слоями.

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

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

• Не следует считать, что использование слоев это панацея от всех бед. К сожалению, стандарты работы со слоями ещё не до конца устоялись и браузеры по-разному реализуют определённые возможности. Из-за этого основная сложность верстки слоями — создать универсальный код, который бы одинаково и без ошибок работал в разных браузерах («кросс-браузерность») и при разных разрешениях экрана. Приходится вникать в тонкости поведения браузеров при использовании различных элементов стилей.

3. Адаптивность сайта

Что такое адаптивность сайта? Адаптивный веб-дизайн (англ. Adaptive Web Design) — дизайн веб-страниц, обеспечивающий корректное отображение сайта на различных устройствах, подключённых к интернету и динамически подстраивающийся под заданные размеры окна браузера.

Целью адаптивного веб-дизайна является универсальность веб-сайта для различных устройств. Для того, чтобы веб-сайт был удобно просматриваемым с устройств различных разрешений и форматов, по технологии адаптивного веб-дизайна не нужно создавать отдельные версии веб-сайта для отдельных видов устройств. Один сайт может работать на смартфоне, планшете, ноутбуке и телевизоре с выходом в интернет, то есть на всем спектре устройств.

Впервые понятие отзывчивого веб-дизайна (англ. responsive web-design) ввёл Итан Маркотт в одной из своих статей в мае 2010 года. Впоследствии он выпустил книгу под названием «Responsive Web Design», посвященную данной технологии^].

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

С другой стороны, Аарон Густафсон выпустил книгу «Adaptive Web Design: Crafting Rich Experiences with Progressive Enhancement», которая рассматривает метод «постепенного улучшения»  как важную составляющую адаптивного дизайна.

В результате среди веб-дизайнеров стали понимать адаптивный дизайн (англ. adaptive design, не путать с англ. adaptive layout) как более широкое понятие, включающее отзывчивый дизайн (в качестве одной из реализаций адаптивности) и постепенное улучшение.

Я использовал на своем сайте, так называемый, «резиновый» дизайн. Суть резинового дизайна заключается в том, что каждый элемент не имеет фиксированного размера, а имеет размеры, относительно размеров экрана устройства. Результатом является то, что сайт одинаково отображается на всех видов устройств – будь то смартфон или ноутбук.

Существуют много ресурсов и плагинов для адаптивной верстки сайта. Самыми популярными из них являются Bootstrap (HTML, CSS и Javascript фреймворк для Web-разработки) и Skeleton (фреймворк, основанный на CSS и JavaScript). Различия между ними только в интерфейсе. Функционал у них одинаковый и на них можно добиться одинакового результата.

Однако на своем сайте я не использовал фреймворки и плагины, а написал для сайта «резиновый» дизайн.

Скриншот 1. Пример резинового дизайна собственного сайта, на примере разрешения Iphone 4