Сайт под мобильные устройства: как адаптировать сайт для продвижения в Google ✅ статья Artsofte Digital

20 Дек 2018   | Разное

Содержание

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

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

Cодержание:

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

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

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

Технологии прошлого, такие как например WAP, могли обеспечивать нормальную работу только сильно урезанных версий корпоративных ресурсов и практически не оставляли возможностей для реализации достойного дизайна, а также какой-либо функциональности, поэтому пользователи мобильных устройств не очень активно посещали их. Повышение посещаемости, кстати, стало одним из наиболее весомых факторов в пользу разработки мобильных версий сайтов. Если в 2015 году доля посетителей веб-ресурсов, заходивших с мобильного устройства (смартфона или планшета) в среднем составляла 35-40%, то к концу 2016 года она уже уверено подошла к отметке 55% и продолжает расти.

Прежде всего, это сказывается на монетизации ресурса. Сайт для корпоративного сектора был и остается инструментом продаж – как прямых, так и косвенных. Если в результате того, что ресурс не отвечает техническим возможностям посетителя, фирма начинает терять доход, значит, вопрос адаптации сайта становится очень актуальным. Даже незначительное (в пределах 0,5%) количество отказов пользователей может исчисляться высокими потерями в абсолютном выражении, что является недопустимой ситуацией для собственников бизнеса, которая подлежит как можно скорейшему исправлению.

Наряду с удобством сайта для пользователей, которое повышает конверсию ресурса и лояльность со стороны покупателей, большое значение имеет приоритет таких ресурсов в поисковой выдаче. Google еще в 2015 году прямо заявил о своем намерении ранжировать адаптивные сайты в результатах поиска выше порталов, рассчитанных только на десктопную версию. Вывод же сайта в Топ-10 поисковой  выдачи является конечной целью любого SEO-продвижения и обеспечивает рост продаж. Инструменты поискового продвижения как в Google, так и Yandex, объединяются в консоли, позволяющие проанализировать степень оптимизации веб-страницы относительно возможностей мобильных устройств.

Способы оптимизации веб-страницы под мобильные устройства

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

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

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

Мобильная версия сайта и специализированное приложение

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

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

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

  • сложность и дороговизна разработки. Фактически речь идет о создании нового сайта с соответствующими затратами на дизайн и программирование;
  • отличающийся URL мобильного сайта – как правило, мобильная версия имеет приставку m. к существующему адресу (например, m. facebook.com) и требует редиректа для мобильных устройств;
  • необходимость двойной работы и двойного контроля за контентом сайтов. Мобильная версия должна обновляться одновременно с десктопной, иметь аналогичное наполнение и требует от контент-менеджера таких же трудозатрат.

Во втором случае речь идет о создании полноценного приложения-оболочки, разработанной под конкретную платформу устройства (Android, iOS, Windows Phone) или кросс-платформенное решение. Оно использует один и тот же программный интерфейс и средства работы с базой данных (прикладной программный интерфейс, Application Programming Interface, API), что и основной сайт, однако его дизайн органичнее смотрится, а и функционал лучше приспособлен для экранов смартфонов и планшетов. Плюсом такого решения являются все достоинства отдельной мобильной версии и единая точка управления контентом. Содержимое обновляется один раз в одном месте, а затем используется разными оболочками.

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

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

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

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

Использование медиа-запросов CSS

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

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

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

На сегодняшний день большинство новых сайтов разрабатывается и создается по принципу «mobile first». Это означает, что дизайн нового сайта отрисовывается в первую очередь так, как он выглядел бы на экране смартфона, затем планшетного ПК и уже после этого разрабатывается его десктопная версия. Затем по тому же принципу создается HTML-разметка страницы, что в силу определённых причин облегчает работу программисту. При помощи стилей CSS веб-странице придается вид в соответствие с разработанным дизайном и порядком создания веб-интерфейса (смартфон – планшет – десктоп).

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

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

Адаптация посредством языка Javascript

Широкое распространение языка Javascript, используемого для придания элементам веб-страниц разнообразного поведения, позволяет активно задействовать его для мобильной адаптации существующего сайта. Он не только дополняет медиа-запросы CSS, но и позволяет активно манипулировать имеющейся разметкой, поэтому реализация такого подхода – это отличный способ максимально выгодно и быстро добиться желаемого результата. Если главным преимуществом мобильной версии является ее изначальная компоновка под мобильные устройства, то использование Javascript может «на лету», то есть в процессе рендеринга, изменять разметку страниц сайта, добавляя, скрывая или удаляя необходимые нам элементы.

Преимуществом использования Javascript является скорость исполнения операций над элементами страниц и гибкость самого языка. Все подобные операции выполняются Javascript на стороне клиента, то есть с задействованием браузера пользователя, при этом потребляя определенный объем оперативной памяти. Этот факт является одновременно и преимуществом, и недостатком. В случае наличия у пользователя высокопроизводительного устройства с высокими техническими характеристиками, рендеринг мобильного дизайна выполняется очень быстро без потери производительности. Кроме того, все операции, выполняемые на странице сайта, не задействуют ресурсы сервера и не требуют передачи данных по сети.

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

Динамически подгружаемая версия разметки

Этот принцип похож на использование Javascript, однако в данном случае система управления контентом  (CMS) сайта анализирует тип устройства пользователя и на серверной стороне подгружает тот вариант шаблона сайта, разметка которого более  приспособлена для данного устройства. Для этого шаблон сайта (называемый еще темой) должен изначально предусматривать подходящие варианты для наиболее популярных размеров и разрешений экрана. На сегодня, как правило, практически все разработчики платных шаблонов обеспечивают данную возможность.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Поделиться

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

Содержание статьи

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

Итак, существует три способа построения мобильных версий сайтов:

  1. Адаптивный дизайн. Страница сайта в данном случае не меняется, но CSS-файл применяет другие правила, в зависимости от ширины окна браузера, и “адаптируется” под него.
  2. Отдельный мобильный сайт. Он размещается на поддомене или в подкаталоге, иногда основной и мобильный сайт имеют одинаковый URL. Загрузка HTML-кода зависит от значения user-agent («динамической выдачи»). Если URL разный, то структура страниц обычно сохраняется, но ничто не мешает их изменить, так как эти версии сайтов хранятся в разных каталогах. Отличный пример – мобильный сайт ВКонтакте (m.vk.com).
  3. Мобильная версия сайта или RESS (Responsive Design + Server Side). Этот метод сложный в разработке, но включает в себя преимущества как адаптивного дизайна, так и отдельного мобильного сайта.

Прогрессивные веб-приложения

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

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

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

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

Тенденции веб-дизайна

  1. «Mobile First»

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

  1. Навигация

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

  1. Размеры экрана

Большинство смартфонов имеют расширение 320 пикселей.  Многие ориентируются на 240. Чтобы все элементы были в рамках страницы, нужно установить 100% в табличке стилей CSS, тогда они будут подстраиваться под ширину экрана.

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

  1. Тачскрин

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

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

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

  1. По возможности нужно отказаться от ввода текста.
  2. Не пренебрегайте такими возможностями платформы, как функция «click to call» или адрес компании в виде ссылки (загрузка карты с маршрутом).

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

При адаптивном дизайне используется один HTML-код для всех размеров экранов. Все элементы меняются в зависимости от правил, которые прописывают в файле CSS media.

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

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

Правила верстки

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

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

Поисковую строку лучше заменять иконкой «увеличительное стекло». А верхнее меню сделать выпадающим. Это обеспечивает удобство использования и экономит пространство.

Что такое Progressive Web Apps

Любую реорганизацию начинают с ключевых блоков, а менее значимые элементы не отображают на усмотрение дизайнера.

Самым распространенным способом мобильной верстки является создание макета с одной колонкой. При этом весь контент нужно разделить на отдельные блоки. Например:

  • Весь контент находится в одной колонке, но разделяется на блоки с подсказками. В верхней части располагают элементы навигации;
  • «Гармошка» — прием, когда контент скрывается под заголовками в виде кнопок.

Все блоки, которые удалены с мобильной версии, необходимо внести в HTML-код и скрыть их отображение на определенных устройствах.

Что касается разрешения для адаптивной верстки, то нужно просмотреть аналитику самых популярных моделей разных устройств или зайти на Firefox -> Открыть меню -> Разработка -> Адаптивный дизайн. Кроме того, можно использовать растягивание с шагом по 100 пикселей.

Удачные примеры адаптивных сайтов:

  1. New Adventures In Web Design Conference 2012

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

  1. Ribot

Дизайн этого сайта удобен для экранов всех гаджетов и отображает всю информацию о компании и сервисе.

  1. Adaptive Web Design – рекламный сайт книги, которая ответит на все вопросы об адаптативном дизайне. Естественно, выполнен сайт на высшем уровне.

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

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

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

Перед разработкой важно проверить ключевые запросы, по которым пользователи ищут данный контент. Эту информацию можно просмотреть в Google Analytics в отчете «Поисковая оптимизация».

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

Преимущества и недостатки этих способов разработки

ПреимуществаНедостатки
Адаптивный дизайн●       Удобство разработки. Вся структура сайта подстраивается под разную ширину экранов;

●       Не нужно писать сайт с нуля, достаточно внести изменения в CSS и HTML;

●       Простая поддержка такого продукта;

●       Наличие одного адреса позитивно сказывается на продвижении сайта.

 

●       Разные задачи мобильных пользователей и пользователей ПК;

●       Медленная загрузка;

●       Адаптивный сайт нельзя отключить и перейти на обычный домен.

Мобильный сайт●       Так как он существует отдельно от основной версии, в него легко вносить изменения;

●       Удобен для пользователей;

●       Быстрая загрузка;

●       Есть возможность перехода на основной сайт.

●       Разные адреса десктопной и мобильной версии;

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

Заключение

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

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

Технология позволяет совместить качества мобильного сайта и приложения. Пользователь заходит на сайт и сразу же получает предложение установить его на рабочем столе. Установка происходит по одному клику (ярлык сохраняется на рабочем столе). PWA занимает минимум места (до 200 Кб) и не тратит ресурсы мобильного устройства, работает в режиме оффлайн и при плохой Интернет-связи, автоматически обновляет контент при наличии хорошего интернет-соединения, загружается мгновенно (!).

Кроме того, в технологию «вшита» функция push-уведомлений, которые возвращают посетителей на сайт, напоминая им о нем. Наконец, раскрутка сайта с PWA происходит по той же схеме, что и раскрутка обычного сайта (не приложения — иметь дело с Интернет-магазинами приложений даже не придется) при помощи обычных маркетинговых инструментов, без задействования дополнительного бюджета. Если учесть, что уже с лета компания Google анонсирует введение ранжирования мобильных страниц по скорости загрузки, то становится ясно — супербыстрые прогрессивные веб-приложения PWA помогут добиться лидерских позиций в этом рейтинге.

Вас также может заинтересовать

Способы адаптации и оптимизации сайта под мобильные устройства — Plerdy

Мобильная версия сайта — это то, как видит ваш сайт пользователь с мобильного устройства — телефона или планшета.

По данным Statcounter, в мире более половины пользователей ищут что-то в интернете именно с мобильных. Google, в свою очередь, в руководстве для занятых руководителей The Mobile Playbook Google утверждает, что 40% пользователей уйдут на сайт конкурента, если у него есть хорошая мобильная версия. Неслучайно не оптимизированная мобильная версия или ее отсутствие снижает рейтинг интернет-ресурса в поисковой выдаче этого поисковика.

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

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

Если ваш сайт адаптирован под мобильные устройства, но вы не уверены правильно ли выполнена оптимизация, воспользуйтесь специальной проверкой от Google. Просто введите URL вашего сайта на сайте бесплатного сервиса Mobile-Friendly Test и нажмите кнопку “Проверить страницу”. Сервис оценить ваш сайт, а также предоставит полезные советы по его улучшению.

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

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

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

Быстрый адаптивный дизайн сайта

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

  1. Знакомство с инструкциями Bootstrap — популярного фреймворка для разработки адаптивных сайтов. Собственно в них и расписаны все последующие шаги.
  2. Подключение CSS, а если этого требуют компоненты JS и jQuery.
  3. Проверка страниц на соответствие последним стандартами дизайна и разработки, например, используется ли HTML5 и метатег viewport, который отвечает за правильное отображение видимой части страницы на экранах разного размера.

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

Преимущества адаптивного дизайна:

  • Не нужно создавать два отдельных макета. При адаптивном дизайне достаточно одного макета, который автоматически будет приспосабливаться к любым размерам экранов.
  • Отсутствие лишней нагрузки на SEO-специалистов: не нужно создавать отдельные ссылки на страницы, так как мобильная версия всегда имеет приставку . m или .mobile; добавлять мета-теги rel=«alternative» и rel=«canonical», объясняющие поисковой системе, что контент в мобильной версии не был украден и продублирован; волноваться о правильно настроенных редиректах между версиями.
  • Управление одним сайтом, а не двумя. Если нужно внести изменения, то они автоматически станут видны для пользователей, которые посещают ваш ресурс как с десктопа, так и с мобильных устройств.
  • Google любит адаптивные сайты. И вот почему: адаптивные сайты быстрее сканируются роботом Googlebot, а страницы индексируются точнее. Единый URL также удобнее для пользователей. Таким сайтам не нужна переадресация, а это сокращает время загрузки. На адаптивных сайтах не возникает типичных ошибок, как на мобильных сайтах.

Шаблоны и плагины

Сравнительно быстро адаптировать сайт можно с помощью готовых тем (шаблонов) или плагинов. Такая опция не требует технических навыков. Однако доступна она не всем — только владельцам сайтов на отдельных CMS.

Первый вариант — установить специальный плагин для существующей десктопной темы, который преобразует ее под мобильные устройства. Например, на сайтах Joomla с этой задачей справятся плагины Responsivizer и Mobile Joomla, на Drupal сайтах — ThemeKey и MobileTheme. Для WordPress подойдёт WPtouch. А еще не так давно, точнее до марта, 2020 года часто использовался плагин для мобильной оптимизации JetPack. Однако разработчики плагина удалили функцию mobile theme, которая собственно и отвечала за адаптацию сайта под мобильные устройства, объясняя это тем, что “большинство тем теперь по умолчанию включают мобильный дизайн, поэтому в этой функции больше нет необходимости”. Кроме того, они рекомендуют использовать адаптивные темы и не усложнять себе задачу.

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

Чтобы быстро найти и установить шаблон

  • В WordPress предварительно найдите и загрузите тему на свой компьютер, перейдите в админпанель, Внешний вид & Темы & Добавить новую.
    Примечание: большой список платных и бесплатных тем можно найти на сайте WordPress.org. Перед скачиванием внимательно прочитайте описание и отзывы, обратите внимание на количество скачиваний.
  • В Joomla, панель администратора & Расширения & Менеджер расширений & Загрузить файл пакета.
  • В Drupal, предварительно скачайте тему из сайта drupal.org, панель администратора & Оформление & Установить новую тему.

А как быть с магазином на OpenCart?

C OpenCart все немного сложнее. Да, в интернете вы найдете множество адаптивных шаблонов, разработанных специально для этой CMS, однако их не всегда можно применить. Дело в том, что сайт OpenCart состоит из разных функциональных модулей. Как правило, модулей “из коробки” недостаточно для полноценного интернет-магазина. Для этого используются дополнительные кастомные модули, в большинстве случаев не поддерживаемые мобильной темой, в которой предусмотрен лишь стандартный ограниченный функционал. Чтобы OpenCart магазин корректно отображался и работал на разных устройствах можно:

  • Разработать отдельный мобильный дизайн, то есть отдельную мобильную версию сайта и настроить на нее редирект, предварительно определяя с какого устройства заходит пользователей (контакта с кодом не избежать).
  • Выполнить адаптивную Bootstrup верстку, не разрабатывая отдельный дизайн (макет) для мобильных.

Отдельная версия сайта на поддомене

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

Обратите внимание! Для того чтобы показать Google, что это не дублированный контент, а мобильная версия сайта нужно использовать специальные метатеги rel=«alternative» и rel=«canonical».

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

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

Чтобы создать мобильную версию сайта можно воспользоваться специальными онлайн-сервисами — конструкторами мобильной версии. Подобное решение подойдет владельцам небольших и средних сайтов разного типа, не имеющим опыта кодирования. Наиболее популярные Duda Mobile и Wix. С их помощью вы сможете самостоятельно преобразовать свой десктопный сайт таким образом, что все его содержимое будет ужато, лишние элементы и функционал урезаны для того, чтобы ресурсом было удобно пользоваться на мобильных устройствах.

Преимущества мобильной версии сайта:
  • Высокая скорость загрузки сайта. Так как лишний функционал и элементы с десктопной версии на мобильную не переносятся, это уменьшает нагрузку и повышается скорость загрузки. А последнее позитивно влияет на позиции SEO.
  • Юзабилити и SEO. Так как в мобильной версии сайта нет ничего лишнего, что могло бы помешать или отвлечь пользователя (неудобные формы, второстепенные тексты и блоки, кнопки, запутанная навигация) улучшаются поведенческие факторы. Пользовательский опыт влияет на поведенческие метрики, а те, в свою очередь, на ранжирование сайта, то есть “высоту” его позиции в выдаче.
  • Гибкость. Отдельная версия означает отдельный код. Вы можете быстро и легко вносить изменения в мобильный сайт, не рискуя что-то сломать в десктопе и наоборот.
  • Выбор версии. При наличии мобильной версии сайта пользователь, в случае необходимости, всегда может перейти на полную версию.

ТОП-5 рекомендаций, как улучшить работу мобильного сайта

1. Не игнорируйте скорость загрузки

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

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

Обратите внимание! В идеале скорость ответа сервера не должна превышать 0.2 с. Проверить этот показатель можно в Google Analytics: Поведение & Скорость загрузки сайта & Обзор.

Также проверить скорость загрузки сайта можно в специальном бесплатном сервисе Google PageSpeed Insights или  Pingdom Tools.

2. Проверяйте отображение элементов

Не забывайте проверять, как отображаются элементы вашего сайта в мобильной версии, ведь согласно исследованию журналиста Тони Хейла издания Times пользователь, который впервые попал на ваш ресурс решает всего за 15 секунд — остаться или покинуть страницу.  Поэтому очень важно, чтобы мобильный сайт был интуитивно понятным и удобным в использовании.

Для этого не забудьте проверить страницу с помощью Mobile-Friendly Test. Не стоит игнорировать советы по оптимизации страницы от поискового гиганта Google, особенно учитывая, что они бесплатны!

3. Придерживайтесь принципов Mobile First

В идеале, при создании сайта, нужно начинать с разработки макета именно под мобильные. Ведь разместить множество элементов на большом экране не так сложно, как на маленьком. Кроме этого, Google ставит в приоритет именно мобильную версию сайта. Чтобы завоевать топовые позиции в выдаче, стоит уделить должное внимание именно адаптации под мобильные устройства. Опять-таки, проверить на сколько ваш сайт оптимизирован под мобильные устройства можно с помощью Mobile Friendly Test.

4. Используйте технологию AMP

Если загрузка сайта длится более 3 сек, половина пользователей покидают его, согласно статистике Google, наведенной Девидом Кикпатриком в статье на портале MarketingDive.

Существенно ускорить загрузку страниц можно с помощью технологии AMP, которая сжимает объем данных страниц, уменьшая его в 8 раз. Эта технология разработана Google с целью повышения скорости загрузки сайтов. В результатах поиска ресурсы, использующие эту технологию, обозначены специальной иконкой-молнией. А также имеют URL с приставкой /amp.

Однако такой метод ускорения страниц подойдет не всем. Дело в том, что пользователь, попадающий на сайт с AMP, автоматически переадресовывается на упрощенную версию, где, скорее всего, не будет ни виджетов, ни раздела комментариев, ни дополнительных блоков, например, “Рекомендованное”, утяжеляющих страницу. Собственно именно так и достигается молниеносная загрузка при AMP.

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

Также стоит обратить внимание на Google AMP Cache — метод, при котором данные сайта сохраняются (изображения, шрифты и т.д.), большие картинки автоматически конвертируются в форматы для мобильных устройств. Такие свойства помогают улучшить производительность сервера, а ваш сайт будет значительно лучше работать на мобильных устройствах.

Итоги

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

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

  • Адаптивный дизайн. Если у вас есть навыки веб-разработки или разработчик в штате, вы можете адаптировать десктопную версию таким образом, что она будет автоматически подстраиваться под экраны разного расширения посредством CSS. “Заставить” сайт адаптироваться под мобильные можно с помощью специальных плагинов или адаптивной темы. Для этого не нужны технические навыки. Опция доступна владельцам сайтов на CMS WordPress, Joomla и Drupal.
  • Мобильная версия сайта. Если речь идет о большом проекте, портале, крупном интернет-магазине, стоит задуматься о разработке самостоятельной отдельной мобильной версии. Здесь не обойтись без помощи команды разработчиков.  Если вы владелец небольшого или среднего e-commerce сайта, блога, сайта-визитки и т. д., можно попробовать преобразовать ваш сайт с помощью специальных конструкторов мобильных сайтов. Навыки программирования не понадобятся.

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

Денис Ежков, эксперт курса «Адаптивная и мобильная вёрстка» и руководитель отдела вёрстки ITECH.group, поделился опытом оценки дизайн-макетов для мобильной вёрстки.  

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

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

Есть что скрывать

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

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

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

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

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

Программа обучения: «HTML-верстка: с нуля до первого макета»

Не дело принципа

Принцип mobile-first — лишь рекомендация к вёрстке адаптивных страниц. В одних случаях он полезен, а в других только помешает из-за сложности интерфейса.

Очень часто в заказной разработке заказчик не сразу видит конечный вид какого-то сложного сервиса. Например, конфигуратор комплектаций автомобиля. Элементы страницы, с которыми должен взаимодействовать пользователь, красиво выглядят на макете, но могут быть абсолютно нежизнеспособны в реально свёрстанном интерфейсе. Такой конфигуратор, в первую очередь, должен быть удобен для использования на десктопе, это основная доля посетителей. Соответственно mobile-first в таком случае будет вторичен.

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

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

Loading…

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

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

О резиновых макетах

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

Как правило, для адаптивных страниц характерны точки разрыва, соответствующие популярным разрешениям устройств: 1280, 1024, 960, 768, 640, 480, 320 пикселей.

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

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

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

О тестировании

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

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

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

Читать ещё: «10 ошибок начинающего верстальщика и как их избежать»

И, наконец…

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

  1. Упорядоченность в слоях. Слои с hover-состояниями или со всплывающими окнами должны быть вынесены отдельно.
  2. Наличие артборда со всеми стилистическими элементами. Там должны присутствовать используемые цвета, шрифты, элементы интерфейса.
  3. К макету должны прилагаться шрифты. В идеальном случае — нарезанные картинки и иконки.
  4. В макете должны быть вертикальные сетки, а также горизонтальные, отмеряющие вертикальный ритм.
  5. Макет должен быть очищен от неиспользуемых слоёв.

Успехов!

Мнение автора и редакции может не совпадать. Хотите написать колонку для «Нетологии»? Читайте наши условия публикации.

Зачем адаптировать сайт под мобильные устройства? / Арктическая Лаборатория

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

После заявления «Яндекса» об отключении влияния ссылок на поисковое ранжирование  трендом стали поведенческие факторы (дальше — ПФ). Каждый, кто мало-мальски интересуется процессом продвижения сайтов, сталкивался с этим понятием.

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

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

Рассматривать будем внутренние ПФ. Согласитесь, что чем удобнее сделан сайт, чем проще на нем найти и заказать продукт/услугу, тем больше посетителей конвертируется в клиентов.

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

Взгляните на этот показатель одного из российских сайтов. Статистика представлена за март 2015 года.

Обратите внимание: на сайте, который некорректно отображается с мобильных устройств, показатель отказов со смартфонов и планшетов в 2-2.5 раза превышает показатель отказов с ПК.

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

Что выбрать — адаптивный дизайн или мобильную версию

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

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

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

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

Мобильная версия

Мобильная версия –  фактически новый сайт, который чаще всего располагается на поддомене основного: m.site.ru, mobile.site.ru и т.п. С точки зрения SEO это не слишком хорошо из-за большого количества условных редиректов с основной версии на мобильную. Все-таки site.ru/page и m.site.ru/page – разные страницы с точки зрения поисковых систем.

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

Разумеется, этот вариант стоит дороже, чем адаптивный дизайн.

Однако совсем не обязательно платить огромные деньги за создание мобильной версии. К примеру, сайт dudamobile.com сделает это для вас за $9 в месяц. Можно оплатить пару месяцев, чтобы почувствовать разницу.

Вердикт

Что выбрать – мобильную версию или адаптивную верстку – решать вам, но все же отмечу:  

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

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

Как это делается? Способы быстро адаптировать сайт под мобильные устройства

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

Зачем это надо?

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

1

Рост показателей мобильного трафика

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

2

Повышение позиций в поисковой выдаче

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

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

Разбираемся в основах. Адаптивная верстка сайта нужна для адекватного отображения страниц , которые будут корректны на экранах гаджетов всех размеров. Современные разработчики предпочитают руководствоваться принципом «Mobile first», что получило отображение в трансформирующих макетах (зачастую с одной колонкой и 2-3 главными функциональными кнопками) с гибкими изображениями.

1

Преимущества
    • Меньше времени и усилий (материальных) для создания.
    • Удобство пользования (простая навигация, конкретная информация).
    • Быстрая загрузка страниц и индексация — потребуется меньше времени для попадания в топ.

2

Недостатки
    • Не для масштабных ресурсов (множество услуг/товаров).
    • Адаптация сайта под разрешения экрана смартфона или планшета потребует много времени привлечения специалистов.
    • Стоимость.

Как это сделали мы:

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

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

1

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

2

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

Как это сделали мы:

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

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

1

Преимущества
        • Возможность адаптировать большой объем информации под одно устройство.
        • Работа с двумя контент-стратегиями.
        • Наличие плагина под ваш «движок».

2

Недостатки
        • Два адреса с одним содержанием — придется разбираться с дублированием контента, чтобы не попасть под бан поисковых систем.
        • Отсутствие плагинов под нужную CMS.
        • Ограниченный функционал, «заточенный» только под самое необходимое.

Как это сделали мы:

Резюме

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

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

Что узнаете

  • Основы оптимизации сайта под мобильные устройства
  • Как провести оптимизацию мобильной версии сайта для ранжирования в Google?
  • Как оптимизировать сайт для мобильных устройств?
  • Как оптимизировать мобильный сайт для UX-сигналов?
  • Какие есть 3 быстрых UX-лайфхака для мобильных устройств?Подробные советы и лучшие практики по мобильной оптимизации сайта
  • Как узнать, что Mobile-first Index запущен для моего сайта?
  • Какие выводы можно сделать?

04 ноября 2016 года Google анонсирован предстоящий запуск mobile-first индекса.

Поэтому для ранжирования на первой странице в Google в 2018 году ваш сайт должен быть оптимизирован для телефонов и планшетов.

В этом подробном руководстве Брайан расскажет вам все, что вам нужно знать о мобильном SEO.

Даже при самом лучшей оптимизации сайта, без внешнего продвижения, Вам не удастся, получить топ-10,где есть конкуренты. Для этого нужно внешнее продвижение. Его можно реализовать множествами способами, но мы рекомендуем обратиться в компанию buylink.pro. У них своя база сайтов, для составления ссылочного профиля, уникального от конкурентов, такие сайты не найти в биржах. Они экономически более эффективны, при сопоставлении того что есть в биржах. За ними лучше следят, контролируют индексацию ваших размещений. У компании множество кейсов и отзывов, они профессионалы своего дела. Могут проконсультировать как достигнуть нужных Вам результатов. Советуем

Поехали.

1. Основы оптимизации сайта для мобильных устройств

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

Мобильное SEO — это практические приемы оптимизации сайта мобильных устройств (смартфонов и планшетов) и мобильных пользователей.

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

Почему важна оптимизация мобильной версии сайта?

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

Фактически, 58% всех запросов в Google теперь выполняются с мобильного устройства.

И эта тенденция быстро набирает обороты. По данным Google, с мобильных выполняется на 27,8 миллиарда больше поисковых запросов, чем с десктопных устройств.

Мобильность — это будущее для SEO. Возможно, именно поэтому Google пересматривает весь свой алгоритм, чтобы сосредоточиться на мобильном поиске.

Значит в SEO нужно делать акцент на оптимизации под мобильные устройства?

Да. По крайней мере, если вы делаете оптимизацию под мобильные устройства в Google.

Сегодня 95 % всех мобильных поисковых запросов выполняется в Google.

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

На самом деле он уже сделали это …

Во-первых, Google сделали мобильное обновление (которое многие называют «Mobilegeddon»).

Это обновление пессимизировало сайты, которые не были мобильны для поиска на телефонах.

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

Что такое Google Mobile-First Index?

Mobile-first Index Google оценивает результаты поиска только для мобильной версии страницы.

И да, это происходит, даже если вы ищете с десктопа.

До этого обновления Google включал два индекса, которые работали друг с другом: мобильный и десктопный.

Если кто-то искал с iPhone, Google показывал им результаты с мобильного индекса.

А если кто-то искал что-то с настольного ПК, то они получали десктопные результаты.

Старая модель результатов поиска в GoogleСегодня, независимо от того, какое устройство вы используете, Google показывает результаты из мобильного индекса.Модель результатов поиска в Google на основе Mobile-First Index

Что Google считает мобильным?

Для большинства людей «мобильное устройство» означает смартфон или планшет.

Но вот что Google говорит по поводу планшетов: «Когда мы говорим о мобильных устройствах, мы обычно не включаем в определение планшеты».

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

Другими словами, если следовать словам Google: мобильность = смартфоны.

Но это не должно сильно повлиять на ваше мобильное SEO.

Основная идея здесь — оптимизировать ваш сайт и контент на нем для любого устройства — телефонов, планшетов или любых других мобильных устройств, которое Илон Маск изобретет в будущем 🙂

2. Как провести оптимизацию мобильной версии сайта для ранжирования в Google?

Выполнить эти 3 способа.

1 способ — Настроить мобильные URL-адреса для разных устройств

Другими словами, ваш сайт определяет, какое устройство использует ваш посетитель … и затем направляет их на URL-адрес, оптимизированный для этого устройства.

Но Брайан не рекомендует делать отдельную мобильную версию сайта. Хотя бы потому, что нужно будет использовать атрибуты rel=»alternate» и rel=»canonical» для связи одинаковых страниц на разных устройствах.

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

Плюсы и минусы мобильной версии сайта
ПлюсыМинусы
Простота интерфейсаИнформацию необходимо актуализировать отдельно от основного сайта
Высокая скорость загрузки
Наличие альтернативы для пользователя

Prowebagents рекомендует сделать (проверить), выполнены ли эти задачи, если у Вас есть отдельная мобильная версия сайта.

  1. Контент на десктопной версии должен быть доступен и на мобильной.
    Если часть контента находится во вкладка, то он должен загружаться вместе со страницей. Иначе он не будет индексироваться Google.
  2. Микроразметку для мобильной версии.
    Вот первый и второй конструкторы микроразметки.
    Перед внедрением на сайт проверяем ее валидность через валидаторы Google и Яндекс.
  3. Атрибуты rel=»canonical» и rel=»alternate».
    Ознакомтесь с 5 распространенными ошибками при применении каноникал и не допускайте их.
    Как правильно использовать атрибут читаем тут, а — здесь.
  4. Добавьте мобильную версию сайта в панели веб-мастеров Google, Яндекс и Bing.
  5. Мета-теги и контент должен быть идентичен на десктопе и мобилке.
  6. Следите за бесперебойной работой сервера, т.к. он может не справиться с загрузкой на desctop и mobile.

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

2 способ — Динамический показ

Когда вы динамически показываете контент, все ваше содержимое находится на одном URL-адресе.

Но вы показываете каждому пользователю с разным кодом HTML/CSS в зависимости от используемого устройства.

Например, если вы заходите на страницу https://backlinko.com/seo-tools с десктопного устройства, вы переходите на десктопную версию страницы.

Но если вы заходите на страницу с iPhone 8, вы все равно будете на этой же странице, но получите версию для iPhone 8.

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

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

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

Поэтому, Брайан также не рекомендует делать динамический показ. Но вместо этого он рекомендует…

3 способ — Используйте адаптивный дизайн

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

Адаптивный дизайн исключает возможность создания отдельных URL-адресов или разных кодов HTML/CSS для каждого устройства.

С точки зрения SEO-friendly, такой дизайн является победителем над другими вариантами.

Почему? Если говорить коротко, то потому что:

  • Весь ваш контент находится на одном URL-адресе, что хорошо для обмена и получения внешних ссылок.
  • Минимальные головные боли для SEO, т.к. нет атрибутов, проблем с дублированием.
  • Удобный (UX много значит для SEO благодаря алгоритму RankBrain).
  • Нет редиректов, которые вызывают технические проблемы для SEO и могут замедлить работу сайта.
  • Не нужно ставить внешние ссылки на мобильную версию.

И если вы все еще не уверены, Google рекомендует адаптивный дизайн. Вот так.

Плюсы и минусы адаптивной версии сайта
ПлюсыМинусы
Информация в рамках одногоДолго и дорого
Нет возможности выбора для пользователя
Время загрузки немного дольше

3. Как оптимизировать сайт для мобильных устройств?

Используйте Google’s Mobile Usability Test

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

Чтобы использовать его, перейдите в вашу учетную запись GSC. Затем нажмите «Поисковый трафик» -> «Удобство просмотра на мобильных устройствах».

И Google сообщит вам, если у мобильных пользователей возникнут проблемы с использованием вашего сайта.

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

Вы также можете использовать Google Mobile-Friendly.

Просто введите URL-адрес в поле ввода на его странице…

… и получите подробный отчет.

На десктопе у Googlebot не было проблем с обходом этих ресурсов. Но для мобильной версии ситуация иная.

И теперь, когда Google Mobile-First индекс уже существует, это серьезная проблема. И об этом мы бы не узнали без этого инструмента.

Он супер полезен.Эта статья хорошо дополняет этот раздел

Голосовой поиск в SEO. Исследование 10 000 результатов поиска Google Home. В разделе № 3 узнаете о результатах анализа скорости загрузки результатов голосового поиска и еще много чего об анализе и оптимизации скорости загрузки.

Пусть Google сканирует все

Вы блокируете Googlebot доступ к Javascript, CSS или другим важным частям кода страниц вашего сайта?

Раньше это было неважно. Но сегодня это ОЧЕНЬ плохая идея.

Если Google не сможет полностью просканировать страницу, то и не сможет сказать, что она мобильна.

Сначала проверьте файл robots.txt. Он содержит директивы для Googlebot на запрет или разрешение на сканирование определенных частей вашего сайта.

Этот файл обычно находится под адресу site.com/robots.txt. Вы также можете увидеть его внутри Google Search Console.

Вы можете перейти во вкладку «Индекс Google» -> «Заблокированные ресурсы» в панели Google веб-мастер.

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

Prowebagents рекомендует добавить в файл robots.txt следующие разрешающие директивы после запрещающих.

Allow: /*.js
Allow: /*.css
Allow: /*.gif
Allow: /*.jpg
Allow: /*.png

По опыту проведения нами комплексных SEO-аудитов это мало кто-делает.

Делайте попапы правильно

Согласитесь, что всех раздражают всплывающие окна.

Google также не любит всплывающие окна … особенно для мобильных пользователей.

Помните: задача Google №1 — показать своим пользователям супер контент. И что делать, если этот контент скрыт за гигантским всплывающим окном?

Фактически, Google сделали обновление, которое специально предназначено для навязчивых всплывающих попапов.

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

Как узнать, какие всплывающие окна в порядке?

Google дает несколько примеров приемлемых всплывающих окон …

Хорошие попапы… и попапы, за которые могут наказать сайт.Плохие попапы

Как выглядит адаптивный сайт? Вернемся немного назад

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

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

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

Он покажет вам, как выглядит сайт на iPhone, планшетах и других девайсах.

Применяйте мобильную версию в разделе Google Search Console «Посмотреть как Googlebot»

Просто введите URL-адрес любой страницы с вашего сайта в поле для ввода.

И обязательно выберите «Mobile» в выпадающем списке.

И он покажет, что видел робот Googlebot.

Вы можете прокрутить вниз страницы, чтобы увидеть, пропустил ли Google что-нибудь (например, изображения, видео, меню и т.д.).

Пусть мобильные пользователи видят все

Иногда люди блокируют определенные ресурсы от мобильных пользователей.

Например, они могут скрыть некоторый контент … или заблокировать javascript при загрузке.

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

И это иногда улучшало мобильный опыт пользователей.

Вот пример того, что Брайан имеет в виду.

Вам нужно нажать на кнопку «Read more», чтобы увидеть весь контент. Но это может быть проблемой с приходом Google Mobile-first Index.

Почему?

С Mobile-first Google рассматривает мобильную версию страницы как «основную» версию.

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

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

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

Джон Мюллер, сотрудник Google
Он также сказал, что, когда дело доходит до Mobile-first…Если это важный контент, он должен быть виден.

Джон Мюллер, сотрудник Google

Что же советует Брайан?

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

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

4. Как оптимизировать мобильный сайт для UX-сигналов?

Сегодня SEO все меньше сводится к тому, чтобы возиться с мета-тегами и больше к тому, чтобы иметь удивительный сайт.

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

Если RankBrain считает, что сайт расстраивает своих мобильных пользователей, они бросают вас, как камень.

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

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

Важно ли для Google, как быстро грузится сайт?

Еще бы! Конечно.

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

И вот еще несколько инструментов, которые помогут Вам понять, как быстро загружается сайт.

Во-первых, с помощью инструмента Google PageSpeed Insights.

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

Брайан также рекомендуем проверять скорость загрузки через WebPageTest.org.

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

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

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

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

Сделайте контент максимально легким для чтения со смартфонов

Вы хотите, чтобы ваш контент выглядел так?

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

Но место этого вы хотите, чтобы шрифт был большим, жирным и разборчивым, например вот таким.

Итак.

Как сделать свой мобильный контент более удобочитаемым? Вот несколько советов об Брайана.

  • Используйте шрифт, по крайней мере, размером 14 px (Брайан предпочитает 15 или 16).
  • Используйте короткие параграфы (1-2 строки в абзаце).
  • Делайте предложение длиной до 50-60 символов.
  • Убедитесь, что существует достаточный контраст между текстом и фоном.

Применяйте HTML5 для видео и анимированного контента

Встраиваете ли вы видео в свой контент? Или на странице есть анимации?

Если этот контент закодирован во Flash, он не будет работать на мобильных устройствах.

Вместо этого делайте код страницы по стандарту HTML5.

Не забывайте о мета-теге «viewport content»

Вы используете адаптивный дизайн? Если это так, не забудьте о мета-теге viewport!

Этот тег изменяет размер страницы под устройство пользователя.

И Google рекомендует настроить этот мета-тег следующим образом.

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

Отображение страницы без мета-тега viewport

5. Внедрите эти 3 быстрых мобильных UX-лайфхака

UX-лайфхак № 1. Сделайте изображения анонсов маленькими

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

Поэтому не используйте большие изображения-анонсов.

Например, как это.

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

Например, как у Брайана.

UX-лайфхак № 2. Делайте больше воздуха

Между текстом, кнопками и другими элементами дизайна.

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

Но на телефоне нужно использовать такие страницы.

Это особенно важно для ранжирования в Google.

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

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

UX-лайфхак № 3. Разместите share-кнопки в сайдбаре

Эти кнопки могут значительно увеличить количество шерингов, которые получает ваш контент.

Брайан говорит, что эти кнопки работают лучше всего, когда они находятся на боковой панели.

Брайан рекомендует использовать такой инструмент, как Sumo, который отображает социальные кнопки в виде панели вкладок в нижней части страницы.

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

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

Зафикси CTR и получи больше трафика

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

Как узнать, какой CTR у страниц?

Сначала перейдите в раздел «Поисковый трафик» — «Анализ поисковых запросов» в панели Google Search Console.

Затем выберите фильтр «Сравнение по устройствам».

И выберите ПК и Мобильный.

И посмотрите, какой показатель CTR с мобильных и десктопных устройств.

Если вы заметили, что CTR с десктопа преобладает на CTR для определенного ключевого слова, выполните поиск этого ключевого слова в Google (на вашем телефоне).

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

В любом случае вы увидите, что нужно сделать, чтобы поднять ваш мобильный CTR.

Сравниваем показатель отказов и длину клика в Google Analytics

Для этого войдите в Google Analytics. И перейдите в раздел «Контент сайта» — «Страницы входа».

Отчет покажет вам самые популярные страницы сайта. Нажмите на страницу, которую хотите проанализировать.

И еще выберите «Дополнительный параметр» — «Тип устройства»

Это покажет вам, как UX-сигналы сравниваются на настольных и мобильных девайсах.

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

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

Сделайте страницу еще быстрее с помощью этих 3 советов

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

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

Он даже загружает сайт с 3G.

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

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

Вот еще несколько советов.

  1. Посжимайте изображения

    Если вы используете WordPress, можете установить оптимизатор для изображений, например Smush Image Compression. Эти ЗНАЧИТЕЛЬНО уменьшит размер графических файлов, что поможет увеличить скорость загрузки.

  2. Используйте кеширование браузера

    Google рекомендует это делать, чтобы сделать ваш сайт еще быстрее.

  3. Запустите CDN

    Это позволит загружать элементы страницы в 2-3 раза быстрее.

Оптимизируйте title и description для мобильной выдачи

Вот как.

Верите или нет, но Google на самом деле дает вам БОЛЬШЕ символов для тега title на мобильных устройствах. Но при этом description немного короче.

Вот точная разбивка.

Desktop

Title: Примерно 70 символов
Description: Примерно 300 символов

Mobile

Title: Примерно 78 символов
Description: Примерно 300 символов

Поэтому расширяйте title.

Нужно ли внедрять AMP?

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

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

Как вы, возможно, знаете, Google дал толчок развитию AMP.

И поскольку AMP — это проект Google, многие стали внедрять AMP для своих сайтов.

Предполагается, что Google вознаградит AMP-сайты более высоким рейтингом.

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

И возникает вопрос.

Имеет ли смысл использовать AMP?

Выбор за вами, конечно. Но Брайан говорит, что возможно, нет и вот почему.

  1. AMP устанавливает СЕРЬЕЗНЫЕ ограничения для функциональности страницы.

    AMP существенно ограничивает CSS. Это ускоряет загрузку страницы, но делает контент на ней более «сухим».

  2. AMP может навредить усилиям по наращиваю внешних ссылок.

    Когда кто-то ссылается на страницы AMP, эта ссылка указывает на домен Google.com.

Поэтому пока ссылки на страницы AMP повышают траста домена и авторитетность страниц Google … но не вашего сайта.

И наконец, AMP может продлиться не долго.

LTE развивается SUPER быстро. И 5G уже рядом.

Поэтому, если у вас нет веских оснований для этого, Брайан не рекомендует AMP для большинства издателей.

Применяйте микроразметку для того, что засветиться в выдаче

Вы наверное знаете, что мобильные результаты отображаются в виде карточек. Или нет?

И эти карточки делают структурированные данные суперэффективными.

Почему?

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

Все это может значительно увеличить органический CTR.

Например, посмотрите, какой результаты в мобильной выдаче для сайта Downshiftology отличаются от ToddyCafe.com. Но этот контраст не так силен на десктопе.

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

7. Как узнать, что Mobile-first Index коснулся моего сайта?

Из уведомления в панели Google Search Console.

Об этом заявил сотрудник Гугла Джон Мюллер во время своего выступления на конференции SMX Munich.

И в конце марта 2018 года Гугл объявил, что уже начал переход на Мобайл First Индекс для большого числа сайтов, которые следуют лучшим практикам по этому вопросу.

Владельцы сайтов могут видеть значительное повышение сканирования для Smartphone Googlebot в панели Google Search Console.

Google будет показывать мобильную версию страниц в результатах поиска и в кэше.

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

Какие выводы можно сделать?
  1. Мобайл First Index уже запущен для большого числа сайтов.
  2. Переведен ли ресурс на мобайл-first индекс можно узнать из уведомления в панели Google Search Console или из кэша страницы сайта и в SERP.
  3. Результаты поиска с десктопных устройств будут зависеть от мобильных факторов.
  4. Делайте уже сейчас адаптацию сайта под мобильные устройства — смартфоны и планшеты, если еще не сделали.
  5. Если есть ошибки по мобильной оптимизации — исправляем.
  6. Делаем адаптивный дизайн, а не отдельную мобайлверсию или динамический показ.
  7. Если используйте попапы или скрывайте контент во вкладках, то делайте это правильно.
  8. Проведите оптимизацию для UX-сигналов, чтобы не ухудшать поведенческие факторы.
  9. Поработайте над сниппетами в мобильной выдаче, посмотрите на показатель отказов и длину клика.
  10. Ускорьте загрузку страницы по максимуму.
  11. Оптимизируйте title, description.
  12. Внедрите валидную микроразметку.
  13. Не применяйте AMP.

Что Вы можете сказать?

Поделитесь ответом на этот один вопрос в комментариях ниже.

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

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

Мы публикуем множество полезных статей по SEO и интернет-маркетингу, подпишитесь на нашу рассылку

Добро пожаловать! | Центр поиска Google | Разработчики Google

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

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

  1. Если вы не знаете, оптимизирован ли ваш сайт для мобильных устройств, воспользуйтесь функцией Mobile Friendly Проверить сейчас.
  2. Если вы использовали программное обеспечение для управления контентом, такое как WordPress, для создания своего веб-сайта, ознакомьтесь с нашим руководством по настройке программного обеспечения вашего веб-сайта.
  3. Если у вас достаточно технических знаний, чтобы сделать это самостоятельно, ознакомьтесь с нашим Руководством по мобильной поисковой оптимизации.

Зачем делать сайт мобильным?

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

В США 94% людей со смартфонами ищут местную информацию на своих телефонах. Интересно, что 77% мобильных поисков выполняются дома или на работе, в местах, где могут быть настольные компьютеры.

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

Как мне начать?

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

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

Дополнительную информацию о технической реализации мобильного сайта см. В нашей документации на Мобильное SEO.

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

По разному. Например, вот некоторые из возможностей:

  • Мобильный телефон может быть бесплатным, если вы можете выберите адаптивный шаблон или тему для своего сайта. Отзывчивый шаблон или тема адаптируют отображение к посетителю независимо от того, с помощью настольного компьютера, планшета или мобильного телефона.
  • Мобильность может быть бесплатной, если у вас есть технические навыки для создания мобильный сайт.Ознакомьтесь с основами Интернета.
  • Переход на мобильные устройства, скорее всего, будет стоить времени и денег, если вам нужно нанять разработчика. Кроме того, если ваш сайт был создан несколько лет назад, новый разработчик может порекомендовать начать с нуля (так что вы будете платить за полный макияж). Это связано с появлением новых методов веб-разработки и темы (или шаблоны страниц), которые могут сделать его более эффективным переделывать — скорее чем доработать — свой сайт. Это особенно актуально для сайтов, использующих устаревшие платформы электронной коммерции.

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

Каковы следующие шаги?

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

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

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

21 из лучших примеров дизайна мобильных веб-сайтов

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

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

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

В дальнейшем Google будет продолжать поднимать планку только того, что он считает оптимизированным для мобильных устройств (включая время загрузки страницы), и отражать это в своих обновлениях алгоритмов. Так что, если вы не фокусировались на улучшении своего мобильного опыта, вам лучше расставить приоритеты сейчас, иначе ваш поисковый рейтинг действительно может пострадать. Кроме того, исследование HubSpot Research обнаружило, что половина потребителей в США выходят в Интернет со своих телефонов чаще, чем со своих компьютеров или планшетов.

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

Лучшие мобильные сайты

  1. Shutterfly
  2. Карты Google
  3. Типовая форма
  4. Etsy
  5. Адриан Зумбруннен
  6. Эльф на полке
  7. BuzzFeed
  8. Evernote
  9. Pixelgrade
  10. Huffington Post
  11. Экспресс
  12. Национальное страхование
  13. Squaredo
  14. Zappos
  15. ABC
  16. Lean Labs
  17. SAP
  18. KISSmetrics
  19. idig Marketing
  20. Индия МАРТ
  21. Мелисса Гриффин

1.Shutterfly

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

Shutterfly на своем мобильном веб-сайте выполняет две ключевые задачи:

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

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

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

2. Карты Google

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

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

3. Типовая форма

Typeform — технологическая компания, базирующаяся в Барселоне, с одной простой миссией: «создавать потрясающие формы». Их веб-сайт для настольных ПК действительно красиво оформлен, приветствуя посетителей сжатым текстом, видео высокой четкости, соответствующей анимацией и другими, более сложными элементами дизайна.

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

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

4. Etsy

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

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

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

5. Адриан Зумбруннен

Это личный сайт Адриана Замбруннена, UX-дизайнера, писателя и спикера. Когда вы посетите его веб-сайт, вы сразу заметите в нем что-то очень уникальное: это разговорный веб-сайт , .

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

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

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

6. Эльф на полке

«Эльф на полке» — относительно новая рождественская традиция, основанная на детской книге.Если вы не знакомы, основная предпосылка такова: в книге рассказывается история эльфов-разведчиков Санты, которых Санта посылает присматривать за детьми в их домах по всему миру и сообщать об этом Санте.

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

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

Вы не покупаете собственного эльфа или щенка — вы перенимаете его. На таком маленьком экране это действительно вдохновляет.

7. BuzzFeed

BuzzFeed — новостная компания, известная своим вирусным контентом и популярными викторинами. Кроме того, это один из моих любимых источников развлечения во время поездок на работу и обратно.

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

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

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

8. Evernote

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

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

Если вы посмотрите на мобильный веб-сайт Evernote, вы увидите, что они полностью сохранили свое цветовое палитру и общий стиль бренда. Мобильный веб-сайт компании чистый, простой и нисколько не снижает ценности приложения. Путь конверсии Evernote очевиден из центрального призыва к действию: «Зарегистрируйтесь бесплатно.«

9. Pixelgrade

Тема Pile

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

10. Huffington Post

The Huffington Post — известное новостное агентство, которое сообщает обо всем, от политики и текущих событий до развлечений и технологий.Что делает их мобильный веб-сайт уникальным, так это то, что они на самом деле немного изменяют заголовки для мобильных пользователей, чтобы их контент было легче сканировать.

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

Как и в случае с BuzzFeed, вы найдете интерактивное меню в верхнем левом углу экрана, в котором перечислены все категории сообщений.

11. Экспресс

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

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

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

12. Национальное страхование

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

Когда вы перейдете на мобильный сайт Nationwide, вы увидите две вкладки вверху, позволяющие сразу идентифицировать пользователей как одного из двух типов, чтобы настроить свой опыт: личные или бизнесы. Или, в качестве альтернативы, вы можете «Найти агента» или «Найти финансового консультанта», чтобы узнать больше об их услугах.

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

13. Squaredot

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

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

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

14. Zappos

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

Так выглядит верхняя часть их мобильного сайта:

15. ABC

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

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

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

16. Lean Labs

Lean Labs — это маркетинговое агентство, которое создает привлекательные, адаптивные веб-решения с высокой конверсией. (Они также были показаны в популярном телесериале ABC Shark Tank ). Люди там проделывают огромную работу по обеспечению плавного взаимодействия с пользователями своих мобильных устройств, особенно в том, что касается их дизайнерских приемов и того акцента, который они уделяют своим «10x» формула », которая становится очевидной для посетителей через несколько секунд после перехода на свой мобильный сайт.

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

И, как объяснялось выше, их основная формула «10x» четко видна и разбита на простые шаги для мобильных пользователей, просматривающих домашнюю страницу, с соответствующими значками.

17. SAP

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

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

18.KISSmetrics

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

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

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

19.idig Marketing

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

Имитирует значок в виде сердечка «Нравится» в Instagram и Twitter, который легко узнать для мобильных пользователей, знакомых с этими платформами.

20. IndiaMART

IndiaMART — это крупнейший онлайн-рынок B2B в Индии, а его простой магазин мобильных устройств на основе категорий делает его одним из лучших мобильных веб-сайтов, которые мы когда-либо видели в индустрии электронной коммерции.

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

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

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

21. Мелисса Гриффин

Мелисса Гриффин — консультант по контент-маркетингу для блогеров и предпринимателей.Ее веб-сайт, созданный с использованием WP Engine, начинается с целевой страницы, которая адаптирует опыт посетителя к его или ее конкретным потребностям как владельца бизнеса.

Яркий желтый фон

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

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

9 причин, почему ваш сайт не работает на мобильных устройствах

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

  1. Ваш сайт не мобильный отзывчивый
  2. У вас нет оптимизирован для индексации сначала с мобильных устройств
  3. Медленные мобильные страницы
  4. Недружественный навигация
  5. Содержание страницы не сразу очевидно
  6. Вы используете всплывающие окна / interstitials
  7. У вас нет оптимизированы ваши призывы к действию для мобильных устройств
  8. Интерактивные элементы не оптимизированы для сенсорного ввода
  9. Ваши мобильные формы убивают конверсии

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

мобильный Часто задаваемые вопросы по оптимизации

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

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


Существуют различные подходы к созданию веб-сайта, удобного для мобильных устройств, но наиболее распространенными являются два:

Адаптивный дизайн: Создайте единый веб-сайт, который адаптирует макеты, контент и размеры элементов к разным размерам дисплея.

Мобильные сайты: Создайте отдельный мобильный веб-сайт в дополнение к обычному сайту.

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

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

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

— Время загрузки
— Навигация
— Макет страницы
— Контент
— Размеры элементов (текст, изображения, кнопки и т. Д.)
— Сенсорные элементы
— Веб-формы Размеры файлов (изображения, файлы кода и т. Д.)

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

Это в значительной степени сводится к видимости, навигации и скорости.

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

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

И это еще не все.

— 53% всего трафика поступило с мобильных устройств в 2018 году
— Google награждает сайты, оптимизированные для мобильных устройств (и наказывает не очень дружественные)
— Различные исследования показывают, что пользователи не возвращаются на веб-сайт после неудачного опыта
— Это означает, что плохой мобильный опыт может стоить вам 53% посетителей.
— Сегодняшние потребители переключаются между несколькими устройствами, что делает постоянное взаимодействие все более важным.

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

Вот почему это важно.

Сколько стоит сделать ваш сайт мобильным?

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

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

# 1: Ваш сайт не адаптируется к мобильным устройствам

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

Адаптивный дизайн это не единственный подход к оптимизации мобильных устройств, но это единственный подход Google рекомендует, и это имеет большой смысл с точки зрения SEO (см. причину №2). Однако есть проблемы с выбором адаптивного маршрута, особенно когда речь идет об оптимизации содержимого страницы для экранов разных размеров.

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

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

Google предлагает бесплатный онлайн-курс под названием «Основы адаптивного веб-дизайна» на сайте Udacity, который отлично подойдет, если вы хотите научиться создавать и кодировать адаптивные страницы.Если вы не хотите участвовать на уровне кода, по-прежнему важно иметь твердое представление о принципах адаптивного дизайна, чтобы вы могли управлять командами дизайнеров или выбирать правильные темы на таких платформах, как WordPress.

Хороший адаптивный дизайн должен:

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

Дополнительный наконечник

Одноколонный макеты сразу после установки оптимизированы для мобильных устройств. Все, что вам нужно сделать, это установить ширину вашего div до 100%, и они автоматически заполнят ширину любого отображать. Если ваш текст и изображения заданы в адаптивных единицах (em,%, и т. д.), все должно быть в порядке.

Для разделов страницы требующие столбцы (разделы услуг, списки продуктов и т. д.), вы можете создать столбцы в одном из этих блоков со 100% шириной. Это позволяет вам установить их как горизонтальные столбцы на рабочем столе и более широкие дисплеи, а затем вертикально складываются как полноразмерные div на мобильных устройствах.

# 2: Вы не оптимизировали для индексации сначала мобильные устройства

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

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

Теперь это только влияет на вас, если вы запускаете отдельные страницы для ПК и мобильных устройств на разных домены — например: yoursite.com и m.yoursite.com . Раньше рабочий стол версия каждой страницы будет отображаться в поиске Google, но при индексации сначала для мобильных устройств означает, что мобильная версия будет отображаться как стандартная — , если не будет настольной версией (которая будет отображаться при поиске на рабочий стол).

Как оптимизировать для индексация сначала для мобильных устройств?

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

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

  • Ваш мобильный и страницы рабочего стола содержат одинаковое содержание
  • Обе версии на вашей странице есть необходимые структурированные данные
  • Обе версии на вашей странице есть необходимые метаданные
  • Обе версии вашего страница проверена в Search Console
  • Любые теги rel = hreflang для интернационализация включает отдельные ссылки для мобильных и настольных URL
  • Ваши серверы могут обрабатывать любое увеличение скорости сканирования мобильной версии вашего сайта
  • Ваш робот.текст директивы одинаковы (и оптимизированы) для настольных и мобильных версий
  • Правильное использование rel = canonical и rel = alternate ссылочных элементов между мобильной и настольной версиями

Mobile-first индексирование все еще развертывается, и вы должны были получить уведомление от Google в Search Console, если ваш сайт уже был перемещен. Не ждите пока ваш сайт не будет перемещен для принятия мер, поскольку это повлияет на страницы, которые плохо оптимизированы для мобильных устройств.

Дополнительный наконечник

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

Вы также можете найти документацию Google по индексации мобильных устройств. нажав здесь.

# 3: Медленные мобильные страницы

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

Рекомендуемый Лучшая практика — не более 3 секунд на мобильном соединении 3G .

Источник

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

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

Как уменьшить загрузку страницы раз?

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

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

  • Уменьшить количество серверов запросы
  • Сжимайте изображения
  • Минимизируйте файлы ядра (HTML, CSS, и Т. Д.)
  • Используйте чистый код
  • Используйте последние версии кода (HTML5, CCS3 и т. Д.)
  • Уменьшите количество JavaScript
  • Избегайте ненужных перенаправлений
  • Старайтесь не использовать слишком много веб-шрифтов
  • Сведите к минимуму использование плагинов, где возможно
  • Реализовать кэширование (это только помогает вернувшихся посетителей)
  • Используйте CDN, если вы настраиваете таргетинг международная / глобальная аудитория

You может также захотеть изучить Accelerated Мобильные страницы (AMP), обеспечивающие быструю загрузку для мобильные страницы.Это нелегкое решение, и оно не решит ваши проблемы с загрузкой на рабочем столе, но это вариант, который следует учитывать при доставке мобильный контент является для вас приоритетом.

Проверить из нашего блога Bitesize на AMP для краткого обзора того, что он может предложить.

# 4: Плохая мобильная навигация UX

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

Некоторые меню отображать множество страниц, доходящих до уровня навигации третьего уровня.

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

Как улучшить мобильную связь навигация UX?

Источник

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

Взгляните на статью Ника Бибаха для журнала Smashing Magazine, Basic Patterns. Для мобильной навигации: плюсы и минусы , для более подробного ознакомления с разные дизайнерские подходы.

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

# 5: Содержание страницы не сразу видно

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

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

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

  • Сократите время загрузки!
  • Убедитесь, что основное содержимое отображается при первом просмотре каждая страница при загрузке на мобильные экраны (в верхней части страницы)
  • Уменьшить размер элементов над основным содержанием (заголовки, навигационные меню и т. д.)
  • Оптимизируйте размеры заголовков, чтобы сделать основной контент более видимым
  • Избегайте использования всплывающих окон, которые блокируют доступ к контенту
  • Реализуйте отложенную загрузку, чтобы текстовое содержимое загружалось раньше изображения, видео и т. д.

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

# 6: Вы используете всплывающие / межстраничные объявления

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

Как я могу реализовать мобильные всплывающие окна?

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

  • Установить задержку для запуска всплывающих окон после того, как пользователи уже начали взаимодействовать с вашим контентом
  • Используйте всплывающие окна с намерением выхода, которые только запускается, когда пользователи выглядят так, будто собираются покинуть вашу страницу
  • Вместо этого используйте баннеры с фиксированной позицией полноэкранных всплывающих окон
  • Сделайте так, чтобы пользователям было легко закрыть любые всплывающие окна при нажатии значка X
  • Запретить повторным посетителям из видеть одно и то же всплывающее окно несколько раз
  • Внедрить уведомления вместо всплывающие окна
  • Реализовать чат-бот / виджет чата
  • Разместить CTA на ваших страницах вместо использования всплывающих окон (включая сообщения в блогах)

Это заключительный момент очень важен.Вам действительно нужны всплывающие окна на ваших страницах или можете вы просто размещаете на них CTA? Действительно, ваши призывы к действию должны быть убедительными достаточно, чтобы вам не нужны всплывающие окна, которые, по сути, являются призывом к действию в более навязчивый формат.

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

# 7: Вы не оптимизировали свои призывы к действию для мобильных устройств

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

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

Как мне разработать CTA для мобильный?

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

  • Создать во всю ширину CTA
  • Увеличить контраст выделите ваши призывы к действию (опять же, подумайте о пользователях при ярком уличном свете)
  • Убедитесь, что все CTA виден на высоте мобильных дисплеев
  • Держите заголовки CTA, чтобы максимум три строки на мобильном телефоне
  • Оптимизация размеров текста были необходимы
  • Рассмотрите возможность создания более короткие заголовки и текст CTA
  • Убедитесь, что кнопки достаточно большие, чтобы пользователи могли нажимать на сенсорные экраны
  • Пересмотреть CTA размещение для мобильных устройств
  • Тестовые мобильные призывы к действию

На мобильных устройствах содержание вашей страницы собираетесь подтолкнуть CTA дальше вниз по странице, поэтому вам, возможно, придется переосмыслить сроки размещения.Другой вариант — уменьшение высоты мобильного содержание, показывая только первую строку или абзац и скрывая остальное с помощью дисплей : нет; значение CSS.

Дополнительные идеи по созданию мобильные CTA, ознакомьтесь с этими 12 передовыми практиками в блоге WPMU DEV.

# 8: Интерактивные элементы не оптимизированы для сенсорного ввода

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

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

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

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

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

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

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

# 9: Ваши мобильные формы убивают конверсии

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

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

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

Как оптимизировать формы для мобильный?

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

  • Создание адаптивных форм
  • Придерживайтесь макетов с одним столбцом
  • Сложите поля формы вертикально, а не по горизонтали
  • Установите для полей ширину 100%
  • Сохраните минимальное значение полей формы
  • Рассмотрите возможность многоэтапного дизайна для длинные формы
  • Использовать заполнение полей и кнопок чтобы сделать их более интерактивными
  • Добавьте достаточно вертикального промежутка между поля, чтобы пользователи могли легко переключаться между ними
  • Уменьшите количество пользователей, набирающих текст нужно сделать
  • Разметить формы с помощью HTML5, чтобы соответствующий формат клавиатуры появляется автоматически
  • Убедитесь, что любая проверка дает визуальная обратная связь при вводе пользователем
  • Измерение производительности с помощью формы аналитика
  • Тест ваши мобильные формы

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

Дополнительный наконечник

Не делайте своего проверка формы слишком строгая; цель — помочь пользователям заполнить ваши формы, а не запретить им отправлять информацию.

Полезное инструменты

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

Наконец-то ваш собственный мобильный телефон — всегда хороший показатель.Выполните поиск по сайту (введите site: www.yourdomain.com) в свой мобильный браузер. Рядом с вашим объявлением вы должен увидеть тег «для мобильных устройств».

Still столкнувшийся с трудностями?

Узнайте больше о наших услугах SEO для мобильных устройств или, если вы хотите, чтобы кто-то из нашей команды взглянул на ваш сайт, позвоните нам сегодня по телефону 02392 830281. А пока вы можете найти эти другие статьи, связанные с мобильными устройствами, полезными:

лучших способов оптимизировать ваш сайт для мобильных устройств в 2021 году | София Мартин | DataSeries

Знаете ли вы, что 94% людей судят о каких-либо веб-сайтах по их отзывчивости или мобильности? Да, если ваш сайт не оптимизирован для мобильных устройств, вы можете потерять более 90% своих клиентов.Хорошая новость заключается в том, что сделать ваш сайт мобильным — это непростая задача, и новичок с ней легко справится. Но перед этим давайте прочитаем некоторую статистику, показывающую важность адаптивного веб-сайта.

Итак:

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

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

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

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

Источник

1. Google предпочитает адаптивный дизайн.

Адаптивный дизайн — предпочтительный стиль дизайна Google, поскольку он не создает двух вариантов одного и того же сайта: мобильного и настольного. Вместо этого он создает веб-приложение с тем же HTML и URL-адресом, которое обертывает, адаптируется и проверяет, чтобы приспособиться к множеству устройств.

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

2. Адаптивный дизайн эффективен и прост в управлении.

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

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

Источник

4. Адаптивный дизайн увеличивает конверсию.

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

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

5. Ваш призыв к действию будет четко виден пользователю.

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

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

6. Более низкая стоимость и обслуживание веб-сайта

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

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

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

7. Мобильный веб-сайт обеспечивает удобство работы и пользовательский интерфейс.

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

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

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

1. Создайте мобильную версию своего текущего сайта

Один из самых быстрых способов сделать ваш веб-сайт адаптированным для мобильных устройств — это создать адаптированную для мобильных устройств версию веб-сайта для настольных компьютеров с использованием различных систем преобразования, таких как DudaMobile или bMobilized.

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

2. Используйте мобильные плагины на популярных платформах CMS

WordPress Mobile Plugins.

WPtouch — лучший плагин для сайтов на базе WP, позволяющий настраивать мобильные устройства. Он предлагает платную версию с расширенными функциями электронной почты.JetPack — это решение WordPress, которое разработано для реализации простой мобильной функции, обеспечивающей мобильный доступ к вашим веб-сайтам.

Мобильные плагины Joomla.

JoomlaShine и Responsivizer — это простые способы добавить на ваш сайт мобильные функции. Это может быть необходимо только в том случае, если вы используете старую версию Joomla, например 2.5 или ниже. Joomla 3.x также обеспечивает поддержку мобильных сайтов.

Плагины Drupal.

Drupal предоставляет два модуля, MobileTheme и ThemeKey, которые определяют, находится ли конкретный пользователь на мобильном телефоне, и автоматически меняют тему веб-сайта на более удобную для мобильных устройств.Оба предлагают простые в использовании и удобные интерфейсы после установки.

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

3. Используйте адаптивный дизайн, ориентированный на мобильные устройства

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

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

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

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

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

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

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

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

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

Более десяти лет назад Стив Джобс вышел на сцену Macworld Expo. В своем фирменном стиле соучредитель Apple, генеральный директор и постоянный шоумен пообещал миру три вещи: обновленный iPod, телефон и мини-компьютер.

Он перечислил атрибуты каждого предмета: «Широкоэкранный iPod с сенсорным управлением. Революционный мобильный телефон. И передовое устройство интернет-коммуникации ».

Но когда пришло время для большого открытия, он не представил три отдельных продукта. Он с триумфом протянул один гаджет: iPhone. «Вы понимаете?» — спросил Джобс у толпы. «Это не три отдельных устройства. Это одно устройство! И мы называем это iPhone ».

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

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

Мобильный дизайн: 10 лет спустя

Сегодня многие люди используют свои смартфоны как единственный компьютер.3 миллиарда человек имеют смартфоны и 1,3 миллиарда владеют компьютерами.

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

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

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

Что вообще означает мобильный веб-дизайн?

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

«Это не значит, что вы получаете листовку или информационный бюллетень, которые напечатаны и имеют постоянный размер холста», — объясняет Мэтт Фелтен, дизайнер продуктов из Лос-Анджелеса. «Распространение iPhone означает, что дизайнеры должны приспосабливаться к экранам различных размеров и придумывать новые методы для множества различных устройств».

Создать сайт с нуля? Think Mobile-First

Брайан Клейтон, генеральный директор GreenPal, девять месяцев создавал сайт своей компании с нуля.«Сразу за воротами возникли серьезные проблемы», — говорит он. «Мы предположили, что большинство наших пользователей будут покупать услуги по уходу за газонами со своего настольного компьютера или ноутбука. Но очень быстро стало ясно, что больше людей заходят на веб-сайт со своих мобильных телефонов и планшетов, чем с настольных или портативных компьютеров — 4 к 1 ».

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

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

Связано: DreamHost’s Ultimate Small Business Resource Guide

«До того, как наш веб-сайт был перестроен под мобильные устройства, конверсия в мобильном браузере составляла менее 4%», — говорит он. «Это означает, что люди, которые пытались зарегистрироваться, в 96% случаев отказывались от участия.”

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

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

Подчеркните свою аудиторию

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

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

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

Спросите отзывов клиентов

Зондра Уилсон, владелица Blu Skincare в Лос-Анджелесе, обнаружила, что ее сайт не оптимизирован для мобильных устройств, только когда она начала спрашивать отзывы клиентов.

«Я просила своих клиентов написать отзыв, и они говорили, что не могут найти, где его написать», — вспоминает она. «Я спрашивал их о моем блоге или статьях, которые я публиковал, и им было трудно их найти. У них были проблемы с просмотром моего сайта на своих мобильных телефонах. Им пришлось много прокручивать вниз, прежде чем появилась моя первая фотография или какая-либо информация о моей компании. Они не знали, как перемещаться по моему сайту. Многие были разочарованы и не прошли первую страницу ».

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

По теме: 30 лучших веб-приложений для малого бизнеса в 2020 году

Think Small

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

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

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

«Малым предприятиям придется пересмотреть свои текущие маркетинговые стратегии, поскольку площадь их экранов значительно уменьшилась», — говорит Полгар.

Виталий Виноградов, генеральный директор Modern Place Lighting, обнаружил, что переход на дизайн, ориентированный на мобильные устройства, привел к увеличению конверсии на 30% по сравнению с настольными компьютерами.«Одна важная вещь — удалить лишние плагины, всплывающие окна или любые другие ингибиторы экрана на мобильной версии сайта», — говорит он.

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

Усовершенствуйте свой эстетический дизайн

Рост популярности мобильных устройств привел к появлению таких дизайнерских компаний, как Apple и Google. «Сегодня потребители ожидают более изысканного дизайна», — говорит Фельтен.

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

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

По теме: Как увеличить коэффициент конверсии вашего сайта с помощью правильного шрифта

Создание единообразного взаимодействия с пользователем

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

Проблема?

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

Think Social

Подавляющее большинство блогов читаются и распространяются через социальные сети, говорит Фелтен.

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

Связано: 10 простых советов по работе с социальными сетями для трудолюбивого малого бизнеса

Ваш бизнес должен присутствовать в социальных сетях на соответствующих платформах, чтобы вы могли охватить максимальное количество людей. «Для некоторых предприятий имеет смысл иметь Facebook, а другим нужен Instagram», — говорит он. «Это создает несколько точек входа на ваш сайт и способ продемонстрировать весь спектр ваших услуг.”

Вам нужно приложение для этого?

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

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

Что дальше?

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

7 способов оптимизации вашего веб-сайта для мобильных устройств

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

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

1. Проверьте свой сайт с помощью инструмента Google для мобильных устройств

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

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

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

Чтобы протестировать свой сайт, вам нужно всего лишь ввести его URL и выбрать Run Test . Обычно процесс завершается через несколько секунд, после чего вы увидите результаты.

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

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

Откроется страница, на которой вы сможете увидеть, какие именно ресурсы Google не смог загрузить.

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

2. Используйте адаптивную тему WordPress

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

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

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

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

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

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

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

Связано: Как выбрать правильную тему WordPress для вашего сайта

3.Выберите надежный веб-хостинг

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

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

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

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

Мы знаем, что у вас много вариантов VPS

Вот чем отличается предложение DreamHost VPS: круглосуточная поддержка клиентов, интуитивно понятная панель, масштабируемая оперативная память, неограниченная пропускная способность, неограниченное количество доменов хостинга и хранилище SSD.

4. Увеличьте время загрузки вашего сайта

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

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

Проверка скорости мобильной связи вашего сайта

Первое, что вам нужно сделать, это выяснить, насколько хорошо ваш сайт работает в настоящее время. Еще раз, Google здесь, чтобы помочь вам со своим инструментом Mobile Speed ​​Test.

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

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

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

Оптимизация времени загрузки вашего сайта

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

  • Реализовать кэширование . При использовании кеширования некоторые файлы вашего веб-сайта будут сохранены в более удобном месте (например, на локальном устройстве каждого посетителя), поэтому их не нужно загружать каждый раз, когда открывается новая страница. Доступно множество бесплатных плагинов кэширования, хотя некоторые планы хостинга, такие как DreamPress, включают эту функцию по умолчанию.
  • Используйте сеть доставки контента (CDN) . Вместо того, чтобы доставлять файлы с одного центрального сервера, CDN позволяет хранить их копии на нескольких серверах, расположенных географически.Это делает время загрузки более сбалансированным независимо от местоположения данного пользователя, а также снижает использование полосы пропускания.
  • Сжимайте изображения . Большие файлы изображений часто являются виновниками медленной загрузки. Сжимая их, вы можете уменьшить их размер, не влияя на их качество. Есть ряд бесплатных и дополнительных решений, которые помогут вам в этом, в том числе плагин ShortPixel и инструмент TinyPNG.
  • Сократите свой код . Оптимизируя код CSS, HTML и JavaScript вашего сайта, вы можете сделать его более эффективным и сократить время загрузки на драгоценные секунды.
  • Поддерживайте актуальность всех аспектов вашего сайта . Использование устаревшего программного обеспечения для запуска вашего веб-сайта не только делает вас уязвимыми для проблем безопасности, но также не позволяет ему работать с максимальной эффективностью. Постоянно обновляя плагины, темы и CMS, вы можете избежать этих проблем.

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

5. Измените дизайн всплывающих окон для мобильных устройств

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

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

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

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

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

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

6. Включить ускоренные мобильные страницы (AMP)

В рамках миссии Google по обеспечению более плавного просмотра веб-страниц на мобильных устройствах компания недавно запустила проект ускоренных мобильных страниц (AMP). Проект значительно вырос с момента его открытия в 2015 году, и многие сайты теперь используют AMP, чтобы их мобильные версии работали с максимальной производительностью.

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

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

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

7. Создайте мобильное приложение

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

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

Хотя мобильное приложение можно написать с нуля (или нанять для этого разработчика), гораздо более простым решением является использование инструмента, который поможет вам превратить ваш сайт в приложение. Одним из таких решений, оптимизированных для пользователей WordPress, является AppPresser.

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

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

Приглашаем вас сердечно

Присоединяйтесь к группе DreamHost в Facebook, чтобы общаться с единомышленниками-владельцами веб-сайтов и получать советы от коллег и экспертов!

Это мобильный мир

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

У вас есть вопросы по созданию веб-сайта, оптимизированного для мобильных устройств? Присоединяйтесь к нам в сообществе DreamHost и давайте начнем разговор!

10 способов оптимизации вашего сайта для мобильного поиска

Mobile — это не просто путь в будущее. Это путь настоящего.

Google работает над разделением настольных компьютеров и мобильных устройств на отдельные индексы .И мобильный будет первичным.

SEO-специалиста вроде меня продвигают мобильные приложения уже почти пять лет.

Это уже не новая идея.

Исследование

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

Знаете ли вы, что мобильные устройства являются нашим основным подключением к Интернету?

Фактически, на мобильные устройства приходится 71% общего времени онлайн в США

Это не просто мобильный телефон, а конкретно смартфоны.Мы любим наши смартфоны!

Их используют больше, чем настольные компьютеры, ноутбуки и планшеты.

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

Но как именно это сделать?

Мобильный поиск отличается от поиска на компьютере в нескольких отношениях.

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

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

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

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

Давайте перейдем к делу.

1. Используйте разметку ускоренных мобильных страниц (AMP)

По состоянию на февраль 2016 года AMP был официально интегрирован в результаты мобильного поиска Google.

Это означает, что вы получите некоторые очень важные преимущества, добавив разметку AMP на свою веб-страницу.

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

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

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

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

Этот метод позволяет упаковать тонны контента в один результат поиска, значительно увеличивая охват.

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

Теперь у меня есть два горизонтальных канала контента в вертикальных результатах поиска.

Вы начинаете понимать, почему AMP важен?

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

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

Есть три компонента для успешного внедрения AMP в структуру вашего веб-сайта.

  • AMP HTML — этот переработанный HTML-код использует пользовательские команды, связанные с AMP, для более динамичного мобильного контента.
  • AMP JS — Асинхронная загрузка является целью структуры AMP Javascript.
  • AMP CDN — размещенная в Google сеть доставки контента с кэшированным контентом.

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

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

Убить двух зайцев одним выстрелом — мечта маркетологов.

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

Google также сильно полагается на схему для мобильного поиска.

2. Реализовать разметку схемы

Вы уже знаете, что я фанат структурированных данных.

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

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

Для того, чтобы начать работу, не требуется технический гений. Мне очень нравится плагин для WordPress под названием Schema App Structured Data .

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

Когда мы ищем термин «что такое контент-маркетинг?» например, нам предоставляется информационное окно с ответами на связанные вопросы.

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

Конечно, это только при реализации разметки схемы.

Но это не единственное преимущество.

Обратите внимание на этот поиск «коробки подписки на питание».

Схема

Buzzfeed позволяет ему превзойти все, кроме кампаний PPC для Blue Apron и HelloFresh (ни одна из которых не показана в предварительном просмотре статьи Buzzfeed).

По сути, Buzzfeed помещает список в список результатов поиска.

Это еще раз доказывает успех онлайн-рассылки (и мастерство Buzzfeed).

Даже кампания PPC для этого термина несколько высока — почти 6 долларов.

Использование смазки для локтей вместо траты денег никогда не является плохой идеей.

У нас еще есть еще кое-какие технические вопросы, поэтому я надеюсь, что вы все еще со мной.

Не волнуйтесь. Это не становится слишком шатким.

3. Выберите адаптивный веб-дизайн

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

И Google четко дал понять, что будет продолжать уделять приоритетное внимание только мобильному дизайну.

Отзывчивый HTML адаптируется в соответствии с размером экрана и ориентацией устройства, просматривающего контент.

Например, код столбца фиксированной ширины выглядит так.

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

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

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

На рабочем столе, прогноз погоды может быть альбомным.

Но на мобильных устройствах эту информацию нужно отображать вертикально.

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

Конечно, вам даже не нужно самостоятельно программировать свой сайт. Многие люди и компании используют WordPress.

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

Теперь нам нужно поговорить об изображениях.

4. Сжать изображения

Изображения необходимы для динамического веб-контента.

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

Это не случайно. Визуальный контент — главный приоритет для цифровых маркетологов.

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

Это означает, что на моих веб-серверах есть ТОННА изображений.

Фактически, большая часть моих ежемесячных расходов идет только на изображения.

Несмотря на то, что нам нужны изображения высокого качества, важно также не занимать много места.

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

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

PNG чаще всего рекомендуется из-за его способности сжимать до 95% в Photoshop с небольшой потерей качества.

Это потому, что веб-оптимизация сильно отличается от печати.

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

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

5. Удалить вспышку

Обычно я не люблю много отрицать, но Flash — одна из тех вещей, которые меня никогда не волновали.

Может быть, я просто недостаточно техничен, чтобы оценить это.

В первые годы Интернета Adobe Flash был в моде.

Анимированные веб-сайты были созданы с чрезмерно сложным дизайном, который в конечном итоге стал слишком большим.

Преобладал гладкий, простой дизайн, такой как Google, Medium, Craigslist, Facebook и Amazon, в то время как яркий (каламбурный) дизайн начал падать.

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

Уязвимости в Flash делают его еще менее привлекательным для веб-дизайна.

Это также запрещено в проекте Google AMP.

Flash отлично подходит для игр .

Его можно интегрировать в приложения с потрясающими результатами.

Однако

Flash не место на вашем сайте.

Снимите.

6. Посмотрите на свой мобильный сайт

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

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

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

Он сильно отличается от типичного F-шаблона, который мы используем для чтения страниц рабочего стола.

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

Вы также сможете упростить структуру страницы.

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

Это идеальное место для CTA или кнопки покупки.

Это типы решений, которые вы можете принять, только просмотрев свой веб-сайт.

Вы не выпустили бы приложение без бета-тестирования это.

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

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

7. Воспользуйтесь бесплатными инструментами Google

Существует множество поисковых систем, но Google остается королем.

На его долю приходится 77,43% из 6 586 013 574 ежедневных поисков в Интернете!

Индексирование вашего сайта в Google — важный первый шаг для публикации любого веб-сайта или контента в Интернете.

Таким образом, имеет смысл использовать все бесплатные инструменты, которые Google предлагает нам.

И Google повсюду интегрирует ценные мобильные данные.

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

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

Вот как на нем выглядит мой сайт.

Это отличная отправная точка, чтобы понять, что вы делаете правильно и неправильно.

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

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

Эти полезные руководства — лишь часть экосистемы поддержки Google для веб-мастеров. Он также имеет форумы и поддержку в чате.

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

Нажав «Мобильные устройства» → «Устройства», я могу увидеть более подробную информацию о том, какие именно мобильные устройства обращаются к моему веб-сайту.

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

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

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

Пора обсудить скорость сайта!

8. Ускорить все и вся

Скорость важна.

Исследования неизменно показывают, что медленная загрузка страницы приводит к высокому показателю отказов.

Вот диаграмма , показывающая корреляцию.

Мы также проанализировали более 100 000 URL-адресов , чтобы узнать время загрузки страницы для различных URL-адресов на основе ранжирования.

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

Мы обнаружили, что 5 лучших результатов поиска превосходят остальные.

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

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

Еще один отличный способ увеличить скорость сайта — это минимизировать код.

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

Нам нужно сократить это до основ для мобильных устройств.

Это можно сделать на сайте minifycode.com .

Вот еще несколько уловок, которые стоит попробовать:

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

Мой следующий совет кажется очевидным, но его часто упускают из виду.

9. Отмечать сообщения на основе поиска с мобильных устройств

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

При поиске на ходу вы, скорее всего, отвлечетесь, сделаете опечатки и введете слова не по порядку.

Это дает возможность опытным оптимизаторам поисковых систем.

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

Теги можно ввести в WordPress, выбрав «Сообщения — Теги» или введя теги в отдельные сообщения.

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

Например, если мы хотим ранжироваться по запросу «Игры для Android» и искать похожие запросы в Планировщике ключевых слов Google, мы видим, что «игра для Android» получает столько же трафика.

Это не только эквивалент трафика, но и половина стоимости кампании AdWords PPC.

Это открытие удваивает наш потенциальный охват!

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

Теги заголовков — еще одно отличие мобильных устройств от настольных компьютеров. В мае 2016 года Google увеличил ограничение на количество символов в теге заголовка до 78 для мобильного (против 70 на компьютере).

Это дает нам 8 дополнительных персонажей для игры.

Вот продукт Amazon, результат на компьютере.

На самом деле он обрезается на 60 символах, так как он не может уместить следующее слово вместе с многоточием в лимит в 70 символов.

Вот тот же результат поиска на мобильном телефоне.

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

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

Не сразу очевидно, что мы смотрим на Костюм принцессы Леи , пока не перейдем на мобильное устройство.

Это особенно удобно с длинными ключевыми словами.

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

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

10. Удаление всплывающих окон с мобильного сайта

всплывающих окна находятся в поле зрения Google с августа 2016 года.

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

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

Вот три примера из Google, на что он нацелен.

Рассмотрите возможность замены всплывающих окон медийной рекламы другими формами цифровой рекламы.

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

Вы также можете добавить подсказки и кнопки CTA в содержимое вашей страницы.

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

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

Заключение

Mobile — это будущее онлайн-поиска.

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

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

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

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

Узнайте, как мое агентство может привлечь огромное количество трафика на ваш веб-сайт

  • SEO — разблокируйте огромное количество SEO-трафика.Смотрите реальные результаты.
  • Контент-маркетинг — наша команда создает эпический контент, которым будут делиться, получать ссылки и привлекать трафик.
  • Paid Media — эффективные платные стратегии с четким ROI.

Заказать звонок

Mobile Web — W3C

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

См. Также страницы инициативы Mobile Web.

В чем особенность авторинга для мобильных устройств?

Флип-карточки с рекомендациями для мобильного Интернета Краткое изложение рекомендаций

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

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

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

Ряд препятствий, с которыми сталкиваются мобильные пользователи, аналогичны тем, с которыми сталкиваются люди с ограниченными возможностями. Эти сходства делают естественным стремление к разработке веб-сайтов, доступных как для людей с ограниченными возможностями, так и для мобильных устройств.Таким образом, два справочных документа в этом разделе, Руководство по доступности веб-контента (WCAG) и Mobile Web Best Practices , имеют ряд ссылок и сходств.

Какие технологии были разработаны для мобильных устройств?

За последние годы W3C разработал ряд веб-технологий, которые явно учитывают особенности мобильные устройства:

  • CSS Mobile, профиль языка каскадных таблиц стилей, который соответствует потребностям авторов мобильного Интернета.
  • SVG Tiny, профиль масштабируемого формата векторной графики Интернета, хорошо подходящий для возможностей мобильных устройств.
  • XHTML для мобильных устройств, который определяет подмножество XHTML для мобильных устройств.

Мобильные браузеры последнего поколения могут использовать более продвинутые веб-технологии, включая функции из HTML5, CSS 2.1 и 3, ряд многофункциональных API-интерфейсов JavaScript , открывающих путь для мобильных веб-приложений (включая виджеты).

Узнать больше

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

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

Контактное лицо: Доминик Хазаэль-Массье

.

No related posts.

Leave a Reply