Наступила эра мобильных устройств, которые практически полностью заменили домашние ПК. В связи с этим, многим разработчикам приходится выбирать, сделать ли дизайн адаптивным, либо же подстраиваться только под мобильную версию.
В любом случае, требуется создавать мобильную версию сайта. Существует 3 способа построения мобильных версий:
- Создание адаптивного дизайна.
- Создание отдельной версии сайта для мобильных устройств.
- RESS
В этой статье мы подробно рассмотрим все 3 способа, а также их основные преимущества и недостатки.
Адаптивный дизайн
Начнем с самого популярного способа. Смысл в том, чтобы создавать элементы, которые будут подстраиваться под разрешение экрана пользователя. Для этого веб-разработчики используют CSS3 Media Queries.
Пример использования медиа запросов:
Теперь давайте подробно рассмотрим преимущества и недостатки адаптивного дизайна.
Плюсы:
- Удобство — при создании адаптивного дизайна, элементы будут сами подстраиваться под нужное разрешение. Вам не нужно будет создавать отдельные селекторы и стили для изменения размеров объекта. Даже если и потребуется изменить некоторые элементы, достаточно подправить код.
- Простота использования фреймворков. Если вы используете Bootstrap или другой фреймворк, то разработка упрощается.
- Единый URL-адрес. Первое — удобство для поисковика. При создании отдельной мобильной версии приходится создавать отдельный адрес. Поисковикам намного проще работать с одним адресом, чем с несколькими, что положительно сказывается на продвижение в топы.
Недостатки:
- Разное количество информации. Пример — возьмем двух пользователей, первый использует ПК версию, а второй мобильную. На сайте располагается полная информация о сайте и его услугах.
- «Вес» сайта. Мобильная версия весит намного меньше чем ПК версия, но пользователю приходится загружать обе. Дело в том, что для загрузки мобильной версии адаптивного сайта, его необходимо загрузить полностью. Мобильные устройства имеют более слабые характеристики, нежели персональные компьютеры, а значит загрузка может длиться очень долго.
- Нет возможности выбирать. Отличие мобильной версии от адаптивного сайта в том, что её можно отключить. Мобильная версия является отдельной страницей всего сайта, которую можно не загружать.
Пользователю, который заходит с телефона, она может не понадобится. В связи с этим, мобильная версия сайта является неполной и содержит лишь необходимую информацию.
Это не очень удобно, потому что приходится адаптировать сайт под разные задачи, а также хорошо знать свою аудиторию.
Очень часто случается так, что на смартфонах не загружаются некоторые элементы сайта. Из-за этого возникает необходимость перейти на десктопную версию. Адаптивная верстка не позволит вам изменить масштаб отображения, а значит придется искать экран побольше.
Несмотря на то, что такой подход имеет существенные недостатки, он является самым популярным.
Мобильная версия сайта
Некоторые разработчики не являются любителями адаптивной верстки, а поэтому создают сразу несколько версий сайта. При таком подходе, мобильная версия является обязательной.
Отдельная версия очень удобна для пользователя. Иногда мобильная версия намного удобнее чем адаптивный дизайн.
Мобильная версия является урезанной версией сайта, которая содержит наиболее полезную и необходимую информацию для пользователя.
Преимущества мобильной версии:
- Сайт легко редактировать. Из-за того, что мобильная версия находится в отдельном HTML-документе, её можно свободно изменять, не меняя контент десктопной версии. Очень удобно, так как позволяет удалить весь ненужный функционал сайта.
- Удобство для пользователя. Как мы уже говорили, мобильная версия является упрощенной, а значит будет содержать самую полезный контент в сжатом виде. Пользователю не придется долго выискивать нужную информацию.
- Быстрота. Вот самое главное отличие от адаптивной версии — для загрузки сайта со смартфона не придется загружать все элементы сайта.
- Можно перейти на основную версию сайта.
Недостатки:
- Разные адреса. Этот недостаток не является решающим, но из-за него может возникнуть целый ряд проблем. Во-первых — поисковики дольше обрабатывают информацию сайта, что плохо сказывается на продвижении сайта.
- Неудобство SEO-оптимизации. Ещё одним недостатком является то, что при SEO-оптимизации сайта приходится использовать дополнительные meta-теги. Кроме того, за счет нескольких страниц, работа над оптимизацией сайта будет проходить намного дольше.
- Ограниченная версия не будет содержать в себе все функции сайта. Разработчики оставляют только те функции, которые кажутся им наиболее значимыми. При плохом знании аудитории, у пользователей сайта может возникнуть целый ряд проблем.
Как видим, данный подход также не является идеальным и имеет целый ряд недостатков. Мобильная версия лучше всего подходит для крупных проектов, например интернет-магазинов.
RESS
RESS — Responsive Design + Server Side. Данный метод менее популярен нежели два вышеперечисленных, но не менее удобен. Компания-гигант Google, в своих разработках, старается использовать RESS.
Как и остальные методы, RESS имеет свои преимущества и недостатки.
Преимущества:
- Меньшее потребление ресурсов. В случае необходимости, из HTML-документа удаляются ненужные скрипты. Это помогает освободить ресурсы мобильного устройства — CPU, ОЗУ, кэш-память.
- Верстка для определенного устройства. Это очень сложный элемент, но он позволяет создавать уникальные элементы для каждого устройства. Например, на сайте можно разместить GooglePlay и iTunes, которые будут отображаться на Android и Apple устройствах.
- Возможность оптимизации HTML и CSS кода.
Недостатки RESS
- Повышенная сложность. Во-первых, при использовании данного подхода вам потребуется создавать несколько вариантов верстки. Кроме этого, потребуется отдельная настройка сервера. Для данной работы потребуется большая команда веб-разработчиков.
- Проблемы с определением устройства. Данный метод введен относительно недавно, а значит имеет некоторые ошибки. У некоторых пользователей возникала такая проблема: «мобильное устройство не определено». Надеемся, в будущем данная проблема будет решена.
Если сравнивать 3 метода разработки, то RESS является наилучшим, но для него потребуется намного больше сил. Из-за больших затрат данный метод используется только крупными компаниями.
Заключение
Теперь давайте разберемся. Да, RESS намного лучше чем адаптивная верстка и мобильная версия, но и у него имеются свои недостатки. Кроме того, 2 первых метода не являются плохими.
Вы можете использовать любой из этих методов, главное помните о проблемах каждого из них. Возможно у вас получится обойти их и создать качественный и удобный продукт для своей аудитории. Желаем удачи в разработках!