Андрей Иванов

Технический директор

4848

Один из самых распространённых вопросов при разработке сайта — выбор вёрстки будущего проекта.

Существует два основных направления, не рассматривая устаревшие варианты и те варианты, которые бы мы не рекомендовали по многим причинам — различные “резиновые” вёрстки, мобильные версии, приложения и прочее:

  • адаптивный дизайн,
  • фиксированый дизайн.

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

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

В качестве интересного бонуса: распределение брендов телефонов по всем вышеприведённым сайтам.

  • Смартфоны Apple — 35%
  • Смартфоны Samsung — 20%
  • Смартфоны Lenovo — 5%
  • Смартфоны Sony — 4%
  • Смартфоны Nokia — 3%
  • Все остальные — 33%

Фиксированный дизайн

Самый популярный вариант вёрстки, при котором разрабатывается макет сайта фиксированной ширины (отсюда и название). Ширина, как правило, ~1200 пикселей. На данный момент, эта ширина является наиболее популярной по той причине, что обеспечивает нормальное отображение на большинстве устройств.

Вот так будет выглядеть стандартный фиксированный дизайн сайта на всех устройствах:

Объяснение технологии фиксированной вёрстки

Алгоритм простой — рисуется макет шириной 1200px, к примеру, далее этот макет располагается ровно по середине экрана, по бокам добавляются неиспользуемые полосы.

Вся проблема в том, что ширина этих полос будет зависеть от разрешения пользователя, который будет смотреть сайт. На ноутбуке с разрешением 1366px полосы составят всего 83px с каждой стороны (из 1366 вычитаем 1200 и делим результат пополам). При разрешении fullhd (1920x1080px) полосы будут уже более заметными и составят уже 360px.

Мобильные устройства научились масштабировать сайты, поэтому, скорее всего, на телефоне вы увидите такую картину:

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

Адаптивный дизайн

Более сложный в исполнении вариант, при котором рисуется не один макет, а 3 макета различного разрешения. Наиболее часто используемая схема: 320 | 768 | 1200. Таким образом, дизайнер вручную определяет, как будет смотреться сайт на всех возможных разрешениях.

Вот так будет выглядеть стандартный адаптивный дизайн сайта на всех устройствах:

Объяснение технологии адаптивной вёрстки

Разрабатывается сетка и определяется, как ведёт себя каждый отдельный блок в различных разрешениях. Учитываются особенности устройств. К примеру, для телефонов и планшетов увеличиваются размеры ссылок и текста, чтобы не было необходимости увеличивать масштаб браузера для клика в нужную область.

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

Промежуточные итоги

Каждый из вариантов имеет право на существование, каждый из них имеет свои плюсы и минусы.

Основные преимущества и недостатки каждого варианта:

Фиксированный дизайн

  • Высокая скорость разработки сайта;
  • Неудобство использования на мобильных устройствах;
  • Небольшая стоимость разработки проекта;
  • Устаревшая технология, прежде всего, по мнению поисковых систем;
  • Простое и недорогое дальнейшее ведение;
  • Неиспользуемые полосы по бокам на больших дисплеях;
  • Поддержка и добавление новых страниц.

Адаптивный дизайн

  • Лояльность со стороны поисковых систем;
  • Удобное использование;
  • Красивое отображение на всех типах устройств: от телефонов до ПК;
  • Более высокая стоимость разработки;
  • Длительный процесс разработки;
  • Сложность дальнейшей доработки.

Важное замечание про продвижение

Два основных поисковика - Яндекс и Google, неоднократно заявляли, что при ранжировании результатов поиска, они будут уделять отдельное влияние (читайте, как “бонус”) тем сайтам, которые используют адаптивный дизайн. Мотивируют они тем, что растёт количество мобильных пользователей, которым было бы удобнее пользоваться сайтами, которые приспособлены к их устройствам.

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

В будущем не исключается, что поисковая выдача разделится на две: для обычных ПК и для мобильных пользователей. К этому подводит, к примеру, тот же Яндекс.директ (контекстная реклама), который уже позволяет разделить объявления для показа пользователям компьютеров и телефонов/планшетов.

Подведем итоги

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

Стоимость разработки и сроки в среднем в 1.5-2 раза выше по сравнению с фиксированным дизайном, что может в какой-то степени оттолкнуть решение.

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

Поделиться в: