Don’t design websites. Design web systems! Creating a Drupal-optimized design
Todd Nienkerk and Aaron Stanush DrupalCon Copenhagen | August 24, 2010
Personal introductions
Todd Nienkerk
Co-founder, designer, and developer Four Kitchens
[email protected] @toddross
Photo: Kristin Hillery
Aaron Stanush Co-founder and designer Four Kitchens
[email protected] @aaronstanush
Designers are powerful!
“With great power there must also come... great responsibility!” —Stan Lee Amazing Fantasy #15, August 1962 (The first Spiderman story)
Photo: Mary Catherine via Wikimedia Commons (CC BY-SA)
‣
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 Generate buzz
Build a community Make money!
Raise awareness
Make money!
Make money!
Make money! Make money!
Make money!
Make money!
Business and technical requirements Brand guidelines
Target audience
Accessibility Performance
SEO requirements Browser compatibility
Success factors
Define the content “What kind of content will the site contain?”
‣
In Drupal, different kinds of content are called content types.
‣
Content types are usually defined by the different information they contain.
Blog post
Product
Title
Name
Author
Description
Date published
Price
Body
Options (sizes, colors)
Lead image
Images
Create a sitemap and wireframes “How will content be organized?”
Sitemaps ‣
List all sections of the site
‣
Illustrate how content is organized within the sections
Home page Primary menu Science
Sports
Business
Arts
Most popular
Blog post
Blog post
Blog post
Blog post
Blog post
Secondary menu About us
Terms of use
User tools My account
Search
Contact us
Wireframes ‣
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
My account | Log out
Blog Logo
Search
Science Sports Business Arts
Most popular posts
Content Advertisement
Copyright 2010 BlogCorp, Inc.
About us | Contact us | Terms of use
Brainstorming should happen using wireframes, not design comps or mockups.
Balsamiq Mockups ‣
balsamiq.com
‣
Cross-platform, lots of plugins
‣
Free license for opensource “do-gooders”
‣
Drupal components: bit.ly/drupal-balsamiq
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 effective design
‣
Use your wireframes as blueprints
‣
Let the theme components inform your design
CASE STUDY
Spatula City Spatula City is launching their first website. It will be the largest spatula e-commerce site ever built!
Define the site Goals
Requirements
‣
Build awareness of the Spatula City brand
‣
Follow branding guidelines
‣
Be the Amazon.com of online spatula retail
‣
Short page load times during high traffic
‣
Make money!
‣
SEO-friendly
Define content types ‣
Product
‣
Page (e.g. About, Legal)
‣
User profile
‣
Frequently asked question
Product Name Description Price Color options Image
Create a sitemap
Home page Primary menu Spatulas by type
Spatulas by color
Build-ASpatula
FAQ
Question page
Spatula page
Secondary menu Retail locations
About us
Terms of use
User tools My account
Contact us
Shopping cart
Search
Create the wireframes
Logo
Menu (block) My account Shopping cart Log out
Logo
Search box Search
Primary links Browse by type
Browse by color
Build-A-Spatula
Contact us
FAQ
Block
Content (node)
Top rated content Content
Block Promo
Footer message Copyright text
Secondary links About us
Retail locations Terms of use
Design it
Logo
Menu (block) My account Shopping cart Log out
Logo
Search box Search
Primary links Browse by type
Browse by color
Build-A-Spatula
Contact us
FAQ
Block
Content (node)
Top rated content Content
Block Promo
Footer message Copyright text
Secondary links About us
Retail locations Terms of use
Logo
Menu (block) Search box Primary links
Content (node)
Block
Block
Footer message
Secondary links
CASE STUDY
Expeditionary Learning What 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
Sitemap by Thinkso Creative
?
Sections
Sitemap by Thinkso Creative
Sections
Primary menu items Contexts
Sitemap by Thinkso Creative
?
Section landing pages
Sitemap by Thinkso Creative
Panels? Section landing pages
Views? Secondary menu
Sitemap by Thinkso Creative
Design by Thinkso Creative
Logo
Breadcrumb
Search box
Primary links
Secondary links
Menu (block)
Block?
Block?
Block?
Block? Block?
Design by Thinkso Creative
Panel!
Design by Thinkso Creative
Design by Thinkso Creative
Design by Thinkso Creative
Page node
Design by Thinkso Creative
Section
Primary menu item Context
Sitemap by Thinkso Creative
Section landing page
Sitemap by Thinkso Creative
Panel
Section subpages
Sitemap by Thinkso Creative
Secondary menu items Page nodes
(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 ‣ Menu
‣
Blog
‣
Poll
‣
Book
‣
Profile
‣
Comment
‣
Search
‣
Contact
‣
Taxonomy
‣
Forum
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 affects 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-fordrupal
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 modules Modules 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/devel drupal.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 commaseparated strings
Configuring Text Formatter
After Text Formatter
No theming required!
Design for change
Minimize templates ‣
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?
Accommodate content of any length ‣
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?
Anticipate expanding navigation ‣
What happens if menu items are added?
‣
How does your design handle multiple levels of 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 AttributionShareAlike 3.0 licensed and copyright 2010 Four Kitchen Studios, LLC.
