Собери свой сайт бесплатно
Главная » Разное » Вы здесь =)

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

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

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

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

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

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

Адаптацию под мобильные устройства я реализую только для более-менее крупных и перспективных ресурсов. Небольшие сайты, которыми не занимаюсь (они находятся в свободном плавании), этого не удостаиваются :smile:.

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

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

1. Стоимость

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

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

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

Монетизировать проект с мобильной версией удобнее. Можно добавить отдельные рекламные форматы для 2-х разных версий, потому что, по сути, используются 2 разные темы. В адаптивном шаблоне вставляется 1 рекламный код на все разрешения (возможно, можно использовать скрипт, который будет выводить нужную рекламу в зависимости от разрешения — если не так, то прошу поправить меня :smile:).

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

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

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

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

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

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

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

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

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

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

Адаптивность: сравнительная таблица

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

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

1 звезда2 звезды3 звезды4 звезды5 звезд (7 голос., в среднем: 3,57 из 5)
Loading ... Loading ...

Дата: 04.08.2015
Получайте актуальные статьи по SEO, блоггингу и заработку в Интернете
прямо на ваш почтовый ящик. Уже более 3000 подписчиков!

Отзывов уже 36:

  1. 1. Игорь Петренко | 4 Август 2015

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

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

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

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

  2. 2. Dmitry | 4 Август 2015

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

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

  3. 3. WOB | 4 Август 2015

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

  4. 4. zmoe | 4 Август 2015

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

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

  5. 5. Анон | 4 Август 2015

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

  6. 6. Sosnovskij | 4 Август 2015

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

  7. 7. Андрейтос | 4 Август 2015

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

  8. 8. seoonly | 4 Август 2015

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

  9. 9. ПЧ | 4 Август 2015

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

  10. 10. Константин Дьяченко | 5 Август 2015

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

  11. 11. Виталий | 5 Август 2015

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

  12. 12. Sosnovskij | 5 Август 2015

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

  13. 13. ЁБА | 5 Август 2015

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

  14. 14. Sosnovskij | 5 Август 2015

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

  15. 15. crafter | 7 Август 2015

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

  16. 16. Иван | 11 Август 2015

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

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

  17. 17. Rulka | 12 Август 2015

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

  18. 18. Sosnovskij | 12 Август 2015

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

  19. 19. Артур | 14 Август 2015

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

  20. 20. Леонид | 16 Август 2015

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

  21. 21. Павлуха | 17 Август 2015

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

  22. 22. Павлуха | 17 Август 2015

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

  23. 23. fortress-design | 18 Август 2015

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

  24. 24. Павлуха | 19 Август 2015

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

  25. 25. Sosnovskij | 19 Август 2015

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

  26. 26. GladWeb | 19 Август 2015

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

  27. 27. Дмитрий с Буридо | 25 Август 2015

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

  28. 28. Александр | 15 Сентябрь 2015

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

  29. 29. Олег | 24 Сентябрь 2015

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

  30. 30. Sosnovskij | 25 Сентябрь 2015

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

  31. 31. Salik | 23 Октябрь 2015

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

  32. 32. Bigi | 3 Март 2016

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

  33. 33. Sosnovskij | 3 Март 2016

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

  34. 34. Bigi | 3 Март 2016

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

  35. 35. Ася | 31 Март 2016

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

  36. 36. Sosnovskij | 1 Апрель 2016

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

Подняться наверхПодняться наверх
WordPress: 53.5MB | MySQL:30 | 1,076sec