Но что вообще означает «отзывчивый»? Что отличает адаптивный дизайн от неадаптивного? Почему это так важно сейчас? Давайте на минутку погрузимся в знакомое имя, которое часто можно неправильно понять. Имейте под рукой свой любимый инструмент для создания прототипов , на случай, если вас поразит внезапное вдохновение!
Что такое адаптивный дизайн?
Идея адаптивного дизайна заключается в том, что продукт может адаптироваться к любому устройству чтения, которое может использовать пользователь. Это более или менее похоже на превращение содержимого в воду, имитирующего способность жидкости наполнять любой тип стекла. Это показывает, что старый способ создания веб-сайтов с использованием фиксированных позиций практически мертв и похоронен.
Почему важно быть отзывчивым
Рост адаптивного дизайна во многом связан с появлением мобильных устройств. Неожиданно пользователи могли перейти с широкоэкранного ноутбука на смартфон. Перенесемся на несколько лет вперед, и пользователи ожидают, что смогут получить доступ к любому веб-сайту с огромного количества мобильных устройств. Дизайнеры официально не могут игнорировать важность мобильных устройств, особенно когда их уже используется более 3 миллиардов.
Рост популярности Google связан с появлением смартфонов. Скорее всего, даже если вы жили под камнем, вы все равно использовали бы Google для регулярного поиска контента. Для любого конкретного веб-сайта Google — это то, как пользователи будут открывать для себя продукт, особенно если вам нужно много их, чтобы найти его. Это подводит нас ко второму фактору, который делает адаптивность решающей: индексация Google в первую очередь для мобильных устройств.
Может быть трудно понять роль, которую SEO играет в UX-дизайне, особенно когда доходит до мельчайших деталей оптимизации контента. В общих чертах, решение Google поставить мобильный дизайн на первое место — это способ сообщить любому новому веб-сайту, что мобильная версия будет иметь решающее влияние на рейтинг продуктов. Короче говоря: нет адаптивного мобильного веб-сайта, нет рейтинга на первой странице по любым поисковым запросам.
Вот очень краткое объяснение совета Google, когда дело доходит до улучшения вашего адаптивного дизайна:
- Поддерживайте одинаковый контент для Интернета и мобильных устройств. Это также означает сохранение заголовков, заголовков и общей структуры контента.
- Используйте одни и те же метаданные как для Интернета, так и для мобильных устройств.
- Имейте качественный визуальный контент. Мы говорим о больших изображениях в правильном формате, убедившись, что все имеют одинаковые заголовок, имя файла и альтернативный текст.
Дело в том, что если вы посвятите время и усилия своему адаптивному дизайну, вы, скорее всего, будете соответствовать всем этим критериям. Многие из этих факторов также способствуют лучшему пользовательскому опыту, помогая бренду предлагать пользователям единообразный опыт.
Особенности адаптивного дизайна
Верно. Теперь мы знаем, почему адаптивный дизайн так важен, давайте рассмотрим некоторые характеристики, которые определяют адаптивные продукты.
Точки останова CSS
Точки останова CSS — классическая черта отзывчивых веб-сайтов. Их задача — «разбить» дизайн на уменьшенную версию веб-сайта в соответствии с размером экрана. Точки останова обычно имеют минимальную и максимальную ширину, которая определяет, какая версия дизайна будет видна пользователям.
Но сколько точек останова нужно веб-сайту, чтобы быть по-настоящему отзывчивым? Дизайн веб-сайта по-прежнему будет выглядеть странно, если устройство не соответствует минимальной или максимальной ширине, что сводит на нет всю цель создания адаптивного дизайна.
Наш друг Ник Бабич, редактор UX Planet, говорит как минимум о 3 основных точках останова , чтобы охватить устройства, которые нравятся большинству пользователей — от настольных компьютеров, смартфонов до планшетов. Многие дизайнеры также включают «второстепенные» точки останова, когда контент саморегулируется для поддержания визуального баланса дизайна, но не меняется кардинально. Это включает в себя такие вещи, как изменение размера шрифта, но не общей структуры.
Оптимизированные визуальные эффекты
Изображения действительно важны на любом веб-сайте, будь то фотография с высоким разрешением или индивидуальная иллюстрация. Некоторые дизайнеры верят в обрезку изображений, чтобы пользователи видели только их часть на небольших экранах, поэтому визуальное воздействие остается неизменным. Однако для нас лучший подход — использовать векторные изображения.
Полезный инструмент: ознакомьтесь с этим генератором точек останова изображения . Это очень удобно для наблюдения за точками останова CSS в действии, а также для определения правильного размера для адаптивных изображений.
Речь идет о возможности изменять размер изображения, не беспокоясь о потере качества изображения. Это также относится к типографике на странице. Вместо использования изображений с текстом разумнее использовать настоящий текст, чтобы страница могла изменять размер в соответствии с экраном без потери качества шрифта.
Тщательный мобильный дизайн
Для многих дизайнерских команд лучше всего начинать проектирование с самого маленького экрана. Это происходит главным образом потому, что, ставя мобильный дизайн на первое место, команды могут иметь четкое представление о том, куда нужно направлять контент.
Когда дело доходит до адаптивного дизайна, все внимание уделяется контенту, а не общему дизайну. Итак, создав сначала мобильную версию, мы можем сузить круг важнейшего контента, который нам нужно показывать с самого начала — частей, которые абсолютно необходимы пользователю. Оттуда мы можем либо добавить больше деталей и больше контента по мере перехода к экранам большего размера, либо найти более эффективные способы представления этого ключевого контента.
Великолепный адаптивный дизайн: общие рекомендации
Большинство адаптивных дизайнов имеют упомянутые ранее черты. Это правда, что создание адаптивного веб-сайта может показаться довольно простым в теории, но необходимо учитывать множество факторов. Давайте рассмотрим несколько общих советов по созданию сайтов, которые понравятся пользователям, независимо от устройства.
Между прочим: вы можете найти реальные веб-сайты с правильным адаптивным дизайном в нашем списке примеров адаптивных веб-сайтов .
1. Помните о своей визуальной иерархии
Это связано с причиной, по которой многие дизайнеры предпочитают начинать с минимально возможного разрешения экрана. Речь идет не только о том, чтобы знать, какие части вашего контента абсолютно необходимы, но и о том, как лучше всего их представить.
Визуальная иерархия сайта , возможно , придется адаптировать как пройти контрольные точки, но его душа должна оставаться такой же. Он должен адаптироваться в том смысле, что по мере изменения размера экрана меняются и компоненты, чтобы поддерживать удобство использования продукта. Это также помогает поисковому роботу Google, посылая сообщение о том, что ваш продукт поддерживает постоянную работу как на мобильных устройствах, так и в Интернете.
2. Размеры кнопок имеют решающее значение.
Когда дело касается веб-продуктов, кнопки могут быть довольно простыми. В конце концов, курсор — это точный инструмент, которым может пользоваться практически каждый, но мы не можем сказать то же самое о наших пальцах. Размер рассматриваемого пальца может меняться от пользователя к пользователю, и дизайнерам необходимо учитывать небольшое доступное пространство на экране мобильного телефона.
Чтобы добавить к этой потенциальной проблеме, у нас также есть тот факт, что кнопки должны быть описательными и предлагать как можно больше контекста. Это означает использование тщательно подобранной микрокопии и правильного цвета для основных кнопок, особенно когда речь идет о мобильном дизайне.
Если вы полагаетесь на панель навигации как на основной способ поиска информации, вам необходимо тщательно расставить приоритеты для панели в мобильном дизайне. Такие аспекты продукта, как дизайн навигации, имеют решающее значение и должны быть тщательно спланированы на адаптивных веб-сайтах. По мере того, как экран устройства становится меньше, у вас будет все меньше и меньше места для этой панели навигации.
Важно задавать такие вопросы, как: когда мы скрываем параметры навигации? Мы их все прячем? Какие из них мы скрываем в первую очередь?
Чаще всего продукты в конечном итоге должны будут скрывать все за кнопкой, например, гамбургер-меню, которое мы все так привыкли видеть на мобильных веб-сайтах. Это правда, что гамбургер-меню — не единственный вариант, но нельзя отрицать, что все навигационное меню должно быть скрыто в смартфонах.
Это все о попытках определить самые важные страницы во всем продукте и о том, чтобы пользователи могли их найти, независимо от того, какое устройство они используют. Такую приоритизацию всегда лучше всего делать на ранних этапах процесса проектирования, поэтому, если мы начнем с мобильного дизайна, у нас уже есть важные элементы, которые необходимо включить.
Заключение
В наши дни у пользователей очень высокие стандарты. Google тоже. И по правде говоря, статические веб-сайты просто больше не подходят. Адаптивный дизайн — это будущее, с каждым годом появляются новые методы и отличные примеры. Дизайнеры во всем мире смотрят на свои продукты в новом свете, сосредотачиваясь на содержании и его расположении, как поклонники тетриса. И они абсолютно правы.
Надеюсь, из этого введения вы получите лучшее представление о факторах, влияющих на адаптивный дизайн, а также о том, как эти факторы соотносятся друг с другом. В конце концов, мы все хотим предложить действительно отличный и последовательный пользовательский интерфейс, и это то, что дает адаптивный дизайн!
