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

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

Как привлечь мобильный трафик?

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

Не так давно я получила письмо от Google Ad Sense, в котором говорилось о том, что часть трафика AdSense на некоторых моих сайтах поступает с мобильных устройств высокого класса, и было предложено увеличить объём мобильного трафика для этих сайтов, создав мобильную версию этих сайтов.

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

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

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

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

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

Скорость

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

Для этого рекомендуется:

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

Упростить  навигацию

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

2000 Премиум WordPress шаблонов

Ориентироваться на сенсорные экраны

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

Обеспечить удобство восприятия

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

Универсальность

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

Облегчить конверсии

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

Учитывать местоположение

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

Обеспечить интеграцию с основным сайтом

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

Обеспечить переадресацию

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

Наладить обратную связь

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

Google рекомендуетд ля создания мобильной версии сайта воспользоваться «родным» ресурсом  Сайты Google, но мне больше пришелся по душе DudaMobile

Он отлично подходит для создания мобильной версии сайтов, расположенных на Blogger или WP.

Все интуитивно понятно.

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

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

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

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

Для этого надо скопировать предложенный код и вставить его    своего сайта.

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

Если Ваш сайт расположен на BlogSpot, то сделать это нужно следующим образом:

Сначала Вам надо найти head, причем  это должен быть закрывающий тег

Для этого воспользуйтесь сочетанием клавиш CTRL+F и вставляете код непосредственно перед закрывающим head.

Но….

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

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

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

так выглядит обычный сайт

А это — его мобильная версия

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

Удачи!

Как зарегистрировать блог в Google Analytics?

Комментарии: 20

By Ольга Сескутова | 24.12.2011 at 06:48

Ярославна, выбрать можно любой, но…, если Вы хотите публиковать на своем домене и отказаться от рекламы Duda, то придется платить $9 в месяц.
Пока нет большого трафика и деньги на мобильном сайте еще не заработаны — нет смысла в это вкладывать. Лучше пока использовать 1-й вариант http://mobile.dudamobile.com/site/nashydety. Перейти на персональный домен Вы сможете в любое время.
По поводу кода.
Сейчас я внесу в пост необходимые изменения и вставлю ролик, кот. нашла на You Tube. Там все предельно понятно. Только есть нюанс для blogspot. О нем я напишу.

[Ответить]

By jaroslavna | 24.12.2011 at 04:16

А когда через Дуду делаешь ,там есть такое окошко:
Дуда дает вам мобильный адрес веб-сайта, вы можете поделиться с людьми, чтобы они могли посетить мобильный сайт.
И на выбор 1) http://mobile.dudamobile.com/site/nashydety
или
2)Я хочу использовать m.nashydety.ru (или любой другой суб-домен)
Что выбрать?

[Ответить]

By jaroslavna | 24.12.2011 at 04:27

И ещё…
Надо вставить какой-то код. Не поняла куда. Туда где мы мета-теги прописывали или нет? Если нет, то как найти нужное место?

[Ответить]

By jaroslavna | 27.12.2011 at 13:19

Я сейчас зашла, и написано Redirect Set Up (то есть код принят, да?) я уж не помню куда его затолкала (кажется после мега-тега — это правильно?). И линия просмотров внизу вверх идёт. Получается могу ничего не переделывать. Мобильника нет посмотреть неоткуда(((

[Ответить]

By jaroslavna | 27.12.2011 at 13:24

И всё я никак не успокоюсь…
Какие необходимые данные вносим в настройках. Там написано Показывать моб шаблоны. Стоит Да. Этого достаточно, или ещё нужно что-то сделать?

[Ответить]

By Ольга Сескутова | 27.12.2011 at 23:51

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

[Ответить]

By Ольга Сескутова | 29.12.2011 at 18:09

Нет, Ярославна. Вы можете в поле вставить хоть имя любимого кота. Получится что-то вроде xxx.barsik@blogger.com, где вместо xxx вставите то, что стоит перед полем.

[Ответить]

By jaroslavna | 29.12.2011 at 16:22

Блин, ничего не понимаю. Своё е-майл что ли?

[Ответить]

By Ольга Сескутова | 23.02.2012 at 17:10

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

[Ответить]

By Irina | 23.02.2012 at 16:44

Спасибо за статью. А в какой файл необходимо вставить в вп?

[Ответить]

By Ольга Сескутова | 24.02.2012 at 10:32

Ирина, Вам понадобится плагин WordPress Mobile Pack. Можно скачать здесь: http://wordpress.org/extend/plugins/wordpress-mobile-pack/ В чек боксе включаете галочку и мобильная версия уже будет работать, а проверить можно через эмулятор браузеров. Впрочем, зайдите на свой сайт через мобильник, и все станет ясно (так и пришлось лепить новый сайт на wp! Давно собиралась, но руки не доходили. Так что, Вам — спасибо за «волшебный пендель»!)

[Ответить]

By Irina | 24.02.2012 at 10:07

Может быть.. Не хотелось бы останавливаться на пол пути

[Ответить]

By Ольга Сескутова | 24.02.2012 at 14:20

Да Бог с Вами! Какие неудобства?!
Напротив, я очень рада, что благодаря Вам, у меня, наконец-то, дошли руки до WP!
А то так и откладывала бы..
И конечно же, я с удовольствием почитаю о себе любимой на Вашем сайте!
Заглядывайте почаще, всегда рада!
Удачи!

[Ответить]

By Irina | 24.02.2012 at 13:36

Спасибо ОГРОМНОЕ! И простите за доставленные неудобства. Разрешите в качестве компенсации разместить статью о Вас на моем сайте http://vladimirovna,biz

[Ответить]

By Ольга Сескутова | 14.09.2012 at 08:10

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

[Ответить]

By Blogger | 14.09.2012 at 06:27

Здравствуйте, Ольга! Короткое замечание по поводу мобильной версии блога на blogspot.com. Разве у блоггера такая версия не создается автоматически (ее можно вкл. или откл. в настройках Шаблона). Или вы все же рекомендуете делать мобильную версию через Duda?

[Ответить]

By Yuri | 21.11.2012 at 11:08

А если сайт на голом HTML удасться ли сделать перенаправление или нужна поддержка php

[Ответить]

By Ольга Сескутова | 21.11.2012 at 15:09

Это легко проверить: вставляете скрипт перед закрывающим head.

[Ответить]

By Ольга Сескутова | 20.12.2012 at 11:09

Благодарю:))
Дельное дополнение к посту:)

[Ответить]

By StarterOK | 20.12.2012 at 11:03

Можно еще воспользоваться сервисом MobilizeToday.ru. Отличный конструктор.

[Ответить]

Оставьте Ваш комментарий

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