1070601

Идет набор на XIV поток Курса по процессам. Старт 11 октября. Подробности по ссылке.

Статья была полезной?

Заголовок

Блог GetCourse

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

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

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

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

Ссылка на это место страницы: #visibility

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


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

Возможные границы:

  • меньше 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
<p> <br>Укажем в настройках, что блок доступен только с устройств, где разрешение до 760px, например, iPhone. Если пользователь зайдет на страницу с использованием устройства, где разрешение экрана больше указанного, например, ноутбука или персонального компьютера, блок ему отображен не будет. <br><br></p>


Укажем в настройках, что блок доступен только с устройств, где разрешение до 760px, например, iPhone. Если пользователь зайдет на страницу с использованием устройства, где разрешение экрана больше указанного, например, ноутбука или персонального компьютера, блок ему отображен не будет.

Адаптируем тексты

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

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


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


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

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

Используйте цепляющие заголовки и фразы.

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

Оптимизируем изображения

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


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

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


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

Дополнительные рекомендации к оформлению контента на сайтах можно прочитать по ссылке.



Для того чтобы оставить комментарий —
авторизуйтесь
{"signature":"42688e7951d0a223afe74ebc4b88f1ce","accountUserId":-1,"values":{"object_type_id":10,"object_id":521335224,"max_level":2,"level":1,"page_size":50,"disable_comments":false,"disable_new_comment":false,"edit_mode":false,"group":null,"params":[],"comment_class":"","comment_class_callback":null,"data":[],"level_directions":{"1":"desc","2":"asc"},"level_show_send_button_always":{"1":true},"editable_comments":false,"show_online_user_count":true,"collapsible":false,"object_attributes":[],"level_form_submit_on_enter":{"1":false,"2":true},"own_user_id":null,"invert_own_user":false,"enable_subscribe":false,"disable_links":false,"window_style":null,"template_owners":[],"use_file_types":false}}
удалить
Добрый день! Подскажите пожалуйста как увеличить скорость воспроизведения видео? Смотрю через айфон.
Не нахожу у себя ни точек, ни шестерёнки, ничего.
или отменить редактирование
Пн 09 Янв 02:41 • Ответить
{"signature":"08b35a116a7f00b8320b14b2967a5315","accountUserId":-1,"values":{"object_type_id":10,"object_id":521340974,"max_level":2,"level":2,"page_size":50,"disable_comments":false,"disable_new_comment":false,"edit_mode":false,"group":null,"params":[],"comment_class":"","comment_class_callback":null,"data":[],"level_directions":{"1":"desc","2":"asc"},"level_show_send_button_always":{"1":true},"editable_comments":false,"show_online_user_count":true,"collapsible":false,"object_attributes":[],"level_form_submit_on_enter":{"1":false,"2":true},"own_user_id":null,"invert_own_user":false,"enable_subscribe":false,"disable_links":false,"window_style":null,"template_owners":[],"use_file_types":false}}
удалить
Здравствуйте!
Ответили в рамках технической поддержки.
или отменить редактирование
Пн 09 Янв 03:21
{"signature":"e9d58cde3a0dbd58aa86f42e52becade","accountUserId":-1,"values":{"object_type_id":10,"object_id":389293426,"max_level":2,"level":1,"page_size":50,"disable_comments":false,"disable_new_comment":false,"edit_mode":false,"group":null,"params":[],"comment_class":"","comment_class_callback":null,"data":[],"level_directions":{"1":"desc","2":"asc"},"level_show_send_button_always":{"1":true},"editable_comments":false,"show_online_user_count":true,"collapsible":false,"object_attributes":[],"level_form_submit_on_enter":{"1":false,"2":true},"own_user_id":null,"invert_own_user":false,"enable_subscribe":false,"disable_links":false,"window_style":null,"template_owners":[],"use_file_types":false}}
удалить
Здравствуйте, как сделать, чтобы в мобильной версии, при нажатии на меню и после его просмотра оно автоматически сворачивалось, а не висело раскрытое? Спасибо.
или отменить редактирование
Вт 29 Мар 2022 • Ответить
{"signature":"b4f285ecf914354eb54f060b5cf2532f","accountUserId":-1,"values":{"object_type_id":10,"object_id":389515911,"max_level":2,"level":2,"page_size":50,"disable_comments":false,"disable_new_comment":false,"edit_mode":false,"group":null,"params":[],"comment_class":"","comment_class_callback":null,"data":[],"level_directions":{"1":"desc","2":"asc"},"level_show_send_button_always":{"1":true},"editable_comments":false,"show_online_user_count":true,"collapsible":false,"object_attributes":[],"level_form_submit_on_enter":{"1":false,"2":true},"own_user_id":null,"invert_own_user":false,"enable_subscribe":false,"disable_links":false,"window_style":null,"template_owners":[],"use_file_types":false}}
удалить
Катерина, здравствуйте!
Напишите, пожалуйста, в техподдержку https://getcourse.ru/contacts со ссылкой на пример страницы и поясняющим скриншотом.
или отменить редактирование
Вт 29 Мар 2022
{"signature":"4544a985772d58a737d407bb006d7dbf","accountUserId":-1,"values":{"object_type_id":10,"object_id":383846439,"max_level":2,"level":1,"page_size":50,"disable_comments":false,"disable_new_comment":false,"edit_mode":false,"group":null,"params":[],"comment_class":"","comment_class_callback":null,"data":[],"level_directions":{"1":"desc","2":"asc"},"level_show_send_button_always":{"1":true},"editable_comments":false,"show_online_user_count":true,"collapsible":false,"object_attributes":[],"level_form_submit_on_enter":{"1":false,"2":true},"own_user_id":null,"invert_own_user":false,"enable_subscribe":false,"disable_links":false,"window_style":null,"template_owners":[],"use_file_types":false}}
удалить
Ещё хотела попробовать, как работает сервис АДАПТИВАТОР, и получила такой результат (см. файл). Не подскажете, из-за чего это может быть?... Не помню, чтобы я что-то такое устанавливала?... (хотела проверить сайт, сделанный на Тильде; на ГетКурсе ещё проверять нечего, только начала изучать)
или отменить редактирование
Пт 18 Мар 2022 • Ответить
{"signature":"227266d5a0812698f1f7061992b424c4","accountUserId":-1,"values":{"object_type_id":10,"object_id":384829289,"max_level":2,"level":2,"page_size":50,"disable_comments":false,"disable_new_comment":false,"edit_mode":false,"group":null,"params":[],"comment_class":"","comment_class_callback":null,"data":[],"level_directions":{"1":"desc","2":"asc"},"level_show_send_button_always":{"1":true},"editable_comments":false,"show_online_user_count":true,"collapsible":false,"object_attributes":[],"level_form_submit_on_enter":{"1":false,"2":true},"own_user_id":null,"invert_own_user":false,"enable_subscribe":false,"disable_links":false,"window_style":null,"template_owners":[],"use_file_types":false}}
удалить
Виктория, здравствуйте. Ответили вам в рамках технической поддержки.
или отменить редактирование
Вс 20 Мар 2022
{"signature":"0836646bdfa12e139e2087a391da9514","accountUserId":-1,"values":{"object_type_id":10,"object_id":383843118,"max_level":2,"level":1,"page_size":50,"disable_comments":false,"disable_new_comment":false,"edit_mode":false,"group":null,"params":[],"comment_class":"","comment_class_callback":null,"data":[],"level_directions":{"1":"desc","2":"asc"},"level_show_send_button_always":{"1":true},"editable_comments":false,"show_online_user_count":true,"collapsible":false,"object_attributes":[],"level_form_submit_on_enter":{"1":false,"2":true},"own_user_id":null,"invert_own_user":false,"enable_subscribe":false,"disable_links":false,"window_style":null,"template_owners":[],"use_file_types":false}}
удалить
Здравствуйте!
Подскажите, пжлста, что значит "использовать режим разработчика вашего браузера"? Это как?
Спасибо.
или отменить редактирование
Пт 18 Мар 2022 • Ответить
{"signature":"cace871915dc67c9e09f605b87373573","accountUserId":-1,"values":{"object_type_id":10,"object_id":384836685,"max_level":2,"level":2,"page_size":50,"disable_comments":false,"disable_new_comment":false,"edit_mode":false,"group":null,"params":[],"comment_class":"","comment_class_callback":null,"data":[],"level_directions":{"1":"desc","2":"asc"},"level_show_send_button_always":{"1":true},"editable_comments":false,"show_online_user_count":true,"collapsible":false,"object_attributes":[],"level_form_submit_on_enter":{"1":false,"2":true},"own_user_id":null,"invert_own_user":false,"enable_subscribe":false,"disable_links":false,"window_style":null,"template_owners":[],"use_file_types":false}}
удалить
Виктория, инструменты разработчика позволяют много действий, в том числе просматривать вид страницы на экранах разной ширины. В большинстве браузеров, работающих под Windows, инструменты разработчика можно открыть, нажав F12. Изменять ширину страницы можно нажав на кнопку: http://joxi.ru/nAyWj1QC9QBeYm
или отменить редактирование
Вс 20 Мар 2022
{"signature":"28b25c9e1f97855987f19223025feb4d","accountUserId":-1,"values":{"object_type_id":10,"object_id":300687644,"max_level":2,"level":1,"page_size":50,"disable_comments":false,"disable_new_comment":false,"edit_mode":false,"group":null,"params":[],"comment_class":"","comment_class_callback":null,"data":[],"level_directions":{"1":"desc","2":"asc"},"level_show_send_button_always":{"1":true},"editable_comments":false,"show_online_user_count":true,"collapsible":false,"object_attributes":[],"level_form_submit_on_enter":{"1":false,"2":true},"own_user_id":null,"invert_own_user":false,"enable_subscribe":false,"disable_links":false,"window_style":null,"template_owners":[],"use_file_types":false}}
удалить
Здравствуйте! Подскажите, пожалуйста, что могла нажать ученица, что у нее закрылся доступ к просмотру сайта на других устройствах. К сожалению у меня нет ссылки скрина, только фото. Там есть такая фраза: "Владелец ресурса (ссылка) выставил ограничения на возможность удаленного просмотра своего сайта:(". Помогите, пожалуйста, советом!
или отменить редактирование
Пт 08 Окт 2021 • Ответить
{"signature":"a20853fb5881721a9b66a033137d3799","accountUserId":-1,"values":{"object_type_id":10,"object_id":300953480,"max_level":2,"level":2,"page_size":50,"disable_comments":false,"disable_new_comment":false,"edit_mode":false,"group":null,"params":[],"comment_class":"","comment_class_callback":null,"data":[],"level_directions":{"1":"desc","2":"asc"},"level_show_send_button_always":{"1":true},"editable_comments":false,"show_online_user_count":true,"collapsible":false,"object_attributes":[],"level_form_submit_on_enter":{"1":false,"2":true},"own_user_id":null,"invert_own_user":false,"enable_subscribe":false,"disable_links":false,"window_style":null,"template_owners":[],"use_file_types":false}}
удалить
Здравствуйте. Напишите, пожалуйста, к нам в техническую поддержку по контактам https://getcourse.ru/contacts, прислав данную фотографию. Также в своем обращении пришлите, пожалуйста, ссылку на данного пользователя и ссылку на страницу, к которой пользователь потерял доступ. Ссылку на страницу вы можете узнать у самого пользователя, попросив её скопировать из адресной строки браузера, находясь на этой странице.
или отменить редактирование
Пт 08 Окт 2021
{"signature":"3cf5f6aafafe579f233c89ad7fd410b8","accountUserId":-1,"values":{"object_type_id":10,"object_id":76466875,"max_level":2,"level":1,"page_size":50,"disable_comments":false,"disable_new_comment":false,"edit_mode":false,"group":null,"params":[],"comment_class":"","comment_class_callback":null,"data":[],"level_directions":{"1":"desc","2":"asc"},"level_show_send_button_always":{"1":true},"editable_comments":false,"show_online_user_count":true,"collapsible":false,"object_attributes":[],"level_form_submit_on_enter":{"1":false,"2":true},"own_user_id":null,"invert_own_user":false,"enable_subscribe":false,"disable_links":false,"window_style":null,"template_owners":[],"use_file_types":false}}
GetCourse Club. I ступень. удалить
Сервис quirktools, который вы рекомендуете, не работает.
или отменить редактирование
Сб 28 Дек 2019 • Ответить
{"signature":"51c8297e8de09043137c2553efe97b23","accountUserId":-1,"values":{"object_type_id":10,"object_id":76520387,"max_level":2,"level":2,"page_size":50,"disable_comments":false,"disable_new_comment":false,"edit_mode":false,"group":null,"params":[],"comment_class":"","comment_class_callback":null,"data":[],"level_directions":{"1":"desc","2":"asc"},"level_show_send_button_always":{"1":true},"editable_comments":false,"show_online_user_count":true,"collapsible":false,"object_attributes":[],"level_form_submit_on_enter":{"1":false,"2":true},"own_user_id":null,"invert_own_user":false,"enable_subscribe":false,"disable_links":false,"window_style":null,"template_owners":[],"use_file_types":false}}
удалить
Здравствуйте, Александр.
Спасибо за информацию. Вы можете использовать другие сервисы или режим разработчика браузера.
или отменить редактирование
Сб 28 Дек 2019
{"signature":"0b18395f952a0963bef1ac0f1e898b35","accountUserId":-1,"values":{"object_type_id":10,"object_id":74711107,"max_level":2,"level":1,"page_size":50,"disable_comments":false,"disable_new_comment":false,"edit_mode":false,"group":null,"params":[],"comment_class":"","comment_class_callback":null,"data":[],"level_directions":{"1":"desc","2":"asc"},"level_show_send_button_always":{"1":true},"editable_comments":false,"show_online_user_count":true,"collapsible":false,"object_attributes":[],"level_form_submit_on_enter":{"1":false,"2":true},"own_user_id":null,"invert_own_user":false,"enable_subscribe":false,"disable_links":false,"window_style":null,"template_owners":[],"use_file_types":false}}
удалить
Здравствуйте, у меня не получается адаптировать фотографию обложки под мобильную версию, помогите пожалуйста настроить
или отменить редактирование
Пн 16 Дек 2019 • Ответить
{"signature":"0a6497d6d151e66cb9042bb59801061d","accountUserId":-1,"values":{"object_type_id":10,"object_id":74795908,"max_level":2,"level":2,"page_size":50,"disable_comments":false,"disable_new_comment":false,"edit_mode":false,"group":null,"params":[],"comment_class":"","comment_class_callback":null,"data":[],"level_directions":{"1":"desc","2":"asc"},"level_show_send_button_always":{"1":true},"editable_comments":false,"show_online_user_count":true,"collapsible":false,"object_attributes":[],"level_form_submit_on_enter":{"1":false,"2":true},"own_user_id":null,"invert_own_user":false,"enable_subscribe":false,"disable_links":false,"window_style":null,"template_owners":[],"use_file_types":false}}
удалить
Здравствуйте, Азалия.
Напишите, пожалуйста, нам в техподдержку https://getcourse.ru/contacts и приложите ссылку на страницу, на которой не получается адаптировать обложку.
или отменить редактирование
Вт 17 Дек 2019
{"signature":"33d1216900b9c438ff8060bb63b5151a","accountUserId":-1,"values":{"object_type_id":10,"object_id":64433003,"max_level":2,"level":1,"page_size":50,"disable_comments":false,"disable_new_comment":false,"edit_mode":false,"group":null,"params":[],"comment_class":"","comment_class_callback":null,"data":[],"level_directions":{"1":"desc","2":"asc"},"level_show_send_button_always":{"1":true},"editable_comments":false,"show_online_user_count":true,"collapsible":false,"object_attributes":[],"level_form_submit_on_enter":{"1":false,"2":true},"own_user_id":null,"invert_own_user":false,"enable_subscribe":false,"disable_links":false,"window_style":null,"template_owners":[],"use_file_types":false}}
удалить
Добрый день! Два дня мучаюсь, не могу сделать мобильную версию. Не понимаю, сделала уже все, как здесь написано, ролики смотрела. В странице подписной первый слайд не меняется ни при каких условиях, либо удаляется вообще при публикации, при этом остальные слайды - в мобильной версии, все ок. А на странице благодарности, где первый и единственный слайд - такой же, как и в подписной - с ним все в порядке. Ну как так?(( Спасите-помогите!
или отменить редактирование
Вс 13 Окт 2019 • Ответить
{"signature":"3b9be0f26de3909bb7d66cdcfdecf7cc","accountUserId":-1,"values":{"object_type_id":10,"object_id":64496934,"max_level":2,"level":2,"page_size":50,"disable_comments":false,"disable_new_comment":false,"edit_mode":false,"group":null,"params":[],"comment_class":"","comment_class_callback":null,"data":[],"level_directions":{"1":"desc","2":"asc"},"level_show_send_button_always":{"1":true},"editable_comments":false,"show_online_user_count":true,"collapsible":false,"object_attributes":[],"level_form_submit_on_enter":{"1":false,"2":true},"own_user_id":null,"invert_own_user":false,"enable_subscribe":false,"disable_links":false,"window_style":null,"template_owners":[],"use_file_types":false}}
удалить
Здравствуйте, Дина! Обратитесь, пожалуйста, в нашу техподдержку https://getcourse.ru/contacts с данным вопросом. В сообщении укажите ссылки на описанные объекты и поясняющие скриншоты для анализа ситуации и точного ответа.
или отменить редактирование
Пн 14 Окт 2019
{"signature":"6283ce0d19327446f787fcebc6a6fa46","accountUserId":-1,"values":{"object_type_id":10,"object_id":56581624,"max_level":2,"level":1,"page_size":50,"disable_comments":false,"disable_new_comment":false,"edit_mode":false,"group":null,"params":[],"comment_class":"","comment_class_callback":null,"data":[],"level_directions":{"1":"desc","2":"asc"},"level_show_send_button_always":{"1":true},"editable_comments":false,"show_online_user_count":true,"collapsible":false,"object_attributes":[],"level_form_submit_on_enter":{"1":false,"2":true},"own_user_id":null,"invert_own_user":false,"enable_subscribe":false,"disable_links":false,"window_style":null,"template_owners":[],"use_file_types":false}}
GetCourse Club. II ступень. Партнер удалить
Спасибо большое за инструкцию, сделал мобильную версию и выглядит теперь круто!
или отменить редактирование
Сб 10 Авг 2019 • Ответить
{"signature":"3db6d703957ac94ddbd67fb175f68bef","accountUserId":-1,"values":{"object_type_id":10,"object_id":56622396,"max_level":2,"level":2,"page_size":50,"disable_comments":false,"disable_new_comment":false,"edit_mode":false,"group":null,"params":[],"comment_class":"","comment_class_callback":null,"data":[],"level_directions":{"1":"desc","2":"asc"},"level_show_send_button_always":{"1":true},"editable_comments":false,"show_online_user_count":true,"collapsible":false,"object_attributes":[],"level_form_submit_on_enter":{"1":false,"2":true},"own_user_id":null,"invert_own_user":false,"enable_subscribe":false,"disable_links":false,"window_style":null,"template_owners":[],"use_file_types":false}}
удалить
Добрый день.
Спасибо за обратную связь.
или отменить редактирование
Сб 10 Авг 2019
{"signature":"bbdf34a5938639ef2f6fbb80ea9c820f","accountUserId":-1,"values":{"object_type_id":10,"object_id":49391435,"max_level":2,"level":1,"page_size":50,"disable_comments":false,"disable_new_comment":false,"edit_mode":false,"group":null,"params":[],"comment_class":"","comment_class_callback":null,"data":[],"level_directions":{"1":"desc","2":"asc"},"level_show_send_button_always":{"1":true},"editable_comments":false,"show_online_user_count":true,"collapsible":false,"object_attributes":[],"level_form_submit_on_enter":{"1":false,"2":true},"own_user_id":null,"invert_own_user":false,"enable_subscribe":false,"disable_links":false,"window_style":null,"template_owners":[],"use_file_types":false}}
удалить
Видеоурок с кнопкой Типограф абсолютно бестолковый, вот видео с подтверждением https://yadi.sk/i/hxT8iq9ZrYKlhw. Только бесконечная ручная правка!
или отменить редактирование
Вт 28 Май 2019 • Ответить
{"signature":"04d17e6f1fbb82494c97dd1914334300","accountUserId":-1,"values":{"object_type_id":10,"object_id":49504479,"max_level":2,"level":2,"page_size":50,"disable_comments":false,"disable_new_comment":false,"edit_mode":false,"group":null,"params":[],"comment_class":"","comment_class_callback":null,"data":[],"level_directions":{"1":"desc","2":"asc"},"level_show_send_button_always":{"1":true},"editable_comments":false,"show_online_user_count":true,"collapsible":false,"object_attributes":[],"level_form_submit_on_enter":{"1":false,"2":true},"own_user_id":null,"invert_own_user":false,"enable_subscribe":false,"disable_links":false,"window_style":null,"template_owners":[],"use_file_types":false}}
удалить
Евгений, здравствуйте!
Типограф не предназначен для того, чтобы убирать все неразрывные пробелы. Этот инструмент исправляет форматирование текста в целом: убирает только излишние пробелы, мешающие корректному отображению текста, а также может добавить их там, где необходимо (например, между длинным словом и коротким предлогом).
Если вы хотите убрать все неразрывные пробелы, то пользоваться Типографом не нужно, это делается только вручную. Убирать все неразрывные пробелы именно в тексте - нецелесообразно, корректному отображению страницы на мобильном они могут помешать, находясь в заголовках, поскольку в заголовках шрифт крупный.
или отменить редактирование
Ср 29 Май 2019

Связанные статьи