Close

Оставьте заявку

Мы свяжемся с вами в кратчайшие сроки!

Close

Спасибо за вашу заявку

Доверьтесь нам и мы сможем сделать
еще один сайт лучше!

Как сделать адаптивную версию сайта?

Картинка - Адаптивная верстка сайта

Если в начале 00-х единственным устройством, обеспечивающим доступ к сети был компьютер, то к концу 2010-х количество девайсов, подключающихся к интернету, выросло в десятки раз. На смену мобильным телефонам пришли смартфоны, работающие под управлением мобильных ОС Android, iOS и Windows Mobile. Вслед за ними рынок «взорвали» планшетные ПК под управлением тех же систем. Не стоит забывать об игровых консолях, «умных» телевизорах и приставках, способных превратить «древнего кинескопного мастодонта» в инновационный гаджет с бесперебойным подключением к сети.
 
При этом стоит отметить, что с каждым годом, доля пользователей, «пересаживающихся» с ПК и ноутбуков на мобильные устройства увеличивается. И если с десяток лет назад наличие мобильной версии сайта считалось прихотью владельца, то сегодня способность приспосабливаться под экраны «умных» гаджетов – необходимость, диктуемая реалиями современности. Но как сделать адаптивный дизайн сайта? На чем базируются принципы его верстки? Что нужно предусмотреть при разработке? Можно ли сверстать страницу по готовому макету? Разберемся с этим вместе!

Что значит адаптивная верстка сайта?

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

  • Типа устройства (смартфон, планшет, игровая консоль, смарт-ТВ или ТВ-бокс);
  • Размеров экрана;
  • Ориентации (горизонтальное или вертикальное положение). 

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

Основные принципы адаптивного дизайна сайта

Первым и, пожалуй, самым важным преимуществом адаптивности является «подстройка» под любой экран: будь то небольшой дисплей «старенького» смартфона или 52’’ телевизор на Android TV. Во-вторых, “приспосабливающиеся” страницы должны передавать суть страницы и нести в себе исключительно полезную информацию.
 
Кроме того, в отсутствие «стандартных» средств управления (трекпада, мыши, сенсора), для упрощения перемещений между страницами, меню навигации должно открываться в отдельном блоке. Не стоит забывать о быстром поиске и фильтрах, упрощающих процесс нахождения нужных товаров (для интернет-магазинов), статей (блоги, СМИ), сообщений и тем на форумах.

Ключевые элементы адаптивной верстки сайта

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

  • 320;
  • 480;
  • 760;
  • 960;
  • 1200;
  • 1600.

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

Использование гибкого макета для сайта

Создание адаптивного дизайна по гибкому макету подразумевает наличие трех компонентов: 

  1. Плавающей сетки (Fluid Grid);
  2. Гибкий текст, “резиновые” изображения;
  3. Медиа-запросы. 

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

Резиновые изображения для сайта

Чтобы изображения масштабировались вместе с другими элементами в «гибком макете», в коде страницы достаточно прописать:
 
Img { max-width: 100%;

}
 
В итоге, картинки будут масштабироваться до 100% от изначальной ширины. Аналогичный атрибут и свойства (object, video, embed { max-wight: 100%;}) можно применять к иным мультимедиа-файлам, размещенным на странице (кроме видео в теге <iframe> с YouTube.

Медиазапросы как важная часть адаптивной верстки

Media-queries – технология, позволяющая браузеру “подгружать” разные стили оформления, используя информацию об устройстве и его характеристиках. Впервые, медиа-запросы были применены в CSS2 с появлением правила @media, а к выходу 3-й версии средства управления стилями появилась полноценная работа со всеми размерами экранов, что и позволило делать адаптивные сайты.
 
Медиа-функции правила позволяют производить глубокую настройку параметров, проверяя:

  1. Ширину и высоту дисплея;
  2. Размер и ориентацию устройства;
  3. Соотношение сторон;
  4. Цветность и количество поддерживаемых цветов;
  5. Наличие поддержки фиксированной сетки. 

При грамотном подходе, медиа запрос способствует тонкой настройке параметров страницы под любой девайс, обладающий возможностью выхода в сеть!

Понравилась статья? Оставь свой голос!

(Пока голосов нет)

Оставить комментарий

Ваш email не будет опубликован.

Последние посты

Вверх