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

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

  • что такое «адаптивный сайт»
  • чем отличается адамтивный сайт от мобильной версии сайта
  • основные принципы при создании адаптивной верстки

А так же небольшая статистика по тому, какие разрешения экранов сейчас наиболее популярны

Что такое адаптивный сайт ?

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

 

 

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

Чем отличается адаптивный сайт от мобильной версии ?

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

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

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

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

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

После того как дизайн готов мы переходим к разметке и стилям. В последнее время стало популярным начинать верстку сразу с мобильной версии ( mobile firts ), так как по статистике более 70% пользователей перешли на использование мобильных устройств для посещения веб ресурсов и необходимость в десктопных версиях все меньше. Сказать на сколько хорош и оправдан этот метод не могу, так как я все еще по старинке начинаю с декстопных версий и плавно опускаюсь вниз по размерам экранов. И первое что необходимо сделать при создании адаптивного сайта, это понять какие блоки будут смещаться, какие убираться полностью. Это позволит вам избежать проблем на этапе адаптации, так как вы заведомо будете делать разметку под те аспекты, которые для себя определили. Мы упустим этап самой верстки и перейдем сразу к адаптации.

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

Контрольные точки (breakpoint). Контрольные точки позволяют менять свойства стилей для блоков только в случае использования экрана определенного размера. К примеру для настольных компьютеров и ноутбуков у вас будет 3 колонки, для планшетов 2 а для мобильных устройств всего 1. Как вы расставите брейкпоинты зависит от особенности контента.

Шрифты. Хотите использовать на своем сайте крутые и красивые шрифты по типу Futura или Didiot? Используйте веб шрифты, но помните — каждый подключенный шрифт будет загружен а это значит что время загрузки сайта тоже будет увеличено, отсюда вытекает что, чем больше шрифтов тем медленнее загружается ваш сайт.Системные же шрифты загружаются моментально. Как правильно подбирать шрифты вы можете ознакомиться в нашей статье «10 советов по типографии в веб дизайне».

Графика на сайте. Имеет ли ваше изображение множество мелких деталей и впечатляющих эффектов? Если да, то используйте растровый формат. В противном случае используйте векторный формат. Для растровых изображений используйте форматы jpg, png или gif, для векторных лучшим выбором будут SVGи иконочные шрифты. Каждый из форматов имеет свои преимущества и недостатки. В любом случае, помните о размере изображений — ни одна картинка не должна попасть в онлайн, не будучи оптимизированной (сжатой). Векторные изображения зачастую избавлены от лишнего размера, однако они не поддерживаются старыми браузерами. Также стоит помнить, что если векторное изображение содержит много деталей, то оно может весить больше растрового.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *