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

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

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

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

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

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

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

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

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

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

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

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

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

Код на Ruby:

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

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

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

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

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

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

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

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

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

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

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

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

Автор: Moor

Источник ^[5]