Быстрое создание простой мобильной версии сайта. Часть 2.
(Окончание. Начало см. здесь.)
Третий шаг по созданию мобильной версии сайта
Теперь нужно задать структуру страниц для просмотра сайта на мобильных устройствах.
Ширина мобильной версии сайта
Проблема создания дизайна для мобильной версии сайта состоит в том, что у мобильных устройств очень узкий экран. А Гугл и Яндекс требуют, чтобы при просмотре на мобильных устройствах отсутствовала горизонтальная прокрутка. Значит, версию сайта для мобильных устройств придется делать узкой по ширине.
Допустим, для обычного просмотра структура страниц сайта, например, следующая.
Тогда для мобильного просмотра эти же самые блоки должны располагаться вот так.
Или даже вот так, если блокам Lefter и Righter будет тесно находиться на одном уровне друг с другом.
Здесь блок Righter находится ниже блока Lefter, но в Вашем конкретном случае это может быть и наоборот.
Главное, это не нужно уменьшать ширину этих двух блоков, чтобы попытаться разместить их на одном уровне. На одном уровне их следует размещать, если при этом придется увеличивать их ширину, а не уменьшать. Дело в том, что дальше нам придётся увеличивать все шрифты и размеры многих навигационных элементов и поэтому, возможно, придётся увеличивать ширину блоков Lefter и Righter.
Отличие контента в мобильной версии сайта
Обратите внимание на ещё один важный момент. Очень сильно нежелательно выкидывать какие-нибудь блоки из мобильной версии сайта. А точнее, нежелательно выкидывать контент или часть контента со страниц мобильной версии сайта.
Допустим, в блоке Lefter у Вас находится очень важная система меню сайта, без которой сайту никак не обойтись. А, допустим, в блоке Righter находится какой-то не слишком важный контент. Например, в блоке Righter могут находиться какие-нибудь формы голосований, формы поиска по сайту, дополнительные ссылки на какие-нибудь интересные страницы сайта, ссылки на какие-нибудь другие сайты, реклама и т.д. То есть всё то, без чего Ваш сайт может спокойно обойтись. Часто появляется желание выкинуть всё это из мобильной версии сайта.
Ни в коем случае делать это не надо! Поисковые системы не всегда хорошо относятся к сайту, если одна и та же статическая страница имеет разный контент для разных пользователей. Это явление называется клоакинг и оно допустимо только тогда, когда оно уместно. Например, уместно прогноз погоды и местное время на сайте показывать разным для посетителей из разных городов. Посмотрите статью "Что такое клоакинг", чтобы оценить риски, связанные с показом разного контента на одной и той же странице сайта.
Ширина мобильной версии сайта должна быть такой, чтобы не возникало горизонтальных полос прокрутки. Достаточно сделать эту ширину равной 336 пикселов. С такой шириной мобильной версии сайта Гугл и Яндекс при тестировании мобильной версии никогда не ругались, что присутствует горизонтальная полоса прокрутки.
Если ширины блоков сайта и их расположение задается в файле каскадных стилей style.css, то копируем этот файл под именем, например, mob-style.css. И в этом файле исправляем ширины блоков и их расположение относительно друг друга.
Структура страниц в специальном файле
Если ширины блоков сайта и их расположение задается в Вашей системе управления контентом в специальном файле дизайна, то заходим в этот файл и вносим туда следующий код.
|
<? global $style="style"; if(isset($_SERVER['HTTP_USER_AGENT'])) { if(mb_ereg("Mobile", $_SERVER['HTTP_USER_AGENT'])) { $style="mob-style"; } } if($style=="style") { (Здесь описание старого дизайна, которое было.) } else { (Здесь описание дизайна, подправленного для мобильных устройств.) } ?> |
Индивидуальная структура страниц
Хуже всего, если Ваш сайт не использует никакой CMS, и поэтому дизайн задаётся на каждой странице. В этом случае Вам придется залезать на каждую страницу и вносить туда правки.
Допустим, у Вас страницы сайта имеет табличный дизайн, типа такого.
|
<html> <head> . . . <link rel="stylesheet" type="text/css" href="style.css"> . . . </head> <body> <table> <tr> <td> Header </td> </tr> <tr> <td> Lefter </td> <td> Center </td> <td> Righter </td> </tr> <tr> <td> Footer </td> </tr> </table> </body> </html> |
Нужно переделать эти страницы в такие.
|
<html> <head> . . . <? global $style="style"; if(isset($_SERVER['HTTP_USER_AGENT'])) { if(mb_ereg("Mobile", $_SERVER['HTTP_USER_AGENT'])) { $style="mob-style"; } } print"<link rel=\"stylesheet\" type=\"text/css\" href=\"$style.css\">"; ?> . . . </head> <body> <? if($style=="style") { print"<table> <tr> <td> Header </td> </tr> <tr> <td> Lefter </td> <td> Center </td> <td> Righter </td> </tr> <tr> <td> Footer </td> </tr> </table>"; } else { print"<table> <tr> <td> Header </td> </tr> <tr> <td> Center </td> </tr> <tr> <td> Lefter </td> </tr> <tr> <td> Righter </td> </tr> <tr> <td> Footer </td> </tr> </table>"; } ?> </body> </html> |
Здесь распознается значение переменной $style, и в зависимости от её значения контент страницы выводится в той или иной структуре.
Четвертый шаг по созданию мобильной версии сайта
Теперь осталось только сделать некоторые правки в файле стилей mob-style.>css.
Ширина картинок
В первую очередь нужно уменьшить ширину всех картинок, ширина которых превышает ширину мобильной версии сайта. Для этого определяем стиль тега img, например, следующим образом.
| img {max-width:334px;height:auto;} |
Смысл этого стиля в том, что он ограничивает ширину всех картинок максимальной шириной 334 пикселя, независимо от того, как ширина картинки определяется в атрибуте width в теге img в html-кодах страницы. А высота картинки автоматически измениться пропорционально изменению её ширины, независимо от того, как высота картинки определяется в атрибуте heigh в теге img в html-кодах страницы. Так что в уменьшенной картинке сохраняться все пропорции, и в мобильной версии сайта картинка не исказится.
Ширина таблиц
С широкими таблицами данных, которые находятся на страницах сайта, такой способ их уменьшения, как с картинками, не всегда получается.
| table {width:334px;} |
Как мы увидим далее размер шрифта для мобильной версии сайта, наоборот, нужно будет увеличивать. Одновременное уменьшение ширины таблицы и увеличение размера шрифта в её ячейках часто бывает несовместимо друг с другом. Точнее всё зависит от конкретной таблицы.
Часто одновременное увеличение размера шрифта и уменьшение ширины таблицы приводит к тому, что таблица или выходит за ширину сайта или её правая часть обрезается. Это зависит от того, как конкретно определяются блоки на сайте и определяется ширина таблицы.
Если правая часть таблицы обрезается, то, разумеется, Гугл и Яндекс не будут ругаться на это. Это будет только неудобно тем, кто просматривает сайт на мобильном устройстве.
Если же отдать предпочтение только увеличению шрифта без корректировки ширины таблицы, то таблица выйдет за ширину 334 пикселей и на мобильной версии сайте появится горизонтальная полоса прокрутки, что не понравится поисковым системам.
Если дизайн сайта сделан на таблицах, то в такой ситуации могут быть дополнительные сложности с дизайном таблиц данных.
Самый радикальный способ решения этой проблемы состоит в том, чтобы сделать все таблицы данных в виде картинок. Причем картинки должны быть и в обычной версии сайта и в мобильной версии, чтобы не создавать разный контент в разных версиях.
К сожалению, этот способ годиться, только если на сайте не так много таблиц данных. Иначе Вы замучаетесь делать PrintScreen страниц своего сайта и резать оттуда участки с таблицами в каком-нибудь графическом редакторе, типа PhotoShop.
А на будущее имейте в виду, что если Вы хотите разместить на своем сайте таблицу с какими-то данными, то лучше сделать таблицу не средствами HTML, а в виде вставленного графического файла. Для этого нужно сделать эту таблицу сначала в какой-нибудь программе, типа Word или Excel. Потом сделать скрин экрана, вырезать таблицу в графическом редакторе и сохранить её в виде файла. И на странице сайта размещать уже графический файл.
Файл из программы Word или Excel с таблицей нужно обязательно сохранить на будущее, на тот случай, если в таблицу с данными придется вносить какие-то изменения и исправления. Особенно, это касается таких таблиц, в которых данные постоянно меняются, например, разного рода рейтинги.
Ширина рекламы
Далее, о чем нужно позаботиться, это реклама на сайте. На Вашем сайте могут находиться разные широкие рекламные баннеры и широкие блоки с рекламой. В мобильной версии сайта такие блоки и баннеры могут приводить к увеличению ширины сайта и появлению полосы горизонтальной прокрутки. Или их правая часть будет принудительно обрезаться.
В первом случае Гугл и Яндекс могут не признать сайт оптимизированным для просмотра на мобильных устройствах. А во втором случае рекламная сеть может посчитать обрезание рекламы нарушением их правил и перестать транслировать рекламу на Вашем сайте.
Идеальное решение этой проблемы состоит в установке на сайте адаптивной рекламы. Такое решение проблемы предлагает, например, Google AdSense. Вы размещаете на страницах сайта адаптивный рекламный блок, который автоматически растягивается на нужную ширину. Причем, увеличение ширины достигается не увеличением изображения внутри рекламного блока, а подбором соответствующей рекламы или увеличением числа блоков.
Если Вы работаете с рекламной системой, у которой нет такого решения проблемы, то придется использовать php-код с оператором if, который будет проверять значение переменной $style, и в зависимости от этого выводить рекламный баннер с большей или меньшей шириной.
Аналогично картинкам, таблицам и рекламным баннерам решаются и проблемы с другими широкими элементами на сайте.
Размер шрифтов
После решения проблем с широкими элементами на сайте, осталось ещё решить проблемы с мелким шрифтом и удобством работы посетителя сайта со ссылками.
Все шрифты на мобильной версии сайта придется увеличить. С помощью файла каскадных стилей mob-style.css это сделать очень легко. Для всех тегов, типа p, li, sub, h1 и подобных нужно определить новые значения font-size или font. Например так.
| p {font-size:20px;} |
При этом нужно соблюдать пропорциональность между размерами разных шрифтов. Размер шрифта в тегах sub и sup должны быть одинаковыми и должны быть меньше, чем в теге p. А размер шрифта в теге p должен быть меньше, чем размеры шрифтов в тегах h. Соответственно, шрифт в h1 должен быть больше шрифта в h2, и т.д.
Яндекс рекомендует сделать размер основного шрифта в тегах p не менее 15. Но если на страницах сайта встречаются верхние и нижние индексы, а тег p имеет размер шрифта всего 15, то теги sub и sup должны иметь размер существенно меньше, чем 15. Это приведет к тому, что поисковые системы при тестировании страниц сайта могут пожаловаться на слишком мелкий шрифт и не признать сайт оптимизированным для мобильных устройств.
Поэтому, если в тексте на сайте используются верхние и нижние индексы (или предполагается, что в будущем такое может случиться), то лучше именно для тегов sub и sup предусмотреть размер 15. А для тега p лучше использовать размеры 18 или 19 или 20.
Удобство работы со ссылками
Последнее, что нужно сделать для мобильной версии сайта, это обеспечить посетителю сайта удобство работы со ссылками. Поисковые системы при тестировании сайта на мобильность обращают особое внимание на то, как далеко друг от друга находятся элементы навигации и просто ссылки в тексте. Они не признают сайт оптимизированным для мобильных устройств, если ссылки находятся слишком близко друг к другу.
Дело в том, что для перехода по ссылкам посетитель сайта в мобильных устройствах применяет не курсор мышка, а свой палец. А у подушечки пальца площадь гораздо больше, чем у кончика курсора мыши. Больше всего пользователей смартфонов в Интернете раздражает ситуация, когда нажимаешь пальцем на одну ссылку, а попадаешь при этом на другую и, соответственно, переход идет совсем не туда.
Эта проблема тоже решается с помощью прописывания нужных свойств элементов навигации. Для того чтобы элементы навигации (например, кнопки в меню) разошлись друг от друга на нужное расстояние задаются новые значения для внешних полей этих элементов, то есть для margin. Например, если элемент навигации имеет класс nav, то можно задать внешние поля так.
| .nav {margin:20px 10px 30px 10px;} |
Эти 4 числа показывают расстояния в пикселах, на которое должны быть отодвинуты соседние элементы от элемента навигации класса nav с каждой из четырех сторон. Первое число, это внешнее поле сверху; второе число, это поле справа; третье число – поле снизу; наконец, четвертое число, это внешнее поле слева. Запомнить этот порядок очень легко. Нужно запомнить фразу "12 часов". Это означает, что поля идут в таком же порядке, как по часовой стрелке, а начинается отчет с самого верхнего поля (где на циферблате 12 часов).
Обратите внимание, что margin задает не суммарный отступ между двумя элементами, а отступ вокруг одного элемента. Например, если элементы навигации класса nav, как в примере выше, расположены рядом по вертикали один под другим, то между двумя соседними элементами будет расстояние 50px. Это 30px поле снизу от верхнего элемента и 20px поле сверху от нижнего элемента.
И, наконец, поисковые системы при тестировании страниц сайта могут ругаться на то, что ссылки очень близко расположены друг от друга в тексте статьи. Это случается, когда две ссылки случайно оказались одна под другой в соседних строках.
Можно, конечно, ещё увеличить размер шрифта, чтобы увеличить расстояние между строками. Но если по тестам поисковиков на мобильной версии сайте уже достаточно крупный размер шрифта текста, то дальнейшее увеличение размера шрифта нежелательно. Есть более простое решение средствами CSS.
Можно не меняя размера шрифта изменить размер междустрочного интервала. Для этого вместо font-size используем font, например, следующим образом.
| p{font:18px/1.5;} |
Это означает размер шрифта 18, а размер междустрочного интервала 1.5.
Пятый шаг по созданию мобильной версии сайта
Наконец, возможно, с мобильной версии сайта придется убрать некоторые скрипты, написанные на языке JavaScript. Какие именно скрипты нужно будет убрать, это смотрите сами, на что будут ругаться Гугл и Яндекс в своих тестах.
Убираются эти скрипты легко с помощью оператора if. который проверяет значение переменной $style. И в зависимости от значения этой переменной или выводим код скрипта на страницу с помощью оператора print или не выводим.
Ну, вот и всё.
Описанный здесь способ создания мобильной версии сайта позволяет быстро и с минимальными трудозатратами и переделками получить такую рабочую мобильную версию сайта, которую признают мобильной и Гугл и Яндекс. На базе этого способа можно и дальше совершенствовать дизайн и юзабилити мобильной версии сайта. Например, можно создать дополнительные версии адаптированные для разных разрешений экрана и разной ширины экрана.
------------------
Автор статьи: Евгений Миронов.