Что выбрать: адаптивный дизайн или мобильную версию?

Всем привет! Помню, лет 5 назад фраза "мобильная версия сайта" воспринималась для меня как что-то ненужное и сделанное только некоторыми крупными онлайн-проектами. Об адаптивном дизайне в то время речи не велось вообще. Но интернет — это быстро меняющееся пространство и сейчас этими понятиями часто оперируют вебмастера и разработчики сайтов.

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

адаптация под мобильные устройства

Перед тем, как что-то предпринимать я задался логичным вопросом — "Что лучше: мобильная версия или адаптивный дизайн?". Уверен, что и вы задавались данным вопросом, либо он у вас стоит на повестке дня. В посте я хочу разобрать все плюсы/минусы данных типов удобного отображения сайта для мобильных пользователей и "нарисовать" небольшую сводную таблицу. Вам будет легче определиться с выбором.

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

UPD. Новая wordpress-тема была разработана адаптивная (старая mobile-версия удалена).

У адаптивности есть 2 плюса — удобство для пользователей + возможность влияния на ранжирование. Подчеркнул возможность, потому как сам наглядно такого влияния не замечал. Да и первого плюса достаточно, чтобы немного раскошелиться :smile:.

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

1. Стоимость

Мобильная версия для блога обошлась мне в 50$. Адаптивный дизайн в районе 120-150$ (это именно цена за адаптивность wordpress-темы слегка портального типа). Здесь выигрывает первый вариант. Стоит учитывать то, что сайты бывают разные и стоимость будет разной. Многое зависит от сложности. Я публикую цифры, которые получились у меня.

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

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

2. Монетизация

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

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

3. Отображение

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

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

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

4. Удобство и функционал

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

5. Скорость загрузки

А здесь обычно выигрывает мобильная версия. Все из-за того, что в ней нет ничего лишнего.

Обещанная сводная таблица :smile:.

Критерий Адаптивный дизайн Мобильная версия
Стоимость Дешевле Дороже
Монетизация Более удобно Менее удобно
Отображение Более похож на основной дизайн Похож менее
Функционал Полный Менее полный
Скорость загрузки Ниже Выше

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

Вот такое у меня мнение по данному вопросу. А что выбираете вы: мобильную версию или адаптивный дизайн? В каких пунктах солидарны со мной, в каких нет? Буду рад увидеть мысли в комментариях от собирающихся и уже воплотивших адаптацию под различные устройства ;-)!

Рейтинг
1 звезда2 звезды3 звезды4 звезды5 звезд (11 голос., в среднем: 4,09 из 5)
Загрузка...
Аудит сайта

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

От 19000 руб.
Продвижение

Комплексное развитие проектов по актуальным направлениям в SEO. Используются методики, имеющие стабильный долгосрочный эффект (без накруток и спама).

От 25000 руб.
Консультации

Консультирую по вопросам поисковой оптимизации, продвижения сайтов. Лучший способ узнать мое подробное мнение по волнующей задаче/проблеме. Конкретные ответы на конкретные вопросы.

От 5000 руб.
Отзывов уже 44:
Написать комментарий
  1. 1. Игорь Петренко

    Привет, Сергей!

    Я выбрал бы мобильную версию из-за ее легкости. Да, пускай функционал урезан, но главное это ведь контент? Я по себе сужу: если мне понравилась статья, то я ее прочитаю еще раз с ПК в обычном дизайне сайта.

    Насчет адаптивности, то многие браузеры (на моем планшете 7* стоит Мозилла) сами масштабируют сайт и ничего не теряется в дизайне.

    Да, адаптивность круто, но мобильная версия лучше. А еще лучше — приложение!

  2. 2. Dmitry

    вопрос дня — как отличить мобильную версию сайта от адаптивного сайта?

    спорили как-то с одним прогером вроде по поводу сайта wpnew

  3. 3. WOB

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

  4. 4. zmoe

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

    Действительно дилемма… Но все на самом деле просто: на старые сайты мобильную версию, на только создающиеся — адаптивный дизайн.

  5. 5. Анон

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

  6. 6. Sosnovskij

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

  7. 7. Андрейтос

    Если честно так и не смог определится… но больше склоняюсь пока к адаптивному.

  8. 8. seoonly

    Как всегда в общем, единого мнения нет и не может быть

  9. 9. ПЧ

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

  10. 10. Константин Дьяченко

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

  11. 11. Виталий

    Если честно, то немного дороговато адаптив по моим расценкам. Хотя от пациента зависит…

  12. 12. Sosnovskij

    zmoe, «на старые сайты мобильную версию, на только создающиеся — адаптивный дизайн.» — я придерживаюсь такого же мнения :)
    ПЧ, у такой команды как aviasales по-другому и не могло быть :)

  13. 13. ЁБА

    а ещё актуально — как не запороть сайт мобильной версией

  14. 14. Sosnovskij

    ЁБА, есть примеры? :)

  15. 15. crafter

    Тоже заказывал мобильную версию, но на будущее только адаптивные темы!

  16. 16. Иван

    Внешне (для пользователей) адаптивный сайт может выглядеть и вести себя точно так же, как и мобильный. То есть для пользователей можно сделать так, чтобы разницы вообще не было. А вот со стороны поддержки — есть важные моменты. Обычно всё упирается в сложность реализации (как проще, дешевле, при условии той же надёжности — так и лучше). Очень важный момент — дальнейшая поддержка и развитие проекта. По моему опыту адаптивные дизайны гораздо легче дорабатывать, т.к. всё лежит в одном месте. Кстати, уже 5 лет назад, когда я только узнал о том, что размеры блоков div можно задавать в em-ах, а в css прописывать разные стили для мониторов разной ширины, а в мозилле появился пункт в меню «масштабировать только шрифты», я начал делать адаптивные дизайны с привязкой к размеру шрифта и экрана. Также я стараюсь не использовать графику, в худшем случае беру png с большим запасом по размеру (чтобы всё могло тянуться без искажений). Я озадачился вопросом адаптивности, т.к. на широкоэкранных мониках сайты выглядели не так, как на классических 4:3 или 5:4.

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

  17. 17. Rulka

    ТС, не совсем понятно, а адаптивный дизайн не подразумевает мобильную версию???
    css и html5 руки развязывают вроде )))

  18. 18. Sosnovskij

    Rulka, адаптивный дизайн подразумевает мобильную версию (даже несколько под разные разрешения), а вот мобильная версия не подразумевает адаптивный дизайн :)

  19. 19. Артур

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

  20. 20. Леонид

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

  21. 21. Павлуха

    if (document.getElementById('content').offsetWidth > 579) {
    // JS-код блока для широких дисплеев или
    // document.write( 'произвольный html-код' );
    } else {
    // код блока для мобилок
    }

  22. 22. Павлуха

    Комментарий к предыдущему комментарию (не знал, отобразится ли код). Код этот к вопросу о монетизации адаптивного шаблона. Можно пойти дальше — по признакам браузера, например, детектировать мобильного пользователя. Суть в том, что почти вся реклама выводится через JS, а в JS мы уже знаем, с кем имеем дело.

  23. 23. fortress-design

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

  24. 24. Павлуха

    fortress-design, Вот насчёт картинок кстати да — вопрос посложнее, чем с рекламой. И по моим наблюдениям, почти никто им не озадачивается

  25. 25. Sosnovskij

    Павлуха, спасибо за реализацию. Попробую :)

  26. 26. GladWeb

    Самый лучший и современный вариант на данный момент это адаптивный дизайн.

  27. 27. Дмитрий с Буридо

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

  28. 28. Александр

    Все делают по-разному. Лично мне нравится адаптивный дизайн, да, сложнее, но мне кажется так лучше :)

  29. 29. Олег

    У меня есть актуальный вопрос!
    Есть большой сайт, который имеет большие блоки с описанием категорий (разумеется — seo текст). Так вот, если при адаптивной верстке для мобильных устройствах делать display:none этим блокам, т.к. они будут занимать очень много текста — поисковые системы не будут за это ругать?
    Получается, при полном разрешении экрана текст будет, а на мобильных не будет, знаю, что google проверяет сайт на адаптацию к мобильным устройствам при рарешении 320p на 240px, так вот интересно будет ли учитываться содержимое страницы при маленьком разрешении экрана (без seo текста) ??

  30. 30. Sosnovskij

    Олег, на мой взгляд, лучше display:none не использовать. Достаточно будет небольшого скрипта для разворачивания контента.

  31. 31. Salik

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

  32. 32. Bigi

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

  33. 33. Sosnovskij

    Bigi, поищите Opera Mobile Emulator.

  34. 34. Bigi

    Sosnovskij, Спасибо за совет! Будим пробовать!
    А то онлайн сервисы грешат простым обрезанием ширины…

  35. 35. Ася

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

  36. 36. Sosnovskij

    Ася, адаптивный.

  37. 37. freedore

    Я удивлен, что адаптив медленнее мобильной версии. Это достоверная информация?

  38. 38. Sosnovskij

    freedore, это мои наблюдения :)

  39. 39. Sergey

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

  40. 40. Sosnovskij

    Sergey, все верно. А какой есть плагин для такого вывода? Все, что встречал выводит в код страницы все рекламные варианты, а показывает пользователю только один. Получается, что на странице максимально не 3 кода (в случае с google adsense), а больше :)

  41. 41. Олег

    Sosnovskij,
    Дело в том, что почти все махинации с разворачиванием блоков как раз и строятся по технологии display:none, а при клике на «развернуть» — display:block. Либо махинации с позиционированием (left:-9999px), что тоже вроде не хорошо, так что до сих пор вопрос не раскрыт.

  42. 42. Sergey

    Sosnovskij, я использую такой: siteask.ru/plugins/ad-inserter.html

  43. 43. Sergey

    Олег, не могу не согласиться.
    Если определять тип устройства (Desktop или mobile) на стороне сервера — показывается столько блоков сколько и грузится. Но одно но (и оно существенное) — не работает с кэшированием.
    А если определять на стороне клиента — грузятся все объявления, но показываются только соответствующие типу устройства (адаптивные для смартфонов). Минусы: падает цена клика (так как грузится много объявлении) и поисковые системы плохо относятся к тому, что скрывается часть блоков.
    Думаю это разногласие не решить в принципе. По крайней мере я такого решения не встречал.

  44. 44. Sosnovskij

    Sergey, хороший плагин :) Кэширование в данном случае важнее, чем метод определения пользователя? :)

Добавить комментарий

 

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

Привет! А еще у меня есть телеграм-канал @sosnovskij. Туда я публикую чаще =).
Это короткие, но емкие посты по SEO: эксперименты, наблюдения, личный опыт. Заходите, читайте, подписывайтесь ;-) .