Выпущено бесплатное руководство по созданию адаптивного дизайна

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

С тех пор были придуманы более простые решения, например, один плагин для WordPress и адаптивная тема могут сделать сайт работающим на всех устройствах. Но все же создание действительно адаптивного дизайна, который бы хорошо работал, как правило, требует кодирования и тестирования.

ДНК адаптивного веб-дизайна

Если установленной на ваш сайт адаптивной темы вам недостаточно, и вы хотите узнать, как на самом деле устроен и работает адаптивный дизайн или как создать адаптивный сайт с нуля, вам поможет руководство «Must-Know Techniques for Building HTML5 Apps for Any Screen Size», которое можно скачать бесплатно.

Из руководства вы можете узнать все о современном адаптивном веб-дизайне:

• использование основных строительных блоков адаптивного дизайна – сеток, медиазапросов и адаптивного содержания, которые помогут создавать адаптивные страницы;
• выбор такого фреймворка, как Bootstrap или Zurb’s Foundation;
• использование различных функций Bootstrap.

Краткое содержание руководства.

Media Queries

Медиазапросы – это часть CSS3 и именно то, что делает адаптивный дизайн возможным.

Медиа-запросы помогают определять стиль, скрывать или открывать элементы контента.

Grids and Breakpoints

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

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

Работа с контентом

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

Выбор фреймворка

Выбор фреймворка в адаптивном веб-дизайне играет важную роль в последующем успехе или возможном провале проекта. В руководстве внимательно рассматриваются все за и против одного из самых популярных фреймворков в этой области – Bootstrap.

Кроме этого, в руководстве рассматривается Zurb Foundation – фреймворк с открытым исходным кодом, эволюционировавший из Bootstrap. Zurb Foundation имеет много функций, полезных для команд с опытными front-end разработчиками, особенно для тех, кто использует Sass.

Advanced Layout Features

Кроме того, в руководстве рассматриваются темы, полезные опытным разработчикам и дизайнерам, например:

• Fluid containers,
• Nested rows,
• Offsets,
• Push/Pull.

Без сильного углубления в каждую отдельную тему руководство дает детальное введение в самые важные темы, которые необходимо знать, занимаясь адаптивным веб-дизайном.

Скачать руководство вы можете на сайте Telerik (eng).