The Path to Mobile Drupal: Session Recap from DrupalCon London
This is a live blog of the session “The Path to a Mobile Drupal: Techniques, Tools and Failure” by John Albin at DrupalCon London.
“The Wile E. Coyote Method of Mobile Development”. Passionate, but it keeps blowing up in his face. And that’s pretty much how the web community is experiencing development for mobile devices.
Mobile, the traditional Drupal way
- Domain Access – Drupal.org/project/domain
- WURFL – Drupal.org/project/wurfl
- Mobile Tools – Drupal.org/project/mobile_tools
- theme key – Drupal.org/project/themekey
- mobile key – Drupal.org/project/mobilekey
Mobile, the new Drupal way
Responsive Web Design
A completely flexible layout – no matter how small. This link from AListApart is a good introduction.
- Flexible grids
- Flexible images
- CSS3 Media Queries
Adaptive Design – developed in response to responsive Design
Uses CSS media queries… but it uses fixed layout sizes. – the exact width for the mobile devices we have today.
.content {width: 62.5%; } // 5 grids
.sidebar { width: 37.5%; } // 3 grids
Target / context = result —> (5 grids) / (8 grids) = 62.5%
Flexible Images
img,embed, iframe, object, video {max-width: 100%; }
When an image is smaller than its container, it will present at 100% of the image size
When an image is bigger than the container – they’ll be scaled down to fit inside the container.
CSS3 Media Queries
CSS3 media queries we target device capabilities [type] and [(query]) – all and (max-width: 768px;)… if the viewport is 768px or less – then this query will apply. if its bigger – it won’t apply the css at all.
Media types and queries should be inside your css file.
ie: @media all and (min-width: 480px) { … }
(make sure you turn off CSS aggregator…)
BreakPoints
Breakpoints are where the layout changes based on the browser changing.
Device breakpoint examples:
- 320px = iphone
- 480px = iphone in landscape
- 768px = ipad in landscape
- 992px = small laptop (minus browser chrome)
- 1200px = large desktop
Untether Your Designs!!
Using meta tags: iPhone and other mobile browsers pretend to be a desktop browser at 980px.
What about Browsers that don’t support CSS3 Media Queries?
- IE (of course!) 6-8. These ignore all the rules. There are a couple of solutions including Respond.js – notes on usage at the website.
- Limited device browsers – old phones etc. Mobile First! is the solution here. Make the default the lowest version – probably a single column – design for mobile devices first!
When we design for mobile first – content takes first place. (which is a good thing) … losing 80% of your screenspace forces you to focus on content. you need to make sure what stays on the screen is the most important set of features for your customers and your business. (Luke Wroblewski)
What Mobile Devices Should We Support?
There are SO Many – the bottom line – pick the top few… make sure they work and then degrade to the lowest common denominator.
The more we fail, the sooner we succeed. Heinz 57 is “57″ because the first 56 failed. In the community, we try different things, we work together, build on top of things… we’re listening and learning… failing along the way, but working towards a great future with Drupal.
What’s going on right now with Drupal
- Responsive Images: Drupal.org/project/responsive_images
- Inline Images with Data URls – Drupal.org/project/fasterimages
- Data URls in CSS – Drupal.org/project/css_emimage
- Drupal Themes: Zen 7.x-5.x – Responsive Panels Layouts, respond.js, SASS (CSS Preprocessing), HTML5