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

Сайты на разных устройствах

Сайты на разных устройствах

Приветствую вас уважаемый web-мастер! Сегодня хочу поделиться самым простым способом создания мобильной версии сайта. Что такое мобильная версия? – Это тот же самый сайт, только оптимизированный под современные мобильные гаджеты: — телефоны, смартфоны, iPhone и прочие устройства с маленькими экранами…

Мобильный Яндекс

М-ндекс на телефоне

М-яндекс на мониторе

М-яндекс на мониторе Full HD

Вот вам пример мобильной версии Яндекс, и как это выглядит на большом экране монитора Full HD:

1) — Создаётся обычный сайт, он работает как обычно.

2) — Теперь в директории сайта создаём папку, назовём эту папку одной буквой «m».

3) — В эту папку помещаем копию нашего сайта, только мобильную версию. Это значит, что страницы должны быть меньшего размера, а шрифт крупнее, и картинки соответственно тоже нужно подобрать, скажем размер страницы берём по ширине от 320 до 480 по вашему соображению, то есть как вы хотите и для каких устройств представить ваш мобильный сайтик. К примеру по статистике у большинства мобильных гаджетов большее разрешение (ширина) составляет 480 (это к примеру, может это больше или меньше). Вот вы и делаете ширину страницы 480p (480 пикселей). Располагаете все элементы на странице для удобного просмотра. И всё, ваш мини сайт готов.

4) — Остался последний штрих — нужно сделать так, чтобы при наборе адреса m.ваш_сайт.ru загружался сайт из папки m. Как это сделать? — А вот как: В директории вашего сайта на хостинге (папка public_html), есть такой файл .htaccess — его нужно скачать через FTP и вставить три строчки в этот файл с помощью любого редактора текста, скажем БЛОКНОТ+++. Вот эти строчки:

RewriteEngine on
RewriteBase /
RewriteCond %{HTTP_HOST} ^m\.SAYT\.ru$
RewriteCond %{REQUEST_URI} !/m/
RewriteRule ^(.*)$ /m/$1 [L]

Поясняю: SAYT меняете на ваш домен, то есть это и есть ваш сайт, предполагается, что сайт размещается в зоне RU. Если зона у вас другая, к примеру COM, РФ и прочие — тогда ru нужно тоже заменить на две буквы вашей зоны. Буква m — имя папки в директории вашего сайта, где у вас базируется мобильная версия, как и было оговорено в самом начале. Ну и всё …  хотя нет, ещё не всё, — ещё нужно в поддоменах на хостинге создать новый поддомен m и направить его на ваш же имеющийся сайт, в папке которого уже изменён файл .htaccess. Вот теперь всё. И не забудьте сделать на обоих сайтах ссылку перенаправления с главного сайта на мобильную версию и наоборот. Статья написана после личной тщательной проверки ….   всё работает как часики. Рекомендую к использованию. Конечно я не делал мобильную версию сайта, просто организовал в поддомене другой сайт для сервиса рассылки. Потом как ни будь напишу и об этом. Всем спасибо. Успеха.

Опубликовать в Google Buzz
Опубликовать в Google Plus
Опубликовать в LiveJournal
Опубликовать в Мой Мир
Опубликовать в Одноклассники

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

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

Лимит времени истёк. Пожалуйста, перезагрузите CAPTCHA.