Итак, вы заняты стратегической проработкой поведения своего сайта для мобильных устройств. По идее вам надо бы выбрать что-то одно — или адаптивный дизайн, или создание отдельного сайта для мобильных. Что ж, возможно, это не так. Может быть, вам удастся сочетать сразу несколько стратегий.
Каждый день мы с командой разработчиков CodePen ударно трудимся. Но нас всего трое. Разработка нашей мобильной стратегии — просто из последних сил доделать проект, когда 1) на это находится время и 2) появляются хорошие идеи, как со всем этим разобраться.
Пример адаптивного шаблона
Например, наша страница Recent Activity. Она настолько проста, что вполне достаточно пары медиа-запросов, чтобы немного раскидать элементы, и капельки JavaScript для переключения фильтров:
Пример специального шаблона для мобильных
Теперь давайте взглянем на страницу Details на настольном компьютере:
Эта страница куда более сложна. В ней используется такая же разметка, как в редакторе. Там вы можете мышкой растягивать окно предпросмотра. Там используются клавиатурные команды.Для мобильных такой вариант этой страницы явно не подходил, текст выглядел микроскопическим. А при использовании соответствующих метатэгов и загрузке текстов в адаптированном для мобильных размере сделало дизайн совершенно неуклюжим и наплодило совсем уж непотребных скроллов везде, где только можно.
Это была наша самая ужасная страница для мобильных.
Мне пришлось бы устроить настоящую войну, вооружишись CSS, чтобы привести эту страницу в норму. Но даже если бы мне это удалось, там еще оставался бы приличный кусок JavaScript-кода, который уже не нёс никакой полезной нагрузки. Но вместо всего этого я решил написать специальный темплейт для мобильных. Этот вариант позволил полностью контролировать и HTML, и CSS, и JavaScript — а значит, загружать только необходимое. И теперь появилась возможность использовать повторяющиеся элементы практически во всём, потому что это всё мы уже собирали из модулей. Я мог сложить нужные фрагменты HTML, JS-модули, сделать новый CSS при минимуме усилий.
Вот теперь страница Details стала намного удобнее для восприятия, не говоря уже о скорости загрузки.
Если интересно, то мы используем браузерный гем для выбора, какой шаблон запускать для рендера на уровне контроллера. По сути это отслеживание 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, никаких отдельных репозитариев и движков, не нужно разделять разработчиков на отдельные команды. Просто одна целая знатная зверюга. Правильно, я считаю.
ссылка на оригинал статьи http://habrahabr.ru/post/171709/
Добавить комментарий