Arctica: The New Base Theme for Responsive Web site/Web app Design

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.

Community vote result: TouchPro = Free Premium Drupal Theme

It was very exciting for me to watch you all vote on the poll for the first free premium theme by sooperthemes.com The race was between HelloFolio and Touchpro and these 2 themes overtook eachother many times in the voting, until finally I had to close the poll on march 30th when TouchPro won with a difference of just one vote! This means that TouchPro will be released on drupal.org as a contrib theme, and the other 2 themes will go on sale on sooperthemes.com. Follow development of TouchPro here: http://drupal.org/project/touchpro

UC Affiliate v2 Setup Guide - Creating the SooperFriends premium drupal themes affiliate program

I've just finished setting up my drupal-powered drupal themes affiliate program and I figured I should share how I did it, since I think my set-up is better than what's done in the original documentation, for some people. This set-up guide also highlights some problems in the module.

1. Download modules

As the affiliate modules' scope is limited to the actual affiliate center, we need some extra modules for signing up new members and having existing users apply for the program:

You have to download and enable the above modules.

2. Create the affiliate info/sign-up page

You need to create a webpage to advertise the affiliate program and point people to the sign-up pages. As an example, take a look at my Premium Drupal theme affiliate program called SooperFriends. For now just create a simple page stating the terms of your program and the payouts your affiliates will receive. Creating the sign-up buttons is covered in the next steps.

3. Adding affiliate related fields to the user profile

Tundra: A Free Framework Theme for Drupal 6 & 7, by SooperThemes

Free Drupal Theme framework

Another Framework Theme?

Yes, there's already loads of them around, but Tundra is very different from all of them and it offers unique features and a different approach to code organization. The theme itself resembles a theme framework as it has a built-in feature management and css-writing system.

Part of the Tundra development process was also creating a new jQuery dropdown-menu plugin from scratch. The included jQuery SooperFish plugin enriches Drupal with multi-column animiated menus that are fully configurable in the theme settings form.

Why does it matter?

Tundra is the first theme that offers advanced jQuery features with the ease of a point-and-click interface. All configuration is pulled into the theme settings form to form an interactive theme configurator. Some of the features are:

  • Sooper Easing: This exposes advanced animation easing to all other features
  • Sooper LivePreview: Makes changes to theme settings form for most features visible immediately, to ease the configuration process. See configurator demo.
  • SooperFlex Grid System: Full grid control in both flexible and fixed width layouts without breaking in internet explorer 6. Skinr module is used to expose float (left/right) control and width control. Supports rational proportions and irrational proportions based on golden ratio (phi).
  • Sooper DropdownKit: For usage and configuration of the jQuery SooperFish plugin.
  • Sooper SlideshowKit: A jQuery cycle based solutiuon for creating configurable slideshows.
  • : A jQuery nivo based solutiuon for creating configurable image or photo slideshows.
  • Sooper LayoutKit: A theme-settings based system to configure fixed or fluid theme width, sidebar widths and mi-/max width.
  • Sooper FontKit: A cufon based solution for using custom fonts and special effects (gradients/shadows) in your theme. 25+ fonts included in feature.
  • Sooper BackgroundImageKit: A solution for settings a background image in the theme settings. Easy to extend with your own images.
  • Sooper Linkicons: Automatically adds mime type and email icons to links. Includes 2 free icons sets.

Tundra is the theme that powers all of the premium drupal themes on SooperThemes.com. We made all the premium features GPL, and Tundra is our way of giving back to the community: it's a vessel with all of the code that was developed over the years.

Download Tundra on the Drupal.org project page

Here is some additional info, it's a screenshot of the product page on sooperthemes.com

Free Drupal Theme framework

Project Politika for Ubercart pt. 6: Discuss Modules and Features

After voting on the design Style and purpose of the Politika free Drupal theme it's time to discuss modules and features. What modules do you use on your Ubercart sites that benefit from custom theming and what modules do you think have the future. Post a comment if you got experience here! You can also suggest modules that do not relate directly to ubercart but keep in mind that we decided do build an ecommerce theme so the module should be useful for a webshop. For inspiration you can check out the cool module styling (book module, forms, skinr) on Synopsis and the other premium Drupal themes by SooperThemes.

Schedule for june

  1. June 7th (mon): Present and discuss project
  2. June 9th (wed): Discuss Theme purpose (type of website)
  3. June 14th (mon): Poll for theme purpose
  4. June 16th (wed): Discuss design style
  5. July 8th (thu): Poll for design style
  6. Aug 17th (tue): Discuss modules and features
  7. Aug 21st (sat): Questionnaire about modules and features
  8. Aug 25th (wed): Summary of poll and questionnaire results
This part is where your comments really count because I'm not sure what contrib modules and plugins are popular on webshops, other than Ubercart, wich is also what powers the theme sales on sooperthemes.com. Share your experience to help create an awesome GPL theme! p.s. I also know there are alternatives to Ubercart but since ubercart is the most popular let's not get into that discussion.

Pages

Subscribe to RSS - planet