Адаптивный дизайн сайта

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

Рассмотрим варианты с адаптивным дизайном и мобильной версией, узнаем чем они отличаются и постараемся помочь вам с выбором.

Адаптивный дизайн

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

Рассмотрим на примере блока «Наши преимущества».

1. Экран монитора компьютера.

2. Экран ноутбука.

3. Экран планшета.

4. Экран смартфона.

Мобильная версия сайта

Мобильная версия сайта, в отличии от адаптивной, это фактически создание нового сайта на поддомене основного(m.sitename.ru, mob.sitename.ru, mobile.sitename.ru).

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

Как пример возьмем сайт социальной сети Вконтакте.

1. Основной сайт vk.com

2. Мобильная версия m.vk.com

Подведем итоги:

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

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

Пример оценки времени

Редизайн главной страницы (лендинга)

warranty.goodyear.ru

69:00 ч

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

Разработка формы «Подписка»

impuls-it.ru

6:00 ч.

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

Редизайн карточки товара

impuls-it.ru

25:00 ч.

Оптимизировали первый экран и вынесли на него всю важную информацию. Добавили вкладки для удобного переключения важной информации. Реализовали блок сопутствующих товаров и добавили форму подписки на рассылку.

Редизайн главной страницы (десктоп)

sbs-consulting.ru

49:00 ч.

Сделали редизайн главной страницы в современном стиле и светлых тонах. Сделали шрифт крупнее, и расставили акценты на нужных элементах не перегружая страницу.

Редизайн блока «Наши магазины»

www.pogos.ru

2:30 ч.

Редизайн блока специальных предложений

www.pogos.ru

3:30 ч.

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

Редизайн страницы каталога

www.pogos.ru

3:30 ч.

Редизайн страницы категорий

www.pogos.ru

4:00 ч.

Редизайн подвала сайта

Редизайн карточки товара

www.pogos.ru

6:00 ч.

Редизайн подвала сайта

www.agroex.ru

2:30 ч.

Разделить подвал на навигацию и секцию с формой подписки, кнопок социальных сетей и копирайтов.

Доработка блока видеоматериалов

www.agroex.ru

3:00 ч.

Изменение блока под новый стиль сайта в рамках полного редизайна.

Доработка слайдера с разделами

med-det.ru

2:30 ч.

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

Изменение выпадающего меню

vosksalon.ru

3:00 ч.

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