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

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

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

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

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

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

Скорость

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Но….

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