Общий кризис в адаптивном дизайне и как его решить

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

Существует так много практик адаптивного дизайна, что сложно выбрать какой-то один набор и назвать его лучшим. У нас не может быть списка «Что делать». Однако мы можем учиться на ошибках друг друга.

Итак, вот чему я научился при проектировании адаптивного веба:

Дизайн для вашей аудитории. Не себя.

Предположим, вы пытаетесь обратиться к преимущественно индийской аудитории с помощью сверхбыстрого веб-сайта с великолепным дизайном и отличным UX для этих мобильных пользователей. Там 1,2 миллиарда человек; это должно быть мгновенным, массовым хитом. Сами цифры в вашу пользу. Или они были бы, если бы вы знали, что едва ли 13% людей имеют смартфоны. (Источник: Google Mobile Planet).

Это лишь одна из причин, почему изучение и понимание вашей аудитории имеет решающее значение.

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

Известно, что дизайнеры упускают из виду то, для кого они проектируют.

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

Для мобильных номеров используйте Google Mobile Planet. Расспросите своих клиентов об их аудитории.

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

Каркасу нужна история

Ваш проект адаптивного дизайна будет неполным без взаимодействий. То же самое относится и к вашему макету.

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

Никаких взаимодействий, никаких состояний, никаких анимаций или эффектов: практически все, что может сделать ваш сайт успешным (или провальным, если использовать его без раздумий), убрано. В то время как Style Tiles является классикой по уважительной причине (как сказал ее основатель: «Для начала разговора о дизайне»), она слишком проста, чтобы быть сложной с точки зрения сегодняшнего дизайна.

ИНВЕСТИРУЙТЕ НЕКОТОРОЕ ВРЕМЯ В СОЗДАНИЕ ИНТЕРАКТИВНЫХ ПРОТОТИПОВ ВАШИХ ИДЕЙ. ПРЕЖДЕ ЧЕМ НАЧАТЬ ВНЕШНЮЮ РАЗРАБОТКУ, ПРИСОЕДИНЯЙТЕСЬ К ТЕМУ.

Не разбрасывайтесь идеями. Вы слышали о сторителлинге?

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

Используйте такие инструменты, как Balsamiq, Axure, UXPin и т. д., для создания визуальных версий этих «историй». Поразите их воображение словами; кормите его хорошо продуманным прототипом.
Это поможет упростить вашу работу по проектированию и разработке на будущее и даст вам несколько определенный путь, которого нужно придерживаться. И в качестве бонуса: первое впечатление по-прежнему имеет значение. Хороший прототип показывает, что вы увлечены проектом.

Контент: первый, видимый и адаптируемый. Всегда

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

Вы разрушаете всю цель адаптивного дизайна, скрывая свой контент.

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

Вы начинаете с того, что сначала размещаете элементы контента, а затем строите оттуда. Звонки и свистки идут в конце.

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

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

Хороший способ сделать это — использовать краткое и точное изложение для предварительного просмотра .

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

Во-вторых: НЕОБХОДИМО предоставлять пользователям полную информацию, а не только ее фрагментарную версию.

Используйте адаптивные колонки и шрифты. Используйте адаптивные таблицы Zurb для таблиц данных жидкости. Сжимайте медиафайлы (используйте CDN и кэширование для повышения производительности).
Контент — это ваше сообщение. Убедитесь, что он четкий и видимый, независимо от размера устройства.

Бонус: Content-first заставляет вас помнить об иерархии контента, что делает процесс разработки навигации более плавным.

Соблюдайте ограничения и возможности устройства

Когда мы говорим о «сначала мобильные» или «прогрессивном улучшении», действительно ли мы понимаем и учитываем самый минимум? Вот краткое изложение того, каким должен быть «минимум»:

• Полезная ширина экрана: минимум 120 пикселей.
• Поддержка языка разметки: XHTML Basic 1.1 поставляется с типом содержимого application/xhtml + xml.
• Кодировка символов: UTF-8
• Поддержка форматов изображений: JPEG, GIF 89a.
• Цвета: минимум 256 цветов.
• Поддержка таблиц стилей: правило CSS Level 1, CSS Level 2 @media вместе с портативным устройством и всеми типами носителей.
• HTTP: HTTP/1.0 или более поздняя версия HTTP1.1
• Сценарий: нет поддержки сценариев на стороне клиента.

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

Пожалуйста, облегчите нагрузку

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

Проще говоря: если ваша страница загружается медленно, никто не будет ждать, пока она ее догонит.

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

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

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

Держите свой дизайн лаконичным и аккуратным (меньше всех ваших клиентов и пользователей).

тл; ДР

Итак, вот чему я научился при проектировании одного адаптивного веба:

• Дизайн для аудитории. Изучите немного и используйте Google Mobile Planet (и другие подобные инструменты) для чисел.
• Каркас можно оживить с помощью истории. «Прототип» означает предварительную версию устройства/системы. Сделайте что-то, что действительно работает. Используйте инструменты интерактивного прототипирования.
• Сделайте контент видимым и адаптируемым. Не скрывайте контент с мобильных телефонов, если он все равно будет загружен. Если есть один исходный пост, добавьте краткое релевантное резюме, которое лучше подходит для чтения на мобильных устройствах.
• Уважайте ограничения и возможности устройства. Мышь/касание пальцем в сторону или размеры в сторону, дизайн для минимальных характеристик устройства, используемого вашей целевой аудиторией.
• Обратите внимание на производительность. Не только для лучшего поискового рейтинга, но и для опыта.

Биография автора: Люси Баррет связана с HireWPGeeks Ltd. Она предоставляет услуги преобразования HTML в WordPress, и у нее есть команда опытных разработчиков, которые ей помогают. Она также страстный блоггер и любит делиться своими знаниями с большим сообществом WordPress. Следите за ее компанией в социальных сетях, таких как Facebook и Google+.