Адаптация лендинга GetCourse под мобильные устройства

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

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

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

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

Доступны следующие границы разрешения экрана:

• менее 320px
• 320px (iPhone X/XS/6/7/8/SE)
• 410px (iPhone XR/XS Max/6, 7, 8 Plus)
• 760px (iPad)
• 1020px (iPad Pro, обычный iPad в горизонтальном положении)
• 1200px (ноутбуки)
• 1600px (большие мониторы)
• более 1600px

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

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

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

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

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

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

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

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