Мобильная html версия сайта – Как сделать сайт действительно удобным для мобильных устройств — Платон Щукин

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

Больше видео на нашем канале — изучайте интернет-маркетинг с SEMANTICA

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

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

Зачем нужна мобильная версия сайта

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

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

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

Как это работает

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

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

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

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

Мобильная версия vs адаптивная верстка

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

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

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

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

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

Плюсы и минусы мобильной версии

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

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

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

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

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

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

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

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

    <?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">

    <?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>

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

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

Изображения

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

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

Таблицы

Списки

Шрифты

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

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

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

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

Ссылки

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

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

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

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

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

Здесь я вижу два варианта:

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

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

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

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

Если подобное сообщение вам еще не приходило, то это не значит что у вас все гуд.

Существует специальный сервис Гугла «Проверка удобства просмотра на мобильных устройствах», где все легко проверяется достаточно перейти по ссылке www.google.com/webmasters/tools/mobile-friendly/ и ввести URL адрес проекта в специальное поле и нажать «Анализировать».

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

Тем более много посетителей высказалось в статье «Новый дизайн seoslim.ru», что новому обличаю блога не хватает только адаптации под мобильники.

Я сперва не придал этому значение, но когда просмотрел Яндекс Метрику пришел в недоумение. Оказывается, каждый день блог seoslim.ru более 10 % посетителей просматривают именно с мобильных устройств.

Данная статистика доступна из меню Метрики «Технологии» далее «Мобильные устройства».

Плагины мобильной версии сайта для WordPress

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

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

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

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

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

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

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

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

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

После установки перейдите в настройки и активируйте модуль «Мобильная тема».

Хоть здесь и мало настроек, зато Mobile Theme будет работать в 1 клик. Из минусов хочется отметить некоторые проблемы с переводом.

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

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

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

Duda Mobile Website Builder — на этот раз данный плагин представляет из себя мини конструктор мобильной темы для сайта.

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

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

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

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

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

WP Mobile Edition — плагин для мобильной оптимизации блогов, который, по сути, представляет одно и то же, что его собрат WordPress Mobile Pack.

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

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

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

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

А вот как отображается выпадающее меню всех страниц и разделов блога.

Посмотрите, какая картина наблюдается у меня теперь.

Остается ждать трафика…

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

Буду очень признателен, мне важно ваше мнение. До скорой встречи!

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

0. Оценка общего состояния сайта
1. Навигация
2. Дизайн
3. Контент
4. Верстка
5. Взаимодействие с интерфейсом
6. Выбор продукта/услуги
7. Оформление заказа
8. Автоматическая проверка в Вебмастере
9. Что дальше: работа с мобильным трафиком

Как проверить общее состояние мобильного сайта

Быстрая оценка с помощью Метрики

Отчёт Метрики «Устройства» позволяет узнать, как взаимодействовали с сайтом пользователи смартфонов и планшетов. Где посмотреть данные: Стандартные отчеты → Технологии → Устройства.

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

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

Навигация по сайту

Быстрое переключение между разделами

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

Удобные меню

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

Кнопки вместо ссылок

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

Дизайн

Размер страницы, адаптированный под экран мобильного

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

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

Адекватный размер шрифта

Оптимальная длина строки для удобного чтения — 50-75 символов.

Наиболее комфортный размер шрифта для чтения — не менее 12 px.

Отсутствие «визуального шума»

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

Отсутствие анимированных баннеров и других отвлекающих элементов

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

Контент

Продуманные списки

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

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

Частая причина проблем при загрузке контента — помимо обычных ошибок в коде и верстке — видеоформаты Flash, Applet или Silverlight: они не воспроизводятся на мобильных. Для видео лучше использовать HTML5.

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

Возможность увеличить изображения

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

Верстка

Отсутствие горизонтальной прокрутки

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

Кроссплатформенность

Сайт должен корректно работать во всех мобильных операционных системах — Android, IOS, Windows Phone и других. Не забудьте, что для одной платформы есть разные версии браузеров, в которых сайт также должен отображаться без ошибок.

Взаимодействие с интерфейсом

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

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

Статус загрузки элементов

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

Визуальный эффект от нажатия кнопок

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

Удобные элементы интерфейса

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

«Умные» списки, в которых можно быстро выбрать нужный пункт

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

Возможность пролистывать фотографии

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

Очевидный способ закрыть изображение

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

Удобный выбор даты в календаре

Наличие онлайн-карты и геолокации

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

Отсутствие навязчивых элементов

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

Выбор продукта/услуги

Удобная навигация в каталоге

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

Удобный переход к подробному описанию товара

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

Оформление заказа

Наличие интерактивной кнопки звонка

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

Наличие кнопок социальных сетей, почты, мессенджеров

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

Широкие поля формы

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

Подсказки по формату заполнения полей

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

Удобный ввод данных в форме

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

Сохранение данных при нажатии кнопки «назад» или случайной перезагрузке

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

Корректная работа кнопок

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

Автоматическая проверка в Вебмастере

С помощью Вебмастера можно быстро проверить, выполняются ли некоторые из пунктов выше: Инструменты → Проверка мобильных страниц*

* Потребуются права на управление сайтом в Вебмастере.

Что дальше: работа с мобильным трафиком

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

Кейс CITROËN: как привлекать больше «мобильных» покупателей

Самый простой способ выдавать мобильную версию сайта на php — Хабр Q&A

RewriteEngine on

RewriteCond %{HTTP_USER_AGENT} acs [NC,OR]

RewriteCond %{HTTP_USER_AGENT} alav [NC,OR]

RewriteCond %{HTTP_USER_AGENT} alca [NC,OR]

RewriteCond %{HTTP_USER_AGENT} amoi [NC,OR]

RewriteCond %{HTTP_USER_AGENT} audi [NC,OR]

RewriteCond %{HTTP_USER_AGENT} aste [NC,OR]

RewriteCond %{HTTP_USER_AGENT} avan [NC,OR]

RewriteCond %{HTTP_USER_AGENT} benq [NC,OR]

RewriteCond %{HTTP_USER_AGENT} bird [NC,OR]

RewriteCond %{HTTP_USER_AGENT} blac [NC,OR]

RewriteCond %{HTTP_USER_AGENT} blaz [NC,OR]

RewriteCond %{HTTP_USER_AGENT} brew [NC,OR]

RewriteCond %{HTTP_USER_AGENT} cell [NC,OR]

RewriteCond %{HTTP_USER_AGENT} cldc [NC,OR]

RewriteCond %{HTTP_USER_AGENT} cmd- [NC,OR]

RewriteCond %{HTTP_USER_AGENT} dang [NC,OR]

RewriteCond %{HTTP_USER_AGENT} doco [NC,OR]

RewriteCond %{HTTP_USER_AGENT} eric [NC,OR]

RewriteCond %{HTTP_USER_AGENT} hipt [NC,OR]

RewriteCond %{HTTP_USER_AGENT} inno [NC,OR]

RewriteCond %{HTTP_USER_AGENT} ipaq [NC,OR]

RewriteCond %{HTTP_USER_AGENT} java [NC,OR]

RewriteCond %{HTTP_USER_AGENT} jigs [NC,OR]

RewriteCond %{HTTP_USER_AGENT} kddi [NC,OR]

RewriteCond %{HTTP_USER_AGENT} keji [NC,OR]

RewriteCond %{HTTP_USER_AGENT} leno [NC,OR]

RewriteCond %{HTTP_USER_AGENT} lg-c [NC,OR]

RewriteCond %{HTTP_USER_AGENT} lg-d [NC,OR]

RewriteCond %{HTTP_USER_AGENT} lg-g [NC,OR]

RewriteCond %{HTTP_USER_AGENT} lge- [NC,OR]

RewriteCond %{HTTP_USER_AGENT} maui [NC,OR]

RewriteCond %{HTTP_USER_AGENT} maxo [NC,OR]

RewriteCond %{HTTP_USER_AGENT} midp [NC,OR]

RewriteCond %{HTTP_USER_AGENT} mits [NC,OR]

RewriteCond %{HTTP_USER_AGENT} mmef [NC,OR]

RewriteCond %{HTTP_USER_AGENT} mobi [NC,OR]

RewriteCond %{HTTP_USER_AGENT} mot- [NC,OR]

RewriteCond %{HTTP_USER_AGENT} moto [NC,OR]

RewriteCond %{HTTP_USER_AGENT} mwbp [NC,OR]

RewriteCond %{HTTP_USER_AGENT} nec- [NC,OR]

RewriteCond %{HTTP_USER_AGENT} newt [NC,OR]

RewriteCond %{HTTP_USER_AGENT} noki [NC,OR]

RewriteCond %{HTTP_USER_AGENT} opwv [NC,OR]

RewriteCond %{HTTP_USER_AGENT} palm [NC,OR]

RewriteCond %{HTTP_USER_AGENT} pana [NC,OR]

RewriteCond %{HTTP_USER_AGENT} pant [NC,OR]

RewriteCond %{HTTP_USER_AGENT} pdxg [NC,OR]

RewriteCond %{HTTP_USER_AGENT} phil [NC,OR]

RewriteCond %{HTTP_USER_AGENT} play [NC,OR]

RewriteCond %{HTTP_USER_AGENT} pluc [NC,OR]

RewriteCond %{HTTP_USER_AGENT} port [NC,OR]

RewriteCond %{HTTP_USER_AGENT} prox [NC,OR]

RewriteCond %{HTTP_USER_AGENT} qtek [NC,OR]

RewriteCond %{HTTP_USER_AGENT} qwap [NC,OR]

RewriteCond %{HTTP_USER_AGENT} sage [NC,OR]

RewriteCond %{HTTP_USER_AGENT} sams [NC,OR]

RewriteCond %{HTTP_USER_AGENT} sany [NC,OR]

RewriteCond %{HTTP_USER_AGENT} sch- [NC,OR]

RewriteCond %{HTTP_USER_AGENT} sec- [NC,OR]

RewriteCond %{HTTP_USER_AGENT} send [NC,OR]

RewriteCond %{HTTP_USER_AGENT} seri [NC,OR]

RewriteCond %{HTTP_USER_AGENT} sgh- [NC,OR]

RewriteCond %{HTTP_USER_AGENT} shar [NC,OR]

RewriteCond %{HTTP_USER_AGENT} sie- [NC,OR]

RewriteCond %{HTTP_USER_AGENT} siem [NC,OR]

RewriteCond %{HTTP_USER_AGENT} smal [NC,OR]

RewriteCond %{HTTP_USER_AGENT} smar [NC,OR]

RewriteCond %{HTTP_USER_AGENT} sony [NC,OR]

RewriteCond %{HTTP_USER_AGENT} sph- [NC,OR]

RewriteCond %{HTTP_USER_AGENT} symb [NC,OR]

RewriteCond %{HTTP_USER_AGENT} t-mo [NC,OR]

RewriteCond %{HTTP_USER_AGENT} teli [NC,OR]

RewriteCond %{HTTP_USER_AGENT} tim- [NC,OR]

RewriteCond %{HTTP_USER_AGENT} tosh [NC,OR]

RewriteCond %{HTTP_USER_AGENT} tsm- [NC,OR]

RewriteCond %{HTTP_USER_AGENT} upg1 [NC,OR]

RewriteCond %{HTTP_USER_AGENT} upsi [NC,OR]

RewriteCond %{HTTP_USER_AGENT} vk-v [NC,OR]

RewriteCond %{HTTP_USER_AGENT} voda [NC,OR]

RewriteCond %{HTTP_USER_AGENT} w3cs [NC,OR]

RewriteCond %{HTTP_USER_AGENT} wap- [NC,OR]

RewriteCond %{HTTP_USER_AGENT} wapa [NC,OR]

RewriteCond %{HTTP_USER_AGENT} wapi [NC,OR]

RewriteCond %{HTTP_USER_AGENT} wapp [NC,OR]

RewriteCond %{HTTP_USER_AGENT} wapr [NC,OR]

RewriteCond %{HTTP_USER_AGENT} webc [NC,OR]

RewriteCond %{HTTP_USER_AGENT} winw [NC,OR]

RewriteCond %{HTTP_USER_AGENT} winw [NC,OR]

RewriteCond %{HTTP_USER_AGENT} xda [NC,OR]

RewriteCond %{HTTP_USER_AGENT} xda- [NC,OR]

RewriteCond %{HTTP_USER_AGENT} up.browser [NC,OR]

RewriteCond %{HTTP_USER_AGENT} up.link [NC,OR]

RewriteCond %{HTTP_USER_AGENT} windows.ce [NC,OR]

RewriteCond %{HTTP_USER_AGENT} iemobile [NC,OR]

RewriteCond %{HTTP_USER_AGENT} mini [NC,OR]

RewriteCond %{HTTP_USER_AGENT} mmp [NC,OR]

RewriteCond %{HTTP_USER_AGENT} symbian [NC,OR]

RewriteCond %{HTTP_USER_AGENT} midp [NC,OR]

RewriteCond %{HTTP_USER_AGENT} wap [NC,OR]

RewriteCond %{HTTP_USER_AGENT} phone [NC,OR]

RewriteCond %{HTTP_USER_AGENT} pocket [NC,OR]

RewriteCond %{HTTP_USER_AGENT} mobile [NC,OR]

RewriteCond %{HTTP_USER_AGENT} pda [NC,OR]

RewriteCond %{HTTP_USER_AGENT} PPC [NC,OR]

RewriteCond %{HTTP_USER_AGENT} Series60 [NC,OR]

RewriteCond %{HTTP_USER_AGENT} Opera.Mini [NC]

RewriteCond %{HTTP_USER_AGENT} !windows.nt [NC]

RewriteCond %{HTTP_USER_AGENT} !bsd [NC]

RewriteCond %{HTTP_USER_AGENT} !x11 [NC]

RewriteCond %{HTTP_USER_AGENT} !unix [NC]

RewriteCond %{HTTP_USER_AGENT} !macos [NC]

RewriteCond %{HTTP_USER_AGENT} !macintosh [NC]

RewriteCond %{HTTP_USER_AGENT} !playstation [NC]

RewriteCond %{HTTP_USER_AGENT} !google [NC]

RewriteCond %{HTTP_USER_AGENT} !yandex [NC]

RewriteCond %{HTTP_USER_AGENT} !bot [NC]

RewriteCond %{HTTP_USER_AGENT} !libwww [NC]

RewriteCond %{HTTP_USER_AGENT} !msn [NC]

RewriteCond %{HTTP_USER_AGENT} !america [NC]

RewriteCond %{HTTP_USER_AGENT} !avant [NC]

RewriteCond %{HTTP_USER_AGENT} !download [NC]

RewriteCond %{HTTP_USER_AGENT} !fdm [NC]

RewriteCond %{HTTP_USER_AGENT} !maui [NC]

RewriteCond %{HTTP_USER_AGENT} !webmoney [NC]

RewriteCond %{HTTP_USER_AGENT} !windows-media-player [NC]

RewriteCond %{QUERY_STRING} !wpc_nr [NC]

RewriteRule ^(.*)$ site.ru/ [L,R=302]

Не помню, откуда список юзерагентов взял. но использовал в свое время именно это.

Nginx Как сделать мобильную версию сайта? — Хабр Q&A

server {
        listen          80;
        server_name     site.ru www.site.ru;

        if ($http_user_agent ~* (iphone|аndroid|blackberry)){
                rewrite ^/(.*)$ m.site.ru/$1 permanent;
        }

        location / {
                auth_basic              "Enter pass:";
                auth_basic_user_file    /var/www/nginx/passwords;

                root    /var/www/site.ru/html/application;
                index   index.html;
                charset utf-8;

                proxy_pass              http://localhost:1337/;

                proxy_set_header        X-Real-IP               $remote_addr;
                proxy_set_header        X-Forwarded-For         $proxy_add_x_forwarded_for;
                proxy_set_header        Host                    $host;
        }
}


server {
        listen          80;
        server_name     m.site.ru www.m.site.ru;

        location / {
                auth_basic              "Enter pass:";
                auth_basic_user_file    /var/www/nginx/passwords;

                root    /var/www/site.ru/html/mobile;
                index   index.html;
                charset utf-8;

                proxy_pass              http://localhost:1337/;

                proxy_set_header        X-Real-IP               $remote_addr;
                proxy_set_header        X-Forwarded-For         $proxy_add_x_forwarded_for;
                proxy_set_header        Host                    $host;
        }
}

UPD:
Часть заработала — на site.ru и m.site.ru отдаёт разную статику, но автоматически не переключается на мобильную версию сайта + мобильная версия сайта не работает с сервером.

server {
        listen          80;
        server_name     site.ru www.site.ru;

        if ($http_user_agent ~* (iphone|аndroid|blackberry)){
               rewrite ^/(.*)$ http://m.site.ru/$1 permanent;
        }

        location / {
                auth_basic              "Enter pass:";
                auth_basic_user_file    /var/www/nginx/passwords;

                root    /var/www/site.ru/html/application;
                index   index.html;
                charset utf-8;

                proxy_pass              http://localhost:1337/;

                proxy_set_header        X-Real-IP               $remote_addr;
                proxy_set_header        X-Forwarded-For         $proxy_add_x_forwarded_for;
                proxy_set_header        Host                    $host;
        }
}

server {
        listen 80;
        server_name m.site.ru;
        root    /var/www/site.ru/html/mobile;
        index   index.html;
}