Як зробити мобільну версію сайту

У наш сучасний вік стали дуже бурхливо розвиватися мобільні пристрої. Більшість цих мобільних пристроїв дозволяють виходити в Інтернет. І зараз частка "мобільних користувачів" продовжує зростати, тому є великий сенс зробити мобільну версію сайту. У цій статті я розповім, як зробити мобільну версію свого порталу.

Насамперед, Ви повинні зрозуміти, що мобільний Інтернет поступається за швидкістю стаціонарного у багато разів, плюс через невеликого екрану перегляд сторінок так само не зручний. Я вже мовчу про тих, хто намагається вийти в Інтернет через GPRS. Мені це вдалося відчути одного разу, коли я був далеко в Краснодарському краї, в якийсь глибинці, де телефон з незрозумілих причин більш-менш (40-50%) Ловив тільки на кладовищі. З таким зв`язком можна дзвонити, але ось Інтернет був абсолютно некудишний. Тому коли мені довелося там завантажувати сторінки розмірів 200-300 КБ, з яких 90% - це непотрібна графіка, я проклинав творців цього сайту.

Тому в першу чергу мобільна версія сайту повинна бути з мінімальним набором графіки, максимум - це якась "легка" шапка, не більше того.

Висновок звідси простий: Вам доведеться робити абсолютно іншу верстку для мобільних пристроїв, де не буде ніяких красот, а буде лише тільки найнеобхідніше. Плюс позиціонування елементів треба зробити по-іншому. Наприклад, якщо меню зліва, то краще буде його зробити зверху, щоб основну частину можна було розтягнути на всю ширину екрану. Це як приклад.

Що стосується ширини сторінки, то рекомендую поставити max-width: 620px; у самого верхнього контейнера. Сильніше розтягувати не потрібно.

Мобільну версію сайту краще зробити на окремому піддомені, наприклад, на m.mysite.ru.

Коли Ваш окремий сайт для мобільних пристроїв буде готовий, треба подумати, як перенаправляти користувачів з мобільними пристроями з сайту mysite.ru на m.mysite.ru. Код для визначення браузера можна завантажити тут: https://detectmobilebrowsers.com/.

Завантажуєте, наприклад, для PHP. Далі вставляєте в index-файл цей код і замінюєте там адресу в header () на адресу Вашої мобільної версії сайту.

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

Підведу підсумок:

• Створіть окремий піддомен Вашого сайту для мобільної версії.
• Зробіть нову верстку для мобільної версії.
• Скопіюйте всі системні бібліотеки з Вашого основного сайту на піддомен, а база даних, безумовно, повинна бути загальною, якщо не хочете, додаючи новий контент, робити це двічі.
• В index-файл основного сайту додайте перевірку на браузер користувача. І якщо це мобільний браузер, то робіть редирект на мобільну версію сайту.

Це все, що потрібно зробити для того, щоб була На вашому сайті.