Сайты бывают разными. Но если речь идет о более или менее серьезном интернет-проекте или сайте крупной компании, то он обязательно должен иметь мобильную версию. Однако, что же подразумевается под «мобильностью» сайта? Ведь мобильные устройства бывают самыми разными – это и смартфоны, и планшеты, и ультрабуки. Причем они выпускаются с самыми разными диагоналями дисплеев и плотностью пикселей. Кроме этого, наверняка, в будущем ряд подобных гаджетов будет только пополняться. И что же: создавать отдельную версию сайта для каждой конкретной модели? На это не хватит никаких ресурсов…

Очевидно, что нужно искать какое-то другое решение. И такое решение есть! Это так называемый адаптивный дизайн или responsive Web Design. Как видно из названия, адаптивный дизайн разрабатывается таким образом, что все элементы сайта подстраиваются (адаптируются) к текущей ситуации в зависимости от размеров и разрешения экрана, используемой операционной системы и ориентации экрана. При таком подходе подготавливаются разнообразные сетки, слои, изображения, элементы и т.д., из которых впоследствии и выстраивается сайт. Так, например, при посещении сайта через iPad сайт подстроится под нужное разрешение, размеры картинок уменьшатся, флэш-элементы будут заменены на другие или вовсе убраны.

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

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

Разрешение экрана

В настоящее время разрешения экранов уже не делятся на стандартные варианты: 1024×768, 1280×1024 , 1600×900 и т.д. Экраны мобильных устройств могут иметь самые разные разрешения, а также менять ориентацию с книжной на альбомную при повороте устройства. Владельцы же стационарных компьютеров с большими мониторами чаще всего подбирают разрешение под свои ощущения, то есть и здесь нет единого стандарта. Задача адаптивного дизайна как раз и заключается в том, чтобы сайт выглядел достойно и красиво вне зависимости от используемого устройства и разрешения.

Адаптивный макет

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

Оптимизация контента

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

Переход к тачскринам

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

Похожие темы: