build a responsive website with drupal

Download Build a responsive website with drupal

Post on 15-Jan-2015




1 download

Embed Size (px)


Today'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

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 3. Website for Mobile - PastMOBILE DETECT & REDIRECT 4. Website for Mobile - Present & 5. Flexible GridsUse percentages: allow grow & shrink of webpages Target / Context = results (5grids) / (8grids) = 62.5% OR (600px) / (960px) = 62.5% 6. Flexible Grids 7. Flexible Images - sizes 8. Flexible 9. Flexible Images - modulesUse max-width to contain images within thegridDrupal modules that support flexible imagesinclude responsive_image: fasterimages: css_emimage: 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 11. Apple - auto-adjust featureUse of view-port 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 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 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" 15. Drupal Themes omega: zen: adaptive: terrain: 16. Drupal 8 & Responsive Designs Issue queues tagged as mobile inDrupal 8 For info on Drupal 8 mobile initiative: 17. 18.