Как создать мобильную версию сайта в Parallels Web Presence Builder

10 Июл 2017 - Жукова Татьяна Нет комментариев
Просмотров: 2320

Создать мобильную версию сайта в Parallels Web Presence Builder очень просто. Настолько просто, что этот вопрос, наверное, и не заслуживает отдельной статьи. Если бы не одно «НО»… Эту фишку я обнаружила только после нескольких лет пользования этим конструктором.

Итак, создать мобильную версию сайта в Parallels Web Presence Builder можно одним щелчком мыши: достаточно перейти в конструкторе на вкладку редактора Настройки и поставить галочку напротив пункта Оптимизировать сайт для мобильных устройств. Web Presence Builder автоматически подстроит ваш сайт, его структуру, элементы навигацию для отображения на экранах мобильных телефонов.

Создать мобильную версию сайта в Parallels Web Presence Build

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

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

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

Создать мобильную версию сайта в Parallels Web Presence Build

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

Создать мобильную версию сайта в Parallels Web Presence Build

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

Создать мобильную версию сайта в Parallels Web Presence Build

Также есть возможность переключить портретную или альбомную ориентацию выбранного мобильного устройства при помощи кнопки Повернуть.

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

Как оптимизировать структуру и содержимое под мобильную версию сайта

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

  • модули Поиск и Меню располагать в верхней части страницы либо в верхнем колонтитуле;
  • в качестве баннера использовать изображения, насколько это возможно, небольшого размера;
  • контент сайта размещать сразу под шапкой или максимально близко к ней;
  • отказаться от использования сайдбаров, потому что левая панель в мобильной версии будет отображаться впереди контента. Если вас это не смущает, то пусть будут;
  • стараться не использовать широкий изображения и таблицы;
  • также нежелательно использовать в качестве фона изображения, т.к. они будут сильно тормозить загрузку основного содержимого. С этой же целью необходимо отказаться от фиксированной ширины контента и сайдбаров, использования визуальных эффектов (границ, углов, теней);
  • по возможности создавать контент сайта помощью модуля Текст и графика;
  • добавлять изображения максимально сжатого размера;
  • использовать шрифт не менее 12 pt, а лучше 14 иначе тот же Яндекс.Вебмастер скажет, что «На странице слишком много мелкого текста», а это минус вашему сайту в глазах поисковых систем. Да и обычным пользователям, ради которых вы и делаете сайт, гораздо удобнее читать текст, написанный нормальным шрифтом.
Читайте также:  Как начать работать в конструкторе Parallels Web Presence Builder

Ну, вот, собственно, и все, что я хотела написать про мобильную версию сайта в Parallels Web Presence Builder. Всем привет и до новых встреч!


Посмотрите другие статьи из этой рубрики:




Хотите быть в курсе новостей блога?

Подпишитесь на бесплатную рассылку новых статей
Ваш e-mail:

Есть что сказать? Оставьте комментарий!