Теория и практика перевода сайта mybox.ru на адаптив

Сергей Г.

Что такое адаптивный сайт и что это даёт?

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

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

7b792dfbb5c623078b5f77b5a045f296.png

Как выглядит этот процесс технологически

Для примера рассмотрим интернет-магазин. На первом этапе делаем адаптивными только страницы конверсионного пути.

Страницы конверсионного пути:

  • Главная страница

  • Список товаров с фильтром

  • Карточка товара

  • Корзина

  • Оформление заказа.

На первом этапе не переводим на адаптив личный кабинет, текстовые страницы с полезной информацией, раздел о компании.

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

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

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

Перед созданием новой верстки необходимо решить, как будет выглядеть сайт на смартфоне и планшете, какие элементы будут скрываться, какие заменяться. Как будут реагировать элементы интерфейса на “тап” (нажатие пальцем) и “свайп” (смахивание). В нашей компании эту работу выполняет менеджер. В результате работы получается прототип, собранный в VISIO. Это концепт будущего представления сайта на разных устройствах. Концепт согласовывается с заказчиком, утверждается и передаётся в работу дизайнеру.

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

С этого момента начинается разработка адаптивной верстки. Верстальщик внимательно смотрит на текущую верстку сайта и принимает решение о доработке текущей вёрстки или создании новой. Если сайт свёрстан на основе популярных css-фреймворков, которые из коробки поддерживают адаптив (например bootstrap), имеет смысл дорабатывать. В остальных случаях, быстрее, дешевле и надёжнее разработать новую вёрстку.

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

Эту процедуру нужно пройти с каждой страницей сайта.



Мы это делали не раз и знаем, сколько времени занимает решение каждой задачи (дизайна, вёрстки, программирования). На основе этих чисел мы построили график работ:

В первом приближении, получился 21 рабочий день,с учётом оперативного согласования с заказчиком. Общий объем работ 198-239 часов.

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

Как можно оптимизировать процесс?

Результат можно получить быстрее если внести некоторые изменения в процесс.

Не рисовать

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

Реже согласовывать

Можно согласовать только вёрстку перед её применением.

Выкладывать по одной странице

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

Так можно сэкономить и время и деньги.

Сколько стоит перевод одной страницы?

Выполняя все операции и проводя согласования после каждого этапа, на перевод одной страницы сайта на адаптив мы тратим 20-40 часов. При ставке часа в 1600 руб, получается 32-64 тыс. руб один тип адаптивной страницы. Если  максимально оптимизировать процесс, опустить этап разработки дизайна, оставить одно согласование перед публикацией страницы на сайт, объем работ сокращается до 8-20 часов, а стоимость составит 13-30 тыс. руб.

Наши условия

В 90% случаев на сайте меняется вся верстка целиком, перевод сайта на адаптив - самое благоприятное время для настройки и внедрения технологии “Композитный сайт”.

Оцените статью
22.06.2016
Понравилась статья?
Поделитесь ссылкой с друзьями и коллегами!

Статьи по теме

10 обязательных задач поддержки сайта на БитриксСтатья посвящена организации поддержки сайтов на Битрикс. Здесь не только про решение технических проблем и устранение багов. Здесь про развитие живых проектов...
Как увеличить продажи оптово-розничных компаний с помощью автоматизации?Расскажем об увеличении продаж металлопроката за счет улучшения пользовательского опыта. Доработали интернет-магазин, чтобы клиенты видели свои заказы независим...
ТОП проблем сайтов на Битриксе из аудитов ИНТЕРВОЛГИ В статье расскажем о наиболее частых ошибках разработки проектов на 1С-Битрикс. Мы выявили их в ходе 10+ последних аудитов производительности и качества код...
Запускаем бесконтактную доставку в интернет-магазине на БитриксСегодня, как никогда, магазины стремятся перенести продажи в онлайн. Это не просто тренд – это необходимость. Но если у вас уже есть интернет-магазин, это не зн...
Foodtech-разработка: интерфейсы для касс MYBOXСтатья о том, как разобраться с задачей переработки дизайна кассового ПО MYBOX: выезд «в поля», вдумчивый аудит и много-много раз перерисованный дизайн ...
Решение типовых ошибок при организации продаж через интернет-магазин в разные регионы Как сделать свой сайт удобным для пользователей, оперативным в обновлении актуальных остатков, цен, скидок для товаров в их регионе? Счастливые облад...
Мы работаем по одному из двух форматов:
  • аренда команды (от 2 человек, не менее 3 месяцев);
  • итерации с фиксированной ценой (1-3 месяца длительностью).
ИНТЕРВОЛГА предоставляет:
  • регулярные онлайн-планерки с заказчиком;
  • квалифицированных специалистов;
  • организованную команду (находятся в одном помещении, что упрощает решение рабочих вопросов);
  • полную прозрачность и регулярность отчетов о результатах.
Ключевые услуги:
  • нагруженный интернет-магазин;
  • личный кабинет;
  • оптовые продажи — B2B-платформа;
  • маркетплейс;
  • технический аудит сайта;
  • Битрикс24 — корпоративные HR-порталы;
  • Битрикс24 — построение CRM-системы;
  • Битрикс24 — личные кабинеты сотрудников;
  • Битрикс24 — аудит портала;
  • 1С — интеграция с другими системами;
  • 1С — доработка системы;
  • маркетинг — комплексное интернет-продвижение;
  • маркетинг — продвижение для B2B.
Хотите получать лучшие статьи от INTERVOLGA раз в месяц?
Подпишитесь на рассылку — спамить не будем