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

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

Уменьшите количество плагинов и изображений

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

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

Сделайте текст сайта легко читаемым

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

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

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

Отрегулируйте размер кнопок

Размеры кнопок, как и размеры шрифта, очень важны для мобильных устройств. Почему? Из-за небольших размеров кнопок на веб-сайте пользователи могут просто не увидеть их, а при нажатии промахнуться мимо. Рекомендуется создавать кнопки, ориентируясь на размер 44px X 44px или выше. Пространство вокруг них лучше всего оставить свободным для более легкой идентификации.

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

Используйте YouTube видео

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

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

Используйте адаптивный дизайн

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

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

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

Тестируйте созданные макеты сайтов

• Проводите тесты с мобильными устройствами разных операционных систем (Android, Windows и IOS).

• Проводите тесты на устройствах с разным размером экрана.

• Протестируйте не только главную страницу, но и все остальные, а также работу всех кнопок и ссылок.