Раскрываем несколько способов, как перенести сайт с полной версии на мобильную, ничего не упустив.
Раз уж взялись переносить свой сайт на мобильные рельсы, мало сделать приложение: важно ничего не потерять при переносе.
Сегодня разбираем от простого к сложному три основных принципа адаптации контента сайта. Иначе говоря, как перенести всё самое важное в мобильную версию сайта, и как не потерять контент по пути.
Способ 1. Адаптивная вёрстка
Самый лёгкий способ адаптации сайта, простой как три рубля. Суть его в том, что вы с самого начала создаёте на базе HTML страницу, которая будет подстраиваться под вертикальный или горизонтальный формат, в зависимости от того, с какого устройства пользователь ваш сайт просматривает.
Для реализации просто берёте любой фреймворк и адаптируете под желаемый дизайн. При этом мобильной версии скрывается часть элементов, видимых в ПК-версии и наоборот.
Способ хорошо подойдёт для адаптации большинства сайтов, однако при использовании специфических скриптов время загрузки может увеличиться. А это, как мы писали в одном из прошлых материалов, может серьёзно навредить посещаемости сайта.
Способ 2. Отдельный шаблон для мобильных устройств на основном домене
Тоже как будто бы ничего сложного, но попотеть придётся подольше. Для отдельного шаблона на мобильных «рельсах» необходимы минимальные знания php, навыки написания скриптов, а также необходимая база устройств и вывода шаблона.
Иначе говоря, вы должны будете написать скрипт, который при загрузке определяет устройство, с которого пользователь заходит, и применяет к этому устройству нужный шаблон.
Различные плагины для работы с CMS (коих довольно много) могут облегчить вам работу по оформлению, сбору статистики, отображению элементов или сокрытию их с глаз. Но не рассчитывайте на плагины слишком сильно: не для всего они найдутся, а также могут возникать баги.
Способ 3. Мобильная версия сайта на поддомене
Самый хардкорный способ из всех, что мы сегодня разберём, предназначен для тех, кто не ищет лёгких путей. Суть его в том, чтобы создать страницу со всем аналогичным контентом, но на отдельном поддомене.
База данных остаётся та же, движок остаётся тот же, а дизайн и элементы подгоняются под мобильное устройство. Если кто-то заходит с телефона, он сразу перенаправляется на поддомен. Такие сайты очень просто отличить: на них перед ссылкой пишется “m.”, “pda.” или “mobile.”.
Способ хоть и весьма трудоёмкий, но полностью себя оправдывает, если у вас, к примеру, большой интернет-магазин с множеством товаров. Отдельный поддомен существенно снизит время загрузки страницы и обеспечит удобное пользование. А это уже половина успеха сайта!
Также есть несколько важных мелочей, которые стоит проверить перед запуском сайта.
- Использование тега Viewport: он позволяет адаптировать размер видимой области страницы к экрану устройства посетителя.
- Отсутствие горизонтальной прокрутки: если она есть, то вероятно, размер установлен неправильно. Никому не хочется листать страницу на телефоне вбок.
- Крупный размер шрифта и крупные значки: каждый крупный элемент на странице двигает все остальные в сторону. Так что, если не хотите, чтобы они попадали, как домино, лучше перепроверить, хорошо ли адаптированы элементы.
- Gzip-сжатие: сокращает данные без потери качества контента, что в свою очередь ускоряет загрузку страницы.
- Открытые для роботов стили CSS: чтобы сайт и его содержимое корректно выдавали поисковые боты, необходимо использовать корректные стили с меткой “.CSS”. Иначе поисковики сочтут ресурс неактивным и не будут выдавать его в поиске.
- Ширина картинок и полей ввода 100%: проследите, чтобы изображения не выходили за экран устройства. Это будет выглядеть в лучшем случае некрасиво, а также может вызвать появление горизонтальной прокрутки там, где она не нужна. Лучше оптимизировать ширину картинок через CSS с помощью следующих строк:
img {max-width: 100%}
или
.header {background:url (header.png)50% no-repeat; background-size: contain}
Второй вариант подходит для картинок, использующихся в качестве фона. В обоих случаях изображения будут отображаться максимум в 100% ширины экрана.
Если уже определились с выбором и заказали один из методов реализации, не забудьте при приеме работ проверить, как ваш сайт отображается на мобильных устройствах и в онлайн-тестах Google или Яндекс.
#СозданиеСайтов, #СайтПодКлюч, #РазработкаСайтов, #БизнесОНлайн, #КорпоративныйСайт, #АдаптивныйДизайн, #ИнтернетМагазин, #SEOОптимизация, #ITРешения, #ЭффективныйСайт