От того, как ваш сайт будет отображаться на мобильных устройствах, зависит – позвонят ли вам ваши потенциальные клиенты. Разумеется, если сайт отображается «плохо» - не позвонят! В этой статье поговорим о том, что значит «плохо» отображаться на мобильном устройстве, и что такое «мобильная версия сайта». Существует несколько путей решения «мобильной проблемы». Именно проблемы, поскольку в мире используются миллионы абсолютно разных телефонов, планшетов, смартфонов и даже ноутбуков с иным разрешением экрана. И на каждом из них ваш посетитель должен найти на сайте то, что ему нужно.
      Первый путь – создание отдельной мобильной версии сайта. Самый тупой путь, но работающий до сих пор. Обратите внимание на слово «отдельной»! Когда в конце выполнения заказа и при сдаче работы клиент вдруг спрашивает нас, «а, кстати, в нем же есть мобильная версия?» (в сайте клиента), мы улыбаемся. Мобильная версия – это, по сути, ЕЩЕ ОДИН САЙТ, дублирующий содержание основной версии. Он верстается отдельно, наполняется отдельно, редактируется отдельно, и располагается, как вы сами замечаете, на адресе типа m.site.com. Это мобильный поддомен основного домена. Запомните, что мобильная версия не может делаться в подарок или в дополнение, или, тем более, по умолчанию. Мобильная версия сайта – это еще один сайт, который оплачивается отдельно и стоит, примерно 40 процентов от стоимости основного сайта. Хорошие примеры такого пути – сайты Вконтакте и Авито. Такие сайты специально настроены на распознавание устройства, с которого пользователь заходит на сайт, и переадресовывают пользователя, в зависимости от типа устройства и браузера или на www.site.com или на www.m.site.com.

Пример
Полная версия:

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


    Другой путь, современный, получивший распространение с приходом технологий html5 и bootstrap – создание респонсивного сайта. Обратите внимание: НЕ РЕЗИНОВОГО, А РЕСПОНСИВНОГО! Респонсивность – это свойство сайта маштабироваться определенным образом для удобства чтения на экране. В таком сайте на экране мобильного  устройства блоки автоматически масштабируются и выстраиваются в определенном, заранее прописанном порядке. Многие сложные для загрузки элементы отменяются или уменьшаются или замещаются. Профессиональные лендинги пишутся именно так, и никаких мобильных версий. Примеры респонсивных сайтов – почти все последние сайты из нашего портфолио, Инстаграмм и др. Несомненный плюс – не надо никакой мобильной версии. Сложность – руки программиста должны быть выше жопы.


Пример
Полная версия:



Версия на мобильном экране:



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


Полная версия:



Версия на мобильном экране:



      Это приводит к еще одному, очень популярному пути – не делать вообще никакую версию сайта для мобильного устройства. И это тоже способ. В целом, такие сайты смотрятся, как влитые, на всех экранах. Как вы их будете читать – ваша проблема. Можно увеличивать и постоянно перетаскивать страницу пальцем, можно использовать линзу. Прелести любого сайта, старания дизайнеров и программистов в полной мере раскрываются на экране компьютера или ноутбука, и заказчик сайта, в принципе, не обязан думать о том, как это будет читаться у Васи, у которого есть только крутой айфончик. Какой бы путь вы не выбрали, имеете в виду, что ни одна мобильная версия не будет столь же красивой и стильной, как версия для «полноценного компьютера». Если для Авито наличие уродской внешне, но функциональной версии жизненно необходимо, то для сайта вашей фирмы лучшем путем может стать респонсивный дизайн или просто резиновый сайт.

К другим статьям