Недавно я провел редизайн и, как часть усилий, я рассмотрел, как лучше поддерживать планшеты и мобильные посетители. Если вы недавно не исследовали эту тему, никто не может обвинить вас в том, что вы отказываетесь от мобильных телефонов / планшетов как новшества, которое не окажет большого влияния на ваше присутствие в Интернете. Но если это то, где вы находитесь, подумайте об этом:
Недавно было подсчитано (по состоянию на начало 2012 года), что 10% всего интернет-трафика сейчас поступает с мобильных устройств, а к 2016 году мобильный трафик достигнет 36% . И по сравнению с прошлым годом, мобильный трафик вырос на 131% … за один год. Мы явно находимся в светской тенденции к персональной мобильности в вычислительной технике. Распространение мобильных устройств в настоящее время ускоряется, и продажи мобильных и планшетных устройств с выходом в Интернет в настоящее время превышают продажи традиционных настольных устройств; Уже в следующем году планшеты превысят продажи настольных ПК !
Таким образом, существует настоятельная необходимость в поддержке пользователей мобильных устройств и планшетов с любым новым веб-дизайном. Но как ты это делаешь? Сначала давайте поговорим о наших целях и рассмотрим несколько возможных стратегий:
Цели:
Рассмотрим схему использования этих устройств. При использовании настольного компьютера они обычно находятся в офисе и либо изучают информацию, связанную с работой, либо откладывают работу между проектами (да, хм, на работе). Тем временем пользователи планшетов, как правило, сидят на диване перед телевизором по вечерам и выходным. Мобильные пользователи тем временем пытаются ограничить активность, ожидая в кабинете врача или на красный свет в своей машине (к сожалению).
Итак, что будет значимым и удовлетворительным пользовательским опытом для этих трех пользователей? Пользователи настольных компьютеров и планшетов будут более восприимчивы к альтернативным предложениям по контенту (продайте ссылки на электронную коммерцию и связанные публикации и т. Д.). Пользователи планшетов получат больше удовольствия от мультимедиа и богатых изображений. И весь этот богатый пользовательский опыт на самом деле является препятствием для мобильных пользователей, которые борются с временными ограничениями, небольшим экраном и медленным временем загрузки. Они просто хотят как можно быстрее получить доступ к важной информации, такой как контактная информация. Так что придерживаться только традиционного веб-дизайна, ориентированного на пользователей настольных компьютеров, не очень хорошо представлять два других новых класса пользователей (настольных и мобильных), о которых вам нужно задуматься.
Чтобы облегчить этим новым пользователям, есть несколько вариантов:
Родное приложение:
Первое, что приходит в голову большинству людей с мобильным контентом, — это нативные приложения для iOS и Android, которые вы загружаете и устанавливаете на свои мобильные и планшетные устройства. Они обеспечивают очень богатый пользовательский опыт, но требуют разработки отдельного приложения для каждого устройства, которое вы хотите поддерживать. Это может стать дорогим. И давайте будем честными, на скольких сайтах пользователи захотят загрузить приложение? Так оправдывают ли все эти дополнительные расходы разработку сценария, который пользователи, вероятно, даже не привлекут? Есть исключения из этого правила, конечно. Если вы являетесь игровой компанией или облачным программным приложением, которое предоставляет инструмент для повышения производительности, к которому пользователю необходимо регулярно обращаться, то нативное приложение, безусловно, является возможностью и, возможно, даже превосходным пользовательским интерфейсом. Однако для большинства корпоративных и маркетинговых сайтов это просто неоправданный вариант, поскольку пользователь просто ищет небольшую информацию о вашем сайте.
Отдельный мобильный дизайн:
Следующим разумным соображением является создание отдельного сайта для поддержки планшетов и мобильных телефонов. Это относительно легко сделать. Относительно просто определить тип устройства (например, HTTPUserAgent) и соответственно перенаправить пользователей на альтернативный контент. Если вы часто пользуетесь телефоном для просмотра веб-контента, вы, вероятно, натолкнетесь на несколько сайтов, которые перенаправят вас на отдельный поддомен своего веб-сайта. Например, xyz.com может перенаправить вас на m.xyz.com. И там вы обслуживаете упрощенную версию сайта, которая лучше подходит для мобильных устройств. Но это становится сложным, когда вы начинаете рассматривать все различные перестановки. Как насчет планшетов, например, которые действительно выигрывают от более богатого пользовательского опыта?
Отзывчивый веб-дизайн:
В сообществе дизайнеров наблюдается тихое движение, которое началось со статьи Итана Маркотта , в которой описывается возможность адаптивного веб-дизайна (RWD). Идея обеспечивает техническую основу для реализации веб-дизайна «сначала для мобильных устройств», в котором вы начинаете с разработки ограниченного мобильного опыта и уровня более богатого пользовательского опыта, основанного на его возможностях. Работая в обратном направлении, вы гарантируете, что вы учли все различные перестановки, такие как все размеры экрана (медиа-порты), альбомная или портретная компоновка и т. Д.
Адаптивный веб-дизайн возможен в первую очередь благодаря внедрению медиазапросов с новым стандартом таблиц стилей в CSS3. Медиа-запросы позволяют автору сайта инкапсулировать CSS-классы в условные операторы, которые оценивают тип медиа пользователя, такой как размер окна (область просмотра) и ориентация. В RWD также рассматривается использование гибких схем проектирования и контекстно-зависимых изображений, которые адаптируют размер и качество изображения также на основе типа устройства.
Гибридный подход:
Оценив эти разные варианты, я пришел к выводу, что гибридный подход был в порядке. Философия адаптивного веб-дизайна элегантна, я, естественно, склоняюсь к ней, и она творит чудеса для оптимизации настольной версии веб-сайта для планшетных устройств. В конце концов, я не чувствовал, что это подходит для мобильных устройств. Как упоминалось ранее в этом посте, мобильные пользователи имеют принципиально разные цели и потребности и просто не ищут более элегантного представления моего сайта; они хотят получить информацию и получить ее быстро, точка. Я думаю о своем мобильном опыте, и когда я смотрю бизнес в Интернете, это обычно потому, что я просто хочу найти их адрес или контактную информацию. Таким образом, на первичном веб-сайте имеется много информации, которая не относится к мобильной версии, и ее действительно следует рассматривать отдельно.
Пример:
Если вы посмотрите Enlogica.com на своем смартфоне, вы увидите, что там всего 5 страниц, и первая — это контактная ссылка. Если вы нажмете на это, это будет очень простая страница с адресом и тремя кнопками, которые позволяют пользователю: нажать, чтобы позвонить, нажать, чтобы отправить электронное письмо, и нажать, чтобы проложить маршрут на своем телефоне. Вот и все. Ниже приведены несколько других страниц для полноты картины (раздел блога доступен внизу), но я действительно пытаюсь создать упрощенный пользовательский интерфейс, основанный на предполагаемой схеме использования пользователя. И это принципиально иная прерогатива, чем адаптивный веб-дизайн, который ориентирован на адаптивную эстетику, а не на пользовательский опыт.
Поскольку я использую WordPress в качестве платформы CMS для сайта, я смог легко настроить дополнительный мобильный шаблон, который доставляется только на мобильные устройства, в зависимости от типа устройства (HTTPuserAgent). Это дало элегантное решение, так как я смог оптимизировать контент для мобильных устройств без необходимости создавать отдельный мобильный сайт для обслуживания.
Таким образом, я определил гибридный подход к мобильной доступности, который сочетал в себе преимущества адаптивного веб-дизайна и практичность отдельной мобильной темы. Адаптивные (RWD) методы были использованы для адаптации к разумному опыту работы с планшетом, но мобильные устройства получают отдельную тему с ограниченной навигацией, и содержание этих страниц также сводится к минимуму. Мобильный интерфейс значительно упрощен и моделирует собственный интерфейс устройства (с использованием JQuery Mobile). Такой подход обеспечивает оптимальное взаимодействие с пользователем на всех трех классах устройств (настольные, настольные и мобильные).