Особенности разработки адаптивного веб-дизайна ~ Веб-органика
Веб-органика
   ~    Интернет-маркетинг

Особенности разработки адаптивного веб-дизайна

Адаптивная верстка — сравнительно современный способ верстки сайта для различных устройств.

Ранее, до ее появления, под мобильные устройства создавался отдельный сайт, который загружался на поддомен или в подпапку основного домена. Таким образом, необходимо было поддерживать не 1, а 2 версии сайта, что усложняло работу верстальщику и индексирование поисковыми роботами.

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

Примеры с кодом

Для создания адаптивности в css применяются так называемые media-запросы. Их использование можно проиллюстрировать следующим примером: допустим, что заголовок страницы на мобильных телефонах должен быть 20px, на планшетах — 26px, а на десктопах — 36px.

Тогда css для данного примера будет выглядеть так:

.title {
    font-size: 20px;
}

@media (min-width: 768px) {
    .title {
        font-size: 40px;
    }
}

@media (min-width: 992px) {
    .title {
        font-size: 60px;
    }
}

Кстати, в этом коде можно увидеть некоторые значения для ширины экрана: 768px, 992px. Такие значения являются точками перелома.

Например:

  • устройства с шириной экрана до 479px — это мобильные телефон;
  • устройства с шириной экрана от 480px до 767px — это небольшие планшеты;
  • устройства с шириной экрана от 768px до 991px — это планшеты;
  • а устройства с шириной экрана от 992px — это ноутбуки и настольные ПК.

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

Разработка адаптивной станицы сайта начинается с макетов. Для этого дизайнер готовит несколько макетов страницы под разные типы устройств, чаще всего 3 штуки:

  • для мобильных устройств;
  • для планшетов;
  • для десктопов.

Бывает, что делается 1 макет, а адаптация реализуется верстальщиком.

Как и текст, изображения также меняют размер, то есть, масштабируются под различные экраны. Пример кода:

.image {
    max-width: 100%;
    height: auto;
}

Рассмотрим теперь другой пример. В версии для ПК может отображаться три элемента в 1 строку (тут я картинки сделаю), в мобильной версии они будут располагаться в 1 столбец (снова картинка). За это тоже отвечают media-запросы.

Код для данного примера упрощенно выглядит так:

.col {
    width: 100%;
}


@media (min-width: 767px) {

    .col {
        float: left;
        width: 50%;
    }
}

Также можно скрыть или, наоборот, показать некоторые элементы страницы.

.element {
    display: none;
}


@media (min-width: 767px) {

    .element {
        display: block;
    }
}

Эти примеры можно наблюдать на одной из наших работ. Например здесь.

Заказать современный сайт с адаптивной версткой можно в компании Веб-органика. Заходите сюда.