Адаптивный дизайн или мобильная версия: что это, что лучше, чему отдавать предпочтение и в каких случаях?

Дата выпуска: 15.12.2016

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

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


Многие исследования показывают, что с 2007 по 2015 год количество юзеров, использующих мобильные устройства, увеличилось примерно на 90%. Сейчас во всем мире интернетом пользуются более 80 млн. человек, и около 50 млн. из этого числа – заходят в сеть именно с мобильных устройств. В русскоязычном сегменте трафик с мобильников насчитывает в среднем 25%, но в некоторых тематиках этот показатель устремляется к 40%.  Собственно под «мобильными устройствами» понимаются не только звонилки без ОС и современные смартфоны, но и некоторые продвинутые модели «умных часов», электронных книг, планшеты (все) и прочие гаджеты с возможностью выхода в интернет, но в силу своих малых размеров получившие небольшое разрешение дисплея. Вообще ноутбуки тоже попадают под характеристику «мобильных», но разрешение у них достаточное для нормального просмотра веб-страниц, поэтому в контексте этой статьи будет правильнее рассматривать их как ровню стационарным компьютерам.     


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


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


Важность адаптации под мобильники, думаем, понятна. Теперь перейдем к рассмотрению темы «адаптивный дизайн или мобильная версия?»

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

Адаптивный дизайн: за и против 

Адаптивный дизайн – это дизайн с определенными частями кода, которые автоматически подгоняют сайт под любые разрешения дисплеев. При разработке верстальщики не берут за основу какой-то стандарт, (допустим, 800х480 пикселей) поэтому такие ресурсы получаются «резиновыми».  Благодаря адаптации блоки и элементы на малых разрешениях могут менять свое изначальное положение; некоторые и вовсе могут смещаться в другую область ресурса, посему такая верстка считается хорошим решением, но для серьезных проектов, как правило, не подходит. Так что же лучше: адаптивный дизайн или мобильная версия? Однозначно ответить нельзя, ниже вы поймете, почему так.  


адаптивный дизайн или мобильная версияДостоинства адаптивной верстки: 

  • правильное отображение страниц ресурса и его элементов; 
  • нет необходимости в перенаправлении пользователей на поддомен; 
  • проще и дешевле разработать, нежели мобильную версию. 

Теперь об обратной стороне. Сразу выделим большой (если точнее – полный) вес страниц, ведь адаптация не способна «облегчать» их, поэтому содержимое может грузиться слишком долго, что не может не раздражать. Если будут возникать какие-либо проблемы при просмотре с мобильника, посетитель не сможет ничего сделать (вполне решаемо, но это дополнительные расходы). Возможно, есть еще какие-то негативные  моменты, но они незначительны.  


Мобильная версия: за и против 

Мобильная версия – дополнительная версия сайта, заточенная под мобильные устройства. Принцип работы:  основной сайт перенаправляет пользователя на отдельный поддомен (к примеру, с vk.com на m.vk.com), если заметит, что он зашел НЕ с компьютера. Так как мобильная версия – по сути, является дополнительным сайтом, связанным с базой (-ами) полной версии, то при разработке верстальщики способны сделать его максимально облегченным: убирается все лишнее и/или меняется расположение важных элементов, а главное – иконки (ссылки) можно сделать крупными. 

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


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

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


Конечно же, без недостатков не обошлось. Как вы могли понять, мобильная версия работает на поддомене (иногда вообще на отдельном домене второго уровня), а связывает их общая база (-ы) данных. Естественно не всем нравится запоминать еще один адрес, а это все же минус.  

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

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


Резюме

Так адаптивный дизайн или мобильная версия? Если у вас простой сайт с небольшим количеством посетителей, то лучше не растачиваться и отдать предпочтение адаптивному дизайну, а вот любому крупному проекту лучше будет иметь корректно работающую на всех девайсах мобильную версию. Например, если взять тот же Вконтакте, то у него есть основная версия, версия для мобильных устройств (m.vk.com), а также приложение для мобильных ОС. Такой набор должен быть у любого проекта, который планирует дать знать о себе сотням тысяч человек.


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



9101112131415

Нужен совет?

Впиши контактные данные, и мы поможем достичь цели

Имя*


E-mail*


+7 (___) ___ __ __*


Отправить

Нажимая кнопку "Отправить" Вы подтверждаете свое согласие на обработку персональных данныхполитика конфиденциальности

Спасибо за обращение!
Наш менеджер свяжется с вами
в ближайшее время.