build a responsive website with drupal
DESCRIPTION
Drupal Event - Techday7 Presentation on Apr-21-2012 by Shyamala.TRANSCRIPT
w w w . u n i m i t y . c o m
Build a Responsive Website with Drupal
www.techday7.com
w w w . u n i m i t y . c o m
Presentation Path1. What are Responsive websites?2. Websites for mobile past, present &
future3. Flexible Grids 4. Flexible images5. Css Media queries6. What is Mobile first methodology?7. Break Points8. Responsive vs Adaptive9. Drupal 8 & mobile initiative
www.techday7.com
w w w . u n i m i t y . c o m
Website for Mobile - Past
MOBILE
m.site.com
DESKTOP
www.site.com
DETECT & REDIRECT
Requestwww.techday7.com
w w w . u n i m i t y . c o m
Website for Mobile - Present & Future
www.techday7.com
w w w . u n i m i t y . c o m
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
w w w . u n i m i t y . c o m
Flexible Grids
www.techday7.com
w w w . u n i m i t y . c o m
Flexible Images
www.techday7.com
w w w . u n i m i t y . c o m
Flexible Images
www.techday7.com
w w w . u n i m i t y . c o m
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
w w w . u n i m i t y . c o m
CSS3 Media QueriesNot 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
w w w . u n i m i t y . c o m
Apple - auto-adjust feature
Use of view-port metatags
<meta name="viewport" content="width=device-width; initial-scale=1.0">
www.techday7.com
w w w . u n i m i t y . c o m
Mobile first appraochEnsure the site works on all devices, devices that do not support Media queries: take a MOBILE FIRST APPROACH!
global.css -> mobilereponsive.css -> media queries
www.techday7.com
w w w . u n i m i t y . c o m
Break Points1200px : Larger screens1024px: Smaller desktops & Larger tablets Landscape768px: Portrait for Larger Tablets, Landscape for smaller tablets600px: Portrait & Landscape for smaller layouts & Kindle480 px: Landscape mode for smart phones320 px: Portrait mode for smart phones
www.techday7.com
w w w . u n i m i t y . c o m
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
w w w . u n i m i t y . c o m
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
w w w . u n i m i t y . c o m
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
w w w . u n i m i t y . c o m
www.techday7.com
w w w . u n i m i t y . c o m
www.techday7.com