7 способов улучшения процесса разработки адаптивного дизайна

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

Конечно, из-за того, что процесс работы над адаптивным проектом очень индивидуален и итеративен, проанализировать его и дать решения на все случаи жизни довольно трудно. Тем не менее, некоторые общие способы и техники можно применять практически всегда.

Мы рассмотрим семь техник по улучшению адаптивного дизайна начиная со структуры контента и заканчивая масштабируемыми изображениями.

1. Мобильная версия прежде всего

Подход «mobile first» с его постепенными улучшениями, охватывающими основные аспекты проектирования интерфейса, поможет вам сфокусироваться и понять ограничения мобильной среды для более эффективной и инновационной работы.

Это значит, что сначала создается дизайн и контент, оптимизированные для простейших устройств. Затем расширяется оформление для девайсов с небольшими экранами и поддержкой Media query. В заключение шаблон и контент улучшаются для десктопов. Количество пользователей, выходящих в сеть со смартфонов, продолжает расти бешеными темпами, и подход «mobile first» внедрил даже Google.

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

Как отмечают члены команды ZURB, стоящей за популярным CSS-фреймворком Foundation:

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

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

2. Контентная стратегия

Цель адаптивного дизайна заключается в том, чтобы сделать возможным наилучший пользовательский опыт в любом контексте. Создание адаптивного сайта – отличный повод для того, чтобы взглянуть на контент другими глазами, сделать его более читаемым и легкодоступным, вне зависимости от того, на каком устройстве его просматривает пользователь. Неважно, выберите ли вы постепенное ухудшение или прогрессивное улучшение, применение методологии «content out» поможет разработать контентную стратегию, которая ставит во главу угла пользователя.

Как сказали в UXMag:

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

Разработка информационной инфраструктуры и контентной стратегии означает, что контент должен создаваться на базе каркаса и структуры, основанных на исследовании пользователей и их потребностей.

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

Как красноречиво отметила автор издания Content Everywhere Сара Вахтер-Бётчер (Sara Wachter-Boettcher):

Если говорить о контенте, как о чем-то, что определяет форму и содержание, то станет ясно, что контент это даже не первоочередная, а основополагающая вещь.

3. Скетч и Прототип

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

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

Существует громадное количество ресурсов для скетчинга, а в Responsive Sketchsheets от ZURB также включен и подход mobile first, так что с его помощью можно двигаться от полноразмерных мобильных страниц к миниатюрам эскизов для десктопных макетов. Или, при желании, просто двигаться вниз от десктопной версии. Можно даже заниматься скетчингом на iPad. Инструмент не имеет особого значения – выбирайте тот, который подходит именно вам и позволяет осуществлять быстрые итерации.

Получив набор скетчей, можно переходить к прототипированию, то есть созданию простого HTML-шаблона (или работающей черновой версии), с целью определить, работают ли в заданном контексте структура контента, навигация, разметка и точки прерывания. Они дают возможность совершенствования функциональности и взаимодействия и, благодаря минимальному визуальному оформлению, не отвлекают внимание от структуры и контента. Для прототипирования можно использовать многочисленные фреймворки и платформы, а можно и делать все самостоятельно.

В определенный момент на стадии скетчинга и прототипирования вы можете подумать о том, что было бы хорошо создать библиотеку паттернов – динамическую, документированную проектную библиотеку базовых элементов и паттернов, которая используются в качестве отправной точки и затем дополняется. Такая библиотека поможет обеспечить более гибкий рабочий процесс и будет особенно полезна группам, работающим вместе. Существует несколько ресурсов – один из самых впечатляющих это Rock Hammer от Stuff and Nonsense. Используйте его в качестве базы паттернов разработки и дизайна или как основу для создания адаптивного сайта.

Как отметил Мэтт Гриффин (Matt Griffin) в тексте для A List Apart, скетчинг и прототипирование дают нам возможность «переосмыслить весь подход к адаптивному проектированию для веба и помогают перестать разрабатывать «вебсайты» и «мобильные сайты», а вместо этого сконцетрироваться на создании гибких систем доставки контента с набором правил, которые определяют представление контента при изменениях контекста».

4. Фреймворки

Выбор CSS фреймворка зависит от идеологии проекта и личных предпочтений, но внедрение его в рабочий процесс создания адаптивного сайта имеет массу преимуществ. Использование фреймворков может ускорить процесс разработки, нормализовать стандартные проблемы кросс-браузерной совместимости и привнести структурированный подход в проектирование на основе сетки – все, что так необходимо в процессе создания адаптивного сайта. Пожалуй, главным плюсом фреймворков является необходимость минимального тестирования и дебаггинга, что возможно благодаря тому, что фреймворк исправляет ошибки, относящиеся к конкретному браузеру, и уже был протестирован на большинстве браузеров и мобильных устройств.

При выборе фреймворка важно обращать внимание на несколько вещей. Какой объем обучения необходим для начала работы? Каково количество доступной документации, и на каких условиях предоставляется поддержка? Каковы функциональные возможности фреймворка?

Один из фрейморков, реализующих подход mobile first – это Foundation от команды ZURB. Его последняя версия была перестроена с нуля, на основе методологии mobile first Люка Вроблевски (Luke Wroblewski) – теперь макет, который вы делаете, будет изначально построен для небольшого устройства. Его сетка с 12-ю столбцами может масштабироваться до значительного размера и при этом легко «сворачивается», так что вы можете создавать сложные макеты, с сеткой, которая уменьшена, чтобы уместить все необходимые для мобильных устройств столбцы один над другим. Она адаптируется к различным размерам экранов посредством как процентных ширин, так и media queries. Теперь Foundation поддерживает большее количество устройств, и работа с ними стала более интеллектуальной. Этот фреймворк сочетает в себе гибкость, мощь и использует препроцессор Sass, так что вы можете удалить все презентационные классы и написать точную семантическую разметку по своему выбору, сохранив дополнительные преимущества компонентов фреймворка. Сейчас Foundation поставляется в комплекте с дополнениями и расширениями Sass почти для каждого компонента.

Одно лишь использование адаптивного CSS-фреймворка не решит всех проблем проектирования и разработки, однако, эти средства стоят того, чтобы потратить время на их изучение, и могут послужить основой ваших будущих адаптивных проектов.

5. Точки прерывания

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

Поскольку контент – это краеугольный камень веба, имеет смысл использовать подход «отрицания устройств» (device-agnostic) и задавать точки прерывания в соответствии с контентом. Изучите ваш дизайн, найдите точки, где действительно возникают проблемы, и улучшайте слабые места. Пытаться подобрать каждому новому расширению свою точку прерывания – непрактично, ведь новые устройства появляются постоянно.

Плюс этого подхода, по мнению дизайнера и автора Эллиота Джей Стокса (Elliot Jay Stocks) заключается в том, что:

Если вы улучшаете свой дизайн, когда он выглядит хорошо, вам не придется беспокоиться о модернизации media queries для новых устройств.

Так что же означает «контентный» подход к точкам прерывания?

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

считает дизайнер Марк Боултон (Mark Boulton).

Еще один подход к определению точек прерывания был озвучен автором книги Implementing Responsive Design Тимом Кадлецем (Tim Kadlec) и заключается в том, чтобы менять ширину и высоту окна браузера и смотреть, какие моменты можно улучшить, позволяя контенту выступать в роли проводника. Начните с мобильного представления (около 300px) и увеличивайте окно браузера до тех пор, пока вещи не начнут выглядеть требующими улучшения. Это будет первой точкой прерывания – установите для нее media query и решайте возникающие вопросы. Повторяйте эти действия, пока не добьетесь приемлемого диапазона между точками. Устанавливая точки прерывания в величинах REM и EM, вместо пикселей (вопрос на Хабре по теме — прим. перев.), вы добьетесь большой степени гибкости.

Кроме того, этот метод не отнимает много времени. Дрю Томас (Drew Thomas) утверждает:

На то, чтобы добавить «специальную» media query требуется столько же времени, что и на поиск решения, которое позволит контенту работать без дополнительных media query.

Мы не защищаем тезис о том, что «точки прерывания мертвы», скорее мы считаем, что контент должен наполнять наши media queries; единственный способ создать дизайн, который будет работать на любом устройстве – это забыть обо всех устройствах. Вы даже можете пойти дальше и обратиться к классической теории читабельности, чтобы определять точки прерывания на ее основе.

6. Масштабируемые изображения

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

Одним из таких решений является использование ПО Adaptive Images, которое построено на эксперименте компании Filament Group. Adaptive Images использует один файл .htaccess, один php-файл и одну строчку кода JavaScript для определения размера экрана посетителя сайта. Затем модуль автоматически создает, кэширует и показывает подходящее конкретному устройству масштабированную версию встроенных HTML-изображений. Важно подумать и о том, как изображения будут урезаться при уменьшении – средства вроде Focal Point и ReSRC.it помогают интеллектуально обрезать изображение, так чтобы главный фокус изображения не терялся при просмотре на устройствах меньшего размера.

С появлением нового поколения retina-дисплеев с высокой плотностью пикселей, увеличилась важность оптимизации изображений для правильного масштабирования. Одним из способов создания адаптивных retina-изображений это использование средства CSS Sprites. Для работы с дисплеями с высоким разрешением вам нужны два изображения – в обычном (@1x) и высоком (@2x) разрешении, что означает дублирование файлов, селекторов и ссылок в CSS. При использовании CSS Sprites, однако, «вам всего лишь нужно переопределить ссылку на @1x спрайт-файл для всех селекторов, которые включают атрибуты высокого разрешения», говорит Мэйкел Луманс (Maykel Loomans). Эта техника снижает количество сетевых запросов, уменьшает размер файла стилей и позволяет добиться более эффективного процесса создания изображений для retina.

Тем не менее CSS Sprites работает только с изображениями, отмеченными в вашем CSS. Для картинок на веб-страницах Imulus разработала крайне полезный плагин Retina.js, который проверяет ваш сервер на наличие путей к изображениям с @2x на конце.

Еще один совет – урезание ненужных изображений с помощью Icon Fonts, которые очень легко масштабировать, редактировать и поддерживать, благодаря чему получаются более легкие сайты.

Еще одним медиа-ресурсом, требующим правильного масштабирования, является видео – оно должно быть гибким и масштабироваться от экрана к экрану. Здесь все чуть сложнее, чем в случае с изображениями, но jQuery-плагины (напр. Fitvid.js и Fluidvid.js) помогут облегчить разработку.

7. Минификация

Вы потратили время на создание красивого адаптивного сайта, но предприняли ли вы что-то для оптимизации производительности? Изображения, JavaScript, CSS, библиотеки – все это нужно загружать, что значит большее время загрузки и количество HTTP-запросов.

Минификация – это практика удаления ненужных символов из кода (без потери его функциональности) для уменьшения его размера и повышения скорости загрузки. Этими ненужными символами могут быть пробелы, табы, переводы строк и комментарии, которые удаляются для минификации кода, оставляя при этом все его качества неизменными, но сокращая общий вес. Чтобы сократить вес еще больше, можно установить уровень минификации (особенно для JavaScript), который будет более агрессивно заменять переменные и имена функций на одиночные буквы. Независимый веб-разработчик Майк Беквит (Michael Beckwith) рекомендует сохранять неминифицированные копии CSS и JavaScript-файлы для рабочей копии сайта, а на «боевой» версии использовать минифицированные.

Минифицровать CSS и JavaScript-файлы можно с помощью большого количества инструментов: CSSTidy, Minify, JSMin, YUI Compressor и SquishI – это лишь некоторые из них. Эти средства можно даже сравнить. В конечном счете, выбор инструмента минификации зависит от вашего кода и рабочего процесса.

Помимо минификации кода, можно объединять CSS и JavaScript в общие файлы для сокращения количества HTTP-запросов. Это может быть довольно труднореализуемо, если скрипты отличаются на разных страницах, но для уменьшения времени отклика – дело стоящее. Еще один метод оптимизации производительности – это включение Gzip-компрессии. После активации на сервере, она отправляет браузеру .zip файл, вместо файла .html. Затем браузер загружает архив, распаковывает его и показывает содержимое пользователю. В результате, вместо загрузки 100 килобайтного файла html, после компрессии загружается файл весом в 15 килобайт, а значит посетитель сайта будет взаимодействовать с более компактным, быстрым, сжатым контентом, и время загрузки уменьшится. Не стоит забывать, что снижение времени загрузки напрямую влияет на выручку, так что налицо сразу несколько плюсов.

P. S. Замечания по переводу принимаются в личку.

P. P. S. Еще мы начали размещать дайджесты интересных публикаций мира юзабилити и UX в своем блоге. Вдруг кому интересно.