close

Заказать адаптацию

+ подарок аудит Вашего сайта на адаптивность
совершенно бесплатно!

Блог команды Адаптист.ру

10 факторов, на которые надо обратить внимание при выборе стратегии мобилизации сайта

real-pixels-2

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

Стратегии будут разными, в зависимости от проекта, над которым вы работаете, но будьте уверены, вам в любом случае понадобится стратегия, по которой ваш сайт (или сайт вашего клиента) будет работать в мобильном пространстве. Независимо от того, разрабатываете ли вы статичный сайт (в Интернете осталось еще что-либо действительно статичное?), новостной сайт или интерактивное сетевое приложение, лучше всего использовать всеобъемлющий подход, который включает в себя глубокий взгляд на взаимодействие пользователей с вашим мобильным сайтом.

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

1. Определитесь, для чего вам нужен мобильный сайт

Обычно, разработку мобильного сайта начинают по одной из следующих причин:

  • Разрабатывается абсолютно новый сайт, для которого требуется настольная и мобильная стратегия
  • Производится изменение дизайна существующего сайта, которое включает в себя запуск нового мобильного сайта
  • В дополнение к существующему настольному сайту, запускается мобильная версия, без каких-либо изменений

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

2. Определитесь с бизнес-целями

В большинстве случаев, вас, как дизайнера/разработчика, клиенты нанимают с целью разработки мобильного сайта для их бизнеса. Какие бизнес-цели они преследуют при помощи сайта, а конкретно — мобильного сайта? Разрабатывая проект, установите приоритет таких целей, и отразите в нем эту иерархию. Когда проект становится мобильным, необходимо сделать чуть больше, и сфокусироваться буквально на двух-трех самых важных бизнес-целях.
Возьмите в качестве примера сайт Hyundai. Когда вы загружаете hyundai.com в настольном браузере, первое, что вы видите — большие, яркие изображения, цель которых вызвать эмоциональную связь с автомобилями компании. Также вы видите полноценную навигацию, описание различных преимуществ обладания автомобилем Hyundai, поиск по сайту и ссылки на социальные сети.

А теперь загрузите hyundai.com в вашем мобильном браузере и вы увидите урезанную версию сайта.

Мобильный сайт hyunday.ru

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

3. Изучите данные за прошедший период, перед тем как двигаться дальше

Если ваш проект заключается в изменении дизайна (как и большинство проектов в настоящий момент), или в дополнении существующего сайта мобильной версией, считайте, что вам повезло, если сайт отслеживал трафик через Google Analytics (или другое программное обеспечение, отслеживающее метрические показатели). Разумным будет изучить эти данные, перед тем как погружаться в дизайн и разработку.
Проанализируйте, с каких устройств и браузеров пользователи заходили на сайт. Так как сайт должен быть разработан с учетом возможности поддержки различных устройств, переходя от стадии дизайна к стадии разработки, тестирования и запуска, ориентируйтесь на такие браузеры, как на высокоприоритетные.

4. Применяйте адаптивный дизайн

Каждый год выпускается множество новых устройств, поэтому времена, когда можно было проверить сайт на нескольких браузерах и запустить в сеть, давно прошли. Вам необходимо оптимизировать сайт для огромного количества настольных и мобильных браузеров, у каждого из которых свое разрешение экрана, поддерживаемые технологии и пользовательская база. Известная статья «Адаптивный дизайн» рекомендует создавать интерфейс для настольного и мобильного сайта одновременно. Цитируем:
«Вместо того чтобы подгонять несвязанные дизайны к каждому, из постоянно увеличивающегося числа устройств, мы можем относится к ним как к граням одного интерфейса».
Используя самые последние и прогрессивные технологии, как HTML5, CSS3 и веб-шрифты, вы можете спроектировать сайт таким образом, чтобы он изменял размер и подстраивался под любое устройство, на котором его просматривают. Это мы и называем адаптивным дизайном.

5. Красота в простоте, но…

Правило номер один при конвертации настольного сайта в мобильный — упрощать все, что только возможно. Для этого есть несколько причин. Уменьшение размеров файлов и времени загрузки, всегда хорошо для мобильного сайта. Беспроводные соединения, хоть и стали быстрее чем несколько лет назад, до сих пор остаются относительно медленными, поэтому чем быстрее загружается ваш мобильный сайт, тем лучше.
Рекомендации касательно удобства мобильного сайта в использовании также предполагают необходимость упрощения дизайна, компоновки и навигации. Экранного места меньше, поэтому вам нужно тщательно думать над тем, где расположить элементы. Если кратко: чем меньше, тем лучше.
Тем не менее мы можем создавать красивые дизайны, оптимизированные под мобильные устройства. CSS3 обладает удивительным набором инструментов для создания градиентов, теней, закругленных уголков, при этом нам не нужно использовать громоздкие изображения. Не говоря о том, что изображения вообще нельзя использовать. Посмотрите на эти примеры мобильных сайтов в нашем портфолио, которым удалось достичь великолепного баланса между простотой и красотой.

6. Компоновка с одной колонкой обычно лучше всего работает

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

7. Вертикальная иерархия. Думайте «сворачивающимися» терминами

На вашем сайте большое количество информации, которую необходимо перенести на мобильный сайт? Хороший способ сделать это просто и удобно — установить сворачивающуюся навигацию. Если еще больше поразмыслить над структурой с одной колонкой, то громоздкий контент можно собирать в сворачивающиеся модули, что позволит пользователю открывать интересующий их контент, и сворачивать весь остальной.

8. Переходите от «кликов» к «нажатиям»

В мобильном Интернете взаимодействие происходит при помощи нажатий пальцами, а не кликовмышкой. Это создает совершенно другую динамику, в смысле удобства пользования сайтами.
При переходе от настольного к мобильному дизайну, необходимо переделать элементы, на которые нужно «кликать» — ссылки, кнопки, меню и т.п. — и сделать их такими, на которые нужно нажимать. Настольный интернет отлично обращается со ссылками при помощи маленьких активных (на которые можно кликнуть) участков, мобильному интернету необходимы большие, массивные кнопки, на которые легко нажать пальцем.
Более того, в мобильном интернете нет состояния наведенного курсора. Обычно, когда что-то должно произойти при наведении курсором (например, раскрывающееся навигационное меню), на мобильном устройстве это происходит после первого нажатия. Второе нажатие делает то же, что и первый клик на настольном сайте. Мобильных пользователей это может немного запутать, поэтому для мобильных устройств, состояние наведенного курсора необходимо переработать.

9. Обеспечьте обратное взаимодействие

Говоря о взаимодействии, вам необходимо обеспечить явный отклик на любое действие, происходящее на видимой пользователю части вашего сайта.
Например, когда пользователь нажимает ссылку или кнопку, обычной практикой будет визуально изменить ее состояние, чтобы показать, что кнопку нажали и действие было инициировано. На iPhoneбелая ссылка обычно изменяет цвет на синий, когда ее нажимают. Такой визуальный отклик привычен для большинства пользователей и его стоит применять.
Другая обычная практика — показывать статус загрузки, для действий, которым требуется некоторое время для запуска. Используйте анимированную загрузочную картинку, чтобы показать, что что-то происходит. Хороший пример — мобильный сайт Basecamp, где во время загрузки страницы показывается вращающаяся загрузочная картинка.
Помните, большинство настольных браузеров имеет встроенные индикаторы, которые показывают, что что-то происходит. Мобильные браузеры не делают это настолько очевидным, поэтому важно предусмотреть визуальный отклик в проекте вашего мобильного сайта.

10. Тестируете свой мобильный сайт

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

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

 

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

 

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *