оптимизация сайта для мобильных телефонов

Содержание

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

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

Три способа адаптации сайта

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

Конфигурация	URL остается неизменным	HTML остается неизменным
Адаптивный дизайн
Динамический показ
Разные URL

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

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

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

Google не отдает предпочтения каким-либо форматам URL, если страницы и все ресурсы на них доступны всем агентам пользователя Googlebot.

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

Обязательные действия

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

Особенности разных устройств

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

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

Мультимедийные телефоны. Браузеры этих устройств могут отображать страницы, соответствующие стандартам XHTML, поддерживают разметку HTML5, JavaScript и ECMAscript, но могут не поддерживать некоторые API расширений в стандарте HTML5. Сюда относятся телефоны, способные принимать сигналы сетей 3G и не являющиеся смартфонами.

Мобильные телефоны среднего класса. Их браузеры не могут показывать обычные веб-страницы со стандартным HTML-кодом. В частности, это браузеры, которые поддерживают только cHTML (iMode), WML, XHTML-MP и т. д.

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.

Источник

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

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

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

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

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

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

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

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

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

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

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

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

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

Использование адаптивной вёрстки

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

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

Динамический показ (RESS)

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

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

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

Источник

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

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

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

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

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

С чего начать?

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

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

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

Стоимость разработки зависит от разных факторов. Вот некоторые примеры:

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

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

1. Сайт должен быть удобным.

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

Проанализируйте действия, которые совершает пользователь при посещении сайта, чтобы сделать их максимально простыми для владельцев мобильных устройств. Подумайте, нельзя ли сократить количество таких действий, и в целом постарайтесь сделать интерфейс как можно более удобным. В этом примере (1) клиент попадает на сайт после того, как вводит поисковый запрос «Купить лампу»; (2) он просматривает ассортимент, а затем (3) покупает понравившийся товар.

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

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

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

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

При адаптивном дизайне у страницы одинаковый URL и код на всех устройствах, при этом страница автоматически подстраивается под экран компьютера, планшета или смартфона. Google рекомендует использовать именно этот вариант. Его преимущество заключается в том, что вам нужно будет поддерживать всего один сайт вместо двух. Например, если у вас было два сайта ( www.example.com для компьютеров и m.example.com для мобильных устройств), то останется только www.example.com для всех посетителей.

«Благодаря адаптивному дизайну сайт компании Baines & Ernst одинаково хорошо выглядит на экранах разных размеров. При этом специалистам компании не пришлось создавать несколько его версий. В результате пользователи за один визит стали посещать на 11 % больше страниц, а количество конверсий с мобильных устройств увеличилось на 51 %.»

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

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

Три совета для начинающих создателей сайтов

Источник

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

Вместе с ростом мобильного интернета растёт и необходимость оптимизации скорости работы мобильных сайтов. Даже самые современные смартфоны на Android, iOS, WebOS, BlackBerry OS и др. обладают процессорами с частотой не более 1Ghz, а скорости 3G можно считать достаточно медленными (скорость загрузки в 3 раза меньше DSL).

Мобильные устройства унаследовали проблемы “больших” машин: от количества http-запросов до эффективности работы JavaScript.

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

Общие рекомендации

Оптимизация HTML и CSS

Оптимизация изображений

Код выше определяет, что ширина экрана пользователя больше, чем 480px и даёт указание браузеру загружать картинку header-full.png с полноценным разрешением
А вот следующий фрагмент кода, определив, что ширина экрана меньше 480px, предлагает браузеру картинку, адаптированную под маленькие экраны:

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

Однако прежде всего заботьтесь над удобством пользователя. Используя тот же принцип (отдельный контент для мобильных и десктоп устройств), можно сделать сайт приятным для просмотра пользователям с экранами высокого разрешения, в то же время не навредив остальным посетителям.
Например, пользователи iPhone 4 уже привыкли к тому, что на экране их телефона должны быть изображения с высоким DPI (напр. 300). И если вы хотите, чтобы ваш сайт не смотрелся убого на Retina экранах, нужно будет готовить еще один отдельный набор картинок в высоком разрешении и загружать их, используя CSS Media Queries

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

Оптимизация в зависимости от скорости соединения

Начиная с версии Android 2.2 Froyo у разработчиков появилась возможность получать данные о текущем типе подключения к интернету у устройства. Реализуется это при помощи объекта navigator.connection.

Вот пример данных, получаемых с устройства, которое работает в 3G сети:

navigator = <
connection: <
«type»: «4»,
«UNKNOWN»: «0»,
«ETHERNET»: «1»,
«WIFI»: «2»,
«CELL_2G»: «3»,
«CELL_3G»: «4»
>
>;
Тип соединения “4”, что соответствует CELL_3G. Используя простой скрипт можно определить тип соединения и передать эту информацию как CSS класс в HTML элементе.

В результате при определении низкоскоростного соединения мы передаём браузеру посетителя оптимизированные картинки, используя CSS:

Кэширование

Размеры данных которые могут храниться в этих объектах разнятся от браузера к браузеру, но 5 Mb должно хватить в большинстве.
Интересный момент — устройства на Android и BlackBerry OS умеют хранить кэш даже после включения/выключения девайса, в то же время iPhone этим похвастаться не может.

Смартфоны	iPhone 4	Galaxy S	Nexus S	Blackberry Torch
OS / Ver	iOS/4.3	Android 2.2	Android 2.3	Blackberry 6
Постоянный*	0	4	4	25
В памяти**	100	4	4	25

Планшеты	iPad 1	iPad 2	XOOM
OS / Ver	iOS/4.3	iOS/4.3	Android 3.0
Постоянный*	0	0	20
В памяти**	20	50	20

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

Оптимизация javascript

Заключение

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

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

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

Источник

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

По уровню материал близок к основам, поэтому будет полезен начинающим специалистам.

В статье:

Мобилопригодным считается сайт, на котором пользователю удобно работать с мобильных устройств. Как показывает исследование PwC от 2019 года, 79% россиян покупают онлайн с мобильных.

В 2020 году мобилопригодность — обязательное требование к сайтам, оптимизируете вы ресурс для Яндекса или для Google. Учитывать мобилопригодность страниц в ранжировании Яндекс начал с февраля 2015 года, когда ввел алгоритм «Владивосток». Google начал тестировать Mobile-first index в 2016, а до конца 2020 обещает перевести на него все сайты. Этот индекс подразумевает, что независимо от устройства выдача будет мобильной.

По словам представителя Google Джон Мюллера, перевод сайта в Mobile-first index зависит от факторов:

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

Выбор адаптивного шаблона сайта

Для придания сайта мобильной адаптивности используют один из вариантов: мобильную версию, адаптивную или динамическую верстку — RESS (Responsive Design + Server Side).

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

Это отдельный сайт на поддомене. Сервер учитывает user-agent устройства пользователя, определяет, что тот зашел со смартфона, и перенаправляет на версию для мобильного просмотра. К URL-адресу в начало обычно добавляется «m.».

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

Мобильная и полная версия на смартфоне

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

Минусы: придется оптимизировать и администрировать версии отдельно, тратить больше ресурсов, настраивать редиректы. Разработка мобильной версии стоит дороже адаптива.

Адаптивная верстка

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

Если не установить тег, вся десктопная область просмотра уменьшится в масштабе и уместится на экране.

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

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

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

Технология адаптирования сайта для мобильного на стороне сервера. В зависимости от типа устройства сервер отправляет пользователю один из вариантов кода HTML и CSS.

Отображение сайта со смартфона

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

Минусы: проблемы с непопулярными моделями гаджетов, реализация дороже и сложнее. Веб-мастера часто выводят и мобильный, и десктопный шаблоны в коде и закрывают ненужную версию «display: none». Это ошибка, из-за которой загрузка станет медленнее, а бот может некорректно отображать сайт.

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

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

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

Скачайте краткий чек-лист на свой на компьютер или скопируйте в Google Docs, чтобы отмечать выполнение в своем файле.

Пункты из чек-листа с пояснениями и примерами:

1. Реализация отображения на мобильных

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

2. Сайт доступен для роботов

Сделать ресурс доступным для индексирующих роботов нужно в файле robots.txt. Разрешите сканирование CSS и JavaScript, от них зависит, будет ли сайт корректно отображаться на мобильных.

3. Ответ 200 ОК

Если сервер отправляет ответ с HTTP-кодом 200 OK, значит со страницей все в порядке: она доступна для просмотра и корректно отображается в выдаче.

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

Проверка внутренних страниц

4. Поддержка всех технологий

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

5. Быстрая загрузка

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

Сколько секунд должен загружаться сайт?
Конкретных лимитов нет, скорость загрузки сайта зависит и от скорости интернета, поэтому у разных пользователей она может несколько различаться. Джон Мюллер из Google в 2016 году называл около 2-3 секунд для ориентира.

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

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

6. Отдельный фавикон

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

Размеры фавиконов и коды для установки есть в руководстве.

7. Только вертикальная прокрутка

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

8. Крупные значки

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

Крупные элементы на сайте

9. Крупный шрифт

Мелкий шрифт читать неудобно — приходится масштабировать страницу, чтобы не напрягать зрение. Сделайте шрифт крупным, увеличьте высоту строки пропорционально размеру шрифта — около 140% от кегля текста. Для просмотра с устройств на iOS для обычного текста рекомендуют размер 17pt, для Android — 13sp. Исследование Baymard Institute показывает, что оптимальная длина строки — 50-60 символов с пробелами. Ориентируйтесь на аудиторию, если ваши пользователи — люди пенсионного возраста, им будет удобно читать текст покрупнее.м

Текст на странице с рецептами

10. Контрастный текст

Для текста рекомендуем подбирать не строго контрастные цвета: от темного-серого текста на белом фоне глаза устают меньше, чем от черного на белом. Инструмент Color Contrast Checker поможет подобрать сочетание цветов текста и фона.

Фрагмент работы с инструментом

11. Всплывающие окна не закрывают контент

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

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

12. Упрощенная регистрация

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

Быстрая регистрация

13. Использование геоданных

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

Автозаполнение города

14. Упрощенная связь с компанией

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

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

Экспорт номера телефона в журнал вызовов

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

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

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

Фрагмент результатов проверки

Проверить сайт можно прямо в SERP: если ввести в поисковик «mobile friendly», появится поле для ввода адреса сайта.

Проверка в SERP

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

Фрагмент результатов проверки

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

Фрагмент результатов проверки

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

Источник