Your SlideShare is downloading. ×
0
Build a Responsive Website        with Drupal          By Shyamala  rajaram.shyamala@gmail.com                          ww...
Presentation PathWhat are Responsive websites?  ● Websites for mobile past, present & future  ● Flexible Grids  ● Flexible...
Website for Mobile - PastMOBILE                   DESKTOPm.site.com               www.site.com             DETECT &       ...
Website for Mobile - Present &            Future                      www.unimity.com
Flexible GridsUse percentages: allow grow & shrink of webpages                  Target / Context = results       (5grids) ...
Flexible Grids                 www.unimity.com
Flexible Images - sizes                   www.unimity.com
Flexible Images              www.unimity.com
Flexible Images - modulesUse max-width to contain images within thegridDrupal modules that support flexible imagesinclude ...
CSS3 Media QueriesNot only allows you to target certain devices classes,but can actually inspect the physical characterist...
Apple - auto-adjust featureUse of view-port metatags                             www.unimity.com
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 f...
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.unimity.com
www.unimity.com
Upcoming SlideShare
Loading in...5
×

Build a responsive website with drupal

4,295

Published on

Today's approach to website development has moved to responsive designs. Doing the same is fun with Drupal's Omega theme! Get started!

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

No Downloads
Views
Total Views
4,295
On Slideshare
0
From Embeds
0
Number of Embeds
30
Actions
Shares
0
Downloads
33
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Transcript of "Build a responsive website with drupal"

  1. 1. Build a Responsive Website with Drupal By Shyamala rajaram.shyamala@gmail.com www.unimity.com
  2. 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 initiative  www.unimity.com
  3. 3. Website for Mobile - PastMOBILE DESKTOPm.site.com www.site.com DETECT & REDIRECT Request www.unimity.com
  4. 4. Website for Mobile - Present & Future www.unimity.com
  5. 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. 6. Flexible Grids www.unimity.com
  7. 7. Flexible Images - sizes www.unimity.com
  8. 8. Flexible Images www.unimity.com
  9. 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_emimage   www.unimity.com
  10. 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. 11. Apple - auto-adjust featureUse of view-port metatags  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.unimity.com
  13. 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 phones 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.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.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.unimity.com
  17. 17. www.unimity.com
  18. 18. www.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.

×