Отзывчивый сайт, в двух словах

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

Что же представляет из себя адаптивная верстка…

Responsive web

В сети достаточно много материалов и статей по данной теме,  в том числе очень хорошая книга Ethan Marcotte «Responsive Web Design». Но мы остановимся на статье «Как сделать один сайт для всех устройств (Responsive Web Design)», раскрывающей основные техники, из которых и состоит responsive:

  1. Макет, основанный на пропорциях (fluid grid), то есть резиновый. Пропорции рассчитываются по формуле «target / context = result». Пример: макет имеет ширину 980px и в нем есть какой-то блок шириной 220px. Используя формулу, получаем ширину блока 22.653% (220/980=0.22653).
  2. Резиновые изображения (fluid images). Очень важное и полезное CSS-свойство { max-width: 100% }, позволяющее подстраивать размеры картинки под родительский блок. При этом, даже если исходный размер картинки больше блока-родителя, она будет пропорционально уменьшена. Этот принцип применим не только к картинкам, но и к embed, object, video.
  3. Media queries. Набор правил, позволяющих оптимизировать отображение макета при разных разрешениях экрана. Об этом далее.

К слову, и Google одобряет адаптивность в своей рекомендации для мобильных сайтов от 6 июня 2012 года. Было отмечено, что сайты с адаптивным дизайном — наилучшее решение для поисковых алгоритмов. Обосновывается это тем, что мобильная и обычная версии сайта находятся по одному адресу и, собственно, представляют одно целое. Это упрощает индексацию и делает ее качественней.

Все просто!

Сначала мы добавляем между тегами <head> строку:

<meta name="viewport" content="width=device-width; initial-scale=1.0">

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

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

<link rel="stylesheet" type="text/css" href="/css/media-queries.css">

С помощью стилей и media queries, а именно запроса @media screen and (max-width: ширина) {css-правила}, мы указываем браузеру, что правила, указанные в фигурных скобках, требуется применять, только если разрешение экрана станет меньше указанной в max-width. В фигурных скобках мы просто переопределяем уже прописанные правила в основном CSS-файле, исходя из текущего значения ширины экрана.

/************************************************************************************
    smaller than 1024
*************************************************************************************/
@media screen and (max-width: 1024px) {
    
    #team li {
        width: 40%;
        height: auto;
    }
    
    #slogan h2 {
        font-size: 2em;
    }
    
    #work-bottom .team {
        margin-bottom: 15px;
    }

    …
    
}

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

Тестирование

Есть ресурсы, позволяющие смотреть сайт при разрешениях, соответствующих наиболее популярным устройствам. Например: The Responsinator. Но не надо забывать, что тестируя верстку только в браузере, можно столкнуться с массой неожиданностей на реальных устройствах.

Responsive web

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

Вот собственно и все основные моменты, касаемые адаптивной верстки. Пробуйте и экспериментируйте, это не сложно!

Ссылки:

Все записи