Как правильно сделать мобильную версию сайта


Как сделать мобильную версию сайта?

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

Это очень важный этап оптимизации сайта, так как сегодня все больше людей имеют телефоны, смартфоны и планшеты, подключенные к интернету. И если на большом мониторе ваш сайт выглядит просто прекрасно, то на телефоне его, возможно, просто невозможно будет просматривать: шрифты будут ОЧЕНЬ маленькими, а дизайн будет СИЛЬНО перекошен. Человек сразу закроет сайт, а поисковая система поставит себе галочку: ОТКАЗ!

Как проверить сайт?

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

Начнём с сервиса, и воспользуемся инструментом от Google — developers.google.com. Вот какую печальную картину имеет мой сайт:

Как показано на картинке, мой сайт на смартфоне отображается так же, как отражался бы на обычном компьютере, и поэтому читать его будет ОЧЕНЬ трудно. К тому же, как сообщил мне Google, в шаблоне сайта есть элементы, которые мешают моему сайту быстро открываться на мобильных устройствах. И вот тут требуется пояснение.

Дело в том, что на мобильных девайсах обычно используется не очень быстрый интернет, у которого чаще всего ещё есть ограничения по трафику. И поэтому ожидается, что в мобильной версии будет меньше ненужного трафика.

Как решить проблему?

Тут есть несколько вариантов.

1. Оптимизировать данный шаблон, устранить ошибки и так далее

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

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

Как я это сделаю? Пока не знаю, как сделать так, чтобы сайт сам определял размер экрана и подставлял нужный шрифт. Хотя, если быть точным, я знаю как это называется:

2. Поставить адаптивный шаблон

Но для меня это тоже не выход, так как полностью менять шаблон сайта я не хочу, с этим я провозился слишком долго и он мне ОЧЕНЬ нравится. Может есть плагины, которые могут внести изменения в шаблон? Поискал, ничего не нашёл, предлагается только много адаптивных дизайнов. Как вариант, можно купить ПРЕМИУМ ШАБЛОН, такие шаблоны имеют много дополнительных функций и ОБЯЗАТЕЛЬНО такой шаблон будет адаптивным.

Вывод тут можно сделать такой: когда вы только начинаете делать свой сайт, то СРАЗУ выбирайте адаптивную тему. Как ещё можно решить мою проблему?



Если вам нравится ваш шаблон, но у вас не адаптивная верстка, то ОЧЕНЬ ХОРОШИМ ВАРИАНТОМ будет сделать его адаптивным. Чтобы сделать это своими силами нужно быть программистом, поэтому самым целесообразным решением будет заказать эту услугу у профессионалов.

За небольшую сумму вам профессионально настроят шаблон, устранят все ошибки и вам не нужно будет ничего кардинально менять. Такой адаптивный дизайн, как вы понимаете, поможет еще больше полюбить ваш сайт поисковиками, что увеличить его посещаемость.

3. Мобильная версия сайта

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

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

4. Как создать мобильную версию сайта проще всего?

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

Установил плагин WordPress Mobile Pack (Mobile Switcher) и сразу всё улучшилось!

Вроде всё хорошо, и проблема решена, но….

1. Не отображается реклама, плагин её режет.

2. В подвале две внешние ссылки.

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

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

Ну что же, попробую поискать что нибудь получше.

Нашёл ещё один плагин, который раньше как раз у меня стоял — WP Mobile Detector. На нём реклама отлично показывается, хотя ссылки в подвале тоже есть. Да и к тому же не отображаются картинки на сайте, а это тоже очень плохо.

Неужели нет чего то получше? Поищем…

И вот я на я нашёл САМЫЙ лучший плагин для мобильной версии сайта WPSmart Mobile. Из всех недостатков — это только ссылки в подвале, но мы их ведь можем убрать? Правда реклама осталась только в самой статье, но это мелочи, её можно встроить в сам мобильный шаблон, вечером займусь.

Что ещё прекрасно, что даже на планшете сайт выглядит отлично, как и на моём маленьком смартфоне. Не поленился и запустил Android на виртуальной машине, чтобы вам показать (о том, как установить андроид на виртуальную машину, можно прочитать ЗДЕСЬ.:

Ещё плагин имеет три варианта шаблонов, выбор не большой, но есть. Осталась мелочь — удалить ссылки в подвале, так, на всякий случай.

Тут оказалось все не так сложно. Идём в папку с установленным плагином и открываем файл base-functions.php — путь к нему: ВАШ САЙТ/wp-content/plugins/wpsmart-mobile/themes/base/base-functions.php

<div>
 Site optimized for mobile devices by <a href="http://www.wpsmart.com/mobile">WPSmart Mobile</a>
 <a href="http://wordpress.org/">Proudly powered by WordPress</a> | <a href="#">View Full Site</a>
 </div>

Удаляем этот кусок кода и все, ссылок в футере нет. Можно не удалять, а поставить свои ссылки. Но учтите, что при обновлении плагина всё, скорее всего, вернётся на круги своя. Или не обновляйте плагин, или всегда удаляйте.

ОЧЕНЬ ВАЖНО! В связи с тем, что google предъявляет теперь большие требования к мобильной версии сайта, именно ему нужно угодит. А он требует при своих тестах доступ в robots.txt к мобильному шаблону. Поэтому в robots.txt нужно ОБЯЗАТЕЛЬНО прописать:

Allow: /wp-content/plugins/wpsmart-mobile/themes

Только после этого тест на мобильность будет успешен:


Вот так я решил проблему с мобильной версией сайта, надеюсь, что мой опыт пригодится и вам:)

Дальнейшая доработка плагина WPSmart Mobile

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

ВАЖНО! После внесения изменений не обновляйте плагин, иначе вы потеряете все внесенные изменения!

Центровка картинок. Изначально картинки в шаблоне прижимаются к левому краю. На планшете это некрасиво. Нужно вот эту секцию в css привести к такому виду:

body img {
 display: block;
 margin: 0 auto;
 }

web - Как сделать мобильную версию сайта

Переполнение стека
  1. Около
  2. Товары
  3. Для команд
  1. Переполнение стека Общественные вопросы и ответы
  2. Переполнение стека для команд Где разработчики и технологи делятся частными знаниями с коллегами
.

php - Как разработать сайт для мобильной версии, не меняя доменное имя?

Переполнение стека
  1. Около
  2. Товары
  3. Для команд
  1. Переполнение стека Общественные вопросы и ответы
.

Как перенаправить на мобильную версию вашего сайта

Пользователи мобильных устройств

Если вы создали версию своего веб-сайта для мобильных устройств , вам необходимо убедиться, что перенаправляет посетителей мобильных устройств на ваш веб-сайт для мобильных устройств. Например, если кто-то посещает domain.com со своего телефона, вам понадобится способ перенаправить его на m.domain.com (мобильная версия вашего сайта, созданная на субдомене под названием « m ») .

Тогда возникает вопрос: «Как вы автоматически отправляете пользователей на мобильный сайт?»

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

Ищете новый дом для своего сайта WordPress? Попробуйте решения InMotion для хостинга WordPress для безопасных, оптимизированных серверов, настроенных в соответствии с вашим бюджетом.

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

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

Используйте Javascript или jQuery

Javascript можно использовать для обнаружения мобильных устройств, и есть много различных кодированных решений, которые вы можете найти в Интернете. Это хорошо обсуждаемая тема, просто убедитесь, что любой источник, который вы просматриваете, обновлен с использованием текущих рекомендуемых методов.Основная проблема с использованием кода, который ищет конкретные мобильные устройства, заключается в том, что его необходимо постоянно обновлять новыми устройствами.

Использование кода программирования для обнаружения мобильного браузера

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

Использовать универсальный файл ресурсов беспроводной сети (WURFL)

WURFL на самом деле состоит из API и файла конфигурации XML, которые предоставляют вам доступ к базам данных, которые содержат информацию о самых разных мобильных устройствах. Преимущество использования WURFL заключается в том, что, хотя код API может устареть, информация о мобильных устройствах регулярно обновляется. Вы можете периодически обновлять его и получать самый последний список используемых мобильных устройств. Вам нужно будет реализовать API на своем веб-сайте, чтобы использовать его.

Как видите, существует множество различных возможных решений для создания отдельного мобильного веб-сайта, оптимизированного для ваших пользователей. Однако лучшим решением, рекомендованным отраслью, является использование адаптивного дизайна . Это позволяет использовать только ОДИН набор кода для вашего сайта. Использование адаптивного дизайна - идеальное решение, поскольку оно экономит время и упрощает управление вашим сайтом. Не нужно беспокоиться об обновлении двух сайтов и о том, чтобы оба сайта всегда работали.

Чтобы узнать больше об использовании адаптивного дизайна, прочтите нашу статью «Введение: создание адаптивного веб-дизайна».

.

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

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

Тогда в мире было 7,2 миллиарда гаджетов, которые росли в пять раз быстрее, чем мы. С тех пор Mobilegeddon стал фактом, и Google изменил свой алгоритм в пользу мобильных сайтов .

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

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

Итак, приступим.

Что такое веб-сайт, удобный для мобильных устройств?

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

Веб-сайт

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

Он прокручивается, текст выглядит четким, на нем много белого пространства, и, что самое главное, все, на что вы хотите нажать, доступно для кликов и действительно работает!

Если я потенциальный покупатель, ищущий новый инструмент SEO и просто просматривающий сайты на мобильных устройствах, это хорошее первое впечатление, которое может подтолкнуть меня дальше по их воронке продаж.

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

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

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

Чтобы решить эту проблему, современные шаблоны веб-сайтов переходят в формат масштабирования, позволяющий быстро подстраиваться под устройство, на котором они отображаются.

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

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

Проверить, оптимизирован ли ваш вид для мобильных устройств, очень просто - у Google есть удобный для мобильных устройств тестер веб-сайтов под названием Webmaster Tool , чтобы делать именно это, и он доступен прямо здесь, .

Все, что вам нужно сделать, это вставить URL-адрес вашей веб-страницы и нажать кнопку АНАЛИЗ.

Google Test проанализирует ваш веб-сайт и покажет результат.

Анализ вашей веб-страницы может занять некоторое время…

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

В случае успеха вы сможете просматривать мобильную версию своего веб-сайта так, как ее видит робот Googlebot:

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

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

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

.

Смотрите также

Поделиться в соц. сетях

Опубликовать в Facebook
Опубликовать в Одноклассники
Вы можете оставить комментарий, или ссылку на Ваш сайт.

Оставить комментарий