Веб-страницы, оптимизированные для использования на мобильных устройствах, отличаются от тех, которые отображаются на настольных компьютерах и ноутбуках. Последние предназначены для больших экранов и точного щелчка мышью, в то время как мобильные веб-страницы рассчитаны на меньшие экраны и неточное нажатие пальцем.
- Предназначен для небольших экранов и неточного нажатия пальцем.
- Разработано для больших экранов с точным щелчком мыши.
Учитывая, что большинство посещений веб-сайта происходит с мобильных устройств, перед разработчиками сайта стоит задача предоставить версии, которые работают как с мобильными устройствами, так и с настольными компьютерами. Наиболее распространенным подходом является использование адаптивного веб-дизайна, который автоматически предоставляет правильную версию в зависимости от устройства пользователя и размера экрана, определяемых браузером.
В любом случае, мобильные веб-страницы во многом отличаются от настольных версий.
Дизайн страницы: на мобильных экранах меньше места
- Дисплеи смартфонов и планшетов имеют диагональ от 4 до 10 дюймов.
-
Сворачиваемые или расширяемые виджеты меню обычно заменяют боковые панели и громоздкие меню заголовка.
- Полноразмерная графика с рациональным использованием пробелов между текстом.
- Большинство настольных мониторов имеют диагональ от 19 до 24 дюймов.
- Рекламные ссылки и большие рекламные баннеры более распространены.
- Более плотный текст с большей свободой для графики.
Самое очевидное различие между веб-страницами для настольных компьютеров и мобильных устройств заключается в занимаемой площади экрана. В то время как большинство настольных мониторов имеют диагональ от 19 до 24 дюймов, планшеты обычно имеют диагональ около 10 дюймов. Смартфоны имеют диагональ около 4 дюймов. Простое уменьшение масштаба не приводит к успешному преобразованию веб-страницы в мобильную версию, поскольку текст становится нечитаемым и требует дополнительных действий от посетителя сайта. Кроме того, точное нажатие на крошечные элементы становится невозможным.
Чтобы решить эту проблему, дизайнеры могут удалить боковые панели и графику, которые не являются строго необходимыми. Вместо этого они используют меньшую графику, увеличивают размер шрифта и сворачивают содержимое в расширяемые виджеты. Это ограничение недвижимости привело веб-дизайнеров к совершенно иному мышлению.
Кроме того, сворачиваемые или расширяемые виджеты меню обычно заменяют боковые панели и громоздкие заголовки меню. Стремясь сделать каждый миллиметр экранного пространства на счету, дизайнеры удаляют лишнее пустое пространство, внимательно следя за читабельностью.
Множество рекламных ссылок и больших рекламных баннеров просто не работают на телефоне или маленьком планшете. Вместо этого на мобильных веб-страницах чаще встречаются небольшие всплывающие окна.
Макеты, в которых текст оборачивает графику, плохо воспроизводятся на мобильных устройствах. Вместо этого дизайнеры часто отводят этой графике всю ширину экрана, а текст размещают под ней или над ней. Точно так же хороший веб-дизайн разбивает текст на куски для удобства чтения; никто не хочет читать сплошные стены текста. Это становится еще более важным на маленьких экранах. Разумное использование пустого пространства имеет решающее значение.
Элементы управления страницами: настольные компьютеры Precision и мобильные BLOB-объекты
-
Большие сенсорные области или горячие точки для более точной навигации.
- Другой URL: добавляет букву «м». Часто это вариант просмотра настольной версии сайта.
- Учетные данные для входа в систему часто имеют выделенное место, иногда с доступом по отпечатку пальца.
- Более точные ссылки и кнопки на основе курсора.
В отличие от точного указателя мыши на вашем рабочем столе, человеческий палец представляет собой каплю, и нажатие требует больших целей на экране для гиперссылок. Мобильные сайты предлагают большие области касания (или точки доступа) для облегчения точной навигации.
Веб-страницы, адаптированные для мобильных устройств, также обычно содержат букву m в своих адресах; например, мобильный адрес Facebook - m.facebook.com. Мобильный URL-адрес обычно выбирается автоматически при просмотре веб-страниц с помощью мобильного планшета или смартфона. В некоторых случаях вы увидите нажимаемую ссылку, которая позволяет переключиться на обычную версию страницы для ПК.
Поля логина и пароля, предназначенные для настольных компьютеров и ноутбуков, становятся крошечными и непригодными для использования на телефоне, поэтому веб-издатели делают их больше, иногда предоставляя им собственные страницы для простоты использования. Вход в систему с помощью отпечатка пальца или другой учетной записи, такой как Google или Facebook, становится все более распространенным явлением по мере развития возможностей устройств и сервисов.
Почему это важно?
Мобильные веб-страницы предназначены для портативных устройств и сильно отличаются от страниц, предназначенных для чтения на компьютере. Хотя вы обычно можете просматривать настольную версию веб-страницы на мобильном устройстве и наоборот, они разработаны по-разному, чтобы упростить просмотр, чтение и навигацию по содержимому.
