Джонатан Смайли | Перевод Главмастера | Оригинал
- «Лёгкий» фреймворк
- Макетирование для развлечения и прибыли
- Наброски нашего супер-сервиса по распространению книг через обмен «BookImpart»
- Кодированные сеточки
- О тех, других устройствах...
- Макетируйте заранее, почаще и всё, что можете.
- Автор
На свете уже толпа мобильных устройств с полным доступом в интернет. Все со своими возможностями и ограничениями, определяющимися стилем, размером и разрешением экрана, формой. Без вариантов одно — они набрали ход, по уровню жора трафика, оставивший позади стационарные компы. И для того, чтобы уже в следующем году не выкатывать вёрстку, вызывающую желание избегать возврата на сайт, вэбмастерам чесаться надо уже вчера.
На самом деле, в интернетах есть много каких инструментов, чтобы ускориться в дизайне и дать уже, наконец-то, своим сайтам сжиматься-разжиматься в зависимости от размера экрана посетителя. Имя им фреймворки, легион их. Заходишь на сайт разработчика, дальше (либо в онлайн, либо в оффлайн) определяешься с параметрами, балуешься с настройками, а на выходе получаешь код. При диком разнообразии экранов, мобил и падов, давно такое должно было появиться, вот и появилось. Известны и плотно используются, например, Блюпринт или 660.gs. Но там мало поддерживаемых устройств. Ещё есть Энди и Кейт Кларковский 320 and up, есть Columnal. Недавно заработал Twitter Bootstrap.
Но сегодня попробуем взглянуть на то, как можно порыться в адаптивном дизайне вместе с Фаундейшеном — лёгковесным фронт-энд фреймворком, который поможет создавать красивенькие макеты и прекрасненькие сайты. Понятное дело — прежде вы избегали адаптивной вёрстки. Слишком много там надо учесть. Ну вот и инструмент для облегчения подоспел.
«Лёгкий» фреймворк
Фаундейшн создан в ZURB, в качестве стандартного инструмента и отправной точки для внутренних и клиентских проектов. Он включает не только двенадцатиколонник с адаптивной сеткой, что уже даёт ему значительную часть возможностей. В наличии и остальные элементы, реализующие навигацию, вкладки, кнопки, типографику, формы и так далее. Всё реализуется уже со стилями так, чтобы не потребовать беспокойств с пользовательскими CSS.
В чём одно из преимуществ Фаундейшена — это в принципе «90/10». Вы наверняка используете фрэймворк. Либо слышали, а может быть видели результаты работы с каким-нибудь из них. Их общей чертой остаётся «samification» — некая одинаковость вследствие ограниченности при внедрении авторского дизайна. Но с Фаундейшеном вы обратите внимание на то, что он пройдёт 90% пути, оставив последние 10% вашему творчеству.
Этот фреймворк не идеал: не вполне семантический, да и затачочка дизайна под мобильные устройства стоит в нём не на перовм месте. Тем не менее, создан инструмент для быстрого прохождения муторного пути кодинга, без необходимости в гаечных ключах.
Если же вам захотелось реально семантической сетки и на раз, попробуйте Semantic Grid System, в которой данные полностью отделены от дисплея. А для проекта, чётко оринетированного на мобилы, обратитесь к 320 and up.
Макетирование для развлечения и прибыли
Макетирование — действительно сильная сторона Фанудейшена. Давайте проверим.
Для примера возьмём классическую задачу для вебмастера — создание сервиса по распространению книг системой их обмена. А начав со скетчей того, что мы хотим увидеть, быстро получим представление — как оно будет выглядеть на различных устройствах.
Наброски нашего супер-сервиса по распространению книг через обмен «BookImpart»
Чтобы понять — как будет работать новый сервис на различных устройствах, нам нужно всего несколько картинок будущих экранов:
- Домашняя страница с выбором книг.
- Экран книги для показа — у кого есть книги, где это находится, и что ещё они читают вместе с предлагаемой книгой.
- Всплывающее (модальное) окно для выбора одной из предлагаемых книг.
- Домашняя страница с подтверждением процесса.
Само собой, в макете многого не хватает — авторизации, регистрации, добавления книг, информации об отсутствии и так далее. Но мы-то рассматриваем лишь один поток, которого достаточно для понимания процесса. Итак, начали с эскизов — как мы и начинаем дизайн большинства интерфейсов.
Вешаем наверх имя BookImpart и какой-нибудь простой логин. Категории у нас слева и это явно для экранов с большим разрешением. Далее, мы выделили три книги. Наверняка пользователь заинтересуется. Ещё мы использовали три вкладки: Top Swaps, Popular и Trending — топы обмена, популярное и тенденции.
Картинка № 1. Главная страница выдуманного супер-сервиса с левостронней навигацией и разделом основного контента.
В следующем окне — окне отдельной книги (в нашем макете мы привязываем к нему каждую из книг), мы сохраняем навигацию и показываем большую обложку, название и подробное описание. Ещё покажем список тех книг, которые пользователь готов предоставить для обмена и тех, которые он ищет. Можно ещё включить партнёрку, вытягивая к себе обзоры с NYTimes.
Картинка № 2. Страница конкретной книги на нашем сервисе, показывающая книгу саму по себе и те, что можно на неё обменять.
По выбору «Swap», используем всплывающее окно (создаваемое встроенным в Фаундейшн плагином, кстати). Оно покажет книги для обмена. Пользователь выбирает, а выбор принимает страница подтверждения.
Картинка № 3. Всплывающие окна реализуются плагином Reveal.
Здесь мы показываем пользователю — от чего можно отказаться и что можно получить. Вероятно, надо показать и то, как произойдёт обмен (по почте, лично и так далее), а потом предоставить переход на Главную.
Картинка № 4. Последняя страница — экран с подтверждением. И наш макет готов.
По-нормальному, надо бы наделать несколько эскизов — для обратной связи с клиентом или коллег, с прочим функционалом. Но здесь мы обойдёмся. С этого момента, если вы хотите реализации задуманного в коде, качайте Фаундейшен с foundation.zurb.com. Далее работайте с, предоставленном в пакете, файлом «index.html», пригодным для создания дополнительных страниц дублированием.
Кодированные сеточки
Путь к быстрому построению макетов — это базис в виде сетки, заложенной в коде. Такая практика не новость, но лишь недавно стало считаться целесообразным создание адаптивных каркасов.
В сетке, упомянутой вначале, обрабатывается львиная доля макетов студии. Это полностью «жидкий» двенадцатиколонник, где всё основано на процентах, с предопределёнными @media-запросами под небольшие мобильные устройства. Простая схема может выглядеть следующим образом:
<code><div class="container"> <div class="row"> <div class="eight columns">Main Content</div> <div class="four columns">Sidebar</div> </div> </div></code>
… где «container» дает нам некоторые отступы слева и справа, строка «row» имеет произвольную максимальную ширину для удобства чтения, а «columns» забирают 2/3 и 1/3 от макета страницы. Для построения более сложных макетов, мы могли бы разместить колонки и таким образом:
<code><div class="container">
<div class="row">
<div class="eight columns">
<div class="row">
<div class="two columns">Avatar</div>
<div class="ten columns">Article Title</div>
</div>
</div>
<div class="four columns">Sidebar</div>
</div>
</div></code>
Адепты сеточной вёрстки заметят, что мы не используем системы типа semantic.gs, полностью отделяющие данные от дисплея. На то есть причины, основной из которых является условие их работы на препроцессорах типа Sass или Less. Что, однако, лишнее для прагматичного подхода. И традиционный синтаксис сеточной системы, по-прежнему, кажется лучшим вариантом.
Кроме прочего, в макете мы будем использовать кнопки и вкладки Фаундейшена, а также картинки-заполнители с сервиса placehold.it. Завершая скетч, аннотируем его подписями разметки, которую потом реализуем в коде:
Картинка № 5. Набросок с рассказом о том, как будет использована сетка Фаундейшена.
Итак, тянуть далее незачем. Вот как выглядит код в реализации. Побалуйтесь с изменением размеров экрана браузера и оцените способность вёрстки адаптироваться под них.
Хотя наш сайт состоит из действительно сложных страниц, но будучи основанными на сеточных макетах, всё вместе оказывается простым. Мы видели достаточно примеров, но давайте взглянем ещё на один. Обратите внимание на раздел, посвященный обменам.
Картинка № 6. Вложением строк во вкладки, мы легко можем создать такой макет.
В обычном случае, для создания макета такого слоя, нам пришлось бы определять специальные стили. Но с Фаундейшеном мы можем просто добавлять необходимое прямо в сетку. Пока весь столбец в разделе «.eight.column», мы можем добавить строки внутрь контейнера вкладки, каждый из которых может содержать еще двенадцать колонок. Таким образом, список записей стал в две колонки, в семь колонок, и в три колонки, идущих слева направо.
Вкладки довольно просты. Отображение в них своих данных, не требует наличия JavaScript или CSS. Синтаксис выглядит следующим образом:
<code><dl class="nice contained tabs"> <dd><a href="#top" class="active">Top Swaps</a></dd> <dd><a href="#popular">Popular</a></dd> <dd><a href="#trending">Trending</a></dd> </dl> <ul class="nice tabs-content contained"> <li class="active" id="topTab"> Books go here... </li> <li class="active" id="popularTab">*changed indent here* Books go here... </li> <li class="active" id="trendingTab">*and here* Books go here... </li> </ul></code>
По мере обращения к заданным якорям вкладок, показанных в коде выше, встроенный JavaScript автоматически переключает на них, а соответствующие классы активируются. Так же, мы могли бы сослаться на страницу через предвыбор index.html#trending, index.html#popular, и так далее.
Наконец, посмотрим на кнопки. В макете все ссылки у нас голубые, с изменяемым бэкграундом. Для различения кнопок, назначаем им якоря с классом «button». Можем их слегка разнообразить, добавив ещё кое-какие классы:
- «nice» придаст сытного блеска и глубины для тяги к нажатию,
- «radius» скруглит по границам,
- а «round» сделает округлыми с боков.
Плюс, в нашей реализации:
- «white» делает кнопку белой, в отличие от голубого электрика, назначенного по умолчанию; это у нас для заголовка и боковой панели,
- «large» используется только на странице книги,
- но ещё применяется и «small» для кнопки регистрации.
Всё это делает дизайн очень понятным — от навигации до описаний книг. Просто посмотрите на страницы книг, где вы сразу поймёте — на что жать для продолжения обмена.
На странице книги мы сохранили некоторые части главной страницы — заголовок и боковую панель. Фактически, весь макет этой страницы построен с использованием сетки, картинок-заполнителей и кнопок. Заметим: картинки у нас в пикселах — так, как их и предоставил placehold.it. Но беспокоиться здесь не о чём: по умолчанию, Фаундейшен не позволит разъехаться изображениям шире их контейнера. Размеры будут такими, какими мы хотим.
Если вы нажмете на призыв «Swap for This», то получите всплывающее окно, вызванное плагином Reveal. Этот элемент добавляется после закрытия .container:
<code><div id="swapModal" class="reveal-modal"> <h5>Swap for Neverwhere:</h5> <h3>Jason M. is willing to swap <em>Neverwhere</em> for one of these:</h3> <ul class="block-grid four-up"> <li><a href="confirm.html"> <img src="http://placehold.it/120x160" alt="Book Title" /></a></li> <li><a href="confirm.html"> <img src="http://placehold.it/120x160" alt="Book Title" /></a></li> <li><a href="confirm.html"> <img src="http://placehold.it/120x160" alt="Book Title" /></a></li> <li><a href="confirm.html"> <img src="http://placehold.it/120x160" alt="Book Title" /></a></li> <li><a href="confirm.html"> <img src="http://placehold.it/120x160" alt="Book Title" /></a></li> <li><a href="confirm.html"> <img src="http://placehold.it/120x160" alt="Book Title" /></a></li> </ul> <a href="book.html">Never Mind</a> <a class="close-reveal-modal">×</a> </div></code>
Не стоит возмущаться вёрсткой содержимого всплывающего окна, да и самим фактом его наличия. На самом деле, вынос его за пределы сетки многое упрощает. В том числе и в смысле переноса данных благодаря его классу-идентификатору «#swapModal». Мы можем назвать его способом присоединения атрибутов данных к любому элементу страницы. В данном случае — Swap для кнопки призыва к действию (Call to Action, CTA Button). Это выглядит так:
<code><a href="" class="nice large blue radius button" data-reveal-id= » "swapModal">Swap for This</a></code>
Reveal постоянно отслеживает появление «data-reveal-id» и делает много полезного. Например, обеспечивает переход в финал: в область подтверждения — на confirmation screen. Нажмите на любую из картинок в пределах всплывающего окна обмена и получите её — последнюю страницу макета. Это очень простая страница, объясняющая, что именно мы сделали и как отработал наш дутый сервис по обмену.
Отчасти из-за того, что контента для финала у нас осталось немного, мы смело разместили его весь посреди экрана, применив для макета сетку смещения классов. Это выглядит так:
<code><div class="row"> <div class="seven columns offset-by-two"> <h3>All set!</h3> <p>We've started the swap between you and Jason...</p> </div> </div></code>
Любая колонка сетки может быть замещена количеством от двух до десяти, что удобно для создания пространства или отступов.
Вот, в принципе, и весь базисный курс об элементах подопытного макета. Хотя это всего лишь малая часть возможностей. Да и комфортно применить описанное можно лишь для больших устройств — типа десктопов, да лэптопов. Кажется мы что-то упустили...
О тех, других устройствах...
Если бы это была статья по ориентации дизайна сперва на мобилы, а уж потом на прочие устройства, то был бы смысл распечатать шаблонов скетчевых страниц и насоздавать эскизов, либо сразу верстать под несколько определённых экранов. Но, как истинно верующие в простые пути, мы начинаем с десктопов, постепенно спускаясь ниже. Или поднимаясь выше, кому как нравится думать. И теперь, когда мы реализовали в рабочем макете свою большую точку зрения, посмотрим — что ещё вынет для нас из своей коробочки Фаундейшн.
Картинка № 7. Домашняя страница опытного макета на рабочем столе и в маленьком мобильном устройстве.
Верятнее всего, скриншот наведёт на мысль о поведении Фаундейшена в сторону банальной раздвижки страницы выставлением каждой колонки сетки в стопроцентную ширину. И в большинстве случаев это подходит. Ведь мы плотно приучены к вертикальной прокрутке при ограничении ширины. Идеально ли это стискивание рамками? Не всегда. Либо недостаточно, по крайней мере.
Картинка № 8. По умолчанию, под навигацию отдано слишком много верхнего пространства .
Если мы приехали на эту страницу на смартфоне, то вынуждены рассматривать экран с навигацией прежде, чем доберёмся до книги или вообще до чего-нибудь. Люди конечно готовы исследовать, но жажда контента сильнее. И как раз при помощи Фаундейшена можем дать им-нам то, что подразумевается уместным. Например выбор для заказа, причём уже свёрстанный в стиле для мобил.
Покажем-ка на домашней сначала книги, а навигация подождёт. Так как страница изначально писалась под десктоп, навигация пока что стоит впереди. И при переключении на маленькое устройство, она займёт своё первое место. Значит надо указать ей на правильное поведение — встать в мобилах после контента, оставаясь в десктопах по-прежнему слева. Сделаем это поставив «nav» последним, при том «вытаскивая» его налево, а контент «отжимая» вправо:
<code><div class="row"> <!-- pushes this three columns to the right --> <div class="nine columns push-three"> Main Content... </div> <!-- pulls this nine columns to the left --> <div class=”three columns pull-nine”> Sidebar... </div> </div></code>
Теперь «nav» там где надо. Но стоит учесть мнение и тех посетителей, которые хотели бы пройти в категорию жанров литературы сразу. Чтобы выручить их, создадим «nav» более тонкой конструкции — simple select list, в нашем случае:
Картинка № 9. Простым изменением стилевых классов, мы смогли адаптировать элементы страниц для миниатюрных устройств.
С классом .show-on-phones (а так же .hide-on-desktops, .show-on-tablets и так далее) элемент отобразится только на чём-нибудь, что поменьшее среднего Таблета. Но очевидно и то, что классы устройств несколько произвольны. В самом деле — какого размера таблетка? И разве все телефоны одинаковы? Но с прагматической точки зрения, подход хорош.
Есть последняя вещь, на которую надо обратить внимание при использовании четырёхколонной сетки миниатюрных устройств от Фаундейшена. В некоторых случаях, например при входе на домашнюю страницу, нам никчему загромождать её штабелями элементов. В нашем случае — особенно списком, состоящим из обложек книг. Лучше мы добавим четырёхколонник телефонной сетки к существующим колонкам:
<code><div class="row"> <!-- this column will be 2 of the 4 small device columns wide --> <div class="four columns phone-two"> <a href="book.html"><img src="http://placehold.it/300x400" /></a> <p><a href="book.html"><strong>Neverwhere</strong></a> <br />Neil Gaiman</p> </div> <!-- this column will be 2 of the 4 small device columns wide --> <div class="four columns phone-two"> <a href="book.html"><img src="http://placehold.it/300x400" /></a> <p><a href="book.html"><strong>Good Omens</strong></a> <br />Neil Gaiman and Terry Pratchett</p> </div> </div></code>
Метод реализован в нескольких местах полного кода, можете проверить. Вот теперь дизайн более краток и понятен. То, что мы и хотели.
В статье решена лишь конкретная задача. В идеале же, надо бы пройтись по каждому из типов экранов, внеся корректировки для различных категорий устройств. Впрочем это есть в коде Фаундейшена. Сама возможность вносить быстрые изменения и является аргументом за макетирование в нём. Наш сервис обмена книгами может становиться лучше с каждым изменением, а мы будем оценивать и исправлять эти изменения на своём рабочем компьютере, до окончательной передачи кода в реальный оборот.
Работая над адаптивностью, думайте не только о размещении слоёв и элементов. Есть намного больше, что нуждается в подгонке под конечного пользователя. Например, те же картинки или видео. Стоит посмотреть — как это решено в адаптивных изображениях у Скотта Джеля. Достойна прочтения и статья Мэта Маркиза.
Помните: в основном, сенсорные устройства по-своему понимают эффект от наведения на элемент, hover. Вообще не забывайте о различиях в понимании использования одних и тех же вещей при условии обращения к ним через разные устройства. Слышанное прежде, теперь это стало более, чем актуально.
Макетируйте заранее, почаще и всё, что можете.
Вашим продуктам достанется значительно больше места среди других на интернет-устройствах пользователей, если макеты для них будут покрывать весь диапазон. Фаундейшен как раз и был создан с учётом этой необходимости. В следующие пять лет современные мобильные устройства перейдут в разряд игрушек, на смену им придут принципиально другие. Речь не только о размере экрана или или интерфейсе браузеров. Изменятся не только они, но и способы пользования ими, изменится и сеть. Наверное стоит начать подготовку прямо сейчас.
Переводы:
- Итальянский
- Русский
- Иллюстрации Кевина Корнелла
Автор
Джонатан Смайли — дизайнер и партнёр в ZURB — студии дизайна в Кэмпбелле, Калифорния. Являясь ведущим разработчиком Фаундейшена, он часто пишет в блоге ZURB о разработке и практической реализации адаптивных интерфейсов. Его можно отловить на встречах в Сан-Франциско, либо как smiley в Твиттере, и почятить за дизайн и игрушки.
Автор: Glavmaster
