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

Небольшой размер экранов мобильных устройств способствует тому, что пользователь может что-то не заметить или пропустить. Сделайте СТА-кнопки большого размера, высококонтрастными и действительно похожими на кнопки, чтобы пользователь четко видел, что это именно кнопка, которую можно нажать.

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

Вот пример удачного меню: оно умещается на экране без скроллинга и содержит необходимый минимум пунктов.

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

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

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

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

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

Посмотрите на пример ниже и никогда так не делайте :)

Мало что раздражает мобильных пользователей больше, чем необходимость «снайперским» нажатием попасть в маленькую ссылку на экране, при этом еще и не нажав случайно на соседнюю.

Идеальный минимум для размера кнопки – 10х10 мм.

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

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

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

При использовании смартфона большинство пользователей просматривает сайты в вертикальной ориентации экрана, как они и привыкли держать свои смартфоны.

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

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

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

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

Зачастую при просмотре сайтов с мобильных устройств можно увидеть ссылки на так называемую «полную» версию, которую пользователь увидел бы с настольного компьютера.

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

Когда пользователь видит ссылку «полная версия», то он начинает справедливо предполагать, что он пользуется какой-то ограниченной, урезанной версией сайта.

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

Называйте такую ссылку «версией для компьютера», чтобы не создавать у пользователя ложного ощущения, что «полная» значит «лучшая».

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

Воспользуйтесь советами из нашей статьи, и у ваш сайт будет прекрасно смотреться на мобильных устройствах!

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

Небольшой размер экранов мобильных устройств способствует тому, что пользователь может что-то не заметить или пропустить. Сделайте СТА-кнопки большого размера, высококонтрастными и действительно похожими на кнопки, чтобы пользователь четко видел, что это именно кнопка, которую можно нажать.

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

Вот пример удачного меню: оно умещается на экране без скроллинга и содержит необходимый минимум пунктов.

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

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

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

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

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

Посмотрите на пример ниже и никогда так не делайте :)

Мало что раздражает мобильных пользователей больше, чем необходимость «снайперским» нажатием попасть в маленькую ссылку на экране, при этом еще и не нажав случайно на соседнюю.

Идеальный минимум для размера кнопки – 10х10 мм.

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

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

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

При использовании смартфона большинство пользователей просматривает сайты в вертикальной ориентации экрана, как они и привыкли держать свои смартфоны.

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

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

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

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

Зачастую при просмотре сайтов с мобильных устройств можно увидеть ссылки на так называемую «полную» версию, которую пользователь увидел бы с настольного компьютера.

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

Когда пользователь видит ссылку «полная версия», то он начинает справедливо предполагать, что он пользуется какой-то ограниченной, урезанной версией сайта.

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

Называйте такую ссылку «версией для компьютера», чтобы не создавать у пользователя ложного ощущения, что «полная» значит «лучшая».

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

Воспользуйтесь советами из нашей статьи, и у ваш сайт будет прекрасно смотреться на мобильных устройствах!