Adaptive, Responsive, Mobile First and Drupal Theming for the Future with HTML5, CSS3 and Omega

Presented by

As designers/themers we've always been pressed with dealing with screen sizes. I remember the days when we had to worry how many of our site visitors used a 800x600 screen resolution and when we could stop accommodating those users, much like we have with IE6 users today.

The problem is that in the past years, and more and more every day, the web is shifting back to smaller devices and resolutions in the mobile market. iPhones, iPads, Android phones & tablets, crackberries and more are quickly becoming the primary source by which our users consume the internet and media. So today, once again, there IS actually a reason to consider designs that will work well on an 800 pixel wide resolution. What you ask? An iPad in portrait viewing mode, and other large screen tablets. But it's not time to focus on a single resolution, but to focus on the concepts that will let us build for them ALL at ONCE.

This session will introduce you to Adaptive Design and Responsive Layouts and how you can implement designs and themes that will work on ANY device without the need for multiple versions of a site all with different themes and designs.

This session will be broken into two main portions:

  1. Introduction to Responsive Design/Layouts & Examples
    This portion will cover the ins and outs of responsive concepts and how to apply those to Drupal, the shortcomings in Drupal (and most frameworks) that make Responsive concepts still a somewhat "hacky" solution, and how we can better improve upon core to make this better for the mobile web in the future.
  2. Introduction to ONE technique to get you started using these concepts now...
    This portion will cover how Omega implements Responsive/Adaptive concepts, and where the future of this project is going, and how you can begin using the framework today, and contribute to it for the future all while creating powerful themes for any device your users may be using.
    Omega has moved to a mobile first approach on design and layout concepts, making it simple to quickly push out a mobile friendly version of ANY drupal site, with options now to use multiple grids based on the framework, but sized to your choosing. It is possible now to target certain device capabilities and sizes to render content in new ways using CSS3 @media queries.

Session Outline & Resources

Intended audience

This session, while labeled intermediate will be suitable for Beginner to Advanced Drupal themers/designers to gain knowledge on responsive/adaptive HTML5 designs and layouts targeted for multiple devices in a growing mobile market.

Questions answered by this session

What is Responsive design?

How can I build for mobile devices easily?

How can I use a single site/theme/framework for ALL devices?

How can I extend Omega with my own grid sizes/columns?

How can I conditionally use alternate layouts in the same theme?

Comments (14)

Well done! . . .


How to remove from view w/o SEO penalty

Check out Aaron Gustafson's book Adaptive Web Design for a great grid of just how to remove elements from view/flow without using display:none


Responsive jQuery slider

This is one I've used recently and worked with the developer to get it going with jQuery 1.3.2 and D6 -

The best combination for me has been using Semantic Views to get the classes I want, a single views template to wrap it with a container class and a very simple javascript function called by the theme. Not seamless but I've seen it work really well on IE7+, all other desktops, iPhone, iPad, etc.

Another one that's pretty easy and the developer has been super helpful is this one:

Thanks Jake - great presentation!


Great job Jake and Sebastian

Thanks for the presentation. I'm excited about the prospect of the omega_ui module?

Knock 'em dead..

I wish I could be there... Good luck on your presentation. I know it will be great. I look forward to seeing the video and catching up on all the surprises.

Surprises indeed!

I didn't attend the session, but noticed this tweet just now:

She said yes! You just missed a marriage proposal in the Axis 12 Room.


Best by far

Have now been Omega-ing (and Delta-ing, and Context-ing) with version 3.x from basically when it came out, and am still amazed at how it does everything I had to handcode for years. And the adaptive design / responsive lay-out is simply brilliant (it does more than I understand, so I am trying to catch up rather than using all it can do.. and I now also get this urge to buy a tablet to see if it works on there too :o)

I am hoping to go to this session, if only to shout Hooray! at inopportune moments.

Keep up the more than good work!

Are you going to cover the

Are you going to cover the Delta module aswell?

of course!

There will definitely be a short bit (5 min) on Delta and how it will/can interact with advanced layouts.

If this sessions doesn't make

If this sessions doesn't make the cut, I will definitely consider picketing in front of the entrance and maybe even go on a hunger-strike, until my demands are met!

Hahah, I would probably join

Hahah, I would probably join you even though my hunger strike might not even be optional because London is sooooo expensive for a poor student ;-)

If I were going to DrupalCon,

If I were going to DrupalCon, I'd definitely be attending this session! Jake's put a lot of work into Omega and it would be fantastic to learn how to use his theme for adaptive layouts.

I can't wait to see Jake's

I can't wait to see Jake's presentation and to finally meet him in person. This surely is a great opportunity for us to stick our heads together (once more ...) and ponder about our concept for Omega and Delta to make it even better!

Save me a seat

Oh man... I really hope I can make it for this. All the new work that you've been doing with Omega in the last few months... It's like a whole new theme. No... not a theme... It's evolved into something more than that. There's so much stuff going on with it, that it's really a framework.

Anyway, I can't wait to see a first-hand demo. What you've been doing is awesome, mind-boggling, and I want to learn more about it.

I'm not certain yet that I can get to London, but I'm gonna try. If not, I'll be first in line to see the video of your session. (they are doing videos, right?)

( I'm already jonesing for some of Londons great Indian curries, and copious ales in a London pub)

Platinum Sponsors