build a responsive website with drupal
Post on 15-Jan-2015
Embed Size (px)
DESCRIPTIONToday's approach to website development has moved to responsive designs. Doing the same is fun with Drupal's Omega theme! Get started!
- 1. Build a Responsive Websitewith DrupalBy Shyamalarajaram.email@example.com
2. Presentation PathWhat are Responsive websites? Websites for mobile past, present & future Flexible Grids Flexible images Css Media queries What is Mobile first methodology? Break Points Responsive vs Adaptive Drupal 8 & mobile initiativewww.unimity.com 3. Website for Mobile - PastMOBILE DESKTOPm.site.com www.site.com DETECT & REDIRECT Requestwww.unimity.com 4. Website for Mobile - Present &Futurewww.unimity.com 5. Flexible GridsUse percentages: allow grow & shrink of webpages Target / Context = results (5grids) / (8grids) = 62.5% OR (600px) / (960px) = 62.5% www.unimity.com 6. Flexible Grids www.unimity.com 7. Flexible Images - sizes www.unimity.com 8. Flexible Imageswww.unimity.com 9. Flexible Images - modulesUse max-width to contain images within thegridDrupal modules that support flexible imagesinclude responsive_image: http://drupal.org/project/responsive_images fasterimages: http://drupal.org/project/fasterimages css_emimage:http://drupal.org/project/css_emimagewww.unimity.com 10. CSS3 Media QueriesNot only allows you to target certain devices classes,but can actually inspect the physical characteristics ofdevice rendering the workNew media features, including max-width, device-width,orientation and color www.unimity.com 11. Apple - auto-adjust featureUse of view-port metatagswww.unimity.com 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.unimity.com 13. Break Points1200px : Larger screens1024px : Smaller desktops & Larger tablets Landscape768px: Portrait for Larger Tablets, Landscape for smaller tablets600px: Portrait & Landscape for smaller layouts & Kindle480px: Landscape mode for smart phones320px: Portrait mode for smart phoneswww.unimity.com 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.unimity.com 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.unimity.com 16. Drupal 8 & Responsive Designs Issue queues tagged as mobile inDrupal 8 For info on Drupal 8 mobile initiative:http://groups.drupal.org/node/207248 www.unimity.com 17. www.unimity.com 18. www.unimity.com