Case Study: FusionDrupalThemes.

presented at SFDUG by:

Stephanie Pakrul - TopNotchThemes
July 12th, 2010

 Hi, I’m Stephanie
 Co-founder of TopNotchThemes  Building Drupal themes (and the occasional whole site) for 4.5 years  Launched the first all-Drupal premium theme store in 2008  Dirty little secret: I'm not a programmer

What is
 New look and feel  Create an ecosphere for people using Fusion  Improve UX/conversion rate  Automate theme releases  Better display of downloads  On-site customer ticket system

Major features
 Ubercart for e-commerce  Project module & friends for release management  Organic Groups for access control  Panels, Views, & Fusion for display and theming

 GVS – Custom development, server administration  3281d Consulting – Project module integration, release packaging  TopNotchThemes – Design, theming, site building, content

Quick Tour!

Packaging & Selling Code

The content types
Ubercart product

Buy membership: UC OG Subscribe Nodereferenced for product fields

Private OG group

Private node outside group Posted to OG groups

Zip & tar.gz Release notes Notifications

Private module so only author & admins can access

Automatic release packaging
 We create an unpublished release node with notes  Script checks out code from folder & SVN revision  Modifies .info file for version & Update Status settings  Checkout shared documentation directory  Write release notes to a file  Convert line endings, create tar.gz and zip files  Publish release node

 Update Status & Notifications for upgrade notices  Project Usage module for usage stats  Public file system, with release files outside web root  Script to bootstrap Drupal, check filename & user access, serves the file via XSendFile if auth'd  OG Project for some glue bits for Projects as Groups  Improving Drupal community plumbing!

E-commerce with Ubercart
 Payments: PayPal Website Payments Standard & Moneris  UC Role & UC Discounts Alt for Fusion PRO members  UC Terms of Service for license agreement in checkout  UC Webform Checkout Panes for extra fields in checkout  UC Followup for cart abandonment / post-sales  UC MailChimp for product-level MailChimp integration

Content & Navigation

 FAQ module/content type for FAQ & documentation section  Nodequeue, taxonomy Smartqueue, Node Reference  Advanced Forums, Forum Access  Assorted page nodes, Views, & Panels (more on that later)  Print module for PDF generation and "send to friend"  WYSIWYG API, FCK Editor, Insert, ImageCache, Image FUpload

 Superfish dropdowns built in to Fusion, Special Menu Items  Taxonomy Menu for support section  Search: Apache Solr via Acquia Search  QuickTabs  Selective breadcrumbs


Little helping hands
 Path Redirect for d.o download aliases  Mollom, Admin Role, Admin Menu, Submit Again, Vertical Tabs, Redirect 403 to User Login, Better Formats, Text Formatter, Webform  Performance: Authcache, ImageCache Actions

Design, Layout, Theming

Design process
 New branding, with TNT reference  Wireframes, about 20 Photoshop mockups  Created and refined copy during design process  Dark with splashes of colour  Mix of light and dark background pages

Design process

Design process

Laying it out
 Fusion – 12 col grid theme, Skinr integration  Panels – panel nodes for landing pages, overrides for content types (products, projects, user profiles)

Fusion enables rapid prototyping and better separation of tasks for team members

Why Skinr?
 Skinr provides the user interface for styles  Build modular, extensible styles  Share styles across different types of content

 Skinr styles for background, blocks, panes  Lots of Views – Semantic Views + Skinr, field rewriting  Views Slideshow, Lightbox 2  Image sprites for icons, corners, etc.  Cufon for heading fonts, Typogrify

 Checkout process: fonts, buttons, reassurance  Streamlined text, tabs, etc.

 Google Analytics  Working on landing pages (Panels + Skinr) with autoresponders  Starting A/B testing with Google Website Optimizer


 The Basics: Global Redirect, Pathauto, Page Titles, Meta Tags, XML Sitemap, Path Redirect  Documentation split up amongst many nodes  Good use of headings, link keywords, related nodes  Separating &  Linkbait projects like  Guest posts, d.o project pages

Lessons learned

Things to note...
 Detailed IA is time consuming, but worth it!  Multiple node access modules is tricky  Don't assume that modules work the way you think they will out of the box  It always pays to learn more about Views  Don't try to build a site while continuously rebuilding its base theme :)

Things to note...
 Drupal is amazing for non-programmers but small bits of custom code can go a long way  Whenever possible, go with the option that makes the site easier for you to maintain later  Contribute back to the modules you use  Leave lots of time for testing (especially for browsers, payment, access control, performance)


Sign up to vote on this title
UsefulNot useful