Прогресс не стоит на месте, все большее количество пользователей заходит в интернет с различных мобильных устройств: смартфонов, планшетов, нетбуков. Поэтому делать один дизайн сайта, подходящий только под стандартное разрешение монитора компьютера, значит потерять большое количество потенциальных клиентов.
Что же делать? Первое решение проблемы было создание мобильной версии сайта. Облегченный, где-то урезанный вариант полноценного сайта. Поначалу этого было достаточно, но чем больше создавалось устройств с различными разрешениями экранов, тем больше было недовольных мобильной версией пользователей. Ведь владельцам смартфонов тоже хочется видеть наиболее полноценную версию сайта, а не урезанную. Очень скоро разработчики пришли к выводу, что нужно создавать одну версию сайта, но такую, которая бы одинаково хорошо отображалась на всех типах устройств, без потери какой-либо информации. Это идея положила начало адаптивному дизайну.
Попробуем разобраться, какие существуют варианты дизайна сайта, подстраивающегося под разные разрешения экранов:
Резиновый дизайн.
Основное отличие такого типа дизайна в том, что все размеры задаются в процентах, что позволяет дизайну растягиваться на любую ширину экрана. Например если какая-то кнопка сайта была шириной в пол экрана на настольном компьютере, то на экране смартфона, такая кнопка будет занимать туже самую половину от ширины экрана, не вылезая за его пределы. Но тут есть существенный недостаток. В связи с большим количеством различных разрешений экранов, сложно создать дизайн, который бы идеально смотрелся на каждом. При использовании такого типа дизайна существует большая вероятность, что на некоторых устройствах часть информации будет выходить за границы блоков, обрезаться, а весь дизайн разъезжаться. Согласитесь, это не добавит популярности такому сайту.
Адаптивный дизайн.
Видя проблемы резинового сайта, некоторые разработчики пошли по другому пути. Решено было создать несколько независимых вариантов дизайна для различных разрешений экранов.
Сервер автоматически определял, с какого разрешения заходит пользователь и загружал ту версию сайта, которая сделана специально для этого разрешения. На каждой версии была сохранена основная информация, картинки загружались уменьшенных размеров, а не очень важные блоки скрывались, при этом структура всего сайта несколько изменялась.
Обычно адаптивные дизайны имеют 6 вариантов макетов, основанных на чаще всего используемых разрешениях экранов с шириной: 320, 480, 760, 960, 1200, 1600 пикселей.
Отзывчивый дизайн.
Последняя разработка дизайна. Отзывчивый дизайн соединяет в себе лучшие черты резинового и адаптивного дизайнов. Он, как и резиновый, автоматически растягивается под любую ширину экранов, но при этом может меняться структура сайта и расположение блоков, как у адаптивного дизайна.
Но не обошлось и без недостатков. Самый главный – это довольно большой вес страницы сайта, из-за этого она может очень долго загружаться на мобильных устройствах. Ведь чтобы сайт правильно отображался на различных устройствах, потребуется серьезно увеличить количество кода отвечающего за правильное отображение элементов сайта на том или ином устройстве.
Говоря об отзывчивом дизайне, стоит так же обратить внимание на отношение поисковых систем к сайтам, оптимизированным для просмотра на мобильных устройствах. В начале 2017 года, Google сделал оптимизацию сайта для мобильных устройств практически обязательным требованием. Сайты не отвечающие этому условию, ранжируются ниже в поиске, та что если вы планируете работать с SEO или просто рассчитываете что ваш сайт будут находить через поисковые системы, стоит наконец задуматься об оптимизации для мобильных устройств.