Making Responsive Design Easy for You

Have you been hearing a lot of talk about responsive design and media queries, maybe even checked the http://mediaqueri.es/ website, but you’re unsure how to get started with this new technology? Then you’re not alone. Responsive design is a big change and while the surge of tablets and smartphones with broadband internet demands we make our websites work on small devices now, there is still a lot of figuring out to do.

Arctica takes the next step in facilitating responsive web design in Drupal. It works in the background, providing Drupal with a layout system via the Skinr module and its own CSS management system. But unlike other base themes it doesn’t stop there; The Arctica Configurator (aka theme settings form) provides an entirely new interface that reduces the complexity of responsive design by showing and telling what is happening in the background, when your website is elegantly adapting to and infinite number of screen sizes.

Also check the minisite: www.sooperthemes.com/arctica/

Arcitica Configurator screenshot (click for enlargement):

Other Responsive Themes

Before starting the 3-month code/test/code/test sprint it finally took, I thoroughly researched the currently available options, most notably adaptivetheme and omega. Here are some points that Arctica does different that I think are important:

1. Provides a usable and flexible interface to the layout system, giving you a birds eye view of what your design is doing on different devices.
2. Not making assumptions about how you want to implement responsive design. Media queries are not hardcoded in the theme, they exist in the configurator and you are encouraged to make your own. You are free to choose a mobile first design, a content first design or the less intimidating top-down design (desktop->mobile).
   Not every website needs the same approach, that’s why I also made the number of media queries flexible. Some websites might need as much as 7 media query contexts to work in all devices but many simple websites can easily do it with 2 or 3 media queries.
3. Fixed-width gutters. Many flexible layout systems use flexible width gutters. Being a designer myself I found this a big issue. Design is all about ratios and rythm, and white-space is a fundamental part of the design. I developed my own layout system (long before working on Arctica) that supports flexible width with fixed gutters. This avoids the problem of having your vertical gutters shrink and expand inifintely to fit the viewport while your horiztonal gutters do not respond at al, thus breaking the foundation of your design.
4. Performance: I’ve always been a into optimizing code and monitoring server performance. Arctica is probably not yet perfectly optimized but it has a very low performance impact considering the amount of “stuff” it does for you. I spent a whole day ab testing all the latest base themes and found that most base themes had an acceptable performance impact, adding a ~5% penalty compared to Stark. An exception was Omega which performed around 10% slower than Stark in both throughput and response time. Complex stand-alone themes such as Marinelli and Danland also incurred about a 10% performance penalty compared to Stark. Now remember that stark is a bare bones "theme" and while being fast it doesn't make your website responsive, or pretty.
5. I added some new features such as built in polyfills and mobile browser tweaks, CSS3PIE integration, Arctica Visual Bootstrap, providing design defaults for common Drupal elements and turning off core stylesheets. All of this is optional of course you can turn it all off. I’m also using SASS/Compass in all my new base/sub themes but I’m not assuming everyones else wants to know about SASS so I make everything compatible with hacking regular CSS.
6. What Arctica doesn’t / shouldn’t do is also something I thought about. Some things are better left for modules to do. For instance text strings are content, not theming, so I didn’t add a 100 theme options to change node links and comments links etc. You can use the stringoverrides module for that.

Arctica in the Wild

Allthough Arctica is brand new and just at the beginning of a long road of active development, there are some themes that demonstrate its features:

• The arctica minisite (very much a work in progress). You can download this minisite and play with it to see how the advanced skinr integration makes an Arctica site so easy to manage: http://drupal.org/project/starterkit_arti
• More info about this in another blog post: http://drupal.org/project/touchpro which uses the new http://drupal.org/project/tundra base theme extender
• Premium themes Deviant and HelloFolio

You can download Arcitca now

http://drupal.org/project/arctica

Testers Wanted

I would love to hear your opinion and ideas, feel free to comment or tweet @sooperthemes or @jurriaanroelofs with #arctica.

The easiest way to learn Arctica

The easiest way to try the themes is by installing the StarterKits (installation profiles) that install a demo site with demo content, including production-ready responsive design configurations. You can try the free arti theme but you'll have an even better resource if you buy the new Deviant premium theme or Hellofolio premium theme. Both come with a StarterKit. They come with responsive blocks, views and images. If you've been on the fence about buying premium themes, I've just now started a 50% discount promotion on SooperThemes.com to celebrate the introduction of the new theme. This is the first time in 2.5 years of business that the premium Drupal 7 themes are on sale.

Just posting it here as a heads up, the next generation of themes will not support IE6. Time to say goodbye to this legacy browser. _goodbye: ie6;

In the future IE6 will get a simplified version of the website, or maybe even a print stylesheet.

Yesterday I posted the beta2 version of the free Tundra framework theme. With lots of bugfixes I hope this means we can almost get to 1.0. See project page for downloads and update instructions:

http://drupal.org/project/tundra