DrupalCamp - Session 3
Theming Out of the Box
Matthew Tucker and Preston So
July 26, 2008
How to make a site look like it's not in Drupal or a CMS. How far can you really go?
You can achieve the same level of beauty that you see in CSS showcases
Some examples of well-designed websites:
All of these sites don't use Drupal. You can do the same
Aesthetics - The look and feel of a website is very important, more important than SEO
- Achieve a different mood and tone by altering CSS
- Rethink columns. Try going liquid, don't restrict yourself with set page width
- Typography - try some alternatives
- Sans Unicode
- Think about who your audience is.
You can use CSS properties to change how text is displayed.
- text-transform - Uppercase, lowercase, capitalize, etc
Become an expert in CSS! Really learn it. Run-of-the-mill default templates don't cut it anymore. Try using CSS techniques (such as opacity)
Styling It Up
- Text Image Replacement - important tool to help accessibility. The image shows up on the web page, but code, screen reader, SEO sees text
- Modules Using jQuery
- Node Carousel
- Quick Tabs
Theme Overrides - You can add theme functions or override functions to change the output of a module.
ie: pages use terminology that doesn't apply to every site. You could change the wording of 'next' 'previous' by theme override
Trends in Design
- stick notes/office tools
- artistic techniques
- wooden textures
- hand-written text
A beautiful site will keep users on the site longer. Have a user experience expert.
How people view sites
- Visitors don't read, they scan
- They read pages in an F-shape, starting from top-left, then right, then downward
How can you make sure users at least look at certain content
- Use whitespace to separate elements. Whitespace spreads out content and makes thinks easier to digest.
- ie: ecoalign - uses whitespace to preserve a natural structure - in Drupal
- Jason Santa Maria - uses whitespace in the most scanned area to force users to other areas of the page
- No longer need web-safe colors
- Color variation and textures help separate space.
- ie: 31Three - use of color to draw the eye to text.
- Cameron Moll - check out his sites, especially his use of textures
Using semantic markup and web standards will assure that everyone can view your site.
Follow Section 508 guidelines and use the validator (try for "Priority 2")
Form and Functionality
Gmail - extreme functionality and not much form
- You can find a balance between form and function.
- Have a vision. Remember your audience. IE: New York Times.
- Don't let the abundance of functionality in Drupal distract you. You don't need to install every module.
What is Truly out of the Box?
- Don't think in terms of nodes, regions, and blocks.
- Think about whether the user can use the website and whether it's good enough that they actually stay.
- Find ways to mode Drupal into your design, not the other way around.
- Don't let Drupal define your style.