В дизайне веб-сайта, удобном для мобильных устройств, приоритет отдается просмотру веб-страниц с мобильных устройств, а не рассматривается как второстепенный по сравнению с настольной версией.
Этот подход стал чрезвычайно важным в последнее десятилетие. Согласно исследованию Statista, чуть более половины всего трафика веб-сайтов сейчас происходит на мобильных устройствах, что составляет примерно 45% всех покупок в Интернете. Учитывая, что смартфоны появились только последние десять лет, ожидается, что эти цифры будут только расти, поскольку просмотр мобильных веб-сайтов станет еще более укоренившимся, а дизайн — более интуитивным.
Вот почему веб-сайты, которые не предпринимают искренних стратегических усилий по обеспечению качественного мобильного взаимодействия, рискуют резко отстать от своих конкурентов. Чтобы помочь вам не отставать , мы собрали в этом руководстве некоторые из наиболее распространенных советов и приемов по разработке наиболее удобных для мобильных устройств веб-сайтов.
Семь лучших советов по дизайну веб-сайтов, оптимизированных для мобильных устройств —
Используйте подход «сначала мобильные»
Используйте размеры, рекомендованные для мобильных устройств
Оптимизировать для портретного режима
Свернуть меню
Свернуть вторичное содержание
Ограничение полей формы и ввода текста
Мобильные — значит удобные для большого пальца
Совет 1. Используйте подход «сначала мобильные» —
Поскольку просмотр веб-сайтов с мобильных устройств почти превзошел возможности просмотра веб-сайтов с компьютеров, дизайнерам пришлось отказаться от рассмотрения веб-сайтов для компьютеров в качестве «основной» версии. Вот почему подход, ориентированный на мобильные устройства — разработка веб-сайта для мобильных устройств до версии для настольных компьютеров — уже много лет является общепринятой передовой практикой.
Ориентируя художественное направление на мобильные устройства, дизайнеры поощряются к принятию дизайнерских решений в силу ограничений. Существуют не только ограничения по размеру, мобильные пользователи часто взаимодействуют одной рукой, а ввод, помимо касания и прокрутки, обычно более громоздкий, чем на настольном компьютере. Рассмотрим, например, анимацию наведения, основанную на вводе мыши: если ваша настольная версия слишком сильно полагается на такого рода визуальную обратную связь, позже это станет проблемой для мобильных устройств.
В результате дизайн, ориентированный на мобильные устройства, с самого начала имеет тенденцию подчеркивать простоту и удобство использования. Помните об этом Такой подход не обрекает настольные версии на минималистичную разреженность. Напротив, проще расширить простой макет, чем упростить сложный.
Также важно сначала протестировать мультимедиа на мобильном телефоне, поскольку фотографии или видео, сделанные для альбомной ориентации, могут не подойти для портретной ориентации. Мелкие детали, такие как выражение лица или элементы фона, может быть труднее читать при небольших размерах. Кроме того, часто есть место только для одного изображения за раз, и если вы сначала создадите веб-сайт с большим количеством изображений для настольных компьютеров, прокрутка каждого изображения на мобильном устройстве может стать излишним.
Совет 2. Используйте рекомендуемые размеры для мобильных устройств —
На портативном устройстве пространство может казаться более ограниченным, чем в любом другом контексте дизайна. Но учет ограничений по размеру в начале вашего проекта — лучший способ избежать конфликтов в дальнейшем.
Разрешение экрана мобильного устройства зависит от устройства, но на данный момент наиболее часто используется разрешение 360 × 640 (соотношение сторон 9:16), согласно исследованиям, проведенным statcounter. Google Analytics может сказать вам, какие именно устройства предпочитают ваши пользователи, и вам следует убедиться, что дизайн вашего веб-сайта достаточно адаптивен, чтобы учитывать различные варианты.
Совет 3. Оптимизируйте портретную ориентацию —
Хотя мобильные веб-сайты технически можно использовать в ландшафтном режиме, когда устройство перевернуто на бок, портретный режим гораздо более распространен. Blackberry популяризировала возможность удержания двуручных мобильных телефонов в 2000-х годах, но с появлением смартфонов она была полностью прекращена, и пользователи отдали предпочтение портретному режиму одной рукой.
Совет 4. Сверните меню —
Навигация — это еще одна область, которая может быстро усложняться в зависимости от количества пунктов назначения и параметров, предоставленных пользователю. В то время как веб-сайты для настольных компьютеров, как правило, имеют панель навигации с полным заголовком с несколькими главными меню и подменю, стало стандартом содержать все это в простом, узнаваемом значке гамбургера. В результате заголовки большинства мобильных веб-сайтов, как правило, сокращаются до этого значка и логотипа.
Совет 5. Сверните вторичное содержание —
На обычных веб-сайтах часто есть место для подробного основного текста, спецификаций продуктов и другого контента. Но поскольку мобильные сайты требуют, чтобы информация была точной, дизайнеры должны исключить или сократить весь несущественный контент. Здесь могут пригодиться складные / расширяемые секции.
Сворачивание содержимого включает в себя добавление пояснительной информации с помощью значка, такого как треугольник или знак плюса, который раскрывает или раскрывает скрытое содержимое. Хотя скрытие вашего контента может показаться плохим, преимущества упрощенного просмотра, подкрепленного убедительными заголовками, намного перевешивают вероятность пропущенной информации. Микровзаимодействие переключения также является еще одним приглашением для пользователя взаимодействовать со страницей в отличие от пассивного чтения.
Совет 6. Ограничьте поля формы и ввод текста —
Ввод текста должен быть одним из самых больших препятствий на пути к мобильному доступу. Хотя слово здесь и нет ничего страшного, кто не стонет, когда мобильный сайт требует адрес электронной почты, заставляя вас перемещаться по меню с буквами, заглавными буквами, пунктуацией и символами одной рукой? По этой причине вам следует минимизировать поля формы, насколько это возможно.
Совет 7. Мобильность означает удобство для большого пальца —
Согласно исследованию, включенному в книгу Джоша Кларка Designing for Touch пользователи взаимодействуют большим пальцем по крайней мере в 75% всех мобильных взаимодействий. Это включает в себя всю прокрутку, щелчки, пролистывание и ввод текста, а остальные пальцы заняты поддержкой задней панели телефона. Учтите также, что во многих случаях пользователи просматривают свой телефон менее доминирующей рукой, одновременно занимаясь другими делами. Таким образом, очевидно, что дизайнеры должны уделять первоочередное внимание работе с большим пальцем во всех мобильных взаимодействиях.
Используйте дизайн веб-сайта для мобильных устройств —
Судя по тому, как глобальный трафик продолжает расти, за мобильным веб-сайтом стоит будущее. Но если учесть все ограничения, с которыми приходится сталкиваться дизайну по сравнению с настольными веб-сайтами — нехватка места и периферийных устройств, — это может показаться больше обузой, чем возможностью. Эти проблемы не являются непреодолимыми, но к ним также нельзя относиться легкомысленно.
Несмотря на то, что советы в этой статье дадут вам основу для практических решений проблем, связанных с дизайном веб-сайтов, оптимизированным для мобильных устройств, их освоение требует большой осторожности и практики. Чтобы мобильный веб-сайт помогал, а не мешал вашим пользователям, подумайте о том, чтобы связаться с талантливым дизайнером веб-сайтов.
Нужен удобный для мобильных устройств веб-сайт, разработанный для вашего бизнеса?
Наше глобальное сообщество профессиональных дизайнеров может это сделать.
Вот почему веб-сайты, которые не предпринимают искренних стратегических усилий по обеспечению качественного мобильного взаимодействия, рискуют резко отстать от своих конкурентов. Чтобы помочь вам не отставать , мы собрали в этом руководстве некоторые из наиболее распространенных советов и приемов по разработке наиболее удобных для мобильных устройств веб-сайтов.
Используйте дизайн веб-сайта для мобильных устройств 
Загрузка...
