По прогнозам, в 2020 году число пользователей смартфонов во всем мире составит 3,5 миллиарда, что на 9,3% больше, чем в 2019 году.
96% американцев теперь имеют какой-либо мобильный телефон, причем 81% этих мобильных телефонов являются смартфонами.
Все больше и больше людей просматривают Интернет на своих телефонах ради удобства, а не сидя за настольным компьютером или ноутбуком, и есть данные, подтверждающие это.
В третьем квартале 2019 года мобильные устройства (за исключением планшетов) генерировали 51,5% мирового трафика веб-сайтов. Это огромно.
Большинство из нас уже оптимизируют свои веб-сайты для мобильных устройств, но это не обязательно означает, что то, что у вас есть, отвечает потребностям ваших пользователей.
Чтобы убедиться, что ваш веб-сайт соответствует стандартам, вот семь обязательных рекомендаций по адаптивному дизайну, которые помогут вам обеспечить высочайший уровень удобства работы ваших веб-сайтов на всех устройствах в 2020 году!
1. Сведите к минимуму и расставьте приоритеты
Ограниченные по размеру мобильные устройства просто не предоставляют достаточно возможностей для работы с контентом и изображениями.
Когда вы думаете о странице веб-сайта для ПК, возникает естественное желание разбить информацию, которую нам нужно отобразить, на «разделы». Думайте об этих разделах как о абзацах новостной статьи. Таким образом, вы сможете легко разбить и прочитать каждую часть страницы без путаницы.
На примере Slack я обрисовал различные разделы их домашней страницы, чтобы проиллюстрировать, как это выглядит.
Эти разделы действительно позволяют контенту приятно дышать на настольных компьютерах, но на мобильных устройствах вам необходимо убедиться, что эти разделы реорганизованы таким образом, чтобы не чрезмерно увеличивать длину страницы.
В ситуациях, когда у вас есть меньшие разделы рядом друг с другом, как на домашней странице Wistia внизу, вы можете сдвинуть четыре блока, расположенные друг над другом.
Этот метод хорошо работает для менее интерактивных или подробных разделов, подобных этому. Но что, если в этом разделе 15 блоков или особые взаимодействия, которые происходят только при наведении курсора?
Если вы попытаетесь уменьшить ее, как в предыдущем примере, страница станет значительно длиннее, и эффекты наведения больше не будут работать (поскольку вы не используете мышь для навигации по телефону)..
Именно подобные ситуации подталкивают людей подходить к своему веб-сайту с ориентацией на мобильные устройства. Это означает, что вы ставите потребности своих мобильных пользователей на первое место.
Вы не создаете веб-сайт для настольных компьютеров и не удаляете функции, которые делают сайт менее интуитивным на мобильных устройствах. Сначала вы определяете, какой вариант лучше всего использовать на мобильных устройствах, а затем адаптируете его к макету на рабочем столе, где вы можете выяснить, хотите ли вы улучшить взаимодействие с пользователем, поскольку у вас есть преимущества с пространством.
Хотя это идеальный сценарий, возможно, вы не сможете выполнить полный редизайн веб-сайта и следовать этому подходу. А пока постарайтесь предложить наилучшие возможности, оптимизировав переход от настольного компьютера к мобильному.
Просмотрите некоторые из ваших наиболее важных или наиболее эффективных страниц - это может быть ваша домашняя страница, страницы услуг или страницы продуктов. Затем сравните их эффективность на мобильных устройствах и компьютерах (используя такие инструменты, как Google Analytics); посмотрите время на странице, тепловые карты для прокрутки и нажатия, коэффициенты конверсии и т. д. Это поможет получить некоторые контрольные данные о том, как они работают в настоящее время.
Затем потратьте некоторое время на просмотр выбранных вами страниц и попробуйте ответить «да» или «нет», чтобы оценить, требуется ли немного внимания и внимания:
- Некоторые разделы занимают в четыре раза больше места, чем на рабочем столе?
- Некоторые взаимодействия на мобильных устройствах работают не так хорошо, как на настольных компьютерах?
- Размеры шрифтов трудно читать на мобильных устройствах? Вы щуритесь?
- Согласно вашим тепловым картам, пользователи прокручивают такое же или подобное расстояние по сравнению с компьютером?
- Пользователи где-то застревают, из-за чего их время на странице значительно сокращается?
Как только вы определите свои проблемные области, вы сможете приступить к поиску решений. Стоит ли скрывать определенные разделы? Нужно ли сокращать разделы, чтобы они лучше отображались на экранах мобильных устройств? Есть ли другие способы упорядочить разделы, чтобы они по-прежнему выполняли ту же цель?
Для мозгового штурма конкретных решений поработайте со своим дизайнером и углубитесь в эти вопросы, которые помогут вам выбрать правильный путь к обновлению макета вашего сайта для мобильных устройств.
Как только вы выработаете стратегию того, что вам нужно сделать, вы сможете разработать эти решения для некоторых из самых популярных разделов вашего сайта. Это дает вам возможность проверить, улучшают ли они ваши показатели.
Как только вы почувствуете, что у вас достаточно данных, вы можете реализовать эти решения в максимально возможном количестве областей вашего сайта.
У кого это хорошо получается: ESPN
Поскольку ESPN - это сайт спортивных новостей, на главной странице сайта можно найти массу информации.
На десктопном сайте есть место для такого украшения, а на мобильном - не так много.
На мобильных устройствах (справа, вверху) вы заметите, что центральная часть рабочего стола - это первое, что вы увидите. Четыре видео под основным заголовком теперь являются частью слайдера, а не накладываются друг на друга.
Эти «быстрые ссылки» на другие части сайта, находящиеся в левом столбце, больше не видны. И они решили объединить некоторые разделы, чтобы сделать страницу короче.
Прокрутив вниз, вы заметите, что информация начинает располагаться в более конкретном порядке в зависимости от того, чего, скорее всего, захотят пользователи. Например, под видео они вставляют список главных новостей, а не сразу переходят к большим блокам избранных статей.
Подобная тактика поможет вам стратегически организовать иерархию мобильных устройств, чтобы в первую очередь предоставлять пользователям самую ценную информацию.
2. Сделайте так, чтобы призыв к действию (CTA) в нижней части воронки был легко найти
Ваш бизнес-сайт, скорее всего, содержит определенный основной призыв к действию, который вы хотите, чтобы пользователи выполнили. Возможно, это покупка программного обеспечения, запись на консультацию или подписка на ваше приложение.
Чтобы побудить людей достичь этой цели, скорее всего, у вас есть основной призыв к действию в навигации и на сайте, особенно на компьютере.
Если вы отслеживаете свои призывы к действию, вы, вероятно, заметите, что ваша кнопка навигации - это один из основных способов, с помощью которых люди попадают на страницу шлюза, где они совершают конверсию. Поэтому, естественно, очень важно всегда иметь эту кнопку там.
Одна из возможностей, которую люди упускают из виду, - это убедиться, что их основной призыв к действию понятен и его легко найти на мобильных устройствах. Давайте взглянем, например, на Brightedge.
У Brightedge действительно потрясающий веб-сайт, на котором очень четко описано, что делает их продукт и какую ценность он предлагает своим пользователям. Однако при ближайшем рассмотрении их веб-сайта на мобильных устройствах обратите внимание, что их большой призыв к действию «запросить демонстрацию» больше не отображается в навигации.
Я бы рекомендовал быть осторожным при удалении навигационного призыва к действию на мобильных устройствах. Если вы сделаете это, естественным образом, посетителям ваших мобильных устройств будет намного сложнее найти эту страницу.
Я рекомендую сохранять единообразие на мобильных устройствах и освободить для него место. Если вы абсолютно не можете этого сделать, то вам следует хотя бы попытаться разместить эту кнопку в навигации по гамбургеру и сделать ее как можно более заметной на экране без необходимости прокрутки.
Таким образом, кнопка по-прежнему останется часто посещаемой частью вашего сайта.
Кто это делает хорошо: Salesforce
Salesforce сохраняет кнопку «Попробовать бесплатно» на панели навигации на всех устройствах, но меняет только ее положение и цвет.
У них также есть два дополнительных призыва к действию в нижней части экрана, чтобы позвонить им или пообщаться с ними.
Но если вы представляете компанию, которой не нужны призывы к действию «поговорить» и «позвонить», но нужен способ продвижения основного призыва к действию вашего сайта (потому что вы не можете поместить его в область навигации), вы можете реализовать аналогичный макет нижней панели, в котором вместо этого разместите основной призыв к действию.
Я также должен дать бонусные баллы Salesforce за взаимодействие с призывом к действию. Вместо того, чтобы перенаправлять посетителей на отдельную страницу с формой (как это происходит на настольном компьютере), форма выдвигается из правой части экрана на мобильных устройствах, подобно панели приветствия, удерживая посетителей на странице.
Это выгодно, поскольку пользователю не приходится ждать загрузки совершенно отдельной страницы, что на мобильных устройствах может быть проблематичным из-за пропускной способности или скорости Интернета. Это просто помогает пользователю быстрее выполнить желаемое действие.
3. Используйте масштабируемую векторную графику (SVG)
SVG или масштабируемая векторная графика необходимы для любого адаптивного дизайна, в котором используются иллюстрации или значки. В отличие от файлов изображений (JPG/PNG), SVG можно бесконечно масштабировать.
Вы можете быть спокойны, зная, что любой значок или изображение останется сверхчетким в любых условиях, и вам не придется беспокоиться о разрешении или пикселизации.
Это обеспечивает неизменно безупречный внешний вид независимо от того, как просматривается сайт.
Кроме того, файлы SVG часто имеют меньший размер, что помогает вашему сайту загружаться быстрее. Никто не хочет сидеть на телефоне и просматривать буфер изображений из-за его большого размера.
(SVG слева, PNG справа)
Для пояснения: этот тип файла не подходит для обычной фотографии, он доступен только для компьютерной графики.
У кого это хорошо получается: HubSpot
Сайт HubSpot использует замысловатые иллюстрации почти на каждой странице.
Если бы они были сохранены в формате PNG, их размер легко мог бы быть в пять раз больше из-за количества деталей, количества используемых цветов и необходимых больших размеров.
А самое главное, эти изображения выглядят четкими, независимо от того, просматриваете ли вы их на компьютере или мобильном устройстве.
4. Стандартизируйте интерактивные области и кнопки
На мобильных устройствах кнопки и ссылки будут касаться пальцем человека, а не точным щелчком мыши, поэтому интерактивные области должны иметь большую площадь, чтобы учесть эту разницу.
Насколько они должны быть большими? Ну, это зависит от пользователя, но в среднем рекомендуется, чтобы любой кликабельный элемент на мобильном устройстве имел высоту не менее 48 пикселей.
Это означает, что вам необходимо оптимизировать кнопки, поля ввода в формах, встроенные ссылки в блогах, макеты карточек, навигационные ссылки и многое другое.
Возможно, вы обнаружите, что труднее всего соблюдать это правило для встроенных ссылок, например, в статьях блога. Если вы обнаружите, что ваши пользователи с трудом нажимают на ссылки, вы можете попробовать этот метод, который увеличивает кликабельную область вокруг них (Примечание: для этого решения требуется помощь разработчика).
Это поможет снизить количество ошибок при навигации по вашему веб-сайту, что, в свою очередь, сведет к минимуму потенциальное разочарование и удержит внимание зрителя.
У кого это хорошо получается: Видярд
Vidyard отлично справляется со своей задачей, сохраняя все важные области, на которые можно нажать, достаточно большими, чтобы ваши большие пальцы не терялись.
На изображениях вы заметите, что Vidyard фактически увеличивает размер двух кнопок в главном разделе, а не сохраняет их прежний размер. Три блока прямо под героем также полностью кликабельны, а не только текст разного цвета со стрелкой.
Подобные целенаправленные элементы, подобные этому, используются на большей части сайта, что упрощает навигацию.
5. Адаптивные изображения
Различным устройствам требуются разные размеры изображений.
Для настольной страницы может потребоваться изображение шириной 1200 пикселей в полном разрешении, тогда как для мобильной версии этой страницы может потребоваться только изображение шириной 400 пикселей.
Фактически это треть физического размера, что также примерно соответствует трети размера файла. Это важно иметь в виду.
Старый способ сделать это заключался в загрузке изображения с большим разрешением (1200 пикселей), а затем просто использовать один и тот же файл на всех платформах устройств, но эти большие файлы могут значительно замедлить время загрузки вашего сайта.
Для оптимального реагирования лучше всего использовать две разные версии одного и того же изображения для мобильных устройств и компьютеров.
Например, на мобильных устройствах мы используем (или «вызываем») только необходимое нам изображение размером 400 пикселей, а не большое изображение размером 1200 пикселей, которое после загрузки будет уменьшено до 400 пикселей.
Объедините это на странице с несколькими изображениями, и вы можете получить заметно более быструю загрузку, особенно если мобильный сайт загружается через сеть сотовой связи, а не через Wi-Fi.
Есть несколько довольно подробных статей, в которых рассказывается, как это сделать, чтобы вы могли указать изображение, которое хотите показывать на экране определенного размера.
Если вы используете страницы веб-сайта с HubSpot для создания своего сайта, вам повезло! HubSpot по умолчанию включает автоматическое изменение размера изображения контента.
У кого это хорошо получается: Adobe
В отличие от других примеров, визуальное оформление этого примера будет немного более ориентировано на код, поэтому вы можете увидеть пример того, как выглядит эта техника.
Ниже приведен код, используемый для создания изображения на веб-сайте Adobe. Вы заметите, что несколько файлов «.jpg» разделены на разные строки.
Каждый из этих файлов JPG представляет собой изображение, которое два показывают на экранах разных размеров; это можно определить по тегу «media», который связан с каждым «исходным» объектом.
В результате изображения разного размера будут отображаться на устройствах разных размеров. В зависимости от вашей веб-страницы вам может понадобиться больше или меньше вариантов изображений.
6. Подумайте о типографике
Важно учитывать удобочитаемость вашего сайта на всех платформах и устройствах, но на мобильных устройствах вам нужно гораздо внимательнее относиться к потребностям пользователей в читабельности.
Если люди не могут прочитать ваше ценностное предложение или какой-либо другой контент, то они, скорее всего, не останутся рядом.
Вы должны убедиться, что контент легко читается и действительно оптимизирован для размера устройства, чтобы посетители не заставляли щуриться.
Это также означает, что вам следует обратить внимание на шрифты, которые вы хотели бы использовать на своем сайте, и на то, будут ли они обеспечивать хорошую или плохую читаемость на маленьких экранах.
Не забудьте сбалансировать размеры заголовков и основного шрифта в соответствии с размером устройства. Вы не хотите, чтобы размеры ваших шрифтов резко отличались друг от друга до такой степени, что их было бы неудобно и неестественно читать.
Я также написал целую статью в блоге о том, как определить правильные размеры шрифтов для настольных компьютеров и мобильных устройств, в которую я рекомендую погрузиться, чтобы более точно разобраться в правилах размера шрифтов.
У кого это хорошо получается: IMPACT
Я знаю, я знаю, что это немного нестандартно, чтобы привести себя сюда в качестве примера, но мы постоянно тестируем и настраиваем размеры шрифтов в зависимости от того, что слышим от наших посетителей, поэтому я просто не мог помочь это!
Заголовки создают отличную иерархию на страницах, где преобладает текст. На странице со списком блогов иерархия верхнего уровня присвоена заголовкам блогов, поэтому посетители могут быстро просматривать их в поисках того, что прочитать.
Внутренние статьи также имеют размеры шрифта, достаточно большие, чтобы вместить приличное количество контента, но при этом их можно читать.
Хотя мы могли бы сделать размер шрифта 14 пикселей, чтобы уместить больше контента, большая часть читателей просто не сможет читать статьи так четко. Более крупный шрифт и большая высота строки также означают, что вам не придется искать следующую строку.
7. Воспользуйтесь преимуществами устройства
На смартфонах вы можете выполнять множество разнообразных задач. Вы можете совершать звонки, отправлять сообщения и открывать приложения - и все это прямо из браузера.
Воспользуйтесь этими возможностями на своем веб-сайте, чтобы не только улучшить работу мобильных устройств для пользователей, но даже увеличить количество конверсий и стимулировать действия.
Например, на сайте для ПК вы можете указать номер телефона. В мобильной версии этого сайта вы можете указать номер телефона внутри кнопки или интерактивной области, чтобы при нажатии на нее автоматически вызывался вызов.
Эту идею также можно применить к адресам электронной почты, открывая новое сообщение в почтовом приложении с автоматически заполняемым получателем при нажатии.
Значки социальных сетей также можно закодировать таким образом, чтобы при нажатии они открывались непосредственно в приложении, а не в мобильном браузере.
Все это может значительно облегчить вашим посетителям общение и общение с вами.
У кого это хорошо получается: Объединенные методистские дома
Иногда приятно сразу позвонить и поговорить с кем-то, когда хочешь получить информацию. UMH (наш клиент) осознал это и использовал функции мобильных устройств, чтобы сделать свой мобильный сайт более удобным.
Они взяли номер своего телефона, поместили его в кликабельную кнопку и разместили прямо под навигацией на мобильном телефоне.
Благодаря добавлению небольшого количества простого кода теперь, когда он нажимается на мобильном устройстве, он спрашивает пользователя, можно ли позвонить на этот номер. После принятия устройство автоматически начинает вызов. Не нужно возиться с ручкой и бумагой или пытаться запомнить номер, чтобы его набрать.
Адаптивный дизайн сегодня
В 2020 году все это обязательно, если вы хотите иметь хорошо оптимизированный веб-сайт для своих пользователей. Вполне возможно, что половина трафика вашего сайта поступает с мобильных устройств; это не вариант оттолкнуть их, предоставив им некачественный мобильный опыт.
Проведя аудит своего сайта с учетом этих лучших практик адаптивного дизайна, вы сможете определить, действительно ли ваш сайт соответствует требованиям современной эпохи мобильных устройств, в которой мы живем, или вам нужно что-то сделать изменения.
Возможно, полный редизайн нужен для того, чтобы сделать ваш сайт суперзвездой адаптивного дизайна. Все еще не уверены? Давай поговорим! Мы рады помочь вам разобраться в планах на этот год и далее.