Как создать версии для Рабочего стола и Мобильную версию веб-сайта

Лучшая практика > Этап 2 - Шаблон > Как создать дружественный для мобильных устройств веб-сайт >

Как создать версии для Рабочего стола и Мобильную версию веб-сайта

Previous pageReturn to chapter overviewNext page
Verborgen tekst tonen/verbergen

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

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

Кликните, чтобы развернуть/уменьшитьКак: Как настроить переадресацию в зависимости от разрешения устройства

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

Прежде всего, следует создать Сайт, соответствующий версии Рабочий стол, определив ее структуру и содержание.
Перейдя к К Этапу 1 - Настройка сайта | Расширенные Нажмите кнопку Страница приветствия и, в соответствующем окне активируйте опцию Показывать страницу приветствия и выберите опцию Автоматически определить разрешение.
С помощью имеющихся команд составьтеПеречень точек останова. Нажмите кнопку Добавить... чтобы добавить, помимо точек, установленных по умолчанию, новую точку останова и введите ее значение 480px.

Таким образом, мы получим 3 точки останова, конфигурирующих 3 разных интервала: первый интервал включает в себя все разрешения выше разрешения текущего выбранного Шаблона; второй интервал включает разрешения между заданной вручную точкой останова и точкой останова текущего выбранного Шаблона; и, наконец, третий интервал включает все разрешения ниже точки останова, установленной вручную.

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

В Перечень точек останова выберите "Отображение 1", соответствующее второму интервалу и нажмите кнопку Редактировать..., чтобы вызвать окно Настройка параметров точки останова.
В поле URL для этой точки останова укажите URL-адрес Сайта, подготовленного для отображения на Планшете: например, http//www.mywebsite.ru/планшет/, если вы хотите опубликовать его в подпапку "планшет" главной папки на Сервере.
Повторите те же действия также и для отображения "Смартфон", соответствующего третьему интервалу, соединив его с соответствующим URL-адресом: например, http//www.mywebsite.ru/смартфон/, если хотите опубликовать версию Сайта Смартфон в подпапке "смартфон" главной папки на Сервере.

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

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

Для публикации на Сервере готовых Сайтов следуйте следующей процедуре:

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

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

Публикация версии Сайта Планшет: чтобы происходила переадресация на Странице Страница приветствия к версии Сайта Планшет, необходимо опубликовать Проект в созданной подпапке "планшет".
Публикация версии Сайта Смартфон: аналогично, чтобы происходила переадресация на Страница приветствия к версии Сайта Смартфон, необходимо опубликовать Проект в созданной подпапке "смартфон".
Кликните, чтобы развернуть/уменьшитьКак: Как настроить в коде Страниц примечания касательно URL-адресов Рабочего стола и Мобильной версии.

Google однозначно допускает конфигурацию с отдельными URL-адресами для версий Рабочий стол и Мобильной версии того же Сайта, но рекомендует использовать некоторые примечания для того, чтобы его алгоритмы могли их правильно интерпретировать. В частности, по требованию Google:

На Странице для Рабочего стола необходимо добавить тег-ссылку rel="alternate", которая направит к URL-адресу для соответствующих мобильных устройств.
На Странице для Мобильной версии необходимо добавить тег-ссылку rel="canonical", которая направит к URL-адресу для соответствующего Рабочего стола.

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

Для установки этих примечаний следует:

поддерживать отношение 1:1 между Страницами для Рабочего стола и соответствующими Страницами для Мобильной версии. В частности, следует избегать вставки примечаний на многих Страницах Рабочего стола, которые относятся к той же Странице Мобильной версии (и наоборот).
устанавливать переадресацию только между действительно связанными Страницами.

Работая с WebSite X5, самый простой способ — это создание Сайта для Мобильной версии в виде точной копии Сайта для версии Рабочий стол: таким образом, оба Сайта будут иметь одинаковые Страницы (файл с таким же именем) и будет легко установить соответствие между ними в отношении 1:1.

Рассматривая предыдущий пример и представив, что нам нужно вставить примечания, требуемые Google для управления версиями Рабочий стол, Планшет и Смартфон веб-сайта, следует:

Открыть проект Сайта для версии Рабочий стол, и, перейдя к Этапу 1 - Настройка сайта | Расширенные, открыть окно Статистика и код и открыть раздел Kод.
В поле Пользовательский код выбрать опцию Перед закрывающим тегом HEAD и вписать следующие примечания:

<link rel="alternate" media="only screen and (max-width: 480px)" href="http//www.mywebsite.ru/smartphone/[CURPAGE]">

<link rel="alternate" media="only screen and (min-width: 481px) and (max-width: 1024px)" href="http//www.mywebsite.ru/tablet/[CURPAGE]">

После сохранения изменений можно приступить к работе над Сайтом для версии Планшет:

Откройте Проект Сайта для версии Планшет и, как для другого Проекта, перейдите к Этапу 1 - Настройка сайта | Расширенные, откройте окно Статистика и код и откройте раздел Kод.
В поле Пользовательский код выберите опцию Перед закрывающим тегом HEAD и впишите следующее примечание:

<link rel="canonical" href="http//www.mywebsite.ru/[CURPAGE]">

Повторите действия, выполненные для Сайта для Планшета, также для и для Сайта для Смартфона: примечание остается неизменным.

Для лучшего понимания описанного процесса, примите во внимание, что:

Устанавливая примечания через окно Статистика и код, они автоматически вставляются в код всех Страниц Сайтов.
В примечаниях, в качестве значения атрибута href должен быть вставлен URL-адрес Страницы, над которой вы работаете: используя скрипт [CURPAGE], имя файла, соответствующее Странице, идентифицируется и автоматически вставляется Программой.
В Страницах версии Сайта Рабочий стол следует использовать тег-ссылку rel="alternate" для того, чтобы представить все имеющиеся альтернативы : в конкретном случае она повторяется 2 раза для того, чтобы соединить как версию для Планшета, так и версию для Смартфона.
В примечании тег-ссылки rel="alternate" необходимо отметить также когда, вместо версии Рабочий стол, должна предлагаться версия Смартфон или версия Сайта Планшет. В коде приведенного примера скрипты мультимединого запроса определяют, что для разрешений ниже 480px, Google должен предложить URL-адрес версии Смартфон, в то время как для разрешения в диапазоне между 481px и 1024px - версию Сайта Планшета.

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

Открыть проект Сайта для версии Рабочий стол. Перейдя к Этапу 3 - Карта выберите Страницу, с которой вы хотите работать, и нажмите кнопку Свойства.
В окне Свойства страницы откройте раздел Эксперт и разместитесь в поле Пользовательский код.
Выберите опцию Перед закрывающим тегом HEAD и впишите следующие примечания:

<link rel="alternate" media="only screen and (max-width: 480px)" href="http//www.mywebsite.ru/smartphone/page-1.html">

<link rel="alternate" media="only screen and (min-width: 481px) and (max-width: 1024px)" href="http//www.mywebsite.ru/tablet/page-1.html">

Там, где http//www.mywebsite.ru/smartphone/page-1.html и http//www.mywebsite.ru/tablet/page-1.html URL-адреса Страниц Сайта, соответствующие Мобильной версии и версии Планшета, соответствующие версии Рабочий стол, над которой вы работаете.

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

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

<link rel="canonical" href="http//www.mywebsite.ru/desktop/page-1.html">

Там, где http//www.mywebsite.ru/desktop/page-1.html – это URL-адрес Страницы Сайта версии Рабочий стол, соответствующей странице Сайта версии Смартфон или версии Планшет, над которой вы работаете.

 


Лучшая практика:

-

Как создать "Mobile-friendly" веб-сайт