Posted:
Дек 27, 2022
Comments:
0 Comments

Отображение сайта на мобильном: 10 способов посмотреть, как выглядит сайт на мобильном

Содержание

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

Содержание статьи

  • 1 Какими признаками обладает хороший мобильный сайт?
  • 2 Как проверить сайт на мобильность?
  • 3 Лучшие сервисы для проверки страниц на «мобильность»

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

Еще в 2015 году компания Google сообщила о том, что адаптация сайта под мобильные устройства влияет на позиции сайта. А с 2016 года и Яндекс объявил о мобильных изменениях поискового алгоритма. Это говорит о том, что поисковые системы выводят оптимизированные под мобильные устройства сайты выше, чем те, которые не имеют оптимизации.

Адаптация страниц под нужды мобильных пользователей просто необходима, так как это влияет еще и на конверсию посетителей. Многие отмечают, что адаптивность сайта повышает конверсию от 30% до 60%.

С лета 2018 года Google также вводит ранжирование мобильных страниц по скорости загрузки. «Подвисающие», медленно загружающиеся сайты окажутся далеко от первых позиций в поисковой мобильной выдаче. Самое время задуматься о применении новых подходов, например, технологии совмещения свойств мобильного сайта и мобильного приложения, как Progressive Web App. Сайты на PWA работают даже в режиме оффлайн, сохраняются по 1 клику в смартфоне клиента (как обычное приложение), но при этом не тратят ресурсы смартфона (вес до 200 кб).  Повышение конверсии при таком подходе дает более 50%. Больше о качествах и преимуществах Progressive Web App читайте в статье — «Progressive Web Apps: новая услуга для бизнеса, который стремится стать лидером в мобильной выдаче«.

Подключить услугу

Какими признаками обладает хороший мобильный сайт?

Контент должен удобно читаться, чтобы текст не приходилось увеличивать или бесконечно прокручивать вниз;

  1. Элементы интерфейса должны быть контрастными. Если человек читает ваш контент на улице, где экран засвечен, он должен четко видеть текст, картинки и кнопки;
  2. Мобильная версия не должна содержать Flash-элементы и излишнюю анимацию;
  3. Недопустима горизонтальная полоса прокрутки;
  4. Навигация должна быть максимально простой и последовательной;
  5. Сайт должен быстро загружаться;
  6. Тег viewport. При правильных настройках сайт будет отображаться на любых устройствах с любыми размерами экрана.

Как проверить сайт на мобильность?

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

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

Лучшие сервисы для проверки страниц на «мобильность»

 1.

Google Mobile Friendly

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

Для просмотра ошибок переходите во вкладку Google Webmaster Tools. Выбираете в пункте “Поисковый трафик”  — “Удобство просмотра на мобильных устройствах”.

Затем нужно перейти к тесту с самого начала, ввести домен и ознакомиться со всеми рекомендациями в пункте “Как сделать страницу удобной для мобильных”.

https://search.google.com/test/mobile-friendly

2. Яндекс Вебмастер

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

  • Наличие тега viewport;
  • Горизонтальную прокрутку;
  • Flash – элементы;
  • Java – апплеты;
  • Silverlight – плагины;
  • Удобство чтения.

https://beta.webmaster.yandex.ru/

3. Mattkersley

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

4. Bing

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

  • Правильно ли настроено окно просмотра?
  • Соответствует ли ширине экрана содержимое страницы?
  • Читаемый ли текст?
  • Достаточно ли крупны и удобны ссылки и кнопки на сайте.

https://www.bing.com/webmaster/tools/mobile-friendliness

5.Responsinator

Этот сервис, в отличие от других, не дает оценки, но показывает сайт в разных расширениях для 6 разных устройств на IOS и Android.

http://www.responsinator. com/

6.Ipadpeek и iPhone Tester

Эти сервисы позволяют проверить свой сайт прямо с мобильного устройства.

7.Screenfly

Позволяет тестировать сайт на экранах разных телефонов, включая HTC, LG, BlackBerry и Samsung.

8.Gomez

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

9.Testmysite

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

 

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

10. Responsivedesign

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

http://ami.responsivedesign.is

Выводы

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

Если необходимо увеличить скорость загрузки мобильного сайта, используйте новую технологию Progressive Web Apps.

Узнать больше о PWA

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

 

Предыдущая записьСледующая запись

Адаптация сайта на мобильных устройствах — студия Палыча

  • Главная

  • org/ListItem»>

    Вредные советы

Для просмотра на мобильных устройствах, используется метатег viewport. Он сообщает браузеру, каким образом нужно контролировать отображение сайта на мобильных устройствах (к ним так же относятся и планшетные компьютеры).

Этот метатег вставляют в контейнер head вашего сайта.

<meta name="viewport" content="width=device-width">

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

Для более детальной настройки отображения используем дополнительные значения

Ширина сайта на экранах мобильных устройств

Позволяет адаптировать ширину сайта под ширину экрана устройства

<meta name="viewport" content="width=device-width">

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

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

<meta name="viewport" content="width=600">

А в css шаблона впишем правило медизапроса при котором будут применяться стили при ширине экрана 600px. А так как мы задали именно это разрешение для отображения на экранах в мобильных устройствах, то будут использоваться стили указанных в заданных нами правилах. Общие стили будут применяться так же как и на обычном мониторе, но если мы какие либо стили указали в правилах, то эти стили будут заменяться дефолтными.

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

  • Мы получим одинаковое отображение на различных разрешениях экранов.
  • Нам нужно менять стили только для этого медизапроса, а не подстраивать под каждое разрешение экрана.
@media screen and (max-width: 600px) {
    …
}

Высота сайта на экранах мобильных устройств

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

Для исправления этой ошибки мы можем использовать правило

<meta name="viewport" content="height=device-height">

Масштабирование сайта на экранах мобильных устройств

С помощью этого правила мы можем разрешать либо запрещать мастабирование страницы сайта.

Разрешить масштабирование на смартфоне:

<meta name="viewport" content="user-scalable=yes">

Запретить масштабирование на мобильном телефоне:

<meta name="viewport" content="user-scalable=no">

Подитог

И так мы создали свой viewport и так же для него создали медиапзапрос

В наш медиазапросе создали необходимые для нас стили. Что у нас вышло видим на рис.3 либо по ссылке (заходим с мобильных устройств)

Viewport:

<meta name="viewport" content="height=device-height,width=600,user-scalable=yes">

Медиазапрос:

@media screen and (max-width: 600px) {
    body {
        font-size:1.5em;
    }
    …
    h3 {
        font-size:2.5em;
    }
}

рис.1 Отображение сайта без метатега viewport

рис.2 Отображение сайта с атрибутом width=device-width

рис.3 Отображение сайта с атрибутом width=600

Верный viewport

Прошло уже 5 лет с момента первой нашей верстки под мобильные устройства и получили новый опыт. В итоге пришли к простому, но бронебойному viewport для сайтов:

<meta name="viewport" content="width=device-width, user-scalable=yes">

Читайте также

  1. Фреймворк для адаптивной верстки
  2. Адаптивная верстка для мобильных устройств

Как просмотреть настольную версию любого сайта на мобильном устройстве

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

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

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

Как включить и отключить представление рабочего стола в браузере Chrome Mobile

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

Как включить представление рабочего стола для всех сайтов в браузере Chrome Mobile

Чтобы сделать рабочий стол по умолчанию для всех сайтов:

  1. Откройте Chrome на своем телефоне.
  2. Нажмите кнопку с тремя точками в правом верхнем углу.
  3. Прокрутите вниз и нажмите Настройки .
  4. Прокрутите вниз и нажмите Настройки сайта .
  5. Прокрутите меню до самого конца и коснитесь Desktop site .
  6. Теперь включите переключатель сайта Desktop , , и все готово.

Как включить представление рабочего стола для определенных сайтов в браузере Chrome Mobile

Вот как можно переключаться между мобильным и настольным представлениями в Chrome.

  1. Запустить Chrome.
  2. Перейдите на сайт, который вы хотите просмотреть в режиме рабочего стола.
  3. Нажмите кнопку меню с тремя точками в правом верхнем углу.

    3 изображения

  4. Прокрутите меню вниз и коснитесь поля Desktop site .

Сайт перезагрузится в режиме рабочего стола. Чтобы вернуться к мобильному представлению, просто снова нажмите кнопку меню с тремя точками и снимите флажок Desktop site . Мы рассмотрели, как использовать Google Chrome в качестве студента.

Как включить и отключить представление рабочего стола в браузере Edge Mobile

Вы также можете войти в режим рабочего стола в браузере Microsoft Edge. Вот как это делается:

  1. Запустите браузер Edge на своем телефоне.
  2. Нажмите кнопку меню с тремя точками в нижней части экрана.
  3. Нажмите Настройки .
  4. В опциях меню нажмите Общие .

    3 Изображения

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

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

Как включить и отключить представление рабочего стола в браузере Firefox Mobile

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

  1. Откройте Firefox на мобильном устройстве.
  2. На домашней странице Firefox или веб-сайте, который вы хотите просмотреть в режиме рабочего стола, нажмите кнопку с тремя точками в правом верхнем углу.

    3 изображения

  3. Перейдите к пунктам меню и включите тумблер Desktop site . Сайт перезагрузится в режиме рабочего стола.

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

Как включить и отключить представление рабочего стола на Brave Mobile

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

Как включить представление рабочего стола для всех сайтов в Brave Mobile

Вот как установить вид рабочего стола по умолчанию для всех веб-сайтов:

  1. Запустите мобильный браузер Brave.
  2. Нажмите кнопку меню с тремя точками в правом нижнем углу.
  3. Нажмите Настройки .
  4. Прокрутите вниз и нажмите Настройки сайта .
  5. Прокрутите вниз и нажмите Desktop site .
  6. Включите переключатель узла рабочего стола .

Как включить представление рабочего стола для определенных веб-сайтов на Brave Mobile

Чтобы включить представление рабочего стола для определенного сайта в Brave:

  1. Откройте браузер Brave на своем устройстве.
  2. Нажмите кнопку с тремя точками в правом нижнем углу экрана.

    3 изображения

  3. Перейдите к пунктам меню и установите флажок Desktop site . Сайт автоматически перезагрузится в режиме рабочего стола.

Чтобы вернуться к мобильному представлению, просто выполните шаги, описанные выше, в обратном порядке. Мы рассмотрели причины перехода с Chrome на Brave.

Как включить и отключить представление рабочего стола на Vivaldi Mobile

Есть два способа включить режим рабочего стола в Vivaldi. Вы можете сделать это со стартовой страницы Vivaldi или с сайта, который вы хотите просматривать в режиме рабочего стола.

Как включить представление рабочего стола для всех сайтов в Vivaldi Mobile

Чтобы открыть Vivaldi в режиме рабочего стола со стартовой страницы:

  1. Откройте мобильный браузер Vivaldi.
  2. Если вы не попадаете на стартовую страницу по умолчанию, просто нажмите на значок Home . Вы попадете на домашнюю страницу Вивальди.
  3. Нажмите кнопку меню V в правом верхнем углу.
  4. В параметрах меню нажмите Настройки .
  5. Прокрутите вниз до раздела Веб-страницы и включите переключатель Всегда показывать рабочий стол .

Это установит вид рабочего стола в качестве настройки просмотра веб-сайта по умолчанию в Vivaldi.

Как включить режим рабочего стола для определенных веб-сайтов в Vivaldi Mobile

Если вы хотите просмотреть определенный веб-сайт на Vivaldi в режиме рабочего стола, сделайте следующее:

  1. Откройте Vivaldi на своем мобильном телефоне.
  2. Перейдите на конкретный веб-сайт, который вы хотите просмотреть в режиме рабочего стола.
  3. Нажмите кнопку меню V в правом верхнем углу.
  4. Прокрутите пункты меню и установите флажок Desktop site . Сайт автоматически перезагрузится в десктопном режиме.

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

Независимо от выбранного вами метода отключение режима рабочего стола — это один и тот же процесс. Это также быстро и легко. Для этого просто нажмите на кнопку меню V, прокрутите вниз и снимите Рабочий стол флажок.

Как включить и отключить представление рабочего стола в Opera Mobile

Также легко включить режим рабочего стола в браузере Opera. Как и Вивальди, вы можете сделать это двумя способами; либо через стартовую страницу, либо с любого веб-сайта.

Как включить представление рабочего стола для всех сайтов в Opera Mobile

Вот как включить представление рабочего стола для всех сайтов в Opera:

  1. Откройте Opera на мобильном устройстве.
  2. Нажмите на изображение профиля в правом нижнем углу экрана.
  3. Нажмите на значок шестеренки настроек .
  4. Прокрутите вниз до раздела Content и коснитесь Агент пользователя по умолчанию .
  5. Выберите Рабочий стол .

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

Как включить представление рабочего стола для определенных веб-сайтов в Opera Mobile

Чтобы включить представление рабочего стола для любого веб-сайта:

  1. Запустить Opera.
  2. Нажмите кнопку меню с тремя точками в правом верхнем углу.
  3. Прокрутите пункты меню вниз и коснитесь переключателя Desktop site .

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

Наслаждайтесь любым видом, в любом месте, в любое время

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

21 из лучших примеров дизайна веб-сайтов для мобильных устройств

Сейчас больше, чем когда-либо, компании сосредоточены на создании восхитительных мобильных веб-сайтов.

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

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

Чтобы вдохновить вас на любые изменения в дизайне мобильных веб-сайтов, вот список из 21 компании, которые действительно добились успеха в своем мобильном веб-дизайне.

Лучшие мобильные сайты

  1. Заслонка
  2. Карты Google
  3. Типовая форма
  4. Этси
  5. Адриан Зумбруннен
  6. Эльф на полке
  7. БаззФид
  8. Эверноут
  9. Pixelgrade
  10. Хаффингтон Пост
  11. Экспресс
  12. Общенациональное страхование
  13. Квадратная точка
  14. Заппос
  15. Азбука
  16. Бережливые лаборатории
  17. САП
  18. KISSmetrics
  19. Идиг Маркетинг
  20. ИндияMART
  21. Пипснеки

1. Shutterfly

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

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

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

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

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

2.

Карты Google

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

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

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

3. Typeform

Почему это работает: Typeform упрощает мобильный веб-сайт, сокращает время загрузки и упрощает работу пользователей.

Typeform — технологическая компания со штаб-квартирой в Барселоне, преследующая одну простую миссию: «сделать формы потрясающими». Их настольный веб-сайт красиво оформлен, приветствуя посетителей кратким текстом, соответствующей анимацией и другими сложными компонентами дизайна.

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

Обратите внимание на большие кнопки на их странице меню — идеально подходят для нажатия пальцем на экране мобильного телефона.

4. Etsy

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

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

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

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

5. Адриан Цумбруннен

Почему это работает: Адриан Цумбруннен использует уникальный подход к персональному веб-сайту, создавая интерфейс, полностью адаптированный для мобильных пользователей.

Это персональный сайт Адриана Зумбруннена, UX-дизайнера, писателя и спикера. Когда вы посетите его веб-сайт, вы сразу же заметите, что в нем есть что-то очень уникальное: это разговорный веб-сайт.

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

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

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

6. «Эльф на полке»

Почему это работает: Мобильный сайт «Эльф на полке» делает широкий выбор продуктов видимым с самого начала и использует эмоциональные, очень наглядные презентации продуктов, чтобы привлечь посетителей.

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

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

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

Вы не покупаете собственного эльфа или щенка, вы усыновляете его. Это действительно впечатляющий опыт на таком маленьком экране.

7. BuzzFeed

Почему это работает: BuzzFeed обслуживает своих мобильных пользователей с помощью веб-сайта, который направляет их к интересующим их темам.

BuzzFeed известен своим вирусным контентом и популярными викторинами. Кроме того, это один из моих любимых способов развлечься по дороге на работу и с работы.

А где, по-вашему, я проверяю BuzzFeed по дороге на работу? Вы уже догадались: мой телефон. BuzzFeed знает, что многие посетители заходят на их сайт с мобильных устройств, поэтому они приложили все усилия, чтобы создать удобную среду для своих мобильных читателей.

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

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

8. Evernote

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

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

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

Когда вы посмотрите на мобильный веб-сайт Evernote, вы увидите, что они полностью сохранили свою цветовую палитру и общий стиль бренда. Мобильный веб-сайт компании чистый, простой и ничуть не умаляет ценности приложения. Путь конверсии Evernote очевиден из призыва к действию по центру: «Зарегистрируйтесь бесплатно».

9. Pixelgrade

Почему это работает: Темы Pixelgrade для WordPress удобны для мобильных устройств, минималистичны и элегантны. В частности, тема Pile идеально подходит для веб-сайтов портфолио WordPress.

Тема Pixelgrade Pile позволяет правильно продемонстрировать свои услуги и предыдущую работу и не жертвует мобильным дизайном. Тема оптимизирована для мобильных устройств, одновременно передавая предполагаемое сообщение и эстетику вашего контента.

10. Huffington Post

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

The Huffington Post — новостной портал, который сообщает обо всем, от политики и текущих событий до развлечений и технологий. Что делает их мобильный веб-сайт уникальным, так это то, что они немного меняют заголовки для мобильных пользователей, чтобы их контент было легче сканировать.

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

В левом верхнем углу экрана также есть интерактивное меню со списком всех категорий сообщений.

11. Express

Почему это работает: Express искусно использует изображения для создания более реалистичного впечатления от просмотра товаров — пользователи просто проводят пальцем, чтобы просмотреть товары под разными углами, прежде чем совершить покупку.

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

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

Посмотрите на изображение в правом верхнем углу на следующих двух изображениях, чтобы увидеть, как оно меняется, когда вы проводите пальцем в одну сторону:

12. Общенациональное страхование

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

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

Когда вы перейдете на мобильный сайт Nationwide, вверху вы увидите две вкладки, позволяющие сразу идентифицировать один из двух типов пользователей, чтобы настроить свой опыт: Личный или Деловой. Или, в качестве альтернативы, вы можете «Найти агента» или «Найти финансового консультанта», чтобы узнать больше об их услугах.

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

13. Squaredot

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

Squaredot — это агентство из Дублина, Ирландия, которое помогает маркетологам разрабатывать стратегии входящего маркетинга. Их мобильный веб-сайт красочный, простой и упрощает навигацию.

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

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

14. Zappos

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

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

Вот как выглядит верхняя часть их мобильного сайта:

15. ABC

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

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

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

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

16. Лаборатории бережливого производства

Почему это работает: Лаборатории бережливого производства используют всплывающую анимацию и отдельные разделы контента, чтобы рассказать историю, когда пользователи прокручивают страницу вниз.

Lean Labs — маркетинговое агентство, которое создает привлекательные, отзывчивые веб-решения с высокой конверсией. (Они также были показаны в популярном телесериале Shark Tank .) Ребята проделали большую работу по обеспечению плавного взаимодействия с мобильными пользователями, особенно в отношении их методов проектирования.

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

17. SAP

Почему это работает: Несмотря на множество предложений, SAP доминирует на своем мобильном веб-сайте и упрощает CTA и меню.

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

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

18. KISSmetrics

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

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

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

Они также сделали текст и поля в своих формах большими и легко читаемыми:

19. idig Marketing

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

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

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

20. IndiaMART

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

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

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

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

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

21. Pipsnacks

Почему это работает: Наконец, мобильный веб-сайт Pipsnacks не жертвует визуальными эффектами ради маленьких экранов. Даже на своем смартфоне вы погружаетесь в беззаботный брендинг компании по производству закусок.

Чтобы завершить наш список, Pipsnacks переносит яркие цвета и текстуры своего настольного сайта на экран мобильного телефона.

This entry was posted in Популярное