→ Как создать сайты для планшетов и смартфонов

Как создать сайты для планшетов и смартфонов

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

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

Подход 1. Использование адаптивного веб-дизайна

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

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

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

Подход 2. Создание отдельной версии сайта

Такой подход считают правильным не меньшее число людей, чем первый. В нем также заложено немало преимуществ, но есть и недостатки.

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

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

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

Подход 3. Загрузка разных HTML и CSS с сервера

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

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

К недостаткам же можно отнести факт увеличенной нагрузки на сервер, поскольку динамическое создание HTML потребует от него куда больших ресурсов.

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

Делитесь в комментариях своими наблюдениями: насколько часто вы заходите в интернет со своих мобильных устройств?

Devicehit.ru


Теги: создать сайт

Читайте также по теме статьи «Как создать сайты для планшетов и смартфонов»:


Вам будет интересно