Don’t design websites.Design web systems!Creating a Drupal-optimized design
Todd Nienkerk and Aaron StanushDrupalCon Copenhagen | August 24, 2010
Personal introductions
Photo: Kristin Hillery
Todd NienkerkCo-founder, designer, and developerFour Kitchens
@toddross
Aaron StanushCo-founder and designerFour Kitchens
@aaronstanush
Designers are powerful!
Photo: Mary Catherine via Wikimedia Commons (CC BY-SA)
“With great power there must also come... great responsibility!”
—Stan LeeAmazing Fantasy #15, August 1962
(The first Spiderman story)
‣ As designers, we communicate a site’s functionality to developers through sitemaps, wireframes, and comps
‣ We are site architects
Designing a web system
Step 1:Stop! Close Photoshop!
You wouldn’t paint a house before building it...
So how can you design a website before architecting it?
Before you design, ask:
‣ What’s the purpose of the site?
‣ What kind of content will the site contain?
‣ How will content be organized?
Define the site“What’s the purpose of the site?”
List your goals
Make money!
Raise awarenessGenerate
buzz
Make money!
Build a community
Make money!
Make money!
Make money!
Make money!
Make money!
Business and technical requirements
Browser compatibility
Performance
Accessibility
Target audience
Success factors
SEO requirements
Brand guidelines
Define the content“What kind of content will the site contain?”
‣ In Drupal, di!erent kinds of content are called content types.
‣ Content types are usually defined by the di!erent information they contain.
Blog post
Title
Author
Date published
Body
Lead image
Product
Name
Description
Price
Options (sizes, colors)
Images
Create a sitemap and wireframes“How will content be organized?”
‣ List all sections of the site
‣ Illustrate how content is organized within the sections
Sitemaps
Science Sports Business
About us Contact usTerms of use
My account
Blog post
Home page
Search
User tools
Secondary menu
Primary menu
Blog post Blog post
Most popular
Blog post
Arts
Blog post
‣ Illustrate page layout and functionality
‣ Demonstrate how a user will navigate the site
‣ Identify dynamically-generated content areas
‣ Use placement of key components to reinforce the goals of the site
‣ Shopping cart icon, Revenue-generating ads
Wireframes
Content
ScienceSportsBusinessArts
Most popularposts
Search
Copyright 2010 BlogCorp, Inc. About us | Contact us | Terms of use
Advertisement
Blog LogoMy account | Log out
Brainstorming should happen using wireframes, not design comps or mockups.
‣ balsamiq.com
‣ Cross-platform, lots of plugins
‣ Free license for open-source “do-gooders”
‣ Drupal components: bit.ly/drupal-balsamiq
Balsamiq Mockups
Step 2:Translate the wireframes into “Drupalspeak”
Most Drupal themes are comprised of just a few, basic components.
‣ Content
‣ Usually a node, view, or panel
‣ Can also be a user profile or admin interface
‣ Blocks
‣ Can contain virtually anything: user login, menus, lists of content, custom HTML, views...
‣ Appear in regions (usually sidebars, but sometimes in the header or footer regions)
‣ Menus
‣ Added to the page as blocks
‣ Primary and secondary links
‣ Special kinds of menus
‣ Logo
‣ Search box
‣ Site slogan
‣ Mission statement
‣ Footer message
Step 3:Design your site(You may now open Photoshop!)
‣ Now you can make informed decisions about how to create a compelling and e!ective design
‣ Use your wireframes as blueprints
‣ Let the theme components inform your design
CASE STUDY
Spatula CitySpatula City is launching their first website. It will be the largest spatula e-commerce site ever built!
Define the site
‣ Build awareness of the Spatula City brand
‣ Be the Amazon.com of online spatula retail
‣ Make money!
Goals‣ Follow branding
guidelines
‣ Short page load times during high tra"c
‣ SEO-friendly
Requirements
Define content types‣ Product
‣ Page(e.g. About, Legal)
‣ User profile
‣ Frequently asked question
Product
Name
Description
Price
Color options
Image
Create a sitemap
Spatulas by type
Spatulas by color
Build-A-Spatula
Retail locations
FAQ Contact us
About us
Search
Terms of use
My account
Spatula page
Home page
Question page
Shopping cart
User tools
Secondary menu
Primary menu
Create the wireframes
Content
Logo
Top ratedcontent
Promo
Search
Copyright text
Browse by type Browse by color Build-A-Spatula Contact us FAQ
My account Shopping cart Log out
About us Terms of useRetail locations
Menu (block)
Primary links
Search box
Logo
Content (node) Block
Block
Secondary linksFooter message
Design it
Content
Logo
Top ratedcontent
Promo
Search
Copyright text
Browse by type Browse by color Build-A-Spatula Contact us FAQ
My account Shopping cart Log out
About us Terms of useRetail locations
Menu (block)
Primary links
Search box
Logo
Content (node) Block
Block
Secondary linksFooter message
Menu (block)
Primary links
Search box
Logo
Content (node) Block
Block
Secondary linksFooter message
CASE STUDY
Expeditionary LearningWhat happens when all of the planning and designing has been done for you?
Working with a provided design‣ Expeditionary Learning partnered with Thinkso
Creative and Four Kitchens to relaunch their brand and website
‣ Thinkso Creative provided the site design
‣ They had never worked with Drupal before
Sitemap by Thinkso Creative
Primary menu items
Contexts
Sections
Sitemap by Thinkso Creative
Section landing pages
?
Sitemap by Thinkso Creative
Section landing pages
Panels?
Views?
Secondary menu
Search box
Logo
Breadcrumb
Secondary links
Primary links
Menu (block)
Block?
Block?
Block?
Block?
Block?
Sitemap by Thinkso Creative
Primary menu item
ContextSection
Sitemap by Thinkso Creative
PanelSection landing page
Sitemap by Thinkso Creative
Section subpages
Page nodes
Secondary menu items
(More on this case study later...)
Better. Faster. Cheaper.How to accelerate the design and theming phases of your project
Don’t start at zero.Start at Drupal.Understand and leverage default Drupal behavior
Default output and styling
‣ Know what the default markup and CSS look like
‣ Stark theme: drupal.org/project/stark
Drupal 6 Stark theme: drupal.org/project/stark
Default blocks and menus
‣ Default blocks
‣ User login, Recent comments, Who’s online, Who’s new, and more...
‣ Default menus
‣ Navigation
‣ Primary and Secondary links
Core modules
‣ Do you really know what Drupal’s core modules can do?
‣ Aggregator‣ Blog‣ Book‣ Comment‣ Contact‣ Forum
‣ Menu‣ Poll‣ Profile‣ Search‣ Taxonomy
Understand Drupal’s theming system
Theme defaults
‣ Regions
‣ left sidebar, right sidebar, content, header, and footer
‣ Assigning content to regions:drupal.org/node/171224
‣ Variables printed in the template files
‣ $content, $logo, $submitted, $terms, $links...
‣ Available variables are listed at the top of each template file
‣ Pages: /modules/system/page.tpl.php
‣ Blocks: /modules/system/block.tpl.php
‣ Nodes: /modules/node/node.tpl.php
‣ Comments: /modules/comment/comment.tpl.php
Theme settings
‣ Upload a logo and bookmark icon (favicon)
‣ Add copy: site slogan, mission statement, and footer message
‣ Show and hide node authoring information by content type
‣ Enable user pictures (avatars) in nodes and comments
Use template suggestions
‣ You’re not limited to a single template
‣ Each content type can have its own node.tpl.php file
‣ Example: node-blog.tpl.php overrides and a!ects only “blog” content types
‣ Learn more: drupal.org/node/190815
Subtheme
‣ Subthemes inherit resources from its base theme
‣ Zen: drupal.org/project/zen
‣ Fusion: drupal.org/project/fusion
‣ More! mogdesign.eu/blog/19-base-themes-for-drupal
‣ Structure and inheritance: drupal.org/node/225125
Use a grid system
‣ NineSixty: drupal.org/project/ninesixty
‣ Drupal port of the 960.gs grid system
‣ Zen NineSixty: drupal.org/project/zen_ninesixty
‣ 960 Robots: drupal.org/project/ninesixtyrobots
‣ Blueprint: drupal.org/project/blueprint
‣ Drupal port of the Blueprint CSS framework
Use contributed modulesModules can often take the place of complex and time-consuming theming
Monster modules
‣ Content Construction Kit (CCK):drupal.org/project/cck
‣ Add virtually any kind of data to nodes
‣ Isolate and control user-added data
‣ Individually theme each piece of data
‣ Views: drupal.org/projects/views
‣ Create lists of content
‣ Arguments allow views to be dynamic
‣ Nodequeue: drupal.org/projects/nodequeue
‣ Create manually curated views
‣ Panels: drupal.org/projects/panels
‣ Create rich layouts without using multiple page templates or extra regions
‣ New layouts are easily added at the theme layer
Themer’s helping hands
‣ Devel and the Theme Developer modules:drupal.org/projects/develdrupal.org/projects/devel_themer
‣ Administration themes make the admin UI pretty (so you don’t have to)
‣ Admin: drupal.org/projects/admin
‣ Seven: drupal.org/project/seven
Wrangling navigation elements‣ Menu attributes:
drupal.org/project/menu_attributes
‣ Add IDs, classes, rel, target, and other attributes to menu items
‣ Context: drupal.org/project/context
‣ Enables you to define “sections” and enforce active menu trails
‣ Menu Block: drupal.org/project/menu_block
‣ Drupal’s primary and secondary menus only support two levels
‣ Create robust, multi-level menus
‣ Context Menu Block:drupal.org/project/context_menu_block
‣ Integrates Menu Block with the Context module
‣ Custom Breadcrumbs:drupal.org/project/custom_breadcrumbs
‣ Makes breadcrumb navigation usable
Little modules can save you hours of theming‣ Someone else has probably run into your problem
before... and solved it
‣ The trick is finding the module
‣ The problem: CCK outputs values one-by-one in their own divs
‣ The (theme) solution:
‣ Override the CCK field’s template file
‣ Write PHP to output each field separated by a comma
‣ There’s got to be a better way!
‣ Text Formatter: drupal.org/project/textformatter
‣ Lets you output CCK fields as lists or comma-separated strings
Configuring Text Formatter
After Text Formatter
No theming required!
Design for change
‣ More templates mean more maintenance
‣ Consistent styling across templates creates a better user experience
‣ Create a robust default template
‣ What happens if a site administrator creates a new content type without creating a new template?
Minimize templates
‣ Your design should be robust enough to handle short and long content
‣ What happens if your title wraps to two or three lines?
‣ What about the menu items?
Accommodate content of any length
‣ What happens if menu items are added?
‣ How does your design handle multiple levels of navigation?
Anticipate expanding navigation
The site you design today will change tomorrow.
Credits‣ Spatula City is based on an idea by
the great Weird Al Yankovic, internationally renowned accordion virtuoso.
‣ The Swedish Chef was created by Jim Henson. Or someone who worked for him. Whatever the case, we didn’t invent him.
‣ Expeditionary Learning sitemaps, mockups, and screenshots are copyright Expeditionary Learning Schools and/or Thinkso Creative.
‣ The items listed above are exempt from this presentation’s Creative Commons license.
‣ This presentation was created and delivered by Todd Nienkerk and Aaron Stanush, co-founders of Four Kitchens.
All content in this presentation, except where noted otherwise, is Creative Commons Attribution-ShareAlike 3.0 licensed and copyright 2010 Four Kitchen Studios, LLC.
