Your SlideShare is downloading. ×
Build a responsive website with drupal
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Build a responsive website with drupal

2,970
views

Published on

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

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,970
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
34
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. www.techday7.com Build a Responsive Website with Drupal By Shyamala rajaram.shyamala@gmail.com www.unimity.com
  • 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. Website for Mobile - PastMOBILE DESKTOPm.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 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. 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 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. 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. 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. 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. 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. 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. 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
  • 17. www.techday7.comwww.unimity.com
  • 18. www.techday7.comwww.unimity.com