Делаем мобильную версию сайта

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

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

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

1. Создайте отдельный поддомен Вашего сайта для мобильной версии.
2. Сделайте новую вёрстку для мобильной версии.
3. Скопируйте все системные библиотеки с Вашего основного сайта на поддомен, а база данных, безусловно, должна быть общей, если не хотите, добавляя новый контент, делать это дважды.
4. В index-файл основного сайта добавьте проверку на браузер пользователя. И если это мобильный браузер, то делайте редирект на мобильную версию сайта.

Теперь давайте разберем эти шаги.

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

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

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

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

Существует следующий код:

<?php
$useragent=$_SERVER['HTTP_USER_AGENT'];

if(preg_match('/(android|bbd+|meego).+mobile|avantgo|bada/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)/|plucker|pocket|psp|series(4|6)0|symbian|treo|up.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i',$useragent)||preg_match('/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw-(n|u)|c55/|capi|ccwa|cdm-|cell|chtm|cldc|cmd-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc-s|devi|dica|dmob|do(c|p)o|ds(12|-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(-|_)|g1 u|g560|gene|gf-5|g-mo|go(.w|od)|gr(ad|un)|haie|hcit|hd-(m|p|t)|hei-|hi(pt|ta)|hp( i|ip)|hs-c|ht(c(-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i-(20|go|ma)|i230|iac( |-|/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |/)|klon|kpt |kwc-|kyo(c|k)|le(no|xi)|lg( g|/(k|l|u)|50|54|-[a-w])|libw|lynx|m1-w|m3ga|m50/|ma(te|ui|xo)|mc(01|21|ca)|m-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|-([1-8]|c))|phil|pire|pl(ay|uc)|pn-2|po(ck|rt|se)|prox|psio|pt-g|qa-a|qc(07|12|21|32|60|-[2-7]|i-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55/|sa(ge|ma|mm|ms|ny|va)|sc(01|h-|oo|p-)|sdk/|se(c(-|0|1)|47|mc|nd|ri)|sgh-|shar|sie(-|m)|sk-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h-|v-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl-|tdg-|tel(i|m)|tim-|t-mo|to(pl|sh)|ts(70|m-|m3|m5)|tx-9|up(.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas-|your|zeto|zte-/i',substr($useragent,0,4)))

header('Location: https://cruelten.ru/');

?>;

Вставляем данный код перед открытием нашей индексовой страницы, заменяем cruelten.ru на свой поддомен и пользуемся мобильной версией сайта. Все!