Responsive Design: Drupal Business Summit (Erik von Stackelberg, Myplanet Digital)
Build a responsive website with drupal
-
Upload
techday7 -
Category
Technology
-
view
2.995 -
download
2
description
Transcript of Build a responsive website with drupal
![Page 1: Build a responsive website with drupal](https://reader033.fdocuments.us/reader033/viewer/2022060110/555a5240d8b42a47748b4a98/html5/thumbnails/1.jpg)
w w w . u n i m i t y . c o m
Build a Responsive Website with Drupal
www.techday7.com
![Page 2: Build a responsive website with drupal](https://reader033.fdocuments.us/reader033/viewer/2022060110/555a5240d8b42a47748b4a98/html5/thumbnails/2.jpg)
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
![Page 3: Build a responsive website with drupal](https://reader033.fdocuments.us/reader033/viewer/2022060110/555a5240d8b42a47748b4a98/html5/thumbnails/3.jpg)
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
![Page 4: Build a responsive website with drupal](https://reader033.fdocuments.us/reader033/viewer/2022060110/555a5240d8b42a47748b4a98/html5/thumbnails/4.jpg)
w w w . u n i m i t y . c o m
Website for Mobile - Present & Future
www.techday7.com
![Page 5: Build a responsive website with drupal](https://reader033.fdocuments.us/reader033/viewer/2022060110/555a5240d8b42a47748b4a98/html5/thumbnails/5.jpg)
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
![Page 6: Build a responsive website with drupal](https://reader033.fdocuments.us/reader033/viewer/2022060110/555a5240d8b42a47748b4a98/html5/thumbnails/6.jpg)
w w w . u n i m i t y . c o m
Flexible Grids
www.techday7.com
![Page 7: Build a responsive website with drupal](https://reader033.fdocuments.us/reader033/viewer/2022060110/555a5240d8b42a47748b4a98/html5/thumbnails/7.jpg)
w w w . u n i m i t y . c o m
Flexible Images
www.techday7.com
![Page 8: Build a responsive website with drupal](https://reader033.fdocuments.us/reader033/viewer/2022060110/555a5240d8b42a47748b4a98/html5/thumbnails/8.jpg)
w w w . u n i m i t y . c o m
Flexible Images
www.techday7.com
![Page 9: Build a responsive website with drupal](https://reader033.fdocuments.us/reader033/viewer/2022060110/555a5240d8b42a47748b4a98/html5/thumbnails/9.jpg)
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
![Page 10: Build a responsive website with drupal](https://reader033.fdocuments.us/reader033/viewer/2022060110/555a5240d8b42a47748b4a98/html5/thumbnails/10.jpg)
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
![Page 11: Build a responsive website with drupal](https://reader033.fdocuments.us/reader033/viewer/2022060110/555a5240d8b42a47748b4a98/html5/thumbnails/11.jpg)
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
![Page 12: Build a responsive website with drupal](https://reader033.fdocuments.us/reader033/viewer/2022060110/555a5240d8b42a47748b4a98/html5/thumbnails/12.jpg)
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
![Page 13: Build a responsive website with drupal](https://reader033.fdocuments.us/reader033/viewer/2022060110/555a5240d8b42a47748b4a98/html5/thumbnails/13.jpg)
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
![Page 14: Build a responsive website with drupal](https://reader033.fdocuments.us/reader033/viewer/2022060110/555a5240d8b42a47748b4a98/html5/thumbnails/14.jpg)
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
![Page 15: Build a responsive website with drupal](https://reader033.fdocuments.us/reader033/viewer/2022060110/555a5240d8b42a47748b4a98/html5/thumbnails/15.jpg)
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
![Page 16: Build a responsive website with drupal](https://reader033.fdocuments.us/reader033/viewer/2022060110/555a5240d8b42a47748b4a98/html5/thumbnails/16.jpg)
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
![Page 17: Build a responsive website with drupal](https://reader033.fdocuments.us/reader033/viewer/2022060110/555a5240d8b42a47748b4a98/html5/thumbnails/17.jpg)
w w w . u n i m i t y . c o m
www.techday7.com
![Page 18: Build a responsive website with drupal](https://reader033.fdocuments.us/reader033/viewer/2022060110/555a5240d8b42a47748b4a98/html5/thumbnails/18.jpg)
w w w . u n i m i t y . c o m
www.techday7.com