Adaptive, Responsive, Mobile First and Drupal Theming for the Future
This is a live blog of the session “Adaptive, Responsive, Mobile First and Drupal Theming for the Future with HTML5, CSS3 and Omega” by Jake Strawn at DrupalCon London.
I’m hoping this session is the bookend to the mobile design theme that’s run through this DrupalCon. It is the future – there is no doubt. From the keynote this morning, to the previous session on mobile adaptive design, its obvious that this is the way we should be thinking in all our design efforts. This session is presented by @himerus) and its packed!
He asked how many used a mobile device 10 minutes before the session – at least 1/2 the hands went up.
Mobile is NOT JUST Android/iOS. A lot of people are still using low tech phones (feature phones) Around 32% of mobile devices were smart phones (January 2011) Supposed to be about 50/50 by the end of 2011
One way to figure out what device – user detection – NOT the way to do it.
Mobile First
- More often than not – its the last thing we think about.
- We SHOULD start with the lowest common denominator – the feature phone – first
Why?
- Mobile is exploding – 1 billion users by 2013
- Mobile internet adoption has outpaced desktop intent adoption by 8 times.
- Over 1/2 of current smart phone users spend more than 30 minutes / day using mobile applications.
- Mobile forces you to think through what you want to deliver to your client. (FOCUS)
- Mobile extends your capabilities
Responsive Design
What is it?
The practice of using fluid grids, flexible images and media queries to progressively enhance a web page. However, it might even be bigger than that. Its not necessarily about the approach – its the goal that’s important: the website delivered to different devices giving the user what they need.
Examples
- Mr. Simon Collision Colly.com
- Four Kitchens Fourkitchens.com
- In Drupal: the Omega theme – http://omega.developmentgeeks.com/
- Acquia.com
The Path to Responsive
- The JavaScript Method: adapt.js – uses window.on resize() to determine browser size and react with alternate grid sizing – http://adapt.960.gs
- CSS3 method – using media queries – works in all modern browsers except IE 6,7 and 8 (of course). iOS/Android and most newish smart phones work. Browsers that don’t understand CSS3 will just ignore it – hence the mobile first approach.
- Merging the 2 – respond.js – will emulate the CSS3 media queries in old browsers. (semi-reliable).
it boils down to your clients and how you deal with them. Mobile version is MORE important than pixel perfect design for every desktop browser.
Implementing them now in Drupal
In drupal 7, there is one theme – Omega 3.x – that does all this. It was launched on Tuesday (in devel for 2 years). Features include:
- Responsive grids – 1200, 960, 720, mobile
- Mobile first approach
- Advanced caching, less looping, clever CSS aggregation. (when css aggregation is turned on, all the CSS is compressed into one.)
- Every zone and region is configurable.
- Any zone can be placed in any region. You can set a region to be the Primary region, and adjust to regions around it, and set the visual ordering on page and ordering in source.
- The new elements present in the .info structure for Omega allows customizable css, javascript library and grids with simple setup. Using the new grids[] array in the .info file, you can declare your own grid structure based on 960.gs standards for your sub theme. Each zone can have equal heights regions
Sites using Omega
Where Drupal Falls Short
There are areas we need to work on for Drupal 8. The design initiative and web services and context core initiative is the place to do it.
Surprise!
He just asked is girlfriend to marry him!!!! so cool! @himerus and @bymiche
(she said yes)
Great session – really encourage you to get the session notes on this one.