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

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

Более 60% пользователей вряд ли вернется на сайт, если он не оптимизирован для мобильных устройств, поэтому при создании такого сайта следует помнить о том, что весь контент должен уместиться на небольшом экране мобильника с учетом функциональных особенностей сотовых телефонов, смартфонов и т.д.
10 советов, которые помогут web-мастеру адаптировать свой сайт под запросы мобильных пользователей.
Скорость
Мобильный сайт должен быстро загружаться, учитывая то, что мобильники часто используются на ходу, а контент сайта должен быть адаптирован для беглого просмотра.
Для этого рекомендуется:
— сделать основной упор на материалы, которые пользуются особой популярностью у мобильной аудитории;
— использовать изображения в сжатом формате, чтобы обеспечить скорость загрузки страницы;
— разбивать крупные текстовые блоки на мелкие и использовать списки.
Упростить навигацию
2. Максимально упростить навигацию, сделав сайт интуитивно понятным, использовать окно поиска:
— отказаться от горизонтальной прокрутки. Содержание страницы должно умещаться на одном экране;
— отказаться от всплывающих элементов;
— использовать кнопки «назад», «главная страница»;
-на странице не должно быть более семи навигационных ссылок;
— на крупных сайтах использовать бросающееся в глаза окно поиска.
Ориентироваться на сенсорные экраны
элементы сайта должны быть достаточно крупными, чтобы было легко нажимать на них пальцами.
Обеспечить удобство восприятия
текст должен быть хорошо различим.
— Рекомендуется использовать контрастные цвета текста и фона страницы.
— Ссылки и кнопки рекомендуется выделять более крупным размером шрифта и более заметным цветом.
Универсальность
Сайт должен быть универсальным и подходить для любых типов устройств:
— лучше отказаться от Flash-элементов, т.к. они доступны не для всех платформ.
Облегчить конверсии
посетителям должно быть легко совершать покупки и поддерживать с Вами контакт. Для этого:
— обеспечьте подробное описание товаров;
— используйте короткие формы для заполнения;
— используйте флажки и списки;
— номера телефонов должны быть интерактивными.
Учитывать местоположение
— подскажите посетителям сайта где и как можно Вас найти;
— разместите карты и подробный маршрут проезда.
Обеспечить интеграцию с основным сайтом
— в мобильном варианте должно быть реализовано, как можно больше функций основного ресурса;
— разрешите посетителям сохранять корзину покупок и частые запросы.
Обеспечить переадресацию
пользователи, открывающие сайт с мобильников, должны быть перенаправлены на его мобильную версию.
Переадресация реализуется за счет кода, который автоматически определяет тип устройства.
Наладить обратную связь
— на основной версии сайта рекомендуется провести опрос и выяснить: чего ждут пользователи от мобильного сайта;
— постоянно «держать руку на пульсе», используя данные web-аналитики.
Google рекомендуетд ля создания мобильной версии сайта воспользоваться «родным» ресурсом Сайты Google, но мне больше пришелся по душе
Он отлично подходит для создания мобильной версии сайтов, расположенных на Blogger или WP.
Все интуитивно понятно.
Введите URL в поле и посмотрите, как будет выглядеть Ваш сайт на дисплее мобильного устройства, после чего можно заняться всеми аспектами мобильного дизайна: менять шрифты, заголовок, фон, изменять размер изображений и пр.
Вы также можете заменить свой шаблон на один из предложенных.
Вы можете публиковать как бесплатную версию сайта, так платную, заплатив за определенные услуги, как например, использование мобильной версии сайта на своем персональном домене.
Чтобы посетители могли воспользоваться мобильной версией сайта, необходимо сделать перенаправление.
Для этого надо скопировать предложенный код и вставить его своего сайта.
Скрипт поможет автоматически определить, когда посетитель просматривает Ваш сайт с мобильного устройства и перенаправит их на мобильную версию.
Если Ваш сайт расположен на BlogSpot, то сделать это нужно следующим образом:
Сначала Вам надо найти head, причем это должен быть закрывающий тег
Для этого воспользуйтесь сочетанием клавиш CTRL+F и вставляете код непосредственно перед закрывающим head.
Но….
Есть одна ма-а-а-ленькая деталь: перед тем, как вставить код, поставьте галочку в чек боксе Расширить шаблоны виджета.
Для сравнения взгляните, как выглядит один и тот же сайт в обычной и в мобильной версии.
так выглядит
А это — его мобильная версия
Разместив на мобильных страницахкод Google AdSense, можно получать дополнительный доход от показа рекламных объявлений.
Удачи!
Как зарегистрировать блог в Google Analytics?
Комментарии: 21
Ярославна, выбрать можно любой, но…, если Вы хотите публиковать на своем домене и отказаться от рекламы Duda, то придется платить $9 в месяц.http://mobile.dudamobile.com/site/nashydety . Перейти на персональный домен Вы сможете в любое время.
Пока нет большого трафика и деньги на мобильном сайте еще не заработаны — нет смысла в это вкладывать. Лучше пока использовать 1-й вариант
По поводу кода.
Сейчас я внесу в пост необходимые изменения и вставлю ролик, кот. нашла на You Tube. Там все предельно понятно. Только есть нюанс для blogspot. О нем я напишу.
[Ответить]
А когда через Дуду делаешь ,там есть такое окошко:http://mobile.dudamobile.com/site/nashydety
Дуда дает вам мобильный адрес веб-сайта, вы можете поделиться с людьми, чтобы они могли посетить мобильный сайт.
И на выбор 1)
или
2)Я хочу использовать m.nashydety.ru (или любой другой суб-домен)
Что выбрать?
[Ответить]
И ещё…
Надо вставить какой-то код. Не поняла куда. Туда где мы мета-теги прописывали или нет? Если нет, то как найти нужное место?
[Ответить]
Я сейчас зашла, и написано Redirect Set Up (то есть код принят, да?) я уж не помню куда его затолкала (кажется после мега-тега — это правильно?). И линия просмотров внизу вверх идёт. Получается могу ничего не переделывать. Мобильника нет посмотреть неоткуда(((
[Ответить]
И всё я никак не успокоюсь…
Какие необходимые данные вносим в настройках. Там написано Показывать моб шаблоны. Стоит Да. Этого достаточно, или ещё нужно что-то сделать?
[Ответить]
Нет, недостаточно.
Надо обязательно заполнить «Параметры отправки сообщений», указав Адрес отправки электронной почты.
[Ответить]
Нет, Ярославна. Вы можете в поле вставить хоть имя любимого кота. Получится что-то вроде xxx.barsik@blogger.com, где вместо xxx вставите то, что стоит перед полем.
[Ответить]
Блин, ничего не понимаю. Своё е-майл что ли?
[Ответить]
У меня нет сайтов на wp, поэтому с настройками я вряд ли смогу Вам помочь, но может быть кто-то из читателей откликнется?
[Ответить]
Спасибо за статью. А в какой файл необходимо вставить в вп?
[Ответить]
Ирина, Вам понадобится плагин WordPress Mobile Pack. Можно скачать здесь:http://wordpress.org/extend/plugins/wordpress-mobile-pack/ В чек боксе включаете галочку и мобильная версия уже будет работать, а проверить можно через эмулятор браузеров. Впрочем, зайдите на свой сайт через мобильник, и все станет ясно (так и пришлось лепить новый сайт на wp! Давно собиралась, но руки не доходили. Так что, Вам — спасибо за «волшебный пендель»!)
[Ответить]
Может быть.. Не хотелось бы останавливаться на пол пути
[Ответить]
Да Бог с Вами! Какие неудобства?!
Напротив, я очень рада, что благодаря Вам, у меня, наконец-то, дошли руки до WP!
А то так и откладывала бы..
И конечно же, я с удовольствием почитаю о себе любимой на Вашем сайте!
Заглядывайте почаще, всегда рада!
Удачи!
[Ответить]
Спасибо ОГРОМНОЕ! И простите за доставленные неудобства. Разрешите в качестве компенсации разместить статью о Вас на моем сайтеhttp://vladimirovna,biz
[Ответить]
Да, можно создать автоматически, но отображается на мобильнике такая версия некорректно. Сравните скриншоты, кот. я выложила в посте: как выглядит обычный сайт на мобильном телефоне, и как смотрится его мобильная версия.Добавьте к этому все перечисленные преимущества и, полагаю, Вы сделаете правильный выбор.
Успехов!
[Ответить]
Здравствуйте, Ольга! Короткое замечание по поводу мобильной версии блога на blogspot.com. Разве у блоггера такая версия не создается автоматически (ее можно вкл. или откл. в настройках Шаблона). Или вы все же рекомендуете делать мобильную версию через Duda?
[Ответить]
А если сайт на голом HTML удасться ли сделать перенаправление или нужна поддержка php
[Ответить]
Это легко проверить: вставляете скрипт перед закрывающим head.
[Ответить]
Благодарю:))
Дельное дополнение к посту:)
[Ответить]
Можно еще воспользоваться сервисом MobilizeToday.ru. Отличный конструктор.
[Ответить]
Всем привет! посоветуйте где заказать мобильную версию ?
[Ответить]