{"id":14262,"url":"\/distributions\/14262\/click?bit=1&hash=8ff33b918bfe3f5206b0198c93dd25bdafcdc76b2eaa61d9664863bd76247e56","title":"\u041f\u0440\u0435\u0434\u043b\u043e\u0436\u0438\u0442\u0435 \u041c\u043e\u0441\u043a\u0432\u0435 \u0438\u043d\u043d\u043e\u0432\u0430\u0446\u0438\u044e \u0438 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0435 \u0434\u043e 1,5 \u043c\u043b\u043d \u0440\u0443\u0431\u043b\u0435\u0439","buttonText":"\u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435","imageUuid":"726c984a-5b07-5c75-81f7-6664571134e6"}

Что такое адаптивный дизайн, и почему адаптивная верстка сайта дороже?

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

Что такое адаптивный дизайн?

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

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

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

Почему так важен адаптивный дизайн

Сегодня около 50% пользователей посещают сайты с гаджетов — смартфонов, планшетов. Это удобно, ведь можно серфить по сети, находясь в любой точке пространства (где есть интернет) — лежа в кровати, на улице, в транспорте. Мобильная аудитория постоянно растет, и игнорировать ее потребности нельзя. Вот почему разработчики адаптируют сайты под портативные устройства.

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

Фактор юзабилити

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

Судите сами, останетесь ли вы на страничке, когда на экране отображается лишь ее часть, а отдельные элементы дизайна «наползают» друг на друга? Это мешает, а иногда и не дает воспринимать информацию. Такой сайт раздражает, и как следствие — получает отказ. Пользователь закрывает страницу и переходит к конкуренту.

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

Совершить какое-либо конверсионное действие (например, заполнить форму заявки) на не адаптированном сайте и вовсе проблема.

Условие продвижения

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

Важно! Адаптивность — один из прямых факторов ранжирования. Поисковые системы учитывают, насколько сайт «mobile-friendly», и если нет — понижают его в рейтинге.

С 2018 года Google при ранжировании сайтов следует правилу Mobile-first index. Это означает, что поисковик в первую очередь анализирует тот контент, что отображается на мобильных устройствах. А ранжирование десктопных версий сайтов теперь подчиняется мобильной выдаче. Причем содержимое мобильной и десктопной версий должно быть идентичным, то есть приоритет отдается именно адаптивным ресурсам.

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

Источник продаж

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

Адаптивный дизайн или мобильная версия?

Следует различать адаптивность сайта и создание отдельной мобильной версии.

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

Мобильная версия — это, по сути, отдельный сайт, который создается специально для отображения на маленьких экранах. Он максимально оптимизирован под мобильные устройства. Но администрирование усложняется — ведь теперь приходится вносить изменения не в один, а в два сайта. Это требует дополнительных ресурсов.

Почему адаптив дороже?

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

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

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

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

Расчет стоимости

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

Эта информация может быть полезной для вас: так ли нужен уникальный дизайн сайта или можно обойтись шаблонным?

0
15 комментариев
Написать комментарий...
Yury S
2020
Почему так важен адаптивный дизайн
Ответить
Развернуть ветку
Turerror

Ты удивишься, но под новостью про «редизайн» ВК, мне говорили, что сайт под широкоформатный монитор - это плохо. «Неудобно читать», «забить всё рекламой»… Люди правда не знают, что такое адаптивный дизайн) Для многих это равно растянуть)

Ответить
Развернуть ветку
Anton Smets
2025

Почему так важен отзывчивый дизайн

Ответить
Развернуть ветку
RapidwebMe
Автор

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

Ответить
Развернуть ветку
Лоло Оглы

Насчёт "дороже" - спорно. Сейчас это скорее стандарт и минимум, да и все возможности для удобной и быстрой разработки имеются. И Explorer "умер", что тоже упрощает задачу.

Ответить
Развернуть ветку
Anna Petrova

Хорошо написано. Лайк.
Два уточнения из статистики нескольких десятков моих сайтов (делаю для друзей):
- % мобильных (телефон, планшет) заходов приближается к 90;
- объявления, сделанные в Яндекс. Директе для телефона имеют конверсию значительно выше.
Про необходимость установки SSL добавьте, пожалуйста, пару строк. Сложно людям объяснить про этого зверя и почему на него стоит потратить пару тысяч в год.
Спасибо

Ответить
Развернуть ветку
Andrey Bazykin

Да можно и не тратить пару тысяч в год, а поставить Lets Encrypt

Ответить
Развернуть ветку
Anna Petrova

Одно дело - сделал и на год забыл, другое - раз в три месяца на каждый сайт делать новый.

Ответить
Развернуть ветку
Макс Мухарёв

Третье дело - автоматизировать получение сертификата, как это изначально и задумано, и забыть об этом.

Ответить
Развернуть ветку
Andrey Voskresenskiy

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

Ответить
Развернуть ветку
Anna Petrova

Да, спасибо, уже всё нашлось. Надо было просто глаза открыть )))

Ответить
Развернуть ветку
Eugene Eremeev

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

Ответить
Развернуть ветку
RapidwebMe
Автор

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

Ответить
Развернуть ветку
Eugene Eremeev

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

Ответить
Развернуть ветку
Michael Solar

Но почему то в топе выдачи поисковиков нечитабельное говно с кучей попапов

Ответить
Развернуть ветку
12 комментариев
Раскрывать всегда