planet

You are here

planet

Author:JurriaanRoelofs

Datum:20-12-'11

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:

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.

Author:JurriaanRoelofs

Datum:4-4-'11

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!

Author:JurriaanRoelofs

Datum:21-3-'11

Community vote: Pick the first SooperThemes “free premium Drupal theme”

Update: The winning theme "TouchPro" is now released as free GPL theme and a available here: TouchPro free responsive html5 Drupal theme. The other 2 themes are released as premium themes on sooperthemes.com

Thinking back to the time when sooperthemes.com (back then alldrupalthemes.com) was a base for free Drupal I miss the spirit of free stuff on sooperthemes.com. There is already the Tundra theme but this is mainly a theme for developers and I want to give something back to the much larger community of Drupal users.

I’m currently working on 3 theme concepts, all were conceptualized and designed to be premium themes on sooperthemes.com but I’m letting you choose one to be fully developed and released as GPL Drupal theme in the Drupal.org contrib. repository.

That’s right: I’ll give you whatever theme gets the most votes and will thus release what could be a bestselling theme for free. I hope the costs of missed income will be offset by some goodwill from happy users to try a product from sooperthemes.com on their future projects. I will also give free support for this theme, via the issue queue. Whichever theme gets chosen it will be produced with full color module integration and all the features that are also in the existing premium drupal themes and a new feature will also be developed for these themes (Nivo image slider) and contributed back to the free Tundra theme.

You can vote on this poll up to and including the 30th of March. Click the blogpost and scroll down to the bottom to find the poll.

Theme 1: HelloFolio

HelloFolio is a portfolio site with a casual personality. Whether you are a designer, programmer or usability expert: HelloFolio puts the focus on your work and uses an AIDA marketing model to convert onlookers into clients. The hellofolio theme will feature a Nivo image slider, animated navigation menu (lavalamp for the yellow bar uptop), a sliding panel with social icons, special CSS classes to use the Lobster font as well as button styles and an animated hover panel on the thumbnails that display your project (below the Creativity heading).

Design screenshot - click for enlargement

Theme 2: TouchPro

TouchPro is a mobile optimized and touchscreen optimized magazine theme. Of course it will also look great on your desktop computer. This theme has a focus on usability and offers a clear display and navigation for your content. All clickable elements are large enough to be pressed by the fattest of fingers on the smallest of smartphones and of course the theme comes with sooper features such as a slideshow, animated dropdown menus, amazing typography and sooperb Drupal integration and color module integration.

Design screenshot - click for enlargement

Theme 3: Deviant

Deviant is a sharp looking business theme with strong personality. Using the color picker you can choose a personality, or vibe that matches the style of your industry. This sharp and edgy looking theme is in part possible thanks to the new open source Lato typeface with light and hairline font files. The theme is intended to inform visitors of products and/or services and push them into your business with a lean design strategy and a stong call-to-action button style. This theme features a slider that can slide any content all the way across the viewport, beyond the bounds of the layout container. Of course you can also choose any other jQuery cycle transition you want with optional custom easing.

Design screenshot - click for enlargement

Feedback

These designs are all in a final stage but they are not quite finished. They are each ready to be coded into a Drupal demo site but afterwards I will still do another round of design tweaks. When coding work is completed I will post the designs on conceptfeedback.com and you can all join in and influence the process of getting the theme ready for production sites.

Release Cycle

These themes are packed with features and Drupal integrations so they won’t be built overnight. Typically my premium themes take 6 weeks in total including 2 weeks for design. Since these themes are already designed they should take 4 weeks to be fully developed and tested (And fixed), if nothing goes wrong…

HelloFolio
43% (59 votes)
TouchPro
44% (60 votes)
Deviant
13% (18 votes)
Total votes: 137

Author:JurriaanRoelofs

Datum:1-12-'10

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.

Project Politika Free Drupal Theme pt. 5: Vote Now for Design Style!

Yes, the project is still running. I apologize for the 2 week delay on this project politika. This is due to the heatwave here in Holland and because of pressure from my thesis supervisors to get my research going. And also a little because we're going to the World Cup Final!

In the last Poll we voted to make an e-commerce theme. No following the design style discussion we will vote on the design style.

What you should know about the design styles:

  • Bright and Bold: More suitable for down-market marketing (competing on price).
  • Minimal/Clean: More suitable for up-market marketing (competing on quality).
  • Simple+Colorful: Something in between the previous 2 choices.

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. June 12th (mon): Discuss modules and features
  7. June 14th (wed): Questionnaire about modules and features
  8. June 21st (wed): Summary of poll and questionnaire results
Bright and Bold
41% (24 votes)
Minimal/Clean
38% (22 votes)
Simple+Colorful
21% (12 votes)
Total votes: 58

Project Politika Drupal Theme pt. 4: Discussing Design Style

In the recently completed Poll on the purpose of the Politika theme we have established that it will be an ecommerce theme!

This is exciting as well as challenging. E-commerce site really need a design that is focused on the content and focused on selling. Good Ubercart themes should also have some nice icons to skin the stock imagery.

I do not often build ecommerce sites but I do have experience in this and I also have a Msc in marketing (pending my thesis) so this project will be a nice combination of my web and uni educations.

Now it's time to discuss the style of this design. I want to build a theme that you all are dying to use on your next project so I would like to hear what kind of design styles are in demand in the community.

Luckily for us, a major webdesign blog has recently posted an overview of big ecommerce website designs where you can get inspiration: http://www.noupe.com/inspiration/showcase-of-big-online-stores.html

Tell me what designs you like! Post comments and I will create another poll so that you can vote on the design style

Since this is an ecommerce site there is also one very important dimension on which we have to choose a position, which is the up-market versus down-market dimension. If you sell luxury products you will want an up-market design like for example http://www.vogue.co.uk. If you sell cheap offers you will want to appear like you offer the best deals and approach a more down-market design style like for example this: http://www.mediamarkt.de/

If you have built a beautiful ecommerce site with Drupal in the past, feel free to post that too!

The discussion will run until June 21st which is next monday; unless the discussion clearly needs some more time, then it will be extended.

Also take a look at the latest Sooper Drupal Themes, Synopsis and Syan. These design styles could also work well for a store.

Schedule:

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. June 21th (mon): Poll for design style
  6. June 23th (wed): Discuss modules and features
  7. June 28th (mon): Questionnaire about modules and features
  8. June 30th (mon): Summary of poll and questionnaire results

Project Politika pt. 3, Poll: Voting for Drupal Theme Purpose

Politika is an effort to make an amazing looking and rich-featured theme for Drupal 7 and 6. For more info check the first project politika blog post!.

Voting time!

Last week we discussed possible theme purposes for the Politika GPL theme, now it's time so see which choice is the most popular. I will build a theme for whatever choice gets the most votes.
The poll will close june 16th so vote now!

Portal/News
13% (8 votes)
Photo Website
11% (7 votes)
Blog
3% (2 votes)
e-commerce
45% (29 votes)
Social Media/Social Networking
28% (18 votes)
Total votes: 64

Project Politika: Purpose of the Theme (website type)

Politika is an effort to make an amazing looking and rich-featured theme for Drupal 7 and 6. For more info check the first project politika blog post!.

As a first step to conceptualize this Drupal theme I would like some input about what types of websites you are building (yes you too) and what kinds of websites are difficult to visualize with the current offering of themes.

Here are some that I can think of:

  • Information intensive websites that require big grid-like layouts, i.e. portal websites and news websites
  • Photo websites, websites about photography and/or photographers, or portoflio websites for photographers or other artists
  • Micro blogs (like tumblr)

That's all I can think of, just post a comment what sort of websites you build with Drupal, or would like to build with Drupal! Just post a comment, it only takes a second!

All responses to this post will be put into a poll next monday, as per the Politika schedule:

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. June 21th (mon): Poll for design style
  6. June 23th (wed): Discuss modules and features
  7. June 28th (mon): Questionnaire about modules and features
  8. June 30th (mon): Summary of poll and questionnaire results

Also check that you don't choose something that is already covered by my previous (though not free) drupal themes because I want to build something rather unique and more in-the-moment with this project.

Thanks for your input.

Pages

Subscribe to RSS - planet