По мере развития высоких технологий изменились и требования, предъявляемые к сайтам, ведь на рынке представлено огромное количество электронных устройств с выходом в интернет.
Наряду с обычными смартфонами и ноутбуками, появились планшеты, нетбуки, карманные компьютеры, телевизоры и даже ультрабуки. Вместе с этим перед разработчиками и веб-дизайнерами возник вопрос о том, как веб-страницы будут отображаться на экранах с различным расширением. При любом несоответствии ширины браузера посетителя сайта и ожидаемой минимальной ширины, содержимое сайта будет обрезано, и важная информация на сайте может уйти из области просмотра. Так возникла новая технология создания сайтов, делающая их более гибкими и позволяющая на экранах с любым разрешением выглядеть одинаково – отзывчивый дизайн.
Способы создания отзывчивого дизайна
Если вы начинающий верстальщик и еще теряетесь во всем многообразии кода, но очень хотите создать сайт, на помощь вам придут конструкторы сайтов (лучшим можно смело назвать MotoCMS 3.0) различные фреймворки - удобные инструменты, состоящие из набора готовых CSS – стилей, java-скриптов и html-кода. Если же вы уверенно владеете навыками html-верстки и разбираетесь в CSS – стилях, то перед вами открываются широкие возможности создать любой сайт, отвечающий требованию кроссбраузерности. Подробнее расскажем о каждом способе - выбирайте наиболее удобный и применяйте его на практике.
Конструкторы сайтов - MotoCMS 3.0
Почему мы расскажем лишь про MotoCMS 3.0? Это самый прогрессивный и передовой онлайн-конструкторов сайтов любого уровня сложности, который имеет огромные возможности оформления сайтов любого направления.
Все сайты созданные на платформе MotoCMS 3.0 являются респонсивными, это означает, что конструктор сайтов обеспечит правильное, адаптивное обображение веб-страниц в любом браузере. Данная платформа также позволяет заметить очень быструю реакцию на все действия гостей сайта и администраторов в рамках панели управления. Достаточно простая работа конструктора также касается и работы с медиафайлами. Рассматриваемый конструктор сайтов MotoCMS 3.0 позволяет установить сайт в районе двух минут, подключив базу данных и файлы шаблона. MotoCMS 3.0 подойдет как энтузиастам, новичкам веб-дизайна, так и профессиональным создателям сайтов. Более того сайты созданный на MotoCMS 3.0 отлично индексируются поисковыми системами.
Фреймворки
Одно из главных преимуществ фреймворка – это его кроссбраузерность. Применяя фреймворк в своем проекте, будьте уверены, что сайт будет отлично смотреться на любом устройстве, с которого его просматривают. Даже начинающий верстальщик, владея этим мощным инструментом, сможет создавать сайты различной сложности. У данного способа существуют свои минусы. Первый заключается в наличии излишнего кода, который влияет на загрузку сайта и утяжеляет его. Второй недостаток – дизайн сайта будет ограничен тем кодом, который предоставляет фреймворк. Приведем примеры нескольких фреймворков, которые вы без труда освоите.
Bootstrap - один из известных помощников верстальщиков является фреймворк от компании Twitter - Bootstrap. Благодаря своей популярности уже существует целое сообщество, пишущее плагины и другие дополнения для этого фреймворка. Полное руководство можно прочитать в специальной документации на сайте разработчика. Responsive Grid System - еще один интуитивно понятный фреймворк называется Responsive Grid System. В чем-то он похож на Bootstrap: легко подключается и применяется адаптивная разметка, состоящая из 12 колонок. Skeleton - также простой в использовании, основан также на 12-колоночной адаптивной разметке и легко подстраивается к любому дизайну.
Это далеко не полный список и существуют десятки фреймворков на любой вкус. Каждый сможет выбрать из этого многообразия наиболее удобный для себя инструмент.
Min-width. Медиазапросы и гибкая сетка.
Этот способ подойдет более опытным специалистам в веб – разработке. Более подробно можете почитать о нем в книге И. Маркотта «Responsive Veb Design», где он доступно и подробно рассказывает о трех составляющих данного способа кроссбраузерной верстки. По мнению Маркотта для создания отзывчивого дизайна нужно 3 компонента:
- Гибкая сетка.
- Гибкие изображения.
- Медиазапросы
Гибкая сетка. Здесь все умещается в одну формулу: target context = result. Все строки, колонки и модули выражены пропорцией содержащихся в них элементов. И их размеры рассчитываются по вышеприведенной формуле, где:
- target – размер в пикселях самого элемента, размер которого в относительных единицах нам нужно посчитать;
- context – размер в пикселях родительского элемента;
- result – полученный результат в процентах, который мы записываем в CSS правилах вместо исходного значения в пикселях.
Гибкие изображения. Здесь достаточно задать максимальную ширину для изображений 100%. Они начнут увеличиваться и уменьшаться пропорционально остальному контенту. Медиазапросы. Медиазапросы изменяют CSS свойства элементов, если заданы определенные параметры, таких как ширина, высота, тип экрана и другие.
Трудно недооценить значение отзывчивого дизайна. Кроссбраузерность – это уже не излишество, а требование разработчиков поисковых систем, влияющее на позицию сайта в поисковой выдаче. Приведенные способы помогут сделать ваши сайты отзывчивыми, а, следовательно, улучшить их юзабилити.