Начиная с лета 2015 года, Google изменит свою работу таким образом, что преимущество в результатах поиска будет отдано тем сайтам у кого есть мобильная версия. Это, а также понимание того, что всё больше людей для просмотра веб страниц используют смартфоны, побудило меня разработать мобильную версию своего сайта.
Дальше я расскажу вам о своём опыте, и о том как это можно сделать самостоятельно.
Очевидно что основной особенностью при разработки сайта для мобильных устройств является значительно меньший размер экрана по сравнению с полноценным монитором компьютера, ноутбука или планшета. По большому счёту планшет тоже является мобильным устройством, но размеры его экрана таковы, что в большинстве случаев на нём отлично смотрится и полная версия ресурса. По этому, под мобильной версией, далее я буду подразумевать версию для телефона или правильнее сказать смартфона.
Немного теории
Большинство современных сайтов работают на основе той или иной системы управления контентом (Content management system - CMS) или по простому web движке. За внешний вид сайта в web движке, т.е. то каким его видят посетители ресурса отвечают так называемые шаблоны.
Шаблон - это, как правило, набор файлов определяющий внешний вид сайта. Для каждого движка используются свои шаблоны, но у всех них есть нечто общее - это файл(ы) с таблицами стилей CSS и файл(ы) отвечающие за разметку страницы, это может быть PHP, ASP и т. д. Возможны и более экзотические варианты, но в любом случае на выходе web движка будет CSS и HTML и возможно что-то ещё. Ну да я отвлёкся.
Одним из вариантов позволяющим сделать так, чтобы сайт одинаково хорошо смотрелся на всех устройствах является использование нескольких шаблонов для разного вида устройств.
Например их может быть два:
- Первый - для полноценного компьютера, ноутбука, планшета, другими словами для устройства с большим экраном.
- Второй - для смартфона, или другого устройства экран которого существенно меньше.
В зависимости от того с какого устройства зашёл посетитель, web движком будет использоваться тот или иной шаблон для формировании внешнего вида страницы, её дизайна, расположения элементов и содержимого.
Крайне важно здесь понять, что невозможно сделать один шаблон который одинаково хорошо смотрелся бы и на телефоне и на ноутбуке. В той или иной степени это будет компромисс, и отнюдь не лучший.
Также возможно использование трёх и даже более шаблонов, например с отдельной версий сайта для планшета, но это уже несколько другая история, которую рассматривать я здесь не буду.
Вернёмся к шаблону для мобильной версии.
По большому счёту такой шаблон представляет собой облегчённый вариант полного, отличающийся по дизайну, размерами и расположением элементов.
Такое упрощение прежде всего связано с тем, что разрешение экрана современных смартфонов начинается, как правило, с 800x480 точек при размере экрана порядка 4"" дюйма.
Это значит, что примерно на этот размер и надо рассчитывать при разработке.
Малое разрешение экрана ведёт к тому, что большие элементы, и элементы расположенные в ряд, просто не будут вмещаться горизонтально.
Особенно это касается случая если и само устройство расположено горизонтально.
При этом на смартфоне плотность пикселей экрана в 2-3 раза больше чем на мониторе компьютера или ноутбука, это ведёт к тому, что обычный размер шрифта будет смотреться совсем мелко. Для того чтоб что-то увидеть придётся пользоваться зумом, постоянно то отдаляя то приближая ту или иную область страницы, что крайне не удобно.
На этом теории более чем достаточно,теперь обо всём более подробно.
Настройка web движка
Как уже было написано ранее за выбор того или иного шаблона отвечает система управления контентом.
Некоторые web движки изначально умеют определять с какого устройства зашёл посетитель и включать тот или иной шаблон, другим для этого потребуется установка соответствующих расширений.
Для примера я покажу настройку Mobile Detector от BlackRed Designs, он имеет минимум настроек, и всё что необходимо сделать после его установки это опубликовать его и выбрать шаблон который будет использоваться для отображения страниц на мобильных устройствах.
Очевидно что шаблон для мобильной версии должен быть отличным от основного.
В моём случае я сделал копию основного шаблона, переименовав его, после чего начал вносить изменения. Такой подход позволил сделать мобильную версию максимально близкую по стилю к основной, и сэкономить при этом массу времени.
Дальше я подробно расскажу о ключевых изменениях которые были проделаны.
Создание шаблона
Создание шаблона полностью зависит от используемого web движка, и рассказать про все, в рамках данного материала, не представляется возможным. Однако есть некоторые общие вещи характерные для всех.
Метатеги и масштабирование
Одна из общих вещей, которая должна присутствовать независимо от использованного движка, это специальный метатег – viewport .
Этот мататег должен быть расположен в разделе head рядом с остальными метатегами и выглядеть примерно следующим образом:
Метатег сообщает поисковикам и мобильным устройствам, что перед ними мобильная версия сайта, а также устанавливает изначальный масштаб страницы.
Помните, в самом начале я писал о том чтобы рассмотреть тот или иной элемент на странице на не оптимизированных сайтах частенько приходиться пользоваться зумом, приближая и отдаляя отдельные участки страницы? Так вот, параметр initial-scale=1.0
как раз устанавливает изначальное масштабирование страницы в 100%.
Если не указать мобильному устройству изначальный масштаб, то он может выставить его самостоятельно в зависимости от системы устройства, как то Android, iOS, Windows Phone, а также используемого браузера например Firefox, Chrome, Safari, Opera и т. д.
Лучше изначально избежать этого. Для кого же масштаб покажется не удобным смогут отмасштабировать его по собственному желанию, соответствующим жестом.
Границы сайта
Если для полной версии сайта в шаблоне используются отступы от границ браузера, например для того чтоб выделить содержание:
body {
margin-top: 20px;
margin-left:100px;
margin-right:100px;
border: 1px solid #dfdfdf;
}
То для мобильной версии это уже потеря и так небольшого полезного пространства, которое лучше использовать на все 100%;
body {
width:100%;
}
Шапка
Принципиальных, различий между мобильной и полной версиями в заголовке как правило не существует, и здесь просто необходимо помнить о том, чтобы все элементы помещались на смартфоне, и выглядели соответствующим образом.
Возможно потребуется несколько изменить размещение элементов, как например в моём случае передвинуть строку поиска с правого края:
Header-search
{
text-align:right;
float:right;
}
На уровень ниже и расположить по левому краю:
Header-search
{
margin-top:5px;
text-align:left;
}
Меню
У меня на сайте, в стандартной версии, элементы меню расположены горизонтально, друг за другом.
Topmenu ul li
{
display: inline;
}
Topmenu li a
{
display:block;
float: left;
}
Очевидно, что все пункты меню идущие друг за другом поместятся далеко не на всех смартфонах, особенно при его вертикальной ориентации. По этому правильнее расположить меню тоже вертикально.
Topmenu ul li {
display: block;
}
Topmenu li a {
display:block;
}
Шрифт
Как правило для полной версии сайта используется шрифт 12-13px:
p, li, dt, dd, legend
{
font-size: 13px;
}
Но, как уже было написано ранее, телефон имеет значительно большую плотность пикселей, очевидно, что и размер шрифта тоже должен быть больше, иначе текст будет слишком мелок и плохо читаем. По этому основной шрифт рекомендуется делать 16 пикселей:
p, li, dt, dd, legend
{
font-size: 16px;
}
Из этих же соображений выбирается размер шрифта и для остальных текстовых элементов, например так:
h1 {
font-size: 24px;
}
h2 {
font-size: 22px;
font-weight: normal;
}
h3 {
font-size: 17px;
margin-top: 5px;
margin-bottom:0px;
}
h4 {
font-size: 16px;
}
Изображения
В содержимом сайтов наряду с текстовой информацией постоянно встречаются изображения. Здесь я имею в виду не элементы оформления дизайна, а изображения которые встречаются в контенте, в содержании записей, статей и т. д.
Как я уже писал ранее, разрешение экрана современных смартфонов начинается с 800x480 точек. Это означает что размер изображения не должен превышать 480 пикселей, по скольку иначе оно не поместиться на экране и потребуется масштабирование.
С другой стороны для качественной картинки 480 пикселей в полной версии сайта, довольно мало.
В качестве небольшой уловки может служить конструкция вида:
img
{
max-width:100%;
height:auto;
}
Эта запись говорит, что ширина изображения не может быть больше 100% т.е больше ширины экрана, например в 480px. Вторая запись позволяет сохранить пропорции изображения.
В идеале для полной и мобильной версии желательно использовать разные размеры картинок, но это уже не решается средствами одного шаблона и требует более серьёзных средств.
Таблицы
На ряду с текстовой и графической информацией на сайтах довольно часто можно встретить таблицы. И если в них содержится довольно много инфрмации, или в ячейках содержатся большие блоки или изображения, то не все они могут поместиться на экране.
В некоторых случаях может быть полезна запись вида:
table tr td
{
display:block;
}
Такая конструкция делает каждую ячейку блоковым элементом, тем самым как-бы разворачивая строки таблицы вертикально. Это не самое лучшее решение но в некоторых случаях оно даёт хороший результат.
Касательно таблиц, всё зависит от конкретного случая, и тут пожалуй нет универсального решения.
Теперь самое время рассказать о том как проверить результаты своей работы, ведь разработать шаблон не видя как он будет отображаться на смартфоне попросту не возможно.
Проверка результата, тестирование
Очевидно, что в процессе разработки шаблона правильнее всего проверять как он выглядит непосредственно на телефоне. Желательно на нескольких разных, под управлением разных систем: Android, iOS, Windows Phone, а также на нескольких браузерах Firefox, Chrome, Safari, Opera и т. д. Только так можно быть полностью уверенным что всё выглядит так как задумано.
Понятно, что держать под рукой несколько телефонов не всегда выполнимо и не очень удобно. Именно для этого можно использовать эмуляторы мобильных устройств, браузеров и т.д.
Для проверки в среде iOS, для iPhone и iPod, существует специальная среда разработки от Apple – Xcode. С её помощью можно эмулировать практически любое яблочное устройство.
К сожалению Xcode работает только под Mac OS, и практически единственным вариантом запуска её на PC является создание виртуальной машины.
Довольно интересным средством проверки является Firefox OS Simulator, который является дополнением к браузеру Firefox. Загрузить его можно по адресу:
https://addons.mozilla.org/En-us/firefox/addon/firefox-os-simulator/
По сути здесь эмулируется полноценное устройство под Firefox OS.
Также в процессе разработки шаблона довольно полезно выдать свой обычный браузер за мобильный. Для FireFox это делается при помощи дополнения User Agent Switcher, установить которое можно от сюда:
https://addons.mozilla.org/ru/firefox/addon/user-agent-switcher/
При этом вы получаете возможность использовать довольно мощные средства веб разработки встроенные в сам FireFox.
Разумеется аналогичные средства есть и в других браузерах, но это уже сугубо индивидуальные предпочтения.
По мимо всего прочего поисковик Google тоже должен проверить ресурс на его «мобильность», ведь только в этом случае сайт получит преимущество перед другими. Проверить всё ли нравиться поисковику можно по адресу:
https://www.google.com/webmasters/tools/mobile-friendly/
Для полной уверенности что Google всё устраивает желательно проверить все страницы сайта. Либо просмотреть пункт «Удобство просмотра на мобильных устройствах» в инструменте для web мастеров по адресу:
http://www.google.com/webmasters/
Заключение
В своей статье я постарался не акцентировать внимание на конкретном web движке, и рассказал об общих подходах при разработки и тестировании мобильной версии сайта. Понятно, что по мимо основных, описанных мною ранее моментах, существует множество других, но охватить их целиком тем более в рамках одной статьи просто невозможно. По этому, если у вас остались вопросы, или вам необходимо сделать мобильную версию сайта, оставляйте комментарии, пишите через раздел контакты и я всегда постараюсь помочь вам!
Что с 21 апреля в поисковый алгоритм будет включен фактор дружественности сайта к мобильным устройствам. Повлияет это нововведение на основную выдачу Google или только на результаты мобильного поиска, будет видно позднее.
Оно мне надо?Ответ на этот вопрос можно найти, проверив, как ваш сайт отображается в следующих сервисах тестирования Google:
Если вы видите подобное сообщение - статья для вас:
Адаптивный дизайнВ каких случаях подойдет? Если у вас сайт-визитка, информационный сайт, блог, одностраничник, интернет-магазин (с простой структурой, дизайном и/или небольшим ассортиментом), сайт услуг или форум.
Как реализовать?
Можно смело брать один из CSS-фреймворков (bootstrap , responsivegridsystem , Sceleton и пр.) и адаптировать существующий дизайн. Либо используйте CSS3 Media Queries.
Например, если использовать фреймворк bootstrap, то вам понадобится, вкратце:
Или же в таблице стилей выделить через медиа-запросы (CSS3 Media Queries) несколько разрешений и задать оптимальные размеры элементов страницы, например:
@media
screen and (max-width: 1280
px) { div
.contentblock {width: 1200
px
;} }
@media
screen and (max-width: 1140
px) { div
.contentblock {width: 1024
px
;} }
@media
screen and (max-width: 992
px) { div
. contentblock {width: 970
px
;} }
Некоторые элементы, которые актуальны для мониторов, можно, а иногда и нужно будет скрыть для мобильных устройств либо вместо них выводить другие, более компактные.
Плюсы данного метода: быстрая реализация для перечисленных типов сайтов.
Минусы: скрипты и стили, которое не используются на мобильной версии, но используются на десктопной, все же будут подгружаться и влиять на время загрузки.
Что мы получим?
Сайт, который будет доступен со всех устройств, дизайн будет узнаваем на всех этих устройствах, только элементы будут сдвигаться по вертикали. Некоторые элементы не будут отображаться на мобильных устройствах (и наоборот) либо будут отображаться в более компактном виде.
И рассмотрим пример. Меню для устройств с экраном более 768px выглядит так:
А для экранов менее 768px выглядит так (в свернутом виде):
И так, при клике на иконку в правом углу (в развернутом виде):
В каких случаях подойдет? Практически для любого информационного сайта, блога, форума, в том числе для интернет-магазинов. Для визитки отдельный шаблон уже будет лишним.
Как реализовать?
Нужны знания php и база основных устройств для их определения и вывода соответствующего шаблона. Т.е. нужно написать скрипт, который будет определять тип устройства и выводить для него соответствующий шаблон.
Отдельно стоит упомянуть о CMS. Если ваш сайт на WordPress, то о вас уже позаботились, и можно обойтись установкой плагинов для адаптации сайтов под мобильные устройства.
Среди них: WPTouch, WordPress Mobile Pack, WP Mobile Detector и т. д. Все эти плагины имеют несколько тем оформления и дополнительные полезные фишки вроде сбора статистики по мобильным пользователям.
Также в настройках этих плагинов есть возможность установить, какие блоки будут отображаться в мобильной версии сайта, а какие нет. Есть возможность добавлять свой логотип, что помогает пользователям, зашедшим на ваш сайт с мобильного устройства, идентифицировать ваш сайт.
Плюсы: В случае с плагинами - очень быстрый и простой способ реализации, быстрее, чем адаптивная верстка. В случае создания отдельного шаблона для сайта - возможность упростить дизайн сайта, уменьшить количество активных элементов, т. е. сделать сайт «легче».
Минусы: не для всех CMS есть такие плагины, да и не всегда они корректно работают. Бывает, что сайт хорошо отображается на моб.устройствах, но при этом по скорости не лучше, а даже хуже, чем его полная версия. Стоит отметить, что иногда бывают баги в определении мобильного устройства, если это какой-то редкий телефон, и в этом случае на таком устройстве будет отображена полная версия сайта.
Что мы получим?
Сайт для мобильных устройств будет доступен по тому же адресу, что и основной сайт, только шаблон его будет существенно отличаться от шаблона основного сайта, он будет значительно упрощен, но все-таки узнаваем.
Рассмотрим пример сайта с установленным плагином, который адаптирует его под мобильные устройства.
Например, вот так сайт выглядит на ПК:
А вот так выглядит этот же сайт на мобильном:
В каких случаях подойдет? Для интернет-магазинов, каталогов, интернет-порталов, социальных сетей.
Как реализовать?
Этот вариант похож на предыдущий, также достаточно трудоемкий в плане реализации. Но для больших интернет-магазинов с огромным ассортиментом – единственный выход.
Немного подробнее о реализации: создается поддомен, на нем такой же движок, как и на основном домене, но база данных используется одна на оба сайта (чтобы в случае внесения каких-либо изменений, не пришлось их добавлять дважды). При заходе с мобильного устройства происходит перенаправление пользователя на поддомен. В качестве имени поддомена обычно используют варианты: m.sitemane.com, mobile.sitename.com, pda.sitename.com и пр.
Преимущества и недостатки каждого из них. В этом материале мы подробнее остановимся на том, как сделать мобильную версию сайта на поддомене с редиректом , и продемонстрируем правильную работу редиректа, а также перехода мобильных пользователей на основную версию сайта.
Основа метода заключается в том, что сервер определяет устройство пользователя, зашедшего на сайт, а затем перенаправляет на нужную веб-страницу посредством переадресации HTTP и HTTP-заголовка Vary. Основной сайт будет иметь домен верхнего уровня (site.ru), мобильный же поддомен (m.site.ru).
Преимущества и недостатки мобильной версии сайта на поддоменеМетод исключительно затратный по времени, так как при редактировании контента одной веб-страницы нужно вносить изменения сразу в оба документа, конечно же, если вы не используете общую базу данных. Однако, стоит заметить, что структура страницы и разметка HTML на той или другой версии могут быть совершенно разными. Таким образом достигается гибкая настройка и расположение элементов для конечного пользователя.
Еще одним немаловажным фактором является то, что, в отличии от адаптивной верстки, мы сможем оптимизировать мобильный сайт так, как надо, исключив оттуда ненужные JS скрипты и прочие данные.
Чтобы избежать дублирования контента и негативного воздействия в выдаче поисковых систем, разработчикам придется настроить мета-теги. Для создания редиректа пользователей на нужную страницу также необходимо дополнить страницы дополнительным кодом.
Этапы создания мобильной версии сайта на поддоменеМногие разработчики теряются на этапе планирования редиректа. Действительно, об этом в сети написано достаточно много, но далеко не каждый метод способен правильно определять все мобильные устройства.
Редирект с основной версии сайтаВ самом верху документа основного сайта вставляем:
В мобильной версии достаточно указать непосредственно до тега :
Ссылка для перехода на полную версию сайта
Ранее мы уже заложили правило для того, чтобы нас не отсылало обратно, поэтому переход на полную версию сайта выглядит совсем просто:
Антивирус Bitdefender: эффективный защитник Без вопросов
Значение слова неудачный
Обзор Samsung Galaxy A7 (2017): не боится воды и экономии Стоит ли покупать samsung a7
Делаем бэкап прошивки на андроиде
Как настроить файл подкачки?