Эта статья для тех, у кого уже имеется рабочий десктопный сайт, со своим контентом, логикой, сервисами, клиентами и историей. И стоит задача сделать его дружественным для мобильной аудитории.
Такая ситуация на сегодняшний день не редкость: последние несколько лет мобильные устройства захватывают интернет с огромной скоростью, и все больше людей при просмотре страниц в Интернете отдают предпочтение своим гаджетам, в том числе и при совершении покупок или поиске информации.
Можно выделить два основных способа решения этой задачи.
Суть технологии заключается в том, что под каждое разрешение сайта создается отдельный шаблон, который подгружается в зависимости от того, с какого устройства зашел пользователь. В этом случае задача адаптивности решается на стороне сервера.
Для крупных интернет-магазинов с большим количеством элементов, информации и различного функционала такой подход предпочтительнее всего, т.к. позволяет до необходимой степени упростить и облегчить сайт для мобильного устройства, при этом оставив общую базу данных.
Мобильный шаблон может загружаться на дополнительном домене типа m.domain.com (так реализованы мобильные версии вконтакте, facebook, одноклассники) или прямо на основном, в зависимости от вашего желания или потребностей.
Свобода для дизайна
Каждый шаблон сайта не зависит от другого. Для каждого варианта можно реализовать свое решение, в том числе и UX-решение, не зависимо от других.
Не нужно вносить правки в существующий шаблон
Если на вашем сайте есть проблемы стилей или верстки, они точно не повлияют на его мобильный вариант. А так же на стоимость его разработки.
Ничего лишнего
Можно отдельно сформировать все решения для мобильных, не меня их для десктопа и наоборот. Например, не держать на странице две разные панели навигации, одна из которых предназначена для гаджетов, другая – для десктопа, что без сомнения ускоряет загрузку страниц. Это важно, т.к. позволяет сделать мобильную версию, полностью отвечающую современным запросам мобильной аудитории – минимальный и достаточный функционал, легковесность, лаконичность, удобство.
Независимая доработка
Вы можете и в будущем делать разный функционал для разных шаблонов, гибко подстраиваясь под потребности аудитории.
Выбор для пользователя
Пользователь может сам переключиться на десктопную версию на своем устройстве, если захочет. (Конечно, легче и дешевле решить эту задачу при расположении версий на отдельном домене).
Дороговизна
Пожалуй, это основной недостаток. Вы должны понимать, что хотя сайт один и тот же, база данных и контент одни и те же, но под каждый вариант (например, мобильный и планшетный) разрабатывается свой дизайн, своя верстка, свои серверные решения.
Изменение шаблона только при загрузке страницы
Так же, как и в предыдущем варианте, решение о том, какой шаблон показать пользователю принимается единожды – при загрузке страницы. Если пользователь просто изменит ширину экрана своего браузера, вид сайта останется прежним.
Независимая доработка
Да, это именно тот случай, когда плюс является одновременно минусом. Если вы хотите глобально сделать какое-то нововведение для сайта (новый плагин, новый функционал, редизайн и т.д.) его придется делать для каждого шаблона отдельно, фактически умножая стоимость доработки на кол-во шаблонов.
Пожалуй, самый популярный вариант для решения адаптации сайта под мобильные устройства (большей частью из-за относительной дешевизны). Но и самый спорный из-за вариантов реализации этого решения.
Общая суть метода заключается в том, что верстка вашего сайта адаптируется для мобильных устройств, это реализуется на стороне браузера средствами доработки css и js. Используется ваш сайт, текущий один шаблон для каждой страницы, и в идеальном варианте, благодаря указанным выше технологиям, элементы страницы меняют свой внешний вид и положение в зависимости от ширины окна браузера пользователя.
Рассмотрим плюсы и минусы такого подхода в общем случае:
Это дешевле
Действительно, в общем случае адаптация верстки обойдется дешевле других вариантов, за счет экономии на работе программистов.
Один шаблон и один контент
Это же мы отнесем и к минусам. Но поддержка, доработка и правка сайта с адаптивной версткой в разы дешевле, чем нескольких шаблонов.
Гибкая подстройка внешнего вида
Можно добиться идеального внешнего вида и функционала для любой ширины страницы. Что достаточно важно, учитывая огромные разброс ширины экрана устройств.
Сохранение функционала
То, что может десктоп, может и мобильная версия. Не нужно заново разрабатывать то, что уже есть.
Не нужно перегружать страницу
Ограничения для дизайнера
Если мы не хотим проблем с дублированием контента на одной странице или других проблем для SEO-оптимизации, то дизайнер должен отталкиваться от существующего расположения блоков на страницах, чтобы сделать минимально затратной реализацию переходов от одного состояния страницы к другому. Определенно, это требует опыта и компетентности специалиста.
Проблемы десктопа = проблемы мобильной версии
Если ваш сайт имеет проблемы, они останутся и на мобильном устройстве. И скорее всего для получения качественного результата, нужно будет их исправлять, что скажется на стоимости работ.
Один шаблон и один контент. Или нет никаких версий
Как и обещали, объясним почему это так же и минус. Все зависит друг от друга. Вы не можете что-либо сделать для мобильного, чтобы это не отразилось на десктопной версии. Потому что версий нет. Это одна и та же страница, которая просто умеет подстраивать свой вид под разные экраны. А значит, все, что есть на странице на компьютере, есть и на мобильной версии. Даже если это скрыто, оно все равно есть. И кроме значительно меньшей гибкости, это так же может сильно утяжелять загрузку страницы.
Не учитываются потребности мобильной аудитории
Спорный пункт, который во многом зависит от решений заказчика и разработчиков. Однако, не будем отрицать, что чаще всего задача адаптивной верстки в случае перехода от десктопного вида к мобильному состоит скорее в максимально удобном размещении десктопного контента на маленькой ширине экрана, чем удовлетворить потребности мобильной аудитории с учетом пользовательского поведения.
У пользователя нет выбора
В отличии от предыдущего решения, при адаптивной верстке мы отказываем пользователю в возможности выбирать в каком варианте просматривать контент: в десктопном или мобильном. Именно потому, что на самом деле нет никаких версий, между которыми можно переключиться.
Если с предыдущим подходом более-менее все понятно, потому что мы просто берем и делаем новый шаблон с нуля, то в подходе адаптации верстки есть множество вариантов, которые существенно различаются по способам реализации, итоговому результату и возможным проблемам.
И если предыдущую информацию вы можете найти во множестве источников, в том или ином виде, то об этой части почему-то молчат. Различаются только цены (иногда в десятки раз!), предлагаемые различными компаниями за услугу адаптации верстки сайта, а реальную разницу между их решениями может оценить разве что опытный разработчик.
Но мы хотим, чтобы вы сами принимали решения о том, что именно вы хотите получить в результате и за что готовы платить. И стремимся чтобы наша ценовая политика была максимально прозрачна для вас. Именно поэтому мы решили написать эту часть статьи.
Среди разных подходов к реализации адаптивной верстки, можно выделить три основных. Читать дальше...
Переключение между состояниями происходит один раз. Например, до ширины экрана 980px мы видим десктопный вид страниц, а на ширине меньше – сразу мобильный вариант. Дизайнер рисует один макет – для мобильного устройства. В шапку сайта подключаются два файла adaptive.css и adaptive.js, которые и управляют состоянием страницы. Мы не вносим изменений в ваш сайт, не дорабатываем шаблоны сайта, все изменения происходят за счет этих двух файлов.
Дополнительно можно реализовать таким же образом вид сайта для планшетов или для других экранов. Тем самым решается проблема с отображением на устройствах с разной шириной экрана.
Если у шаблона сайта есть проблемы, то они не решаются, а просто маскируются с помощью «костылей».
Чаще всего при таком подходе приходится изменять (вырезать, переставлять, добавлять) блоки с помощью JavaScript. Что негативно сказывается на seo-оптимизации.
Код для «мобильного вида» не интегрирован с кодом сайта, что может порождать проблемы при поддержке.
При существенных изменениях страниц в будущем, при редизайне, перестановке блоков, или добавлению нового контента, скорее всего придется переделать это решение заново.
Дизайн должен быть максимально простым и шаблонным. И чаще всего действительно хорошо он будет смотреться только на мобильном устройстве с наименьшей шириной экрана, а на остальных будет некрасиво растягиваться в стороны или масштабироваться, что не всегда удобно для пользователя.
Это решение никак не повлияет на состояние вашего сайта. Вы можете просто отключить два файлика в шапке сайта и вернуть страницы к прежнему виду.
Реальное состояние вашего сайта, проблемы верстки и прочее несущественно влияют на стоимость такого решения.
Это самое дешевое решение.
Как и в предыдущем варианте, дизайнер рисует один или несколько макетов для разной ширины страниц. Например, для планшета и для мобильного устройства. И страницы будут иметь именно такое количество состояний, которые будут «включаться» в зависимости от ширины страницы. Промежуточные состояния страниц решаются при помощи «резины» (элементы и отступы между ними растягиваются по ширине, когда ширина страницы увеличивается) и, так называемых «ушей» (белых полей по бокам контента, которые увеличиваются при увеличении ширины страницы, а сам контент остается посередине).
В отличии от первого варианта, мы работаем со стилями и html вашего сайта. Возможно, редактируем компоненты, изменяем верстку сайта ради получения максимальной совместимости между состояниями и отказа от манипуляций с контентом с помощью скриптов.
Если в верстке сайта существуют проблемы, она устарела, или размеры блоков жестко завязаны на их ширину — это может сильно повлиять на стоимость этого решения. Вплоть до полной переверстки с последующим программированием отдельных частей сайта.
Полуадаптив. То есть, в промежуточных состояниях, страницы либо могут некрасиворастягиваться в стороны, либо используют не все полезное пространство, и это тоже может плохо сказываться на внешнем виде.
Это необратимо. Мы не пристраиваем немного своего кода в ваш сайт, мы дописываем и переделываем код вашего сайта.
Это дешевле постепенной адаптации страниц (о которой ниже), но нет таких проблем как с первым поверхностным решением.
Мы не закрываем проблемы верстки «костылями» — мы решаем эти проблемы.
Код, отвечающий за адаптацию страниц полностью интегрирован в них, что уменьшает возможность возникновения багов и увеличивает поддерживаемость сайта.
Больше свободы для дизайнерских решений. Конечно, тут мы говорим об идеальном случае, но т.к. мы взаимодействуем с шаблоном сайта, мы можем себе позволить больше свободы в решениях внешнего вида.
Этот пункт вытекает из предыдущих – при доработке отдельных страниц, при редизайне или добавлении новых блоков не нужно переделывать все решение заново, ведь оно – просто часть вашего сайта.
Мы называем его «постепенная адаптация». Общий принцип работы такой же, как и в предыдущем варианте. Но мы не привязываемся к количеству состояний, отрисованных дизайнером, а дорабатываем промежуточные. То есть, перестройка страницы от одного состояния к другому происходит постепенно. Например, как только ширина сайта становится больше ширины экрана и какой-то элемент перестает помещаться на своей ширине, мы изменяем вид страницы ровно настолько, чтобы она смотрелась гармонично. Благодаря такому подходу, на каждой ширине экрана (то есть на любом устройстве, с любым экраном) мы по максимуму используем доступное пространство, чтобы расположить элементы понятным и приятным для пользователя образом. Конечно, это может значительно увеличивать стоимость адаптации, в зависимости от сложности дизайна.
В первую очередь стоимость любого варианта адаптации верстки или разработки мобильного варианта сайта будет зависеть от количества уникальных шаблонов, которые использует сайт.
В данном контексте под «шаблоном» мы будем понимать один типовой элемент сайта.
Т.к. разброс цен в этом аспекте разработки может быть очень большой, давайте будет отталкиваться от объема среднего интернет-магазина. Такой сайт состоит в общем случае из семи уникальных шаблонов:
Шапка и футер сайта. Выделяем в один типовой шаблон, т.к. эти элементы повторяются на всех страницах и для всех страниц они одинаковы.
Главная страница. Все, что находится на главной Вашего сайта. В стандарте, это 1-2 одинаковых слайдера с банерами, 1-2 слайдера с товарами (например, «новинки» и «популярные товары»), небольшой статичный текстовый блок.
Каталог. Состоит из меню разделов каталога и витрины товаров. Обычно представляет собой список товаров «плиткой», каждый элемент которой представляет собой мини-карточку товара: изображение, название, цена, кнопка «купить».
Карточка товара. Страница с подробной информацией о товаре, состоит из картинки (или слайдера с картинками товара), описания продукта, списка характеристик и блока «купить».
Статичные страницы. Обычно подразумевают один общий шаблон, большую часть которого составляет статичный контент. Статичным в данном случае мы считаем текстовую или графическую информацию, которая добавляется кодом и не хранится в базе данных (не редактируется через административную панель). В среднем случае таких страниц 1-3 («о компании», «контакты», страницы с информацией о доставке, оплате или гарантии).
Корзина. Обычно представляет собой список выбранных товаров (картинка, название, цена), с возможностью изменить количество единиц товара или удалить его из списка, общей ценой заказа и кнопкой «оформить заказ».
Оформление заказа. Представляет собой форму для отправки заказа с кратким описание состава заказа, проверяемыми полями для пользовательского ввода и кнопкой «отправить заказ».
Для такого среднего по шаблонам ресурса вилка стоимости, будет следующей.
Отдельный шаблон для мобильной версии – 200-350 часов.
Адаптивная верстка, в зависимости от варианта:
Примерные цены адаптации даже для среднего по кол-ву шаблонов сайта, как вы видите составляют вилку x-x2. Это связано с тем, что на стоимость работ влияет так же множество других факторов. Попробуем в них разобраться. Читать дальше...
Сложность дизайн макета. (Для всех вариантов).
Если дизайн сайта для мобильных устройств состоит из множества мелких элементов, подразумевает большое количество интерактивных частей интерфейса, анимаций, визуальных эффектов, графических решений и т.д., это повлияет не только на стоимость отрисовки такого макета, но и на стоимость его реализации.
Сложность переносимого функционала. (Для мобильной версии шаблона).
К этому пункту относится сложная логика вывода или формирования контента для страниц, дополнительный или отличный от десктопного варианта функционал. Например, различные калькуляторы (доставки, подбора товара), фильтры, интерактивные карты и т.д.
Сложные по структуре страницы. (Для адаптивной верстки).
Если на страницах присутствует много мелких элементов (иконок, вложенных блоков, графических элементов, таблиц, графиков, банеров и т.д.), это конечно может в 1,5 – 2 раза усложнить работу верстальщика, на долю которого приходится большая часть разработки адаптивной верстки.
Большое количество интерактивных элементов на сайте. (Для адаптивной верстки).
Сюда можно отнести слайдеры и карусели, всплывающие окна, формы, раскрывающиеся списки, анимированные кнопки, аккордеоны, фильтры товаров, калькуляторы для подбора продукции, интерактивные карты и прочее. Такие вещи могут создавать много дополнительных проблем при адаптации верстки. Для них часто используются устаревшие плагины, не поддерживающие адаптивность, что влечет за собой затраты времени на редактирование верстки и скриптов.
Резиновая верстка сайта. (Для адаптивной верстки).
Резиновая верстка — это подход, при котором в зависимости от ширины окна браузера страница сайта может слегка растягиваться или сжиматься, имея небольшой запас в расстояниях между ее частями или в их размерах. Наличие хотя бы небольшой «резины» на сайте может сильно упростить работы по адаптации верстки, т.к. значит, что элементы не имеют жесткой привязки к определенной ширине и обладают некоторой гибкостью.
Качество верстки. (Для адаптивной верстки).
Пожалуй, это самый сложный пункт, требующий навыков верстки для оценки состояния сайта. Но, к сожалению, очень важный для вариантов адаптивной верстки (более всего для двух последних, где адаптация полностью интегрируется в текущий шаблон). Сюда можно отнести не только недобросовестную работу исполнителей при создании сайта или их низкую квалификацию, но и просто устаревшие по современным меркам решения, которые не позволяют адаптировать страницу под другую ширину экрана. Иногда, это так сильно влияет на стоимость адаптации верстки, что более выгодным и дешевым вариантом оказывается создание отдельного мобильного шаблона или полная переработка всего сайта.
Соответствие дизайна для мобильного устройства существующему виду страниц. (Для адаптивной верстки).
Когда отрисовка дизайн-макета выполняется нашими специалистами, мы стараемся избежать каких-либо несостыковок и минимизировать проблемы, связанные с этим пунктом. Но бывает, что в мобильном дизайне элементы страницы расположены (или преобразованы) таким образом, что они перестают соответствовать своим оригиналам из существующих страниц сайта. Тогда приходится или решать вопрос «костылями» или значительно перекраивать html страницы, что несет за собой дополнительный расход рабочего времени. Например, если элемент, расположенный справа от контента страницы (сайдбар) нужно переместить в середину основного контейнера, или вынести одну его часть в начало страницы, а другую поместить в конце.
Все перечисленные варианты можно и даже нужно комбинировать для конкретного случая. Как варианты, расписанные для адаптивной верстки, так и в целом способы реализации адаптации сайта под мобильные устройства.
Так же, когда мы оперируем понятиями «дороже» или «дешевле», мы говорим о некоем усредненном идеальном случае. Возможно, именно в вашем — создание дополнительного шаблона сайта может быть гораздо дешевле, чем адаптация верстки.
Возможно, оптимальным решением по цене и качеству именно для вас, окажется создание дополнительного шаблона сайта с адаптивным дизайном, который будет варьировать состояния от планшетной до мобильной версии.
Иногда приходится комбинировать решения и в рамках адаптации верстки. Например, если нет бюджета на переработку шаблона или в конкретном случае это выглядит не рентабельным, html страницы частично изменяется при помощи скриптов.
Мы понимаем, что в изобилии возможных решений сложно разобраться самостоятельно, не имея опыта в веб-разработке, и выбрать наиболее подходящее для вашего случая. Но надеемся, что после прочтения данной статьи, вам стало немного понятнее в чем они состоят. А мы в свою очередь будем рады помочь подобрать для вас наиболее подходящий вариант, исходя из потребностей, рисков и планируемого бюджета.
