Как спроектировать адаптивный интерфейс

Быть или не быть? То есть, делать или не делать мобильный сайт? – этот вопрос стал ключевым во многих спорах. Но, к счастью, есть и другое решение этого вопроса: Responsive Web Design или «адаптивный» веб-дизайн. Когда, зачем и как делаются адаптирующиеся сайты?

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

Зачем вам сайт с адаптивным дизайном?

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

Поэтому, почему же все-таки вам может понадобиться создать адаптивный сайт?

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

Если хотим сэкономить
Быстро реагирующие решения нуждаются в дополнительном дизайне и разработке интерфейса, но не требует разработки приложений. Создание адаптирующегося сайта займет у вас на 20-30 % больше времени, но все же это намного быстрее, чем разработка отдельного мобильного сайта или приложения. Также, создание подобного сайта означает, что вам нужно будет разрабатывать, настраивать и поддерживать работу только одного сайта, а это значительно снижает затраты.

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

Процесс

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

Ключевые моменты процесса:

• Сбор информации: Определение дополнительных требований для адаптивного сайта
• Создание каркаса: Построение сетки и макета сайта с учетом различных форматов экранов
• Внешний вид: Оформление сайта
• Построение сайта: Несколько моментов, касающихся HTML и CSS

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

Насколько разные цели могут быть у пользователей с разными устройствами?
Этот вопрос наиболее характерен для нашей ситуации. Раньше можно было предположить, что пользователь мобильного устройства руководствуется только имеющейся задачей, т.е. «Мне надо найти адрес отеля» или «Мне надо быстро зарезервировать номер». Но сегодня, несмотря на класс устройства, пользователи не спеша просматривают сайты как будто им больше не нужно срочно выполнить определённую задачу. Стоит учитывать, что такой тип мышления пользователя может помочь вам оптимизировать содержимое сайта, несмотря на то, каким устройством пользуется посетитель.

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

Создание каркаса

Обычно очень тяжело определить логику, согласно которой должен изменяться стиль сайта, и как должен быть построен сайт, но нам нужно с чего-то начать определение различия форм сайта в зависимости от ширины экрана. Для этого мы выбрали три типа экрана – настольный компьютер, iPad и iPhone. Как нам показалось, параметры этих устройств прекрасно подходят под наши требования, но когда вы продумываете собственный проект, лучше учесть какие параметры экранов подходят именно для вашего сайта. Вполне вероятно, что вам придется принять во внимание даже параметры больших телеэкранов.

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

Начинаем
Для начала, надо определить структуру сетки для каждого экрана. Мы создали три типа страниц для экранов с шириной 1024х (компьютер), 768х (iPad в вертикальной ориентации) и 320х (iPhone в вертикальной ориентации), и принялись определять структуру сетки для каждого.

С помощью простой сетки с одинаковой шириной колонок мы смогли простым образом спланировать положение компонентов при уменьшении ширины экрана.

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

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

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

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

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

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

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

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

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

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

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

Стиль страницы
Учтите то, что стиль страницы для мобильной версии должен быть проще – в этом плюс CSS3, т.к. тут вам не нужно вставлять огромное количество изображений чтобы получить стильный эффект, но они все равно будут долго загружаться.

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

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

Построение сайта

Построение сайта на HTML и CSS – это непростая задача, поэтому я не буду подробно описывать весь процесс. Но все же, есть несколько моментов, о которых не стоит забывать.
Размер изображений
Сайт всегда загружает изображение в полном размере, даже если CSS пытается его сжать, поэтому старайтесь выбирать картинки поменьше. Конечно, вы можете найти какие-нибудь продвинутые JavaScript-приемы, которые помогут сайту грузиться быстрее. Но на наш сайт мы изначально загрузили самые маленькие изображения, а уже потом с помощью JavaScript решали, нужно ли нам, чтобы они были больше.
Используйте продвинутый CSS
Очень важно создать для пользователя впечатление, что на сайте использованы улучшенные CSS-стили, чтобы была возможность сжимать их в случае снижения возможностей браузера. Это позволяет уменьшить количество времени на загрузку сайта.
Обмен информацией
Разработка будет идти более гладко, если у команды есть возможность общаться между собой, поэтому очень важно чтобы дизайнер и разработчик обсуждали проблемы и решения по мере их поступления.

Итак, что все это значит?

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

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

Это перевод статьи под названием “How to Design a Mobile Responsive Website” от Elaine Simpson. Перевели в компании UXDepot с одобрением издания UXBooth.

PS от переводчиков: Надеюсь, вам понравилась статья. Мы будем рады, если вы укажете нам на ошибки в переводе, чтобы мы могли их оперативно исправить. Пишите нам по адресу editor@uxfox.ru, пожалуйста 🙂