Если в начале 00-х единственным устройством, обеспечивающим доступ к сети был компьютер, то к концу 2010-х количество девайсов, подключающихся к интернету, выросло в десятки раз. На смену мобильным телефонам пришли смартфоны, работающие под управлением мобильных ОС Android, iOS и Windows Mobile. Вслед за ними рынок «взорвали» планшетные ПК под управлением тех же систем. Не стоит забывать об игровых консолях, «умных» телевизорах и приставках, способных превратить «древнего кинескопного мастодонта» в инновационный гаджет с бесперебойным подключением к сети.
При этом стоит отметить, что с каждым годом, доля пользователей, «пересаживающихся» с ПК и ноутбуков на мобильные устройства увеличивается. И если с десяток лет назад наличие мобильной версии сайта считалось прихотью владельца, то сегодня способность приспосабливаться под экраны «умных» гаджетов – необходимость, диктуемая реалиями современности. Но как сделать адаптивный дизайн сайта? На чем базируются принципы его верстки? Что нужно предусмотреть при разработке? Можно ли сверстать страницу по готовому макету? Разберемся с этим вместе!
Что значит адаптивная верстка сайта?
Людям, далеким от веб-дизайна и разработки может показаться, что мобильные сайты отрисовываются вручную. Но по факту, разработчики прибегают к адаптивной верстке, меняющей дизайн страницы, исходя из:
- Типа устройства (смартфон, планшет, игровая консоль, смарт-ТВ или ТВ-бокс);
- Размеров экрана;
- Ориентации (горизонтальное или вертикальное положение).
Иными словами, сайт получает информацию о гаджете, с которого был произведен вход, после чего меняет размеры и расположение отдельных элементов в соответствии с параметрами, рекомендуемыми производителем.
Основные принципы адаптивного дизайна сайта
Первым и, пожалуй, самым важным преимуществом адаптивности является «подстройка» под любой экран: будь то небольшой дисплей «старенького» смартфона или 52’’ телевизор на Android TV. Во-вторых, “приспосабливающиеся” страницы должны передавать суть страницы и нести в себе исключительно полезную информацию.
Кроме того, в отсутствие «стандартных» средств управления (трекпада, мыши, сенсора), для упрощения перемещений между страницами, меню навигации должно открываться в отдельном блоке. Не стоит забывать о быстром поиске и фильтрах, упрощающих процесс нахождения нужных товаров (для интернет-магазинов), статей (блоги, СМИ), сообщений и тем на форумах.
Ключевые элементы адаптивной верстки сайта
Ориентируясь на типовые размеры мобильных девайсов, адаптивный дизайн использует несколько статичных макетов для настольных ПК, мобильных телефонов и смартфонов, планшетов и ноутбуков. Адаптация запускается при обнаружении контрольной точки: загрузка макета происходит при изменении (или изначальном размере) окна браузера.
В зависимости от ширины экрана, макеты имеют шесть вариантов:
- 320;
- 480;
- 760;
- 960;
- 1200;
- 1600.
При этом разработчики учитывают особенности девайсов: наличие/отсутствие сенсорного управления, заполненность пространства на широкоформатных мониторах или экранах ТВ.
Использование гибкого макета для сайта
Создание адаптивного дизайна по гибкому макету подразумевает наличие трех компонентов:
- Плавающей сетки (Fluid Grid);
- Гибкий текст, “резиновые” изображения;
- Медиа-запросы.
Сетки – не новинка в мире веб-разработки и используются фактически с самого начала существования сети. Но если в прошлом они имели фиксированный размер и не позволяли масштабировать страницу, то сегодня с их помощью можно задать постоянные пропорции и интервал для настройки под определенную ширину экрана в процентах.
Текст и картинки настраиваются в пределах ширины макета, в соответствии с таблицей стилей CSS: гибкий контейнер внутри сетки позволяет переносить информацию о товаре, увеличивая или уменьшая шрифт в зависимости от разрешения экрана. А возможность масштабирования, обрезки или отключения картинок в зависимости от важности контента, выводимого на экран, позволяет ускорить загрузку страницы.
Медиа-запрос определяет код, применяемый исходя из размеров дисплея и ориентации. С их помощью можно настроить несколько макетов дизайна, использующих единую страницу с кодировкой HTML.
Резиновые изображения для сайта
Чтобы изображения масштабировались вместе с другими элементами в «гибком макете», в коде страницы достаточно прописать:
Img { max-width: 100%; }
В итоге, картинки будут масштабироваться до 100% от изначальной ширины. Аналогичный атрибут и свойства (object, video, embed { max-wight: 100%;}) можно применять к иным мультимедиа-файлам, размещенным на странице (кроме видео в теге <iframe> с YouTube.
Медиазапросы как важная часть адаптивной верстки
Media-queries – технология, позволяющая браузеру “подгружать” разные стили оформления, используя информацию об устройстве и его характеристиках. Впервые, медиа-запросы были применены в CSS2 с появлением правила @media, а к выходу 3-й версии средства управления стилями появилась полноценная работа со всеми размерами экранов, что и позволило делать адаптивные сайты.
Медиа-функции правила позволяют производить глубокую настройку параметров, проверяя:
- Ширину и высоту дисплея;
- Размер и ориентацию устройства;
- Соотношение сторон;
- Цветность и количество поддерживаемых цветов;
- Наличие поддержки фиксированной сетки.
При грамотном подходе, медиа запрос способствует тонкой настройке параметров страницы под любой девайс, обладающий возможностью выхода в сеть!
