Глава 5: Файлы CSS и другие изменения для мобильных страниц

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

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

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

Теперь можно запустить сайт с мобильного устройства и посмотреть, что получилось.

Для более удобной и быстрой настройки CSS используйте инструменты разработчика, установленные в Яндекс.Браузере, в режиме работы с мобильными устройствами:

Зайдите на страницу с использованием мобильного поддомена и приступайте к работе.

Для мобильных страниц лучше всего создать свой, отдельный модуль меню (например, mobil-menu); это позволит выводить на экран только те пункты, которые нужны. К тому же, если в обычном меню (main-menu) имеется много вложенных подпунктов, их использование на экране смартфона окажется довольно неудобно, а в мобильном меню эту проблему можно решить другими способами. Например, вы можете создать не одно mobil-menu, а два или использовать бóльшее количество основных пунктов, т.е. перевести подпункты в основные.

Но есть ещё один простой и одновременно удобный для пользователей вариант. Смысл его в том, что к основному пункту мобильного меню "прикрепляются" не подпункты, а страница (материал), содержащая список с названиями этих подпунктов; при этом каждое название устанавливается как соответствующая ссылка. Такой вариант вы можете посмотреть, зайдя на этот сайт со смартфона и кликнув "Учебные материалы": вы попадёте на страницу, содержащую список частей этих материалов, которые в десктопной версии установлены как подпункты и открываются при наведении курсора.

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

Как этого добиться?

Для всех пунктов мобильного меню устанавливайте Тип пункта как Системные ссылки > Внешний URL, а в поле Ссылка скопируйте соответствующий адрес десктопной версии (без указания доменного имени!):

Если создаваемый пункт ведёт на страницу с "подпунктами" (о чём говорилось выше), укажите адрес этой страницы. Всё это необходимо для того, что бы избежать главной проблемы: дублей страниц, так как в любом случае страница будет открываться по единому адресу.

Файлы CSS

Как работать с таблицами CSS подробно рассказано в Части 1 главах 21-25, поэтому здесь только рассмотрим важные отличительные моменты, применимые для мобильных страниц.

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

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

text-align: justify;

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

text-align: left;

Приготовьтесь к тому, что некоторые значения, указанные в таблицах (px, pt и подобные) придётся заменить на значения в процентах: это нужно сделать из-за того, что экраны мобильных устройств имеют разные размеры и соотношения сторон. Так же для некоторых элементов придётся редактировать их расположение и даже код, что бы они правильно выстраивались на экране смартфонов. Здесь нужно будет использовать такие свойства, как display, margin, padding и т.д.

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

Полоса прокрутки для широких блоков

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

Для автоматической установки полос прокрутки используются свойство overflow-x со значением auto. В некоторых случаях вам придётся создать для текстового блока дополнительные теги <div> ... </div> и уже для них прописать данное свойство. Для примеров кода или формул можно использовать теги <blockquote> ... </blockquote>, так как этот элемент является блочным:

blockquote {
border: 2px solid rgb(140,140,140);
border-radius: 5px;
background-color: #f3f3f3;
padding: 10px 15px 10px 15px;
overflow-x: auto;
text-align: left;
white-space: nowrap;
}

Как видите, здесь указаны свойства для создания бордюров, изменён фон (лёгкое затемнение), указаны внутренние отступы. Далее следует подключение горизонтальной полосы прокрутки, которая будет при необходимости автоматически появляться благодаря значению auto. Так же обратите внимание на строку text-align: left, заставляющую всё содержимое выстраиваться относительно левого края, и строку white-space: nowrap, запрещающую делать автоматические переносы текста.

Как убрать элемент со страницы

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

display: none;

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

Теги <link>

Если вы используете мобильную версию ("m."), откройте файл index.php шаблона и пропишите в <head> ... </head> (лучше в самом начале) следующие строки:

для десктопного шаблона:

<link rel="alternate" media="only screen and (max-width: 640px)" href="https://m.web-development-school.ru<?php echo $_SERVER['REQUEST_URI']; ?>" />

для мобильного шаблона:

<link rel="canonical" href="https://web-development-school.ru<?php echo $_SERVER['REQUEST_URI']; ?>" />

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

Файл sitemap.xml

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

Эта проблема может быть решена различными путями.

Вариант 1.

Смысл в том, что на сайте устанавливаются два файла: sitemap.xml и sitemap-m.xml . Оба варианты являются полной копией друг друга за исключением одного важного момента: в адресах мобильных страниц присутствует символы "m.". Соответственно, вы должны прописать адреса этих файлов в Яндекс.Вебмастере и Google отдельно для каждого сайта.

Вариант 2.

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

<url> <loc>http://мой_сайт.com/page-1/</loc> <xhtml:link rel="alternate" media="only screen and (max-width: 640px)" href="http://m.мой_сайт.com/page-1" /> </url>

Всё это для удобства может быть записано в одной строке (как это обычно и делается в таких файлах); так же в строку могут быть добавлены стандартные теги <lastmod>, <changefreq> и т.д., но стоит помнить, что данные дополнительные теги Google игнорирует, а тег <xhtml:link ... /> игнорирует Яндекс. Однако Яндексу для обработки мобильных страниц вполне достаточно и одного файла sitemap.xml, содержащего адреса основного сайта.

Помните, что независимо от применяемых вариантов файлов sitemap.xml, использование тегов <link> обязательно (см. выше).

Часть 4. Как сделать мобильный сайт: адаптирование сайта