www.techday7.com                   Build a Responsive Website                           with Drupal                       ...
Presentation Path1.   What are Responsive websites?2.   Websites for mobile past, present &     future3.   Flexible Grids4...
Website for Mobile - PastMOBILE                   DESKTOPm.site.com               www.site.com             DETECT &       ...
Website for Mobile - Present &            Future                           www.techday7.com                      www.unimi...
Flexible GridsUse percentages: allow grow & shrink of web pages       Target / Context =       results       (5grids) / (8...
Flexible Grids                      www.techday7.com                 www.unimity.com
Flexible Images                   www.techday7.com              www.unimity.com
Flexible Images                   www.techday7.com              www.unimity.com
Flexible ImagesUse max-width to contain images within the grid Drupal modules that support flexible images include• respon...
CSS3 Media QueriesNot only allows you to target certain devices classes, but can actuallyinspect the physical characterist...
Apple - auto-adjust featureUse of view-port metatags<meta name="viewport" content="width=device-width; initial-scale=1.0">...
Mobile first appraochEnsure the site works on all devices,devices that do not support Mediaqueries: take a MOBILE FIRSTAPP...
Break Points1200px : Larger screens1024px: Smaller desktops & Larger tablets Landscape768px: Portrait for Larger Tablets, ...
Responsive vs Adaptive design "Adaptive web design" refers more to thesecondary and less fluid approach ofadapting existin...
Drupal Themes•   omega: http://drupal.org/project/omega•   zen: http://drupal.org/project/zen•   adaptive: http://drupal.o...
Drupal 8 & Responsive Designs•   Issue queues tagged as mobile in    Drupal 8•   For info on Drupal 8 mobile    initiative...
www.techday7.comwww.unimity.com
www.techday7.comwww.unimity.com
Upcoming SlideShare
Loading in...5
×

Build a responsive website with drupal

2,997

Published on

Drupal Event - Techday7 Presentation on Apr-21-2012 by Shyamala.

Published in: Technology, Business
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,997
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
35
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Build a responsive website with drupal

  1. 1. www.techday7.com Build a Responsive Website with Drupal By Shyamala rajaram.shyamala@gmail.com www.unimity.com
  2. 2. Presentation Path1. What are Responsive websites?2. Websites for mobile past, present & future3. Flexible Grids4. Flexible images5. Css Media queries6. What is Mobile first methodology?7. Break Points8. Responsive vs Adaptive9. Drupal 8 & mobile initiative www.techday7.com www.unimity.com
  3. 3. Website for Mobile - PastMOBILE DESKTOPm.site.com www.site.com DETECT & REDIRECT Request www.techday7.com www.unimity.com
  4. 4. Website for Mobile - Present & Future www.techday7.com www.unimity.com
  5. 5. Flexible GridsUse percentages: allow grow & shrink of web pages Target / Context = results (5grids) / (8grids) = 62.5% OR (600px) / (960px) = 62.5% www.techday7.com www.unimity.com
  6. 6. Flexible Grids www.techday7.com www.unimity.com
  7. 7. Flexible Images www.techday7.com www.unimity.com
  8. 8. Flexible Images www.techday7.com www.unimity.com
  9. 9. Flexible ImagesUse max-width to contain images within the grid Drupal modules that support flexible images include• responsive_image: http://drupal.org/project/responsive_images• fasterimages: http://drupal.org/project/fasterimages• css_emimage: http://drupal.org/project/css_emimage www.techday7.com www.unimity.com
  10. 10. CSS3 Media QueriesNot only allows you to target certain devices classes, but can actuallyinspect the physical characteristics of device rendering the workNewmedia features, including max-width, device-width, orientation and color@media screen and (max-device-width: 480px){.classForiPhoneDispaly {font-size: 1.2em;} www.techday7.com www.unimity.com
  11. 11. Apple - auto-adjust featureUse of view-port metatags<meta name="viewport" content="width=device-width; initial-scale=1.0"> www.techday7.com www.unimity.com
  12. 12. Mobile first appraochEnsure the site works on all devices,devices that do not support Mediaqueries: take a MOBILE FIRSTAPPROACH!global.css -> mobilereponsive.css -> media queries www.techday7.com www.unimity.com
  13. 13. Break Points1200px : Larger screens1024px: Smaller desktops & Larger tablets Landscape768px: Portrait for Larger Tablets, Landscape forsmaller tablets600px: Portrait & Landscape for smaller layouts &Kindle480 px: Landscape mode for smart phones320 px: Portrait mode for smart phones www.techday7.com www.unimity.com
  14. 14. Responsive vs Adaptive design "Adaptive web design" refers more to thesecondary and less fluid approach ofadapting existing web designs, ordesigning for controlled adaptation asopposed to a truly fluid and flexible"Responsive" design. www.techday7.com www.unimity.com
  15. 15. Drupal Themes• omega: http://drupal.org/project/omega• zen: http://drupal.org/project/zen• adaptive: http://drupal.org/project/adaptivetheme• terrain: http://drupal.org/project/terrain www.techday7.com www.unimity.com
  16. 16. Drupal 8 & Responsive Designs• Issue queues tagged as mobile in Drupal 8• For info on Drupal 8 mobile initiative:http://groups.drupal.org/node/207248 www.techday7.com www.unimity.com
  17. 17. www.techday7.comwww.unimity.com
  18. 18. www.techday7.comwww.unimity.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×