Mobile First Theming with Omega Base Theme

Building Sites from Mobile to Desktop using Drupal 7 and the Omega Base Theme. Presentation given at the monthly Sacramento Drupal Users Group. Watch the presentation at http://torytrone.com/blog/mobile-first-theming-omega

Transcript

1. Mobile First Theming with Omega Building Sites from Mobile to Desktop
2. BEFORE WE DIVE IN
3. BEFORE WE DIVE IN • Mobile First • Some PITFALLS (WARNING: There Be Dragons!) • Responsive vs Adaptive Design
4. Mobile First
5. Desktop Second? Mobile First
7. MOBILE FIRST IS • NOT graceful degradation! • Progressive Enhancement • Works for all Devices! • Future Proof!
8. “ Losing 80% of your screen space forces you to focus. Mobile First - Luke Wroblewski www.lukew.com/ff/entry.asp?933
9. Mobile First Tenants • Cut out the Clutter • What’s the Most Important Elements? • Work for all Devices • Progressive Enhancement
10. Trust me Guys, Mobile is Big lessframework.com
11. “ [P]redicting that within the next five years “more users will connect to the Internet over mobile devices than desktop PCs.” Mary Meeker of Morgan Stanley http://gigaom.com/2010/04/12/mary-meeker-mobile- internet-will-soon-overtake-fixed-internet/ By Mathew Ingram
12. There be Dragons! WARNING
13. There be Dragons! WARNING Competing STANDARDS
14. There be Dragons! WARNING Competing STANDARDS Responsive Images
15. There be Dragons! WARNING Competing STANDARDS Responsive Images Advertising
16. There be Dragons! WARNING Competing STANDARDS Responsive Images Advertising Browser Support (Not Just IE anymore)
17. RESPONSIVE ADAPTIVE
19. ADAPTIVE
20. ADAPTIVE DESIGN http://www.alistapart.com/d/responsive-web-design/ex/ex-site-flexible.html • Fluid Grid • Flexible Images • Non-Fixed Layouts • Works Well with > 800x600 • Don’t be Pixel Perfect!
21. RESPONSIVE RESPONSIVE RESPONSIVE RESPONSIVE RESPONSIVE
22. RESPONSIVE DESIGN www.alistapart.com/d/responsive-web-design/ex/ex-site-linearize.html • Media Queries • Responsive Images • Multiple Layouts • Works well with Small Devices • Progressive Enhancement!
23. Media Queries screen and (max-device-width: 480px)
24. <link rel="stylesheet" type="text/css" media="screen" href="core.css" /> <link rel="stylesheet" type="text/css" media="print" href="print.css" />
25. <link rel="stylesheet" type="text/css" media="screen" href="core.css" /> <link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href="global.css" /> <link rel="stylesheet" type="text/css" media="print" href="print.css" />
26. 320px 480px 768px 992px 1200px iPhone Portrait iPhone Landscape iPad Portrait Small Laptop (minus browser chrome) Large Desktop
27. http://www.palantir.net/ http://mediaqueri.es
28. <Link> Tag: http://www.alistapart.com/articles/responsive-web-design/ <link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href="global.css" />
29. @media screen and (max-device-width: 480px) { .column { float: none; } } CSS @media Rule: http://www.alistapart.com/articles/responsive-web-design/
30. CSS @import Directive: @import url("shetland.css") screen and (max-device-width: 480px); http://www.alistapart.com/articles/responsive-web-design/
31. MOBILE DEVICE ZOOMING iPhone (and others) pretends to be a desktop browser by setting the viewport to 980px. <meta name="viewport" content="width=divice-width, target-desityDpi=160dpi, initial-scale=1"> <meta name="MobileOptimized" content="width"> <meta name="HandheldFriendly" content="true"> IE6-8 ignores all Media queries.
32. http://drupal.org/project/omega
33. HTML5 Performance enhancements HTML5 and XHTML Starterkits
34. CORE CSS OPTIONS Disable Core Sheets Enable Your Own
35. 960 GRID Con gurable Regions/Zones Set Placement and Resize
36. http://pdelsignore.posterous.com/css-guide-the-omega- base-theme-in-drupal Omega uses Media Queries that are determined by Screen Size, to decide what CSS les to include.
37. DELTA Multiple Theme Settings Contextual Delta Blocks http://drupal.org/project/delta
38. CONTEXT Apply Delta’s Region and Block Control http://drupal.org/project/context #
39. OMEGA TOOLS Drush Integration Subtheme Wizard http://drupal.org/project/omega_tools
40. Live Demo
41. Additionally http://www.lullabot.com/articles/responsive-adaptive-web-design http://www.alistapart.com/articles/responsive-web-design/ http://www.abookapart.com/products/responsive-web-design http://simplebits.com/notebook/2011/08/19/adapted/ http://easy-readers.net/books/adaptive-web-design/
42. Thank you Tory Trone @travelertt http://forr.st/-travelertt http://drupal.org/user/1089344