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

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

Основные критерии удобства мобильных пользователей

Область экрана

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

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

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

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

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

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

Размер элементов
Попасть пальцем в маленькие или тесно сгруппированные ссылки (кнопки) гораздо сложнее, чем указателем мыши. Чтобы пользователь мог без затруднений выбрать нужный активный элемент, они должны быть достаточно крупными, а располагать их следует на удалении друг от друга. Это сведет к минимум количество ложных нажатий. Средняя ширина подушечки пальца взрослого человека составляет 10 миллиметров, поэтому в рекомендациях по интерфейсу приложений Android рекомендуется задавать размер активных элементов не менее 7 мм, или 48 пикселей CSS на сайте с правильно настроенной областью просмотра для мобильных устройств.

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

Используйте удобочитаемые размеры шрифтов, чтобы сделать свой сайт удобнее.

Плагины

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

Всплывающие окна

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

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

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

  bigmir)net TOP 100  - .  E-mail: sitesnulyaru@gmail.com