Мобильная версия сайта


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

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

Пример варианта, когда используется две самостоятельные версии, можно увидеть на нашем сайте. http://nevius.ru – это обычная версия сайта, если зайти на сайт с мобильного устройства, то скрипт автоматически перенаправит посетителя на мобильную версию http://nevius.ru/m

Рассмотрим основные рекомендации по созданию мобильного сайта:

1. Используйте минимум java-скриптов, анимационных, флеш и других элементов, которые перегружают страницу. Если есть такая возможность, то лучше отказаться от них. Мобильная связь не всегда быстрая, а указанные выше элементы могут просто не поддерживаться устройством посетителя вашего сайта.

2. По тем же причинам постарайтесь уменьшить количество картинок на странице. Меню создавайте в виде текстовых ссылок

3. Сайт должен одинаково отображаться как на меленьких телефонах, так и на больших планшетах, поэтому используйте «резиновую верстку» страниц, чтобы сайт растягивался под любые разрешения экрана. При этом не должно быть горизонтальной прокрутки.

4. Постарайтесь сократить объемы текста в описании ваших товаров, услуг и другом содержании сайта. Чем меньше пользователь будет прокручивать экран, тем лучше.

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

6. Сделайте удобную навигацию. Посетитель всегда должен иметь возможность перейти на нужную страницу с одного клика. Разместите меню на всех страницах. Можно его сделать выпадающим или, если оно не большое, то просто в виде ссылок вверху страницы.

7. Всегда проверяйте полученный результат на своем мобильном устройстве. Можно использовать для этих целей онлайн эмуляторы мобильных устройств.
Мобильная версия сайта обычно размещается на отдельном поддомене (например m.site.ru) или в отдельной папке (site.ru/m).

Наконец, важное требование заключается в том, чтобы скрипт автоматически определил с какого устройства зашел пользователь: с обычного компьютера или мобильного устройства. И если это мобильное устройство, то он должен автоматически перенаправить посетителя на мобильную версию. Для этого на главной странице обычной версии сайта пропишите следующий код (в самом верху сайта):

<?
// перенаправлеяем на мобильную версию
$iphone = strpos($_SERVER['HTTP_USER_AGENT'],"iPhone");
$android = strpos($_SERVER['HTTP_USER_AGENT'],"Android");
$palmpre = strpos($_SERVER['HTTP_USER_AGENT'],"webOS");
$berry = strpos($_SERVER['HTTP_USER_AGENT'],"BlackBerry");
$ipod = strpos($_SERVER['HTTP_USER_AGENT'],"iPod");
$mobile = strpos($_SERVER['HTTP_USER_AGENT'],"Mobile");
$symb = strpos($_SERVER['HTTP_USER_AGENT'],"Symbian");
$operam = strpos($_SERVER['HTTP_USER_AGENT'],"Opera M");
$htc = strpos($_SERVER['HTTP_USER_AGENT'],"HTC_");
$fennec = strpos($_SERVER['HTTP_USER_AGENT'],"Fennec/");
$winphone = strpos($_SERVER['HTTP_USER_AGENT'],"WindowsPhone");
$wp7 = strpos($_SERVER['HTTP_USER_AGENT'],"WP7");
$wp8 = strpos($_SERVER['HTTP_USER_AGENT'],"WP8");

if($ipad || $iphone || $ipod || $android || $symb || $operam || $htc || $winphone || $berry) {
if(isset($_REQUEST['ver']) and $_REQUEST['ver'] == 'full') {
if(empty($_COOKIE['ver']))
setcookie('ver', 'full', time() + 86400, '/', '.site.ru');
} else {
header('Location: http://site.ru/m'); // если мобильная версия расположена на поддомене, то пропишите адрес http://m.site.ru
exit;
}
}
// перенаправлеяем на мобильную версию
?>

Вместо site.ru пропишите ваш домен.

В мобильной версии поставьте ссылку на основную версию:

site.ru/index.php?ver=full

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

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

©Невежин Евгений
http://nevius.ru
11.03.2016

При перепечатке информации ссылка на сайт http://nevius.ru обязательна.