Build a responsive website with drupal
Download as PPTX, PDF3 likes2,639 views
The document discusses building responsive websites with Drupal. It covers responsive design concepts like flexible grids, images, and CSS media queries. It explains the mobile-first methodology and different breakpoints used in responsive design. The document also discusses Drupal themes and modules that support responsive design, as well as Drupal 8's mobile initiative.
Build a responsive website with drupal
- 1. www.techday7.com Build a Responsive Website with Drupal By Shyamala rajaram.shyamala@gmail.com www.unimity.com
- 2. Presentation Path 1. What are Responsive websites? 2. Websites for mobile past, present & future 3. Flexible Grids 4. Flexible images 5. Css Media queries 6. What is Mobile first methodology? 7. Break Points 8. Responsive vs Adaptive 9. Drupal 8 & mobile initiative www.techday7.com www.unimity.com
- 3. Website for Mobile - Past MOBILE DESKTOP m.site.com www.site.com DETECT & REDIRECT Request www.techday7.com www.unimity.com
- 4. Website for Mobile - Present & Future www.techday7.com www.unimity.com
- 5. Flexible Grids Use 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. Flexible Grids www.techday7.com www.unimity.com
- 7. Flexible Images www.techday7.com www.unimity.com
- 8. Flexible Images www.techday7.com www.unimity.com
- 9. Flexible Images Use 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. CSS3 Media Queries Not only allows you to target certain devices classes, but can actually inspect the physical characteristics of device rendering the workNew media 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. Apple - auto-adjust feature Use of view-port metatags <meta name="viewport" content="width=device-width; initial-scale=1.0"> www.techday7.com www.unimity.com
- 12. Mobile first appraoch Ensure the site works on all devices, devices that do not support Media queries: take a MOBILE FIRST APPROACH! global.css -> mobile reponsive.css -> media queries www.techday7.com www.unimity.com
- 13. Break Points 1200px : Larger screens 1024px: Smaller desktops & Larger tablets Landscape 768px: Portrait for Larger Tablets, Landscape for smaller tablets 600px: Portrait & Landscape for smaller layouts & Kindle 480 px: Landscape mode for smart phones 320 px: Portrait mode for smart phones www.techday7.com www.unimity.com
- 14. Responsive vs Adaptive design "Adaptive web design" refers more to the secondary and less fluid approach of adapting existing web designs, or designing for controlled adaptation as opposed to a truly fluid and flexible "Responsive" design. www.techday7.com 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.techday7.com www.unimity.com
- 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