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

Использование основных строительных блоков адаптивного веб-дизайна, выбор фреймворка и многое другое в руководстве по созданию адаптивного дизайна «Must-Know Techniques for Building HTML5 Apps for Any Screen Size». Фото: Pixabay. (СС0)
Использование основных строительных блоков адаптивного веб-дизайна, выбор фреймворка и многое другое в руководстве по созданию адаптивного дизайна «Must-Know Techniques for Building HTML5 Apps for Any Screen Size». Фото: Pixabay. (СС0)

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

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

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

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

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

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

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

Media Queries

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

Медиа-запросы. Фото: code.tutsplus.com
Медиа-запро­сы. Фото: code.tutsplus.com

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

Grids and Breakpoints

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

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

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

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

В адаптивном дизайне размер контента определяется размером экрана устройства. Фото: code.tutsplus.com
В адап­тив­ном дизайне раз­мер кон­тен­та опре­де­ля­ет­ся раз­ме­ром экра­на устрой­ства. Фото: code.tutsplus.com

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

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

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

Advanced Layout Features

Руководство содержит полезную информацию для опытных разработчиков и дизайнеров. Фото: code.tutsplus.com
Руко­вод­ство содер­жит полез­ную инфор­ма­цию для опыт­ных раз­ра­бот­чи­ков и дизай­не­ров. Фото: code.tutsplus.com

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

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

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

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