Полезная информацияАдаптивность
  • Общая информация

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

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

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

    Само название является переводом английского термина «responsive design», где «responsive» буквально переводится как «отзывчивый». Адаптивность — это возможность приспосабливаться к различным условиям, а в нашем случае — к различным устройствам. Именно благодаря адаптивности ваш сайт будет одинаково хорошо выглядеть как на большом мониторе, так и на планшете или мобильном телефоне.

    Многие захотят спросить, зачем же это нужно. По прогнозам к 2014 году доля просмотров сайтов с переносных (мобильных) устройств превысит количество просмотров с полноценных мониторов/компьютеров. А это значит, что без адаптивности на сайтах вы со временем просто-напросто начнёте терять прибыль и клиентов.

    В зависимости от адаптивности можно выделить несколько видов сайтов: адаптивный, обычный не адаптивный и сайт с отдельным отображением для мобильных устройств. Далее подробнее о каждом из них с наглядными примерами.

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

    Адаптивный сайт бывает двух типов: без изменения функционала и с изменением функционала.

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

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

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

    Однако есть и минусы: придётся отказаться от модальных окон (поскольку при этом окно имеет фиксированную ширину и часто просто не влазит в экран устройства).

    В планшетной версии слегка видоизменяется слайдер (теперь видны не пять превью, а три):

    В мобильной версии меню превращается в небольшую иконку, а слайдер превращается в вертикальный список:

    В планшетной версии слайдер видоизменяется (описание "прыгает" вниз и превращается в навигацию слайдера):

    В мобильной версии меню превращается в небольшую иконку, по нажатию на которую открываются пункты меню; также в иконку превращается и поиск:

    В планшетной версии социальные иконки из правого верхнего угла прыгают вниз, превращаясь в большие ссылки разного цвета; над ними появляются большие красные пункты меню ("перепрыгнули" из того же правого верхнего угла):

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

    В планшетной версии сайта мы уже не видим блока с зелёными текстом и иконкой посредине экрана, а также социальных иконок слева:

    В мобильной версии не видим ещё и логотипа, текста про событие (правый верхний угол под меню), фона-картинки всего сайта, и картинки одного из баннеров:

    В мобильной версии мы не видим ссылки для возврата назад (до этого она была в левом верхнем углу):

    Обычный не адаптивный сайт

    Обычный не адаптивный сайт отображается на мобильных устройствах на 100% так же, как и десктопный. Важный минус таких сайтов в том, что нам нужно увеличивать каждый кусок сайта, чтобы чётко что-то увидеть. Часто текст очень мелкий, содержимое расползается и деформируется, найти нужную информацию почти невозможно. На данный момент большинство сайтов именно не адаптивные.

    Можно выделить 3 вида таких сайтов: фиксированный, не фиксированный и псевдофиксированный.

    Фиксированный сайт имеет постоянную ширину, которая не меняется в зависимости от устройства.

    Сайт везде выглядит абсолютно одинаково, лишь масштабируясь под конкретный размер экрана:

    Не фиксированный сайт имеет резиновую, не постоянную ширину, которая меняется в зависимости от ширины экрана. Фактически сайт растягивается на всю ширину экрана.

    Псевдофиксированный сайт имеет максимальную и минимальную ширины.

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

    Сайт с отдельным отображением для мобильных устройств

    Сайт с отдельным отображением для мобильных устройств — это, по сути, отдельный сайт с другой структурой и зачастую очень урезанной функциональностью, на отдельном поддомене (чаще всего это m. или mobile.). Обычно он содержит возможность возврата к обычной, стационарной версии, где можно увидеть и привычный функционал.

    Автоматически попадаем на мобильную версию:

    Мобильную версию можно переключить на стационарную, нажав на соответствующую ссылку в футере сайта:

    Стационарная версия выглядит не так хорошо хотя бы из-за маленьких шрифтов:

    Планшетная версия похожа на десктопную, но имеет и некоторые отличия: вход перенесён в шапку сайта, спрятаны некоторые пункты меню (они не удалены, а лишь спрятаны), добавлена ссылка на расширенный поиск и языковые инструменты, изменена стилизация футера:

    Автоматически попадаем на мобильную версию, в которой добавлен новый полезный функционал: быстрый поиск ресторанов, кафе и т.д.; возможность загрузки отдельного приложения (для пользователей Iphone); указание местоположения и др. Также упрощена навигация:

    Мобильную версию можно переключить на полную, нажав на соответствующую ссылку в футере сайта:

    Полная версия выглядит не так хорошо хотя бы из-за маленьких шрифтов:

    Выводы

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

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

    Сайты популярных брендов всё чаще становятся адаптивными: компании стремятся быть современными, не отставать от времени и потребностей пользователей. Даже владельцы небольших компаний хотят удержать посетителей своих сайтов, которые всё активнее заходят на их ресурс с помощью мобильных устройств.

    Можно выделить следующие плюсы адаптивных сайтов:

    • значительное увеличение аудитории за счет пользователей мобильных устройств (по данным Thrive Marketing более 40% пользователей ежедневно осуществляют покупки в сети интернет посредством смартфона)
    • адаптивные сайты легче поддерживать: не нужно два раза заполнять и обычную версию, и версию для мобильного телефона, что крайне не эффективно (поддерживать в актуальном и работоспособном состоянии один "универсальный" сайт дешевле)
    • пользователям гораздо легче и удобнее пользоваться одним и тем же интерфейсом на разных устройствах, чем каждый раз подстраиваться под что-то новое
    • адаптивные сайты — наилучший выбор с точки зрения алгоритмов поисковика (из-за наличия одного общего доменного имени для всех версий сайта его проще и быстрее найти в интернете)

    За новыми технологиями веб-разработки будущее, так что, если вы не хотите остаться за «чертой», ваш выбор очевидно падёт на наиболее оптимальный и перспективный вариант — адаптивный веб-сайт.