Какая единственная вещь, без которой вы никогда не выходите из дома, которую вы носите с собой все время и держите в пределах досягаемости, даже когда вы спите?
Для меня это мой смартфон, и я думаю, что то же самое с большинством из вас. Растущая привязанность, которую мы развиваем к нашим мобильным устройствам (и носимым устройствам), очевидна. Наличие сильной мобильной веб-стратегии должно быть неотъемлемой частью проверки вашего веб-дизайна и сайтов на будущее.
Первое, что приходит на ум, когда мы слышим «мобильный интернет», — это адаптивный дизайн и множество инструментов и структур, которые делают это возможным. Некоторые просто уменьшают размер рабочего стола. Это не мобильная веб-стратегия. Это лейкопластырь, механизм временного ограничения, позволяющий извлечь максимальную пользу из ситуации с наименьшими усилиями. Но это упускает из виду весь смысл мобильной связи — предоставление изысканного пользовательского опыта на ходу. Пришло время перенести акцент на мобильную веб-стратегию с отзывчивых веб-инструментов на пользователей.
Основные различия между настольным и мобильным
Кредит изображения: wetwebwork
Первым шагом является понимание того, что мобильные устройства обеспечивают совершенно иной пользовательский интерфейс, чем настольные компьютеры. Они служат другой цели. Вот некоторые из особенностей работы смартфона с ПК:
- Это «личное» устройство. Мало кто разделяет телефон. А маленький экран гарантирует, что любой, заглядывающий через ваше плечо, не сможет многое понять!
- Это предназначено для легкого, мгновенного доступа. Это означает, что в идеале люди хотели бы, чтобы веб-страница загружалась «мгновенно» или, по крайней мере, намного быстрее, чем на настольных ПК. Мобильные пользователи не будут перемещаться по 3-х уровневому меню. Если они не могут добраться до контента в 2 касания, он не существует.
- Это должно быть всегда на связи. Либо через тарифный план передачи данных или Wi-Fi. Это означает, что если ваш пользователь не использует безлимитный тарифный план, мобильные пользователи будут опасаться размера загрузок.
- Основной способ взаимодействия — сенсорный. Не щелкает мышью. И, возможно, основной режим может скоро смениться на голос.
- Размер экрана ограничен По сравнению с рабочим столом это приводит к различным моделям просмотра и использования.
Для получения более подробной информации прочитайте это исследование, в котором освещаются аспекты взаимодействия с мобильными пользователями вопреки тому, что мы узнали во времена расцвета настольных компьютеров. Томи Ахохен называет мобильное седьмым средством массовой информации и делится 8 уникальными способностями, которые отличают мобильное взаимодействие от любых других видов средств массовой информации, которые были раньше. По сути, нельзя слепо переносить принципы веб-дизайна с рабочего стола на мобильное пространство.
Не просто уменьшите свой рабочий стол
Кредит Фотографии: Томас ван де Веерд
Как видно из приведенного выше списка, модель использования мобильных устройств отличается от той, к которой мы привыкли при проектировании для настольных компьютеров. Общий подход к уменьшению размера вашего настольного сайта для мобильных устройств наносит ущерб сущности мобильного доступа. Мобильный контекст предлагает свои уникальные возможности. Вы продаете своих клиентов и себя, если ваш дизайн игнорирует их.
Адаптивный веб-дизайн предоставляет один и тот же HTML-код всем устройствам, используя CSS для изменения способа отображения контента. Но это не очень хорошо для мобильных устройств. В качестве примера, HTML-разметка определяет порядок отображения веб-страницы. На рабочем столе вам нужно меню вверху, легко видимое и доступное, чтобы пользователь мог легко перемещаться. На мобильном устройстве возможность видеть и получать доступ к реальному контенту в первую очередь превосходит возможность перехода на другие страницы. Таким образом, вы не хотите загружать свое меню в первую очередь. Было бы лучше иметь свернутое или упрощенное меню внизу экрана.
Возьми СМИ. Даже если вы используете CSS или JavaScript для изменения размера изображений, обычно вы сначала загружаете большее изображение, а затем уменьшаете его. Большая (ненужная) загрузка увеличивает как потребление пользовательских данных, так и общее время загрузки страницы. Оба из них на премию на мобильных устройствах.
Фокус на пользовательском опыте
Изображение предоставлено: Ian Ransley
Вместо того, чтобы начинать свою мобильную веб-стратегию, подумайте об инструментах, которые есть в вашем распоряжении, чтобы уменьшить размер настольного веб-сайта или сделать его адаптивным. Альтернативный подход (на мой взгляд, лучше) состоит в том, чтобы начать свою мобильную веб-стратегию, ориентируясь на своих пользователей и именно то, что вы хотите, чтобы они забрали с собой, когда они посещают ваш мобильный сайт.
Рассмотрим точки останова. Они составляют основу RWD и определяют, какой макет, контент и т. Д. Загружать, основываясь на свойствах наиболее распространенных устройств. Но действительно ли это правильный путь ? Опять же, проблема этого подхода заключается в том, что он ориентирован на мобильные устройства. Не на людей, использующих их. Вместо этого, почему бы не выбрать логические контрольные точки в зависимости от того, как вы хотите, чтобы пользователь воспринимал ваш сайт?
Определите, как вы хотите, чтобы они взаимодействовали с вашим сайтом, что вы хотите, чтобы они испытывали на каждом этапе, и общее чувство или сообщение, которое вы хотите, чтобы они оставили. Возможно, это все элементы хорошего дизайна, но они часто теряются, когда мы подходим к мобильному веб-дизайну с технической точки зрения, а не с точки зрения пользователя.
Веб-приложение или Отзывчивый сайт / Отдельный мобильный сайт?
После того, как вы определились с тем, как вы хотите работать с мобильными сетями, найдите инструменты. Это было бы подходящим временем для изучения вариантов — стоит ли вам использовать нативное веб-приложение, создавать адаптивный сайт или вам нужно создать отдельный мобильный сайт? У каждого из них есть свои плюсы и минусы, и вам нужно определиться с тем, что лучше всего подходит для ваших пользователей.
Адаптивным сайтом легче управлять — единый URL-адрес и единый дизайн на всех устройствах облегчают пользователям запоминание и доступ, а также обслуживание. Как настольные, так и мобильные устройства используют общий набор SEO и маркетинговых усилий. Создание одного сайта определенно дешевле, чем создание двух или более (для разных мобильных устройств). Но тогда ваш мобильный опыт может оказаться неоптимальным для конверсии, загрузка может занять больше времени и, возможно, не будет правильно отображаться во всех мобильных браузерах. Вот некоторые ситуации, когда адаптивные сайты не стоят этого .
Вы можете избежать всех вышеперечисленных проблем, создав отдельный мобильный сайт, но тогда вам придется создать и поддерживать два отдельных сайта и URL-адреса и, возможно, разделить усилия по SEO и маркетингу. Но, эй, у вас будет веб-сайт, идеально подходящий для мобильного видения вашего клиента и ориентированный на улучшение конверсии.
Родные приложения также невероятно популярны. Приложение доступно практически для всего . Приложения мгновенно доступны и легче доступны, чем веб-сайты. Но они требуют дополнительных затрат на разработку и поддержку. Они также не универсальны для мобильных устройств — вам нужно будет перенести их на iOS, Android и любые другие устройства, на которых вы хотите, чтобы они работали.
В конечном итоге решение должно быть основано на том, какое средство лучше всего подходит для бизнеса вашего клиента. Эта статья DesignModo может помочь вам лучше позвонить.
Структурировать право контента
Отображение подмножества контента на рабочем столе на мобильном устройстве работать не будет. Люди гибки в выборе устройств . Пользователи могут часто выбирать удобное мобильное устройство, чтобы что-то делать, а не переходить к ноутбуку на столе через всю комнату. Они могут использовать свой планшет для записи важных заметок во время встречи или в утреннем тумане, лежащем в постели. Ваше внимание при выборе контента должно гарантировать, что вы обеспечите правильное взаимодействие с пользователем. Не просто доставить урезанный контент для мобильного пользователя. Это контент-стратегия бедняка .
Адаптивный веб-дизайн не решит ваши проблемы с контентом . И ни один не будет отдельного мобильного сайта.
Дизайн прошел долгий путь со времен лазерных принтеров, когда мы аккуратно расставляли все по левому и правому краям страницы. С тех пор F-шаблон стал преобладающим макетом дизайна, а Z-шаблон занял второе место. Исследования тепловых карт изобилуют, показывая лучшие способы размещения контента на вашей странице для лучших конверсий. Поскольку все это настолько широко и глубоко укоренилось в наших умах, мы предполагаем, что то же самое относится и к мобильным веб-сайтам. Задумайтесь на мгновение, в узких пределах экрана мобильного телефона, держится ли F-шаблон или Z-макет? Мобильный экран требует вертикальной компоновки. Не горизонтальные конструкции, к которым мы привыкли. Все больше причин для вас, чтобы оценить, какие конечные цели вы действительно хотите достичь на своем мобильном веб-сайте. Сосредоточьтесь на том, что важно — конечный пользователь и ваши переходы. Структурируйте свой контент соответственно.
Честно говоря, нет правильного ответа на разработку вашей мобильной веб-стратегии. Все сводится к оценке бизнеса вашего клиента и того, как он хочет взаимодействовать с пользователями, а затем к разработке мобильной стратегии, ориентированной на взаимодействие с конечным пользователем. Мне бы очень хотелось услышать стратегии и подходы, которые сработали для вас, и почему вы думаете, что они сработали.