Лаборатория интернет-маркетинга TessLab

Мы разрабатываем эффективные, работающие решения
для онлайн реализации сложных бизнес-задач клиентов


Адаптивный дизайн - почему важно адаптировать сайт к различным посетителям

Адаптивный дизайн - почему важно адаптировать сайт к различным посетителям

Эксперты все чаще говорят о необходимости адаптивного дизайна для всех типов сайтов. Почему это важно? Анастасия Овчаренко, руководитель веб-студии TessLab поговорила с журналистом Татьяной Жавжаровой о подводных камнях и тонкостях современной веб-разработки.


1. Сегодня сайт компании должен быть оптимизирован под просмотр на мобильном устройстве. Разъясните, почему это важно? Что происходит со «стандартным» сайтом, владелец которого игнорирует эти веяния времени? Что означает характеристика «мобилопригодность»?

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

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

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

У поисковиков и в арсенале специалистов давно появилась характеристика и тесты mobile-friendly. За этим скрывается следующее:

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

Каждый владелец может протестировать свой сайт самостоятельно, и принять решение, что делать дальше.


2. Отдельная мобильная версия сайта или адаптивный дизайн: в чем разница во внешнем виде, структуре? Что лучше для продвижения с точки зрения поисковиков и почему? Что лучше с точки зрения удобства пользователей и почему? Какова примерная стоимость для заказчика (стандартный сайт компании МСБ).

Мобильная версия сайта отживает свое. Фактически, мобильная версия - это дубликат сайта с ограниченными функциями и возможностями. И как копию, его необходимо наполнять контентом, обслуживать и продвигать. Далеко не каждой компании она нужна, и на ее поддержку есть необходимые средства. Затраты на поддержку сайта при наличии мобильной версии возрастают. Распространенной является ситуация, когда контент на страницах не обновляют, так как забывают об этом!

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

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

Поисковики в 2015-2017 годах однозначно указывают необходимость адаптивного дизайна.

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


3. Если имеется не просто сайт компании, а интернет-магазин со своей витриной, то тут какие особенности адаптирования? В частности, как меняется структура магазина? Требования к дизайну, весу фото?

Интернет-магазин отличается тем, что еще необходимо учитывать удобство заказа с мобильного устройства. Добавляется Корзина, кнопка "Купить" и личный кабинет. Структура самого сайта не меняется, она остается такой же, но на мобильных устройствах отключаются некоторые блоки или переносятся вниз сайта.  Меняется структура у карточки товара, расположение блоков. Если на десктопе блоки расположены горизонтально, то на мобильном устройстве они перестраиваются вертикально. Телефоны должны быть кликабельны. При разработке или адаптации важно понимать привычные действия для пользователя и не нарушать их.

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


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

Бывают верстки, которые нельзя сделать адаптивными, например, табличные. И тогда приходится делать полный редизайн. Бывают сайты, для которых пришло время обновляться, чтобы выглядеть современными. И тогда одновременно с разработкой нового дизайна делается адаптив. Иногда есть смысл смены системы управления контентом (CMS). В большинстве своем каждый сайт может стать адаптивным. Но если дизайну более 2-3 лет, то есть смысл менять дизайн полностью (эта услуга называется редизайном), но оставлять узнаваемость, чтобы люди, приходя на страницу, понимали: это обновленный, но родной сайт. Это важно.

Действительно, есть нюансы работы с сайтами, созданными другими разработчиками. Но это не всегда «все снести, сделать заново». Если сайт на самописной CMS, тогда однозначно переделывать, - и, пожалуй, это единственный категоричный случай. Или если сама CMS перестала удовлетворять возросшие потребности заказчика.


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

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


6. Какие типичные ошибки при создании мобильной версии сайта, по вашим наблюдениям? В юзабилити, дизайне, продвижении?

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

А ошибки в адаптивной верстке – это слишком большие (тяжелые) картинки, некликабельные телефоны, нелогичное меню.


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

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

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

Есть сложный и спорный момент в согласовании любой работы: делать только так, как хочет заказчик и забыть об экспертности студии или делать только так как говорят специалисты? Это плохо в обоих случаях, и обычно такое партнерство заканчивается общим разочарованием. Шрифты, окна и так далее – это могут быть как несогласованные моменты, так и требования клиента, от которых его не всегда можно отговорить. Бывают ситуации, когда Заказчик хочет мобильную версию, и переубедить его на адаптив не получается. Зато через некоторое время возникает вопрос о том, что писать контент два раза не хочется. Что делать? И у нас есть ряд решений, как выйти из этой ситуации.

Сайт, как инструмент бизнеса, не может стоить дешево. Но и не всегда самый дорогой вариант – лучший. Во всем нужны баланс и профессионализм.

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


Вопросы задавала Татьяна Жавжарова.

Отвечала на вопросы руководитель веб-студии TessLab Анастасия Овчаренко

27.06.2017

Возврат к списку