Как сделать сайт мобильным

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

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

Вот почему имеет смысл, что крупные парни, такие как Facebook (с его вкладкой «Бизнес-страницы») и Google (используя свой проект «Ускоренные мобильные страницы [AMP]»), стремятся извлечь выгоду из увеличения использования мобильных устройств и трафика.

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

Но прежде чем продолжить, важно уточнить, что вам может не о чем беспокоиться. Если вы управляете интернет-магазином через основные платформы, такие как Shopify, BigCommerce или Amazon, то это не проблема. Эти сайты уже созданы для мобильных устройств.

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

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

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

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

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

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

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

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

Итак, вы можете подумать: «Вы продолжаете говорить об отзывчивости и мобильности, но что это значит, точно?»

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

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

Адаптивный дизайн

В этом дизайне используются пропорциональные сетки, гибкие элементы страницы и изображения, а также различные правила стилевого оформления CSS, позволяющие изменить восприятие пользователя в зависимости от того, какое устройство он использует для доступа к сайту. Короче говоря, страница и ее содержимое «реагируют» на любые размеры экрана устройства, на котором они просматриваются. Он обслуживает сайт без изменения URL-адреса и структуры HTML, что полезно для поисковой оптимизации, так как не приходится иметь дело с каноническими тегами и дублирующимся контентом. Адаптивный дизайн, как правило, создается для настольных компьютеров, но адаптируется под все устройства, как и нисходящий подход, и на сегодняшний день является наиболее популярным и экономичным методом, используемым сегодня.

Адаптивный дизайн, также называемый Google «Динамическое обслуживание», похож на адаптивный дизайн в том смысле, что он не меняет структуру URL. Тем не менее, сайт определяет, на каком устройстве просматривает пользователь, и динамически генерирует другую версию HTML сайта, чтобы он отображался таким образом, который подходит для этого устройства. Как правило, он сначала разрабатывался как мобильный, а затем перешел на настольный компьютер — подход «снизу вверх», который обеспечивает лучшее взаимодействие с пользователем.

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

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

Вы можете увидеть примеры этого, когда войдете на сайт и заметите поддомен, начинающийся с «m». Одним из примеров является мобильный сайт Facebook, который выглядит так: «m.facebook.com», а не просто «Facebook». com. »Эта настройка доставляет различные HTML-страницы по отдельным URL-адресам в зависимости от того, какое устройство обнаружено.

Хотя многие интернет-магазины по-прежнему используют эту конфигурацию, она постепенно сокращается, поскольку создает ненужное дублирование контента и требует значительно большего объема ресурсов для разработки и проектирования для обновления и обслуживания.

«Но подождите минутку, вы что-то упустили», — говорите вы. — «О чем это AMP, о котором вы продолжаете говорить?» Вы читаете мои мысли; мы рассмотрим это дальше.


Что такое Google AMP (и работает ли он)?

AMP — это ответ Google за попытку оптимизировать контент для мобильных пользователей. Это пользовательская (и ограниченная) версия HTML и JavaScript с целью удаления ненужного кода, который потенциально может замедлить скорость страниц на мобильных устройствах.

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

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

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

Главное, о чем вам нужно знать, это то, что, хотя AMP повысит рейтинг вашей страницы при поиске с мобильных устройств, вы потеряете контроль над контентом, и это повлияет на аналитику. По сути, вы не можете использовать тег <script>, что означает, что вы не можете встраивать любые коды отслеживания аналитики на свои страницы AMP. Когда вы занимаетесь онлайн-бизнесом, аналитика является одним из важнейших факторов, помогающих оценить стоимость вашего бизнеса и продать его за то, что он стоит. Так что имейте это в виду, если вы решите пойти по маршруту AMP.

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

Итак, теперь вы знаете, что вам нужно убедиться, что ваш сайт реагирует на мобильные устройства, чтобы не пропустить потенциальные продажи — но как вы обновите свой сайт для мобильных устройств?
Несколько советов, как сделать ваш существующий сайт мобильным

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

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


Совет 1: проверьте, реагирует ли ваш сайт

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

Большинство платформ для ведения блогов и онлайн-продаж по умолчанию уже адаптированы для мобильных устройств; даже темы WordPress на любом из основных тематических рынков, таких как Divi и Thrive Themes, обновили свои темы, чтобы они были адаптивными для мобильных устройств из коробки.

Сначала перейдите на URL MobileTest.me, сайт, который эмулирует различные мобильные устройства. Затем, после ввода URL-адреса вашего сайта, он отображает ваш сайт так, как он будет отображаться на выбранном устройстве.

еперь вы можете выбирать из множества мобильных телефонов или планшетов, но если вы хотите немного сузить его, вы можете войти в свою учетную запись Google Analytics и найти вкладку «АУДИТОРИЯ» в левой части экрана. Оказавшись здесь, нажмите на раскрывающееся меню «Мобильный», а затем «Обзор». Справа вы увидите разбивку того, какая часть вашего трафика поступает с настольных компьютеров, мобильных устройств и планшетов (под мобильными телефонами подразумеваются телефоны).

Мобильный друг 2

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

Теперь вот самое интересное.

Предупреждающее слово, если вы не разбираетесь в технологиях, или термины «тема», «HTML» или «CSS» волнуют вас: ОСТАНОВИТЕСЬ СЕЙЧАС и переходите к третьему совету. Игра с темами и любым кодом на вашем сайте может (и более чем вероятно) что-то сломать на вашем сайте.

Но если вы рискуете или просто любите кодировать, то пора опускаться до грязи! 🙂

Вариант 1. Создание адаптивного сайта с самого начала.

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

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

Вариант 2. Обновите текущую тему

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

Вариант 3: установить мобильный адаптивный плагин

Если ваш сайт построен на популярной системе управления контентом (CMS), такой как WordPress, Joomla !, или Drupal, есть несколько плагинов, которые могут предоставить мобильную функциональность вашему сайту:

Мобильные плагины для WordPress. Есть несколько вариантов WordPress, которые выделяют добавление мобильных функций на ваш существующий сайт. WPtouch должен быть лучшим платным плагином, который мы когда-либо видели на рынке, для создания настраиваемого мобильного интерфейса на вашем сайте. Существует также версия, которая имеет дополнительные функции специально для сайтов электронной коммерции. Для бесплатной альтернативы есть плагин Jetpack от WordPress.com, который предоставляет способ реализовать простую мобильную тему. Вы также можете использовать WP Smush Pro (есть бесплатная версия) для оптимизации и дальнейшего сжатия ваших изображений, что поможет сократить время загрузки на мобильных устройствах.

Joomla! Мобильные плагины — Вам следует использовать плагины, только если вы используете более старую версию Joomla! версия, такая как 2.5 или ниже, как Joomla! версия 3.x + уже поставляется с мобильной поддержкой. Вы можете использовать плагины, такие как JoomlaShine или Responsivizer, чтобы сделать ваш сайт мобильным.

Drupal Mobile Plugins — Drupal — еще одна CMS, популярная для создания интернет-магазинов. Есть два модуля: Mobile Theme и ThemeKey. Эти модули могут определять, находится ли пользователь на мобильном устройстве, например на телефоне или планшете, и затем выводить версию сайта, удобную для мобильных устройств.

Вы можете войти в свою учетную запись Google Analytics и найти вкладку «АУДИТОРИЯ» в левой части экрана. Оказалось здесь, нажмите на раскрывающееся меню «Мобильный», а затем «Обзор». Мобильные телефоны и планшеты (под мобильными телефонами подразумевают телефоны).

Если вы просматриваете сайт, то, скорее всего, ваш сайт уже реагирует на мобильные устройства. Для этого вам нужно обновить сайт, чтобы он отвечал требованиям.
Совет 2. Используйте оптимизационные решения для вашего сайта

Теперь вот самое интересное.

Предупреждающее слово, если вы не разбираетесь в технологии, или в терминах «тема», «HTML» или «CSS» волнует вас: ОСТАНОВИТЕСЬ СЕЙЧАС и переходите к третьему совету. Может быть (и более чем вероятно) что-то сломалось на вашем сайте.

Вариант 1. Создание адаптивного сайта с самого начала.

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

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

Вариант 2. Обновите текущую тему

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

Вариант 3: установить мобильный адаптивный плагин

Если ваш сайт построен на популярной системе управления контентом (CMS), такой как WordPress, Joomla! Или Drupal, есть несколько плагинов, которые могут обеспечить мобильную функциональность вашего сайта:

Мобильные плагины для WordPress. Есть несколько вариантов WordPress, которые добавили мобильные функции на ваш существующий сайт. WPtouch должен быть лучшим платным плагином, который мы когда-либо видели на рынке, для создания настраиваемого мобильного интерфейса на вашем сайте. Существует также версия, которая имеет дополнительные функции специально для сайтов электронной коммерции. Для бесплатной альтернативы есть плагин Jetpack от WordPress.com, который предоставляет возможность реализовать простую мобильную тему. Вы также можете использовать WP Smush Pro (есть бесплатная версия) для оптимизации и расширения возможностей загрузки изображений, что поможет вам загружать их на мобильных устройствах.

Joomla! Мобильные плагины — Вы должны использовать плагины, только если вы используете более старую версию Joomla! версия, такая как 2.5 или ниже, как Joomla! версия 3.x + уже существует с мобильной поддержкой. JoomlaShine или Responsivizer, чтобы сделать ваш сайт мобильным.

Drupal Mobile Plugins — Drupal — еще одна CMS, популярная для создания интернет-магазинов. Есть два модуля: Mobile Theme и ThemeKey. Эти модули могут быть доступны для мобильных устройств, например, для телефона или планшета.

Станьте теперь мобильными

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

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

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

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

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