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

Содержание

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

Вы здесь: Главная - HTML - HTML Основы - Как сделать мобильную версию сайта

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

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

Первым делом, Вы должны понять, что мобильный Интернет уступает по скорости стационарному во много раз, плюс из-за небольшого экрана просмотр страниц так же не удобен. Я уже молчу про тех, кто пытается выйти в Интернет через GPRS. Мне это удалось прочувствовать однажды, когда я был далеко в Краснодарском крае, в какой-то глубинке, где телефон по непонятным причинам более-менее (40-50%) ловил только на кладбище. С такой связью можно звонить, но вот Интернет был совершенно некудышным. Поэтому когда мне пришлось там загружать страницы размеров

200-300 КБ, из которых 90% - это ненужная графика, я проклинал создателей этого сайта.

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

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

Что касается ширины страницы, то рекомендую поставить max-width: 620px; у самого верхнего контейнера. Сильнее растягивать не требуется.

Мобильную версию сайта лучше сделать на отдельном поддомене, например, на m.mysite.ru.

Когда Ваш отдельный сайт для мобильных устройств будет готов, надо подумать, как перенаправлять пользователей с мобильными устройствами с сайта mysite.ru на m.mysite.ru. Код для определения браузера можно скачать здесь: http://detectmobilebrowsers.com/.

Скачиваете, например, для PHP. Далее вставляете в index-файл этот код и заменяете там адрес в header() на адрес Вашей мобильной версии сайта.

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

Подведу итог:

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

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

  • Как сделать мобильную версию сайта
    Создано 01.02.2013 10:59:23
  • Как сделать мобильную версию сайта Михаил Русаков
Предыдущая статья Следующая статья

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

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

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:
    <a href="https://myrusakov.ru" target="_blank"><img src="https://myrusakov.ru/images/button.gif" alt="Как создать свой сайт" /></a>

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:
    <a href="https://myrusakov.ru" target="_blank">Как создать свой сайт</a>

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):
    [URL="https://myrusakov.ru"]Как создать свой сайт[/URL]

что это, для чего нужна, как ее сделать, чем отличается от адаптивной верстки

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

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

Подпишись на рассылку и получи книгу в подарок!

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


Так как мобильных устройств существует великое множество, то одна модель может поддерживать какие-либо возможности 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 (для десктопа) в меню «Вид» -> «Небольшой экран».

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



Ссылки


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

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

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

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

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

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

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

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

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

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

предупреждение от Google

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

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

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

Анализировать сайт

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

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

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

Яндекс Метрика - мобильные устройства

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

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

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

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

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

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

Плагин WPtouch

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

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

Плагин WordPress Mobile Pack

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

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

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

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

Плагин JetPack

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

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

Плагин WP Mobile Detector

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

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

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

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

Плагин Duda Mobile Website Builder

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

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

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

Плагин MobilePress

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

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

Плагин WP Mobile Edition

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

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

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

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

Мобильный дизайн seoslim.ru

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

Мобильный шаблон блога seoslim.ru

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

Прохождение адаптации по Google

Остается ждать трафика... :)

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

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

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

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

Попробуйте в .htaccess прописать следующее

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

Подскажите, пожалуйста, что не так с конфигом?
Пытаюсь сделать мобильную версию сайта с поддоменом "m".
Всё различие в каталогах со статикой: основной сайт - application, мобильный - mobile
Новичок в бэке, так что не судите строго и если есть что ещё поправить - сообщайте)
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;
}

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *