Нужен ли вашему сайту адаптивный дизайн

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

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

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

Почему адаптивность важна в целом

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

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

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

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

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

• Считают, что сайт и так работает нормально и приносит прибыль (для популярных проектов);
• Сайт сложный и требует серьёзной переработки, а средств на это не выделено (для малого бизнеса, а также для частных проектов);

Если посетитель заходит на сайт, не имеющий адаптивной вёрстки, при помощи устройства с маленьким экраном, то он видит:

• Или страница помещается на экране полностью, но всё очень мелкое;
• Или страница не помещается в размер экрана и при этом возникает горизонтальная прокрутка;

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

Важно!

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

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

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

Всем ли сайтам нужна адаптивная вёрстка?

В общем случае да. Но насколько это важно, сильно зависит от типа сайта.

Пример:

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

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

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

Можно сформулировать следующее правило, которое позволит вам самостоятельно оценить необходимость внедрения адаптивного дизайна на вашем сайте:

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

Например, если у вас оптовая компания, работающая только с юридическими лицами, то вполне очевидно, что основная аудитория сайта — это представители других компаний. В этом случае маловероятно, что кто-то будет искать оптового поставщика с телефона...

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

Влияние адаптивного дизайна на стоимость сайта

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

Упрощённо можно представить так

Сайт с адаптивным дизайном имеет не один вариант оформления, а несколько — ровно столько, сколько вариантов размеров экрана существует (учитывая повороты экрана).

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

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

Насколько большой процент от общей стоимости занимает разработка и вёрстка адаптивного дизайна? Ответ на этот вопрос напрямую связан со сложностью сайта. В общем случае сумма тем больше, чем:

• Больше картинок на страницах (речь идёт в основном о тех картинках, которые относятся к элементам дизайна, а не к контенту);
• Больше разных разделов, отличающихся оформлением (каталог, новости, акции, статьи, корзина и так далее);
• Сложнее структура страниц (различные меню и другие блоки, из которых состоят страницы);
• Сложнее CMS, на которой построен сайт;

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

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

Сайт уже есть. Можно ли сделать его адаптивным?

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

Запомните!

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

В зависимости от сложности сайта, выполнение такого заказа может занять существенное время (например, недели), а стоимость может быть достаточно высокой. Особенно это касается тех случаев, когда существующий сайт имеет значительные недостатки в плане качества вёрстки или построен на CMS, которая является не лучшим решением для проекта такого типа.

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

• ¹ — На позиции в результатах поиска влияет множество факторов; адаптивность является одним из них.

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

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

Заказывать сразу, потом или вообще это не нужно?

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

• Если у вас сайта ещё нет, но он вам нужен, то лучше сразу делать его таким, чтобы он нормально отображался на любых устройствах вне зависимости от размера их экрана;
• Если сайт уже существует, но его эффективность недостаточна, то возможно одна из причин этого — отсутствие «адаптивки»
• Если у вас хороший эффективный сайт, то вы можете заказать его аудит на предмет выявления возможных недостатков, также можете посоветоваться с нами по телефону или иным способом, либо вообще сразу отказаться от внесения на сайт каких-либо изменений, поскольку и так всё хорошо.

Ещё стоит заметить, что в данном случае действует принцип «хуже не будет».