Сочетаем адаптивный дизайн и мобильные шаблоны

От автора: вашему сайту требуется мобильный вид. Вам придется выбирать: адаптивный дизайн или специальный мобильный сайт, верно? Может, и нет. Может быть, удастся сочетать и дополнить одну версию другой?

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

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

Возьмем страницу Recent Activity. Она настолько проста, что лучшее решение – написать пару медиазапросов для перетасовки элементов и немного JavaScript’а для переключения фильтров:

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

Теперь посмотрите нашу страницу Details на настольном компьютере:

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

Из всего сайта этот мобильный вид был самым ужасным.

При поддержке CSS я мог бы объявить этому виду войну и привел бы его в порядок. Но если так сделать, при этом загружается довольно много JavaScript’а, не имеющего больше никакого смысла. Вместо этого я решил выбрать специальный мобильный шаблон. Таким образом, мне удалось взять HTML, CSS и JavaScript под полный контроль и загрузить только необходимое. Я смог многократно применить почти все, так как добился всего, подойдя с перспективы модулей. Я смог подобрать HTML-составляющие, модули JS и скомпоновать новый файл CSS из тех фрагментов, которые были нужны – написав «с нуля» очень немногое.

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

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

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

Пример вида страницы Uhm-Not-Quite-Ready

Пока еще не все виды страниц CodePen отлично смотрятся на маленьком экране. Страничка Editor – вероятно, самая важная в приложении – не пользуется ни адаптивным дизайном, ни мобильным шаблоном.

Она довольно хорошо работает на iPad’е и больших «таблетках», но на маленьких экранах смотрится неидеально. Этот вид нельзя оставить непродуманным. Бросить разработку дизайна на размерах десктопа можно, пока не появится хорошая идея, и мы сможем за него приняться. Вероятнее всего, это будет специальный мобильный шаблон.

Пример специальных мобильных компонентов в адаптивном шаблоне

Посмотрите вид страницы Profile:

Это – адаптивный шаблон. Я считаю, что он отлично работает, за исключением области «закладок», где разбивается на две строки. Это неудобно и не будет масштабироваться, когда мы станем потенциально добавлять дополнительную навигацию. Вместо того, исключительно в это место мы подаем другую составляющую, которая вместо закладок выводит навигацию меню select.

В любом случае уже лучше.

Это процесс

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

Не требуется никаких отдельных доменов/URL’ов, никаких отдельных хранилищ/баз исходных кодов, никаких отдельных команд разработчиков. Все вместе, как один огромный монстр. Как, я думаю, и должно быть.

Связано:

RESS: Адаптивный дизайн + Компоненты серверной стороны

Автор: Chris Coyier

Источник: //css-tricks.com/

Редакция: Команда webformyself.

Комментарии Вконтакте: