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

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

Второй вариант – вписать код, который «объяснит» браузеру, что сайт адаптирован для мобильного устройства. При этом желательно подогнать отображение, чтобы посетителю было удобно просматривать сайт.


К примеру, на этом сайте в HEAD вставлен следующий код:

<meta name="MobileOptimized" content="320"/>
<meta name="HandheldFriendly" content="true"/>
<meta name="viewport" content="width=device-width" />

Что он даёт? Подгоняет размер сайта под размер экрана мобильного устройства, уменьшает шрифты сайдбаров и увеличивает размер основных записей. Чаще всего, в разметке сайта css, обязательно есть конкретные размеры каких либо элементов. А для мобильных устройств лучше всего использовать проценты. Т.е. как пример, не width: 1200px, а width: 90%

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

А как Вы решаете вопрос с адаптацией своего сайта/блога? Напишите в комментариях.