Responsive Web Design for Drupal

14 downloads 143 Views 2MB Size Report
for Drupal www.responsivewebdesignguild.com. @emmajanedotnet ... Crash course on base themes in Drupal. ... 600px / 80px = 7 columns with extra breathing ...
Responsive Web Design for Drupal www.responsivewebdesignguild.com

@emmajanedotnet [email protected]

I am IAM

Sorry A boot eh?

Drupal drupal.org/user/1773

Photo: morten.dk Legs: walkah

Author / Trainer

http://www.designtotheme.com/workshops http://www.designtotheme.com/ebooks



Agenda ●

Whirlwind tour of responsive web design.



Crash course on base themes in Drupal.



Applying responsive principles to Drupal sites.



Case study #1: responsive retrofit



Case study #2: using Fusion



Awesome give-away

Introduction In the beginning: ● Flexible Layouts ● Media queries ● Resizeable Images

Flexible Layouts

Screen Sizes 320px / 80px per column = 4 columns ● 480px / 80px = 6 columns ● 600px / 80px = 7 columns with extra breathing room ● 768px / 80px = 9 columns with extra breathing room ● 960px / 80px = 12 columns ●

Media Queries in HTML