Адаптивный дизайн или мобильная версия - что выбрать?

16 августа 2017

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

Есть два принципиальных варианта отображения сайта на небольших экранах: адаптивный дизайн и мобильная версия сайта. Рассмотрим каждый подход более детально.

Адаптивный дизайн

Адаптивный дизайн (а точнее, верстка) – технология, используемая в веб-дизайне, необходимая для обеспечения возможности дизайна динамически подстроиться под размеры окна браузера различных устройств.

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

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

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

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

Преимущества Адаптивного дизайна перед Мобильной версией

  • 1)Адаптивный дизайн может иметь более широкий обхват устройств различных типов с разными размерами экранов. При использование мобильной версии есть только два варианта: мобильная и ПК версия.
  • 2)Мобильная версия – это отдельная версия сайта. Из определения следует, что вносить изменения в дизайн сайта более сложно. При использование мобильной версии необходимо вносить изменения всегда в две темы дизайна в ПК и мобильную. В то время, как изменения в адаптивном дизайне сразу будут действительны для всех поддерживаемых устройств.

Недостатки Адаптивного дизайна перед Мобильной версией

  • 1)Адаптивный дизайн общий код базового дизайна, который используется на всех устройствах и индивидуальный код, обеспечивающий хорошее отображение дизайна на конкретном из устройств. Таким образом, практически всегда присутствует избыточность кода для конкретного устройства использующегося в данный момент. Это объясняется тем, что весь код для поддержки всех типов устройств загружается неразделимо. Для современного мобильного интернета с высокой скоростью это не является критической проблемой, но все равно не стоит забывать о такой особенности.
  • 2)Концепция адаптивного дизайна такая, что он должен подставиться, но все же не радикально меняться. Поэтому разработка дополнительных адаптивных вариантов дизайна всегда происходит с оглядкой на базовый дизайн, т.к. в качестве основы используется именно он. Настоятельно не рекомендуется для одного из адаптивных вариантов делать диаметрально противоположный дизайн, который в своей основе будет использовать абсолютно другие элементы нежели те, что использованы в базовом дизайне. Технически адаптивный дизайн для ПК и мобильного могут быть полностью отличаться друг от друга в этом ничего сложного нет, но чем больше отличий, тем больше дополнительного кода требуется написать, а это утяжеляет код темы дизайна и негативно сказывается на чистоте кода. Мобильная версия в этом плане может иметь кардинально другое оформление, иное расположение и наличие элементов.

Что лучше, адаптивный дизайн или мобильная версия сайта?

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