The Path to Mobile Drupal: Session Recap from DrupalCon London

| Live Blog Posts

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

Mobile, the new Drupal way

Responsive Web Design

A completely flexible layout – no matter how small. This link from AListApart is a good introduction.

  1. Flexible grids
  2. Flexible images
  3. 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?

  1. 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.
  2. 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


About the author

Rod holds two masters degrees and has been training people how to do "things" for over 25 years. Originally from Australia, he grew up in Canada and now resides just outside Cincinnati, Ohio.