Frontender Magazine

Долой отзывчивый дизайн

Мы недавно закончили редизайн нашего сайта и в новой версии отказались от отзывчивого дизайна.

Учитывая то, что отзывчивый дизайн на сегодняшний день является трендом, мы решили поделиться причинами, по которым приняли такое решение.

Почему мы отказались от отзывчивого дизайна

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

Старая главная страница

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

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

Версия для мобильных

Что мы сделали вместо этого?

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

Сетка

Использование фиксированной сетки увеличило скорость разработки дизайна и написание кода, грубо говоря, вдвое. А ещё мы смогли разрабатывать дизайн, который не подходит для маленьких экранов.

Страница «Invoicing»

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

Когда нужна отзывчивость?

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

Например, мы считаем, что полностью отзывчивый дизайн очень важен для страниц оформления заказа. Даже малейшие изменения в последовательности действий на этих страницах могут быть значительными для наших клиентов. Хотя только ~3% посетителей заходят на страницы оформления заказа с мобильного, надлежащий дизайн может значительно повлиять на конверсию. Так что результаты, пусть они касаются небольшой части нашей базы пользователей, стоят инвестированных ресурсов.

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

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

Если вы заметили ошибку, вы всегда можете отредактировать статью, создать issue или просто написать об этом Антону Немцеву в skype ravencry.

Hiroki Takeuchi
Наталья Фадеева
Переводчик:
Наталья Фадеева
вКонтакте:
natatik_l
Twitter:
@very_busy_girl
GitHub:
NatalieF

Комментарии (7 комментариев, если быть точным)

Автар пользователя
gladkih

Отличная статья. Всему свое место и время. В закладки.

Автар пользователя
SilentImp

Ранее опубликованная статья Отзывчивый дизайн: война ещё не выиграна написана чуть ли не как контр-аргумент к этой. Стоит читать их вместе. И в одной и во второй есть очень толковые мысли.

Автар пользователя
gladkih

Они дополняют друг друга.

Автар пользователя
dshster

Всё правильно. Отзывчивый дизайн сейчас чаще воспринимается как мода и не всегда решается нужен ли он на самом деле.

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

Автар пользователя
iamstarkov

Мобильные устройства это другой тип получения информации и информация должна быть другой - более лаконичной, удобной, чтобы максимально удобно получить её в дороге, на ходу.

— мне всегда казалось, что адаптивный дизайн как раз и призван превращать десктопные версии сайтов в мобильные.

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

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

Автар пользователя
dshster

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

Я к тому, что нужно адаптировать не вёрстку к мобильному экрану, а сам контент - содержимое (убрать ненужное, добавить нужное)

Автар пользователя
glebis

@dhester Вопрос о том, стоит ли делать отдельную мобильную версию или достаточно адаптивной версии — он вечный, и действительно адаптация контенты часто не менее важна, чем адаптация дизайна. Но при грамотной адаптивной вёрстке вполне можно скрыть вторичный контент (или даже переместить его под первичный через js, что, конечно, не оптимальное решение)