Сайт под мобильные устройства: Оптимизация сайта для мобильных устройств — SEO на vc.ru

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

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

Есть три основные и две дополнительные возможности оптимизации для мобильной выдачи.

1. Мобильные сайты

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

m.site.ru.

• Если разработали мобильный сайт, не забудьте связать его страницы с десктопными специальными атрибутами. Для этого нужно на мобильных страницах настроить тег <link> с элементом rel=»canonical», указывающим на страницу для компьютеров. А на десктопных страницах — с элементом rel=»alternate», который укажет на соответствующую мобильную страницу. Каждой десктопной должна соответствовать только одна мобильная страница, а каждой мобильной — одна десктопная. Задать rel=»alternate» можно также с помощью специальных атрибутов в Sitemap. Поисковики поддерживают такие теги в sitemap.xml:

• Настройте переадресацию. Необходимо настроить автоматическую переадресацию с помощью HTTP-запроса или JS. HTTP-запрос учитывает агент пользователя и перенаправляет посетителя на соответствующую версию сайта. В документации Google рекомендуется настроить 302-й ответ сервера для такого перенаправления. Перенаправление с помощью JS будет отнимать драгоценные секунды при загрузке страницы. Принцип работы скрипта: если минимальная ширина экрана устройства равна определенному значению в пикселях, то необходимо перенаправить пользователя на соответствующую страницу rel=”alternate”. Сначала браузер загрузит страницу, затем выполнит JS, а потом при необходимости перенаправит пользователя на подходящую версию.

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

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

• Нужно разрешить Googlebot сканировать CSS, JS, изображения на страницах.

• При реализации адаптивной версии важно настроить тег meta name=»viewport».

Метатег передает браузеру информацию о ширине экрана устройства. В соответствии с этими данными браузер строит модель CSSOM. Справка Google

3. Динамический показ

По одному URL отдается разный HTML и CSS. Чтобы отправить корректный вариант кода страницы, сервер обращается к агенту пользователя через HTTP-запрос Vary. Если у пользователя мобильный агент, то сервер отдаст соответствующий код.

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

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

Для наглядности занесем все, что можно сравнить, в таблицу:

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

Уровень подготовки веб-мастера: для всех

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

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

Вот список новых рекомендаций:

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

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

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

этого сервиса.

что лучше с точки зрения SEO — SEO на vc.ru

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

Дмитрий Мрачковский, оптимизатор из «Ашманов и партнёры», рассказал, как выбрать между адаптивом и мобильным сайтом и с какими неочевидными проблемами предстоит столкнуться.

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

Трудно однозначно ответить на вопрос, какая технология адаптации под смартфоны и планшеты эффективнее с точки зрения SEO. Даже среди крупных игроков я не заметил перевеса в пользу какого-то решения. «М.Видео», DNS, Wildberries, Aviasales используют адаптивную вёрстку, а Lamoda, «220 Вольт», «Юлмарт», «Яндекс.Маркет» — мобильные сайты. Но давайте разберём, какие преимущества получают первые и вторые.

Адаптивная вёрстка сайта «М.Видео» и мобильный версия сайта «220 Вольт»

Адаптивная вёрстка помогает обойтись без разработки отдельной мобильной версии. У этого есть плюсы:

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

Мобильная версия — более затратное и гибкое решение. Её можно редактировать, не влияя на основной сайт. Это даёт преимущества:

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

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

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

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

Ошибочная интерпретация адаптива

SEO под мобильные устройства — Практические рекомендации || Блог Megaindex.com

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

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

Далее приведены практические советы по оптимизации сайта и ответы на вопросы.

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

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

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

1 — Используйте HTTP/2

HTTP/2.0 является улучшенной версией протокола HTTP.

При использовании протокола HTTP/2 уменьшается объем передаваемых данных и скорость загрузки страниц возрастает.

В результате протокол HTTP/2 косвенно влияет на позиции сайта.

В HTTP/2.0 есть ряд улучшений:

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

2 — Создайте адаптивную версию сайта

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

Итак, у сайта будет два CSS стиля:

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

Верстка страницы в адаптивном стиле:

3 — Откройте CSS и JS для индексации

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

Анализ проводится для создания рендера страницы.

Процесс обработки страницы в виде инфографики представлен далее:

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

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

4 — Удалите элементы, которые не поддерживаются мобильными браузерами

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

Удалите следующие элементы:

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

Поисковая система распознает на страницах всплывающие элементы.

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

5 — Настройте перелинковку, если для мобильной и десктопной версии используются разные хосты

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

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

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

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

<link rel="alternate" href="desktop">

В полной версии сайта следует указать:

<link rel="alternate" href="mobile">

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

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

6 — Замените механизм загрузки дополнительного контента с AJAX на CSS

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

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

Поисковой системой Google допускается скрытие контента с использованием стилей:

On the mobile version of the page it can be that you have these kind of tabs and folders and things like that, which we will still treat as normal content on the page. Even if it is hidden on the initial view.

7 — Оптимизируйте скорость загрузки страницы

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

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

Прежде всего, следует использовать инструмент от Google. Ссылка на инструмент — PageSpeed Insights.

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

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

Дополнительный инструмент для анализа скорости загрузки от Google называется Test My Site.

Ссылка на сервис — Test My Site.

8 — Оптимизируйте параметры текста

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

• Используйте размер шрифта 14 пикселей, лучше 15 или 16;
• Используйте короткие абзацы, 1-2 приложения в абзаце;
• Разбавляйте текст графическими элементами;
• Сделайте контраст между текстом и фоном, пользователи используют телефоны на улице, что может затруднять чтение низкоконтрастного текста на солнце;
• Сделайте интерлиньяж между параграфами в 50 — 60 символов.

9 — Используйте Viewport Content

Если на сайте используется адаптивный дизайн, следует добавить мета-тег viewport.

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

Google рекомендует прописать мета-тег так:

<meta name=viewport content=>

10 — Оптимизируйте первый экран

Выполните 2 простых улучшения:

• Используйте много контрпространства. Контрпространством называется пространство между текстом, кнопками и элементами дизайна;
• Минимизируйте контент, расположенный до заголовка текста.

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

Рекомендованный материл в блоге MegaIndex по теме Dwell Time по ссылке далее — Фактор ранжирования Dwell Time — что это и как его оптимизировать для роста позиций в выдаче?

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

11 — Оптимизируйте длину сниппетов

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

Средние значения для выдачи на десктопе:

• Title: 70 символов;
• Description: 155 символов.

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

• Title: 78 символов;
• Description: 155 символов.

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

12 — Используйте Accelerated Mobile Pages

Если с внедрением адаптивного дизайна есть сложности, то следует использовать Accelerated Mobile Pages.

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

Ссылка на проект AMP — AMP Project.

Технология AMP разрабатывается и поддерживается Google.

Google показывает в поисковой выдаче маленький значок рядом AMP страницами, который может повысить кликабельность сайта:

При открытии страницы, в строке браузера будет выводиться адрес Google. Если на подобные страницы будет размещена внешняя ссылка, то вес будет перетекать к доменному имени google.com.

Пример URL для сайта indexoid.com:

http://google.com/amp/s/indexoid.com

Вопросы и ответы

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

Не рекомендуется использовать отдельную мобильную версию сайта:

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

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

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

Итак, адаптация сайта под мобильные устройства проводится для повышения позиций в Google. Но как провести проверку выполненной работы?

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

Ссылка на инструмент — Mobile-Friendly Test.

Есть инструмент и в Google Search Console. Ссылка на инструмент — Удобство для мобильных.

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

Ссылка на инструмент — Проверка мобильных страниц.

Почему адаптивность сайта стала фактором ранжирования?

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

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

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

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

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

Следует заметить 3 аспекта:

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

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

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

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

Google:

when we speak of mobile devices, we generally do not include tablets in the definition

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

Как называются алгоритмы?

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

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

Алгоритм ранжирования от Yandex, который оценивает сайт на предмет адаптивности к мобильным устройствам, называют Владивосток. Название произошло от имени соответствующего города, поскольку по данным исследования «Развитие интернета в регионах России», Дальний Восток лидировал по доле пользователей мобильного интернета среди всех пользователей России.

Заявление от Yandex:

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

Есть ли подтверждения на практике?

Сразу после внедрения алгоритма поисковой системой Google было проведено пару исследований.

Специалисты из Search Metrics обнаружили, что в среднем показатель потери позиций для не адаптированных сайтов составил 0,21.

Специалисты Bright Edge исходя из анализа 20,000 страниц обнаружили, что 21% не адаптированных страниц был понижен в поисковой выдаче в рамках топ-30 результатов.

Есть ли влияние на десктопную поисковую выдачу?

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

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

Выводы

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

Итак, выводы в сжатой форме:

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

Кстати, используя MegaIndex можно провести базовый SEO аудит сайт. Приложение находится в стадии разработки и предоставляется на бесплатной основе. Ссылка на сервис — MegaIndex Аудит.

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

Как и зачем адаптировать сайт для мобильных устройств — Офтоп на vc.ru

1. Вступление.
2. Правильный подход.
3. Поисковая выдача.
4. Конверсия.
5. Технологии.
6. Адаптивный.
7. Обычный.
8. Динамический JS.
9. Динамический показ.
10. Плагин.
11. Разные URL.
12. Отдельная CMS.
13. API.
14. Конструктор.
15. Правильный выбор.
16. Особенности адаптации.
17. Изображения.
18. Таблицы.
19. Иконка Web App.
20. Баннер Web App.
21. Геолокация.
22. Пуш-уведомления.
23. Масштабирование.
24. Плавная прокрутка.
25. Тестирование.
26. Ошибки дизайнеров.

Вступление

После запуска более 100 мобильных сайтов за последние три года, включая такие крупные проекты, как Ozon, «Эльдорадо», «Леруа Мерлен», «Финам» и многие другие, я все еще часто вижу у разрабочиков и руководителей непонимание адаптации — как стратегическое, так и практическое. Чтобы сэкономить время, определите с помощью этой схемы, в какой группе вы находитесь, и перейдите сразу к разделам «Технологии» или «Ошибки дизайнеров». Или просто продолжайте читать.

Правильный подход

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

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

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

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

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

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

Сайт пенсионного фонда с ежемесячной посещаемостью 300 тысяч пользователей

К чему вся эта предыстория? Три вывода:

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

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

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

Поисковая выдача

Еще с апреля 2015 года Google лучше ранжирует сайты, у которых есть мобильная версия. В результатах поиска подобные сайты помечаются лейблом «Для мобильных». Чтобы понять, соответствует ли ваш сайт требованиям поисковой системы, попробуйте этот инструмент.

Лояльность

Этот как раз тот параметр, который невозможно измерить без тщательного исследования, хотя в Google попробовали (результаты исследования на картинке сверху). Для сравнения можно взять два магазина: в одном вам нагрубили — во втором обошлись вежливо. Мне приятнее заходить на сайт, которым удобнее пользоваться, и этот бренд вызовет у меня больше доверия. Именно это субъективное состояние приводит к следующему шагу — конверсии.

Конверсия

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

Итак, вы согласны с тем, что корректная работа и отображение сайта на смарфтонах важны, но этой уверенности недостаточно. С этого момента вам нужно иначе смотреть на любой веб-проект — думать сначала о мобильных юзерах, а затем уже о десктопных. Такой подход называется mobile first. Подробнее об этом подходе вы можете прочитать в блоге Люка Врублевски или в его книге Mobile First.

После знакомства с подходом люди разделяются на три группы:

1. Полностью согласны с подходом.
2. Видят в нем смысл, но считают его технически невозможным.
3. Не видят в нем смысла.

Первой и второй группе советую сразу перейти к разделу «Технологии», выбрав подходящий вариант для своего проекта.

Третья группа — это, как правило, либо разработчики, которые не изменяют своим устаревшим убеждениям, либо совершенно далекие от разработки менеджеры, также не готовые меняться. Слова mobile first и вправду звучат прикольно, но реализовать их на практике бывает гораздо сложнее. Основная сложность в том, что человек боится меняться, — в итоге новые технологии внедряются долго и мучительно. Рано или поздно такие люди незаметно для себя примут этот подход, как это произошло с отказом от технологии Flash па

Оптимизация шаблона сайта под планшет и телефон (мобильные устройства)

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

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

CSS-стили под разное разрешение экрана и устройство

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

Перед тем, как приступить к написанию стилей, убедитесь, что между тегами <head/>, вашего шаблона, прописана meta-строчка:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

Итак, в зависимости от размера экрана, мы можем прописать отдельные стили в файле сss: основной стиль для компьютера, потом для размера ниже 992px и 768px (для планшетов), и для 480px и 320px (для телефонов).

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

Пример:

.content{background-color: #FBFBFB; position: relative;margin: 0;padding: 0;border: 0;float: left;overflow: hidden; max-width: 768px; width: 100%;}
.sidebar1{background-color: #FBFBFB; position: relative;margin-right: 0;padding: 0;border: 0;float: left;overflow: hidden; width: 100%; max-width: 268px;}
blockquote{margin:10px 10px 10px 35px;}

/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {
  .content{max-width: none; width: 100%;}
  .sidebar1{max-width: none; width: 100%;}
  blockquote{margin:10px;}
}

/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {
  .content{max-width: none; width: 100%;}
  .sidebar1{max-width: none; width: 100%;}
  blockquote{margin:10px;}
}

/* Extra Small Devices, Phones */
@media only screen and (max-width : 480px) {
  .content{max-width: none; width: 100%;}
  .sidebar1{max-width: none; width: 100%;}
  blockquote{margin:10px;}
}

/* Custom, iPhone Retina */
@media only screen and (max-width : 320px) {

}

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

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

Посмотреть, как выглядит ваш сайт на разных устройствах, можно в браузере Chrome, или Яндекс Браузере, с помощью расширения «Window Resizer». А также можно использовать стандартную «фишку» — нажав клавишу F12, кликните по значку телефона (как показано на скриншоте ниже) и вы попадете в такую среду:

Пример в Яндекс Браузере (при нажатии на F12):

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

Читайте также как пройти проверку если Google пишет «Страница не оптимизирована для мобильных устройств».

Вот те видеоролики, о которых я упомянул вначале заметки:

P.S. На этом блоге я только начал пробовать адаптировать. Может что и получится

Верстка для мобильных устройств / Хабр

Общая информация

Так как мобильных устройств существует великое множество, то одна модель может поддерживать какие-либо возможности HTML/CSS, а другая наоборот — либо не поддерживать, либо поддерживать неправильно.

Но большинство устройств среднего и уж тем более hi-end класса поддерживают HTML/CSS в той или иной степени. Таким образом, язык WML для разработки сайтов под мобильные устройства устарел и практически не используется. На смену ему постепенно приходит общепризнанный стандарт в разработке сайтов — XHTML/CSS. Кодировка — строго UTF-8 (No BOM).

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

Практически везде на известных мобильных сайтах, таких как Google, Яndex, используется DOCTYPE XHTML Mobile 1.0:

    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">

Также, иногда встречаются сайты с DOCTYPE XHTML Basic 1.1:

    <?xml version="1.0" encoding="utf-8"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">

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

Особенности верстки

Подключение CSS

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

    <style type="text/css">
        body {
            background-color: #E9E9CC;
            font-family: sans-serif;
            font-size: small;
            }
   </style>

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

Сокращенная запись свойств

Есть мнение, что стили вроде padding и margin нужно прописывать отдельно, используя padding-left, padding-top, margin-right и т.д. Точно так же следует поступать со всеми свойствами, которые имеют короткую запись. Например красный цвет фона стоит лучше записать как background-color: #ff0000;, а не background-color: #f00; и тем более не background: #f00;.

Фон элементов

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

Изображения

Все изображения на сайте желательно заключать в тег <img> и не забывать добавлять атрибут alt, потому что загрузка изображений на устройстве может быть отключена, и вместо него нужно вывести замену текстом, ну и в конце концов, — мы ведь XHTML используем. 😉 При подготовке изображений желательно ужимать их до минимального размера. При добавлении изображения в документ необходимо указывать его размеры атрибутами width и height.

В итоге, каждое изображение, вставленное в документ должно иметь вид:

    <img src="image.gif" alt="Текстовая замена" />

Таблицы

Старайтесь избегать сложных, в том числе вложенных таблиц, т.к. некоторые браузеры могут не справиться с их рендерингом и вывести кашу вместо таблицы. Также нельзя использовать атрибуты cellpadding и cellspacing, они не включены в DOCTYPE. И ни в коем случае не следует применять таблицы для верстки страниц. Таблицы не удобны в применении на маленьких экранах: чтобы прочитать объёмную таблицу, приходится применять горизонтальную прокрутку, чего тоже следует избегать учитывая, что разрешение экранов мобильных устройств несравнимо меньше, чем у настольного монитора.

Списки

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

Шрифты

Мобильные устройства в большинстве своем имеют очень плохую поддержку шрифтов, поэтому полагаться на то, что текст будет отображен именно тем шрифтом, который был задан в стилях не стоит. Но указывать хотя бы гарнитуру (serif или sans-serif) все равно нужно. Размер шрифтов желательно задавать в относительных единицах или, что еще лучше указывать аргументы свойства font-size в значениях small, medium, или large.

Плавающие элементы

Нельзя использовать плавающие элементы. Большинство браузеров просто не умеют их обрабатывать. Т.е. при создании верстки старайтесь не использовать такие свойства, как float, clear, overflow, clip.

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

Тестирование необходимо производить в нескольких режимах:

• с загрузкой изображений и стилей
• без загрузки изображений
• без загрузки стилей
• с полностью отключенными стилями и изображениями

Для тестирования сайтов удобно пользоваться эмулятором Opera Mini, а также встроенной функцией в Opera (для десктопа) в меню «Вид» -> «Небольшой экран».

Мобильные браузеры

Ссылки

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

Страна

Выберите страну Соединенные Штаты объединенное Королевство Австралия Канада Германия Франция Испания Афганистан Алжир Ангола Антигуа и Барбуда Аргентина Армения Австрия Азербайджан Бахрейн Бангладеш Барбадос Беларусь Бельгия Бенин Босния и Герцеговина Бразилия Бруней Болгария Буркина-Фасо Камбоджа Камерун Кабо-Верде Чад Чили Китай Колумбия Коморские острова Коста-Рика Берег Слоновой Кости Хорватия Кипр Чехия Демократическая Республика Конго Дания Джибути Доминика Доминиканская Респблика Эквадор Египет Сальвадор Эритрея Эстония Eswatini Эфиопия Федеративные Штаты Микронезии Фиджи Финляндия Французская Полинезия Габон Грузия Гана Греция Гренада Гуам Гватемала Гвинея Гайана Гаити Гонконг Венгрия Исландия Индия Индонезия Ирак Ирландия Израиль Италия Ямайка Япония Казахстан Кения Кувейт Киргизия Лаос Латвия Ливан Лесото Либерия Ливия Литва Люксембург Мадагаскар Малави Малайзия Мальта Мавритания Маврикий Мексика Молдова Монголия Черногория Марокко Мозамбик Мьянма (Бирма) Намибия Непал Нидерланды Новая Каледония Новая Зеландия Никарагуа Нигер Нигерия Северная Македония Северные Марианские острова Норвегия Пакистан Palau Панама Папуа — Новая Гвинея Парагвай Перу Филиппины Польша Португалия Катар Румыния Россия Руанда Сент-Китс и Невис Святой Винсент и Гренадины Самоа Сан-Томе и Принсипи Саудовская Аравия Сенегал Сербия Сьерра-Леоне Сингапур Словакия Словения Соломоновы острова Сомали Южная Африка Южная Корея Шри-Ланка Суринам Швеция Швейцария Тайвань Таджикистан Танзания Таиланд Гамбия Идти Тонга Тунис Турция Туркменистан Уганда Украина Объединенные Арабские Эмираты Уругвай Узбекистан Вануату Венесуэла Вьетнам Йемен Замбия Зимбабве

,

мобильных приложений и сайтов с ASP.NET

• 28.01.2011
• 2 минуты на чтение

В этой статье

Разработка мобильных приложений

Мобильные приложения, подключенные к облаку — создание веб-службы с помощью веб-приложений и веб-заданий Azure (часть 1)

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

Мобильные приложения, подключенные к облаку — создание приложения Xamarin с аутентификацией и автономной поддержкой (часть 2)

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

Вызов веб-API из приложения Windows Phone 8

В этом сквозном руководстве показано, как создать приложение веб-API ASP.NET, которое предоставляет данные приложению Windows Phone 8.

Начало работы с мобильными службами Azure

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

Аутентификация в мобильных службах Azure

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

Использование push-уведомлений в мобильных службах Azure

Используйте мобильные службы Azure для отправки push-уведомлений на мобильное устройство.

Разработка мобильных сайтов

Развертывание мобильного приложения ASP.NET MVC 5 на веб-сайтах Windows Azure

Это руководство научит вас основам развертывания приложения MVC 5 на веб-сайте Windows Azure и создания удобных для мобильных устройств представлений с использованием адаптивного дизайна Bootstrap.

Добавить мобильные страницы в приложение ASP.NET Web Forms / MVC

Это руководство описывает различные способы обслуживания страниц, оптимизированных для мобильных устройств, из вашего ASP.NET Web Forms / MVC и предлагает проблемы архитектуры и дизайна, которые следует учитывать при нацеливании на широкий спектр устройств.

Обнаружение новейших мобильных устройств с помощью 51degrees.mobi Foundation

51degrees.mobi Foundation — это сторонний проект с открытым исходным кодом, который расширяет API-интерфейс ASP.NET Request.Browser, чтобы вы могли легко обнаруживать недавно выпущенные мобильные устройства, включая Windows Phone 7, Android и Apple iPad.

Мобильные веб-сайты с ASP.NET MVC и файлом определения мобильного браузера

В своем выступлении на конференции Microsoft MIX Скотт Хансельман обсуждает, как создавать веб-сайты, удобные для мобильных устройств, с помощью ASP.NET MVC.

Разработка приложений для iPhone с помощью ASP.NET

ComponentOne Studio для iPhone — это набор элементов управления ASP.NET, которые имитируют внешний вид пользовательских интерфейсов iPhone и iPod touch при визуализации в Mobile Safari.

,

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

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

Хорошее

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

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

Плохое

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

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

Когда правильно выбрать этот вариант

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

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

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

Примеры

Большинство основных веб-приложений, которые вы видите в природе, выбрали этот путь, включая Facebook, YouTube, Digg и Flickr.Фактически, Mozilla выбрала эту стратегию для мобильных версий addons.mozilla.org (AMO) и support.mozilla.org (SUMO). Если вы хотите увидеть исходный код, стоящий за примером этого подхода в действии, не стесняйтесь проверить репозиторий github для AMO или SUMO.

Подходы к мобильной веб-разработке

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

.

Мобильная веб-разработка — веб-технологии для разработчиков

На этой странице представлен обзор некоторых основных методов, необходимых для разработки веб-сайтов, которые хорошо работают на мобильных устройствах. Если вы ищете информацию о проекте Mozilla Firefox OS, посетите страницу Firefox OS. Или вам может быть интересно узнать больше о Firefox для Android.

Мы разделили его на два раздела: разработка для мобильных устройств и кроссбраузерная совместимость. Также см. Руководство Джейсона Грлики по мобильным устройствам для веб-разработчиков.

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

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

Работа с маленькими экранами

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

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

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

Работа с сенсорными экранами

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

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

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

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

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

Мобильные API

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

Кроссбраузерная разработка

Написать кроссбраузерный код

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

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

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

См. Этот список свойств, специфичных для Gecko, и этот список свойств, специфичных для WebKit, и таблицу Питера Беверлоо свойств, зависящих от поставщика.

Использование таких инструментов, как CSS Lint, может помочь найти подобные проблемы в коде, а препроцессоры, такие как SASS и LESS, могут помочь вам создать кросс-браузерный код.

Позаботьтесь о сниффинге пользовательского агента

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

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

Тестирование в нескольких браузерах

Протестируйте свой веб-сайт в нескольких браузерах. Это означает тестирование на нескольких платформах — по крайней мере, iOS и Android.

,