Адаптация сайта в мире портативных устройств

s

Для того, чтобы принципы юзабилити сохранялись при переходе со стационарного ПК на различные портативные устройства (мобильный телефон, планшет) технология адаптивного дизайна просто необходима. Чтобы не разрабатывать для каждого гаджета свой вариант веб-страницы, гораздо лучше, чтобы сайт был уже приспособлен под весь спектр таких устройств.

В российском Интернете появляется все больше веб-сайтов с адаптивной версткой. И сейчас разработчики частенько начинают разработку, изначально ориентируясь на представление контента на устройствах с разным разрешением экрана. Как это делается?

Есть несколько видов адаптивных макетов:

  1. Резиновый
  2. Перенос блоков
  3. Переключение макетов
  4. Адаптивность «малой кровью»
  5. Панели
Поговорим подробнее о каждом из них.

Резиновый

Это, пожалуй, самый незамысловатый в реализации и понятный пользователям вариант представления контента. Суть его состоит в том, основные блоки спрессованы до размеров экрана портативного устройства, а где такое нельзя сделать — перестраиваются в длинную ленту. Этот макет реализовывается с помощью адаптивных CSS-фреймворков, (например, Twitter Bootstrap).

rezina.jpg

Примеры:
Five Simple Steps
Princess Elisabeth Antarctica
Trent Walton
Sifter

Перенос блоков

Способ, который подходит для сайта с множеством колонок. Суть в следующем: при уменьшении ширины экрана сайдбары (дополнительные блоки) переносятся в нижнюю часть страницы.

perenos.jpg

Примеры:
Modernizr
Owltastic

Переключение макетов

Этот способ больше других подходит для адаптации на разных портативных устройствах. Пол каждое разрешение делается свой макет. Этот способ наиболее трудоемкий, требует больших затрат времени и сил.

55444321.jpg

Примеры:
Food Sense
Performance Marketing Awards

Адаптивность «малой кровью»

Данный способ отличается простотой и вполне подходит для несложных сайтов. Все делается с помощью масштабирования типографики и изображений. Способ гибкий, но не очень распространенный среди разработчиков.

adaptivn.jpg

Примеры:
Future Friendly
Path

Панели

Этот способ ранее использовался в мобильных приложениях, где дополнительное меню появляется при вертикальном и горизонтальном тапе.пришедший из мобильных приложений, где дополнительное меню может появляться при горизонтальном или вертикальном скроллинге. Из недостатков можно выделить неочевидность многих действий для пользователя: мобильная навигация смотрится довольно непривычно на веб-сайте.

paneliiiii.jpg

Пример панелей в мобильном приложении:

amobpan.jpg

Пример панелей на сайтах:
Kaemingk Christmas 2012

 Итак, мы сделали обзор основных типов адаптивных макетов. Какой нужен вам — выбирайте сами, ведь для разных задач могут понадобиться разные макеты, и потом, никто не мешает вам комбинировать эти способы.

Давайте теперь поговорим о тонкостях трансформации контента. Довольно дискуссионный вопрос заключается в том, что нужно что-то делать с контентом при переключении между различными устройствами. Для решения этой задачи придумано несколько операций.
  • Структурная трансформация
Основное правило работы с контентом заключается в том, что с уменьшением окна браузера нужно соответственно корректировать таблицы, шрифт, изображения и их соотношение на одну публикацию и др.
  • Скрывать или прятать контент
Второстепенный контент (исходя из анализа) убирается с макета страницы и прячется за кликом или скроллом.
  • Изменить приоритет 
Например, для пользователей мобильных устройств часто важно показать что-то в первую очередь, а что-то разместить на втором плане. У интернет-магазинов - это, может быть, группа товаров, которая имеет основной приоритет у пользователей смартфонов и т.п.
  • Удалять
Довольно привычным стало то, что на мобильных сайтах показывается урезанная версия контента, в которой есть возможность перейти к полной. Адаптивный дизайн не дает такой возможности, т.к. версия у страницы одна. Как же нам быть с удалением контента? Бытует мнение, что поведение пользователей мобильных устройств отличается от поведения владельцев десктопных устройств (стационарный ПК, ноутбук). Ведь при серфинге на мобильнике перед пользователем стоят другие цели, как правило, более прагматичные. Просмотр веб-страниц при этом, чаще всего, хаотичен и прерывист. Соответствует ли это действительности? И что из себя представляют современные мобильные устройства?

Современный ответ на эти вопросы будет примерно такой: для решения приоритетных задач пользователя необходимо обращать внимание не только на вид платформы, но и, текущие потребности,условия, обстоятельства,т.е. на так называемый контекст использования. Таким образом, решать показывать ли весь контент или только его часть, нужно ориентируясь на настоящие пользовательские задачи. Выдумывать их без предварительных исследований довольно опасно. Поэтому, если вы не уверены, не удаляйте! А удалять контент можно только если существуют достоверные данные или есть возможность на практике проверить отсутствие потребности в контенте со стороны того или иного сегмента аудитории.
  • Трансформация по смыслу
Если мы видим, что задачи у пользователей десктопных устройств отличаются от задач пользователей портативных устройств. Нужно отбирать из вороха страниц, то что обладает самой важной смысловой нагрузкой. Такая трансформация нужна не всегда. Есть несколько случаев, где такой способ не подходит: динамический контент (блоги, новости, периодика и т.п.), т.е. там, где информация часто обновляется, и у нас нет времени и возможности работать с текстами. Здесь нужно сделать трансформацию по формату; статический контент, который мигрирует на все версии без изменений (например, контакты).

Методы адаптивного проектирования

При разработке адаптивного дизайна, приходиться сталкивается с неопределенностями, связанными с многообразием портативных устройств. Здесь лучше всего использовать методы, разработанные еще до адаптивного дизайна:

Graceful Degradation — разработка начинается с самых функциональных версий сайта (с десктопных версий); Progressive Enhancement — проектирование начинается с простых не функциональных версий (с мобильных); Mobile First - только с мобильных, сочетается с предыдущим методом.

progressive.jpg

Все эти методы помогут интерфейсу оставаться независимым от влияния разных устройств.

Общие советы по адаптации

Не бойтесь упрощать, а также оптимизировать по мере движения вниз функциональность. Не изменяйте сайт до полной неузнаваемости!

Если вы имеете дело с пользовательскими данными, то в каких-то состояниях он могут полностью или частично недоступны. В этом случае нельзя менять формат их ввода или представления (форма упрощается, но нельзя просить пользователя, допустим, вводить дату рождения в разных форматах).

Линия сгиба (нижняя граница веб-страницы, которая отображается в браузере) не должна применяться для каких-либо функциональных элементов, т.к. он не регулярно используется на разных видах устройств.

Не размещайте географические карты (например, Google Maps) и другие подобные элементы с внутренней навигацией, т.к. из-за этого могут возникнуть трудности со скроллом веб-страницы.В этом случае пользователей мобильных устройств лучше всего перенаправить на навигационные приложения.

Необходимо предусмотреть момент перехода к устройству с поддержкой технологии Tach, чтобы вовремя предложить mouse on, как альтернативу. Скроллинг по возможности использовать только для обновляемой информации (тематич. статьи, новости). В таком случае для оптимизации скорости работы прибегают к постепенной дозагрузке контента. Естественно, что в самом конце такого блока не следует размещать важных элементов (пользователь просто до них не доберется).
Оцените материал:  
(0)

Комментировать

Поможем увеличить продажи Посмотрите наши условия и тарифы на услуги

Наши менеджеры готовы прямо сейчас обсудить ваши задачи!

Сергей Шамбалов

Сергей Шамбалов

Игорь Баннюк

Игорь Баннюк

Марина Рыжикова

Марина Рыжикова

Позвоните нам или оставьте заявку на бесплатную консультацию,
мы ответим в течение 1 часа (в рабочее время) и расскажем, как мы сможем решить ваши задачи!

Оставить заявку
Загрузка...