Комбинирование адаптивной верстки и шаблонов для мобильных

Статья является переводом отличного, вдохновляющего, хоть и небольшого поста Mixing Responsive Design and Mobile Templates от одного из создателей CodePenКриса Койера.

Итак, вы заняты стратегической проработкой поведения своего сайта для мобильных устройств. По идее вам надо бы выбрать что-то одно — или адаптивный дизайн, или создание отдельного сайта для мобильных. Что ж, возможно, это не так. Может быть, вам удастся сочетать сразу несколько стратегий.

Каждый день мы с командой разработчиков CodePen ударно трудимся. Но нас всего трое. Разработка нашей мобильной стратегии — просто из последних сил доделать проект, когда 1) на это находится время и 2) появляются хорошие идеи, как со всем этим разобраться.

Пример адаптивного шаблона

Например, наша страница Recent Activity. Она настолько проста, что вполне достаточно пары медиа-запросов, чтобы немного раскидать элементы, и капельки JavaScript для переключения фильтров:

145b9d5ac43f324e27f83ca2011d39ea

Пример специального шаблона для мобильных

Теперь давайте взглянем на страницу Details на настольном компьютере:

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

Это была наша самая ужасная страница для мобильных.

2a6fc556c776e25f9d27bc24cf4f110a

Мне пришлось бы устроить настоящую войну, вооружишись CSS, чтобы привести эту страницу в норму. Но даже если бы мне это удалось, там еще оставался бы приличный кусок JavaScript-кода, который уже не нёс никакой полезной нагрузки. Но вместо всего этого я решил написать специальный темплейт для мобильных. Этот вариант позволил полностью контролировать и HTML, и CSS, и JavaScript — а значит, загружать только необходимое. И теперь появилась возможность использовать повторяющиеся элементы практически во всём, потому что это всё мы уже собирали из модулей. Я мог сложить нужные фрагменты HTML, JS-модули, сделать новый CSS при минимуме усилий.

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

3bd670039c14dbfff0347462fe70be3f

Если интересно, то мы используем браузерный гем для выбора, какой шаблон запускать для рендера на уровне контроллера. По сути это отслеживание User-Agent, что не очень-то хорошо, но по крайней мере это все происходит на сервере и работает на регулярно обновляемом open-source ПО.

Код на Ruby:

if browser.mobile?
  render :template => 'details/mobile', :layout => "mobile-pages"
else
  render :template => 'details/index', :layout => "pages"
end

На заметку: всё, что можно сделать сделать в десктопном браузере, можно сделать и в мобильном.

Пример «нуууу-не-совсем-готовой» страницы

Пока еще не все шаблоны CodePen достаточно адаптированы для маленьких экранов. Например, страница Редактора — возможно, самая важная часть всего приложения — вообще не имеет ни адаптивного дизайна, ни мобильной версии.

97055f7ce725eadbf620cd0cbae1dbbf

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

Пример использования фрагментов темплейтов для мобильных в адаптивном дизайне

Посмотрите на страницу профиля пользователя:

56b603999cea295bb890c12356b3ad89

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

7d5196eabc11fb0f1f43ec53bd106ca4

Это уже явно получше выглядит.

Всё в процессе

Я всё это рассказываю вовсе не для того, чтобы представить вам CodePen как светоч дизайна для мобильных. Он явно пока не тянет на эту роль. Но я уверен, что было бы интересно задуматься над гибирдным и итерационным подходом в дизайне веб-приложений для мобильных.

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