Адаптация сайта под мобильные устройства

28 сентября 2018

СОДЕРЖАНИЕ

Адаптация сайта под мобильные устройства

Что лучше – адаптивный дизайн или мобильная версия

Особые виды мобильных версий сайта

Что должна давать адаптация сайта для смартфонов и планшетов?

Проверка адаптации сайта под мобильные устройства

Как сделать адаптацию сайта самому?

Установите правильные атрибуты для заполняемых полей

Условия по ширине

Установите ширину картинок в 100 %

Установите ширину полей ввода в 100 %

В длинных строках используйте word-wrap (потребуется пароль)

Замените пробелы на отступы

Преимущества медиазапросов

Избегайте фиксированного позиционирования

Используйте стандартные шрифты

Контент должен быть читабельным

Адаптируйте не только сайт, но и почтовые рассылки

Замените ссылки на кнопки

Бесплатные плагины адаптивной вёрстки для Wordpress

Сервисы для адаптации сайта онлайн

Краткий вывод

Вот мы, наконец-то, и добрались до такой важнейшей темы, как адаптация сайта под мобильные устройства. И несмотря на то что сейчас уже вторая половина 2018 года, почти каждый наш заказчик, когда мы ему говорим о том, что сайт должен быть адаптирован для мобильных устройств, задает один и тот же вопрос – а нужно ли это вообще? Мы дадим на этот вопрос сразу несколько ответов.

Во-первых, под мобильными устройствами подразумеваются смартфоны, планшеты, электронные книги, а в некоторых случаях – даже нетбуки (например, если разрешение экрана всего 1024х600. А нетбук – это почти ноутбук, а ноутбук – это почти ПК. Как видите, связь между мобильными и настольными устройствами достаточно тесная. Отсюда вывод, что в 98,8% случаев Ваш сайт будут посещать как с настольных (десктопных), так и с мобильных устройств.

Оставшиеся же 1,2% можно вообще не брать в расчет, ибо их проще списать на совпадение/случайность, либо просто добавить в список исключений. И сразу же конкретный пример – яхтостроение. Это крайне узкоспециализированная ниша, особенно в регионах. Ниша настолько узкоспециализированная, что расширенное семантическое ядро будет составлять от силы 80-100, максимум 150 ключей. Плюс к этому, более 95% трафика по данной нише будет именно десктопным, ибо с мобильных устройств такие вещи обычно не ищут. Т.е. это как раз то самое исключение, когда ниша вообще не требует адаптации сайта под мобильные гаджеты – это не даст ничего, кроме прироста трафика на 5% (и то не факт), но зато отнимет время и деньги. С таким же успехом эти деньги можно раздать прохожим или выкинуть из окна – тогда они хоть кому-то помогут.

Во-вторых, по официальным данным, основным индексом поисковых систем на данный момент является десктопный. Тем не менее, мобильный индекс уже настолько вырос, что он может стать основным вообще в любой момент, вплоть до «до обеда» и «после обеда». Вывод – ставку нужно делать и на десктопный, и на мобильный индексы.

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

В-четвертых, за счет адаптации сайта под мобильные устройства можно значительно повысить конверсию. Для блогов и статейников это выражается в доходах от рекламы, а для интернет-магазинов – в прямых продажах. Более того, есть ниши, в которых мобильная конверсия превышает десктопную в 2-3-4 раза, а то и больше (например, доставка пиццы).

В-пятых… Хотя нет, об этом чуть-чуть позже.

Т.е. мы Вам с ходу дали 4 положительных ответа на данный вопрос.

Адаптация сайта под мобильные устройства

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

Если коротко, то поведенческие факторы – это любые действия со стороны пользователей относительно сайта. Зашел на сайт из поисковой выдачи – поведенческий фактор, свидетельствующий о том, что именно Ваши заголовки «зацепили» пользователя. Пользователь через 2 секунды закрыл Ваш сайт и пошел дальше листать поисковую выдачу – негативный поведенческий фактор, свидетельствующий о том, что пользователю Ваш сайт не понравился (в SEO-кругах такое поведение принято называть «отказом»). И т.д.

Google использует примерно такую же систему оценки поведенческих факторов, однако, недавно было прямым текстом заявлено, что (в-пятых) сайты, адаптированные под мобильные устройства, получат небольшой приоритет в ранжировании в… ДЕСКТОПНОЙ выдаче. Т.е. адаптируете сайт под мобильные устройства, а в итоге получаете бонусы в обеих выдачах. Круто, да?

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

А вот конкретный пример:

Из данного кейса следует что:

  • более 40% визитов – это мобильный трафик;
  • глубина просмотров с мобильного трафика меньше, а процент отказов – больше, т.е. сайт адаптирован (иначе процент мобильного трафика был бы меньше), но требуется доработка именно по мобильной части.

Также хотелось бы отметить одну особенность пользователей. Попав на сайт, который под мобильные устройства плохо адаптирован, пользователь не просто покинет сайт, а еще и запомнит название сайта (и адрес в т.ч.), а затем просто будет в поисковой выдаче обходить Вас стороной. По данным исследований «Equation Research», было выяснено, что примерно 45% пользователей являются настолько «злопамятными». Отсюда можно сделать сразу 2 вывода:

  • адаптация сайта под мобильные устройства – это самое первое, что нужно сделать после установки движка на хостинг;
  • потребуется постоянно что-либо дополнять, менять местами, дорабатывать, менять размеры и т.д., короче – следить за мобильной версией.

Что лучше – адаптивный дизайн или мобильная версия

Перед тем как ответить на данный вопрос, гораздо правильнее сначала разобраться в том, чем они вообще отличаются. И начнем с адаптивного дизайна (или «адаптивная вёрстка» - кому как понятнее).

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

а затем искусственно уменьшить размеры окна браузера и посмотреть, что произойдет:

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

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

Теперь о мобильной версии сайта. Ее основное отличие состоит в том, что это второй сайт. Как правило, он располагается на дополнительном домене. Например, основной сайт располагается на домене site.xyz, а мобильная версия – на поддомене m.site.xyz, mobile.site.xyz, ну или как-то так.

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

И сразу же расскажем о втором минусе – финансы. Разработка мобильной версии сайта обойдется примерно в ту же сумму, что и разработка нового сайта, т.е. данный способ не имеет одной-единственной кнопки «Сделай мне хорошо».

Однако, у мобильной версии есть и ряд плюсов.

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

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

Особые виды мобильных версий сайта

Разработка второго сайта – это реально боль. Поэтому Google и Яндекс предложили более простые пути, о них и поговорим.

Google AMP (AMP = Accelerated Mobile Page) – это облегченные версии «десктопных» страниц. Основное отличие от мобильной версии сайта состоит в том, что AMP не размещаются на отдельном поддомене. Более того, AMP грузятся не с сайта, а из поисковой выдачи. Плюс к этому, в поисковой выдаче AMP-страницы помечаются соответствующим символом:

И еще одно отличие – AMP является чисто фишкой Google, т.е. в Яндексе данные страницы не ранжируются. НО…

Яндекс.Турбо-страницы. Это ответ Яндекса на Google AMP. Визуально страница представляет собой картинку в шапке + голый текст + еще пара мелочей. Вот пример того, как выглядит Турбо-страница:

А вот так эта же страница выглядит в десктопной версии.

Т.е. если AMP представляют собой обрезанные версии десктопных страниц, то Турбо-страницы представляют собой обрезанные версии AMP.

Загрузка страниц тоже производится не с сайта, а с серверов Яндекса. Однако, Яндекс при этом учитывает данное посещение как посещение Вашего сайта. Ну и, как Вы уже догадались, Турбо-страницы не ранжируются в Google.

Ну а теперь пара примеров, что для чего подходит:

  • для салонов красоты будет достаточно и адаптивной вёрстки;
  • для банков и МФО имеет смысл сделать отдельную мобильную версию сайта с собственным функционалом;
  • для интернет-магазинов подойдёт как мобильная версия, так и адаптивный дизайн;
  • для блогов и СМИ наиболее оптимальными вариантами будут Google AMP и Яндекс.Турбо-страницы.

И не забывайте про КОНВЕРСИЮ! Любой из 4 видов адаптирования сайта для мобильных устройств – это гораздо лучше, чем «голая» десктоп-версия.

Что должна давать адаптация сайта для смартфонов и планшетов?

  1. Ускоренная загрузка страниц, поскольку из html-кода должно быть вырезано всё лишнее, чтобы сократить его объем, должны отсутствовать «тяжелые» фотографии, а Flash и JavaScript – только в случае крайней необходимости.
  2. Понятная, удобная навигация. Не забывайте, что на мобильных устройствах допускается только вертикальная прокрутка, т.е. прокрутки вправо-влево быть не должно. Также должна быть кнопка меню (как правило, в одном из верхних углов), кнопка, ведущая на главную, кнопка, возвращающая пользователя на самый верх страницы (крайне полезно, если пользователь попал на лонгрид), кнопка «Назад», возвращающая пользователя на предыдущую страницу. Для коммерческих сайтов необходимо сделать номер телефона активным, чтобы пользователю не приходилось набирать его вручную: тыкнул на номер в шапке, нажал «Вызов» и приложил трубку к уху.
  3. Удобные меню, формы. Кнопки должны быть такого размера, чтобы пользователь с первого раза попадал в нужную кнопку, не задевая соседние. Ну и сами кнопки не должны находиться слишком близко друг к другу, и уж тем более не должны налезать друг на друга.
  4. Читабельный контент. Размер шрифта должен быть таким, чтобы текст комфортно читался с экрана.
  5. Возможность перехода к полной версии сайта. Это чисто на случай, если пользователь захочет перейти из мобильной версии в полную. В большинстве случаев пользователи прекрасно понимают, что загрузка страниц займет больше времени (иногда даже в несколько раз). Ну а в качестве бонуса Вы сможете отслеживать такие переходы, анализировать сессии и выяснять, что еще можно добавить в мобильную версию, чтобы пользователям было удобнее.
  6. Функциональность, возможность конверсионных действий. Для коммерческих проектов крайне важно, чтобы с мобильных устройств тоже можно было совершать покупки, делать заказы и т.д. Для клиента это удобно, а для владельца сайта – прибыльно.

 

Проверка адаптации сайта под мобильные устройства

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

Quirktools ScreenFly (http://quirktools.com/screenfly/).

С помощью данного сервиса можно посмотреть, как сайт будет отображаться:

  •  на десктопных устройствах (те же нетбуки, или старые мониторы с соотношением сторон 4:3);
  • на планшетах;
  • на смартфонах;
  • на телевизорах (да-да, телевизоры тоже умеют выходить в интернет).

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

    • задать разрешение вручную;

    • отобразить полосу прокрутки (тогда можно будет проскроллить сайт до самого низа);

    • а в качестве бонуса – еще и поменять ориентацию экрана с вертикальной на горизонтальную и наоборот.

И несмотря на то что список стандартных разрешений на сегодняшний день во многом утратил актуальность (например, присутствуют разрешения 176х220 пикселей, а таких гаджетов уже давно не осталось), сам по себе сервис является крайне полезным.

 F12 в браузерах Google Chrome, Yandex.Browser и Mozilla ForeFox.

Изначально данная команда предназначалась для того, чтобы можно было:

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

Затем в эти 3 браузера была добавлена функция тестирования адаптивного дизайна.

Выглядит это следующим образом:

  • заходите на сайт;
  • нажимаете F12;
  • переводите браузер в мобильный режим.

В Google Chrome и Яндекс.Браузере это осуществляется вот этой кнопкой:

В Mozilla FireFox кнопка располагается вот здесь:

Во всех трех браузерах можно вручную задавать разрешение с точностью до пикселя, менять ориентацию и т.д. Однако, в FireFox’е есть одна ультраполезная фишка – эмулятор типа интернет-соединения.

Т.е. данный браузер предоставляет Вам возможность не только посмотреть, как сайт будет выглядеть при том или ином разрешении, но и выяснить, сколько времени будет уходить на загрузку при том или ином виде соединения. В данном случае загрузка страницы по каналу GPRS превысила 2 минуты. Однако, справедливости ради, стоит отметить, что GPRS, мягко говоря, устарел, т.е. уже давно нигде не используется даже в глухих деревнях. Еще в начале десятилетия ему на смену пришел 3G, который работает куда быстрее. И если EDGE (2G) еще в разных частях города может попадаться, то GPRS уже окончательно ушел в историю.

Штатный инструмент от Google (https://search.google.com/test/mobile-friendly?hl=ru)

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

Работает это очень просто: вводите адрес сайта, а затем запускаете проверку. На выходе Вы получаете либо то, что показано выше, либо то, что показано ниже.

Google Developers - еще один важный инструмент Google по оценке скорости загрузки сайта на мобильных устройствах (https://developers.google.com/speed/pagespeed/insights/). Он оценивает скорость загрузки на мобильных и на десктопных устройствах по 100-бальной шкале, а также дает рекомендации по оптимизации скорости загрузки. Оптимальным показателем является оценка 80+. В данном случае наш блог набрал 78 баллов, что тоже неплохо.

Этот инструмент тоже умеет выдавать рекомендации по ускорению загрузки страниц.

По идее в списке должен был быть еще сервис Ipadpeek.com, эмулирующий гаджеты Apple, но он, увы, прекратил свое существование, поэтому и рассказывать о нём нет смысла.

Как сделать адаптацию сайта самому?

Установите правильные атрибуты для заполняемых полей

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

Ваше имя: <input type=text size=20 autocorrect=off autocapitalize=words>

Отключение autocorrect необходимо для того, чтоб отключить автоисправление (кто хоть раз сталкивался с Т9 – тот поймет, о чем речь). Разумеется, данная рекомендация не распространяется на поля для ввода комментариев. В остальном, если пользователь хочет зарегистрировать ник Erdgan, то никаких исправлений на Erdogan быть не должно.

autocapitalize=words же необходима для того, чтобы первые буквы слов автоматически становились заглавными. Вполне уместно в полях для ввода ФИО.

Условия по ширине

Для задания условий по ширине необходимо внутри <head> добавить следующую строку:

<meta name=”viewport” content="width=480">

480 – это ширина дисплея в пикселях, т.е. ее можно менять (например, указать 720), какая именно величина будет оптимальной – зависит от дизайна сайта.

Если очень грубо и на пальцах, то данная строка показывает ширину экрана в пикселях, на которой должна срабатывать адаптация, своего рода «переломная точка». 480 тут указано чисто для примера, можно указать и более высокий/низкий порог срабатывания.

Установите ширину картинок в 100 %

Необходимо в CSS-стилях прописать следующий код:

img {   max-width: 100% }

.header {   background: url(header.png) 50% no-repeat;   background-size: contain }

Теперь разберем обе строки.

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

Вторая строка делает то же самое, но в тех случаях, когда, например, фоновое изображение установлено без тега img.

Установите ширину полей ввода в 100 %

Итак, с помощью свойства max-width мы установили ширину изображений. То же самое нужно сделать и с полями input:

input, textarea {   max-width:100% }

(прописывается туда же в CSS-стили).

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

ВАЖНО!!! Поаккуратнее с использованием Disable при настройке кнопок отправки формы. Если после нажатия кнопка будет деактивирована, а сами данные по каким-то причинам не отправились (например, произошел обрыв связи), то повторно отправить их уже не получится. Поэтому если и делать деактивацию кнопки после ее нажатия, то только на время – пусть она через несколько секунд снова станет активной.

В длинных строках используйте word-wrap (потребуется пароль)

<span style="word-wrap:break-word">435143a1b5fc8bb70a3aa9b10f6673a8</span>

Данный код необходим для переноса длинных строк. Такое часто встречается, когда в статье приводится фрагмент «сплошного» кода, в котором на протяжении многих символов нет ни одного пробела.

В этом случае длинная строка будет автоматически переноситься на следующую строку.

Замените пробелы на отступы

<style> .split m {   padding: 0em 0.5em } </style>  Ваш код: <span class="split"><m>43514</m><m>3a1b5</m><m>fc8bb</m></span>

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

Преимущества медиазапросов

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

<style> /* regular css */ .tabs {   padding: 10px 2em }  @media screen and (max-width: 500px) { /* applies only if the screen is narrower than 500px */   .tabs {     padding: 3px 1em   } } </style>

Избегайте фиксированного позиционирования

Например, если заголовок или сайдбар позиционируется фиксировано, т.е. CSS свойство position имеет значение fixed, то могут возникнуть проблемы. Например, размер заголовка может увеличиться настолько, что займет весь экран целиком:

Поэтому от фиксированного позиционирования лучше отказаться.

Пример на практике:

<style> /* regular css */ #header {   position: fixed }  @media screen and (max-width: 500px) { /* applies only if the screen is narrower than 500px */   #header {     position: static   } } </style>

Используйте стандартные шрифты

Для отображения сайта на мобильных устройствах имеет смысл использовать стандартные шрифты (например, Times New Roman, Arial, Calibri и т.д.). Да, мы не спорим, пользовательские шрифты – это круто, но:

  • необходимо установить новый шрифт на устройство пользователя еще ДО загрузки сайта;
  • сам файл шрифта может весить столько же, сколько 3-4 страницы Вашего сайта.

Говоря простым языком, самая первая загрузка страницы может очень сильно затянуться. Следовательно, очень вырастет процент «отказов». К тому же, не исключено, что сайт в итоге будет выглядеть примерно вот так:

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

Однако, в этом случае придется писать 2 сценария с CSS-правилами: один для стандартного, второй – для скаченного.

Для этих целей воспользуйтесь кодом:

<script src="//ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js"></script> <script> WebFont.load({   google: {     families: ["Open Sans"]   } }); </script> <style type="text/css"> .header {   font-family: Arial } .wf-opensans-n4-active .header {   font-family: "Open Sans" } </style>

Контент должен быть читабельным

В большинстве случаев пользователи мобильных устройств (если не считать общения в соц. сетях и просмотров видеороликов на Youtube) заходят в Интернет с какой-то определенной целью – сравнить цены на один и тот же товар в разных магазинах, добыть контакты ближайшей пиццерии/салона красоты/шиномонтажки/ресторана/и т.п., инструкцию по эксплуатации прибора или инструкцию по приему препаратов.

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

Теперь обозначим основные моменты, которые нужно учитывать при адаптации Вашего сайта и размещаемого на нём контента под чтение с экранов мобильных устройств:

  • краткий, емкий, привлекательный заголовок, т.е. он должен быть таким, чтобы «быстро, четко, по делу, ничего лишнего, но и добавить нечего», максимум 10 слов;
  • не бойтесь использовать короткие и выделяющиеся подзаголовки – с их помощью можно разделить текст на логические блоки, да и сами подзаголовки значительно помогут пользователю сориентироваться в искомой им информации;
  • используйте нумерованные и/или маркированные списки, они зачастую значительно уплотняют количество полезной информации «на квадратный сантиметр», а самое главное – облегчают восприятие этой информации;
  • крайне приветствуется использование каких-либо визуальных разделителей (например, тематические картинки).

Адаптируйте не только сайт, но и почтовые рассылки

Да-да, с мобильных устройств почту тоже иногда читают. Для этих целей можете воспользоваться такими сервисами, как MailChimp, AWeber. или Constant Contact.

Замените ссылки на кнопки

Такая рекомендация связана с тем, что на кнопку (особенно если это навигационная кнопка) попасть пальцем легче, чем на ссылку. Да, можно использовать стилус вместо пальца, но так крайне мало кто делает.

А вот теперь рекомендации по размеру таких кнопок:

  • корпорация Apple считает оптимальным размер кнопок не менее 44 пикселей по наименьшей стороне;
  • Microsoft считает оптимальным размер кнопок не менее 48 пикселей по наименьшей стороне (или 7 мм).

Бесплатные плагины адаптивной вёрстки для Wordpress

Мы уже многократно говорили, что основная фишка движка WordPress заключается в его простоте, бесплатности, а также в том, что для него написана огромная куча плагинов для решения различных задач. Адаптивная вёрстка тоже входит в список этих задач. Т.е. это как раз тот случай, когда задача решается одной кнопкой «Сделай мне хорошо».

Также стоит отметить, что на август 2018 года подавляющее большинство тем оформления уже имеют «встроенный» адаптивный дизайн, да и «заводская» тема WordPress тоже имеет адаптивную вёрстку. Тем не менее, если Ваш WordPress-сайт для мобильных устройств не адаптирован – вот Вам подборка бесплатных плагинов для решения этой задачи.

 Jetpack от WordPress.com (так и называется)

Всё, что требуется – установить данный плагин, активировать его, затем после установки нажимаете «Настроить JetPack».

Вас перекинет на страницу сайта wordpress.com, где Вам нужно будет зарегистрироваться/залогиниться. Далее, Вам понадобится нажать кнопку «Одобрить».

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

Затем листаете вниз, пока не найдёте выключатель мобильной темы. Кстати, там же есть еще 3 мини-настройки мобильной темы.

Однако, функционал плагина настолько широк, что по нему имеет смысл написать отдельную статью.

MobilePress (Автор: Tyler Reed)

 В трех словах:

  • прост;
  • удобен;
  • англоязычен.

WPtouch

Плагин написан на WAPL’е – языке, который был специально создан для настройки, рендеринга и доставки контента. Он использует собственный API для каждого гаджета – это гораздо круче сниффинга, т.к. структура адресов не затрагивается вообще.

Mobile Detector

Данный плагин крут тем, что умеет распознавать разрешение и диагональ устройств. И уже исходя из полученных данных принимает решения по адаптации. Согласитесь, разрешение 1280х720 при диагонали 5” и при диагонали 9” – это не одно и то же.

Имеется 7 предустановленных мобильных тем оформления.

Ключевые преимущества:

  • в базе более 5000 гаджетов;
  • умеет разделять «стандартные» смартфоны от «продвинутых»;
  • позволяет вести статистику по посещениям с мобильных устройств.

Сервисы для адаптации сайта онлайн

mobiSiteGalore

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

Основная фишка сервиса в том, что он позволяет «заточить» сайт не только под современные смартфоны, но и под старые телефоны, которые, возможно, всё еще живы.

MobStac

С помощью данного сервиса можно подготовить мобильный сайт на HTML5. Также имеется встроенный план монетизации.

 Mofuse

Адаптировать сайт для мобильных устройств с помощью этого сервиса можно двумя способами:

  • с помощью mofuse сделать все самостоятельно;
  • обратившись к команде специалистов.

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

Mobile App America

Основная фишка в улучшенных аспектах, касающихся SEO. Сервис поддерживает iPhone, Blackberry, а также Android-устройства.

Mobify

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

Краткий вывод

Помнится, еще Дарвином было установлено, что в процессе эволюции выживает тот, кто сильнее. За мобильным интернетом будущее, которое уже сейчас наступает 7-мильными шагами. Поэтому для выживания почти каждому из Вас, дорогие владельцы сайтов, необходимо адаптировать сайт под мобильные устройства.

P.S.

Нет, мы не забыли рассказать про внедрение AMP и Турбо-страниц. Просто это настолько обширная тема, что ее проще выделить в отдельную статью (возможно, даже в две статьи), чем рассматривать всё здесь. Обе технологии еще сыроваты, поэтому есть куча нюансов и ограничений, о которых нельзя умалчивать. Ограничения эти касаются как html-кода, так и JavaScript, а еще картинок, и т.д. Но одно можно сказать точно – эти 2 технологии имеет смысл использовать ТОЛЬКО в паре, т.к. одна из них работает только в Google, а вторая – только в Яндексе. Но это совсем другая история.


Подпишитесь на обновления
Лучшей оценкой нашего труда является ваша подписка на новые публикации. Мы очень постараемся быть интересными и обещаем не спамить.
 

(0)
Читайте также