We launched the new dtek.net on Drupal 7 last year, and we knew we'd want a new look and feel for the site as our new business identity took shape. Last week we unveiled a brand-spanking new theme for dtek.net!
I'll leave the business identity and branding discussion to other posts. Here I'm excited to geek out about our new approach to Drupal theming. And at the start I want to give a nod to a similar post from Mediacurrent, which we enjoyed reading as we went along.
Mobile First! Responsive!
I joke that I made it full circle with website layout strategy. Back in the day, all websites were "responsive" -- they used a fluid layout so that they'd expand to fill the browser, however wide it was. Then, as site designers and editors asserted more control, fixed-width designs rose in prominence and became standard practice (and I still argued that fluid-width sites were superior because they prioritized the preferences of site users over the control of site creators). Now, with the proliferation of smartphones, tablets, and all sorts of new devices, "responsive design" is the new mantra: creating designs that adapt on-the-fly based on the capabilities of the user-agent.
And with the obvious growth trends in mobile web traffic, "mobile first" is the other half of the new mantra: designing a clean and elegant experience for mobile devices first, then adding layers of additional experience and functionality as the user-agent is capable of displaying them.
The new dtek.net theme is based on these two strategies -- read on to see how we did it...
Omega Subtheme
There are now many Drupal base themes that implement these strategies. Based on our experience with client projects, discussions with other developers, and recent presentations (including one at the Pacific Northwest Drupal Summit in Portland last fall), we went with the Omega theme framework.
Omega does all the hard work of providing an easily-configurable 960 grid implementation along with the media queries that make responsive design work, as well as some responsive-Drupal preprocessing. By default it provides a mobile layout, a narrow (tablet) layout, a normal (desktop) layout, and a wide (wide desktop monitor) layout. We're not crazy about all of the GUI-based configuration, but it's easy to live with since it's all exportable into code that we can track and deploy safely in our VCS. Over all, Omega has been a dream, so here's a big shout out to himerus, fubhy, and all of the Omega developers.
For dtek.net, we focused on the mobile and normal (desktop) layouts, and made some simple customizations for a narrow (tablet) layout. If you're viewing this in Firefox, Chrome, IE9, or another modern desktop browser, you can see the responsive design in action by sizing down your browser window.
Delta and Context
The Delta module adds a bunch of helpful features that play well with Omega. Most importantly, Delta allows you to make "snapshots" of your grid, alter them as needed, and expose those snapshots as reactions for the Context module.
In other words: create your default grid layout, then tweak it for the front page of the site, then tweak it for the blog section of the site, then apply these altered layouts in a snap with context conditions for the front page and blog paths. Export your delta snapshots and contexts as features into your VCS, and you've got an entire responsive theme that's a cinch to deploy. w00t!
Mobile Tools
One problem with responsive design is that, based on the user's device, there will be differences in how you present your site that you want to happen on the server side, before the content is ever served up. Most obviously, bandwidth is always a concern for mobile users, so there may well be content you want to display on the desktop browser that you don't want to send to a mobile device at all. The simple slideshow on the front page of dtek.net is a classic example of this: it's an important bit of messaging for our desktop users, but the big images would require more bandwidth than we want to ask of our mobile users, and would not fit mobile displays.
Enter the Mobile Tools module. True to its name, this module provides a number of helper tools for mobile site development. On dtek.net we're using it for one main purpose: to disable content on the server side that's inappropriate for mobile users. For example, we're using the general "mobile" and "desktop" Context conditions to provide layouts without and with the slideshow, respectively.
As we refine the site's mobile experience moving forward, Mobile Tools could also allow us to make other layout adjustments that might target mobile devices in particular. But we'll think hard about those changes as they contradict the responsive design mantra, and by nature hark back to the bad old days of user-agent sniffing...
The New dtek.net!
So there you have it! Omega + Delta + Mobile Tools + Context = a gorgeous, solid, and easily-deployable reponsive Drupal theme!
Responsive design plus mobile-first is the way forward for web design, and we're excited to implement it on our own site. We have many layout improvements planned for upcoming releases, and we now have the framework to make these iterations painless. We look forward to applying these theming techniques to all of our client work moving forward.
Take a minute to visit dtek.net on your favorite device while you're waiting for the bus after work!
