Drupal Camp Victoria

  • View
    1.631

  • Download
    1

Embed Size (px)

DESCRIPTION

A presentation about drupal theming. From design to development stage

Text of Drupal Camp Victoria

  • 1. Drupal theming from design to development Alex J. Ventpap & Tom James
  • 2. Starting on Photoshop
        • The scary white canvas on photoshop, get logic. Collect data first
        • Set the size of the website, guidelines are important
        • Backgrounds, keep in mind developers work
  • 3. Gathering information - Wireframe is the boss Petro Value project
  • 4. Background & Guidelines Petro Value project
  • 5. Following the wireframe Petro Value project
  • 6. Layout and structure Petro Value project
  • 7. Vector elements in photoshop - stretching ability Petro Value project
  • 8. Fonts - websafe
        • http://www.typetester.org
  • 9. Colors - Adobe kuler
        • http://kuler.adobe.com/#links
  • 10. Fills, layer styles & keyboard shortcuts Layer Styles - Gradient Overlay + Stroke
  • 11. Keyboard shortcuts MAIN MENU > Edit > Keyboard Shortcuts
  • 12. Finishing/revisions - Color changes/end of design stage Petro Value Project
  • 13. Useful links
    • More photoshop tricks
      • http://all-x.ca/blog/?p=176
    • More about photoshop + drupal
      • http://imagexmedia.com/blog
    • Designing for Drupal: Photoshop Best Practices
  • 14. The theming bit
  • 15. Intro
      • Whos a developer/themer?
      • What is a Drupal theme?
      • Theming isnt rocket science Relies on strong CSS/HTML skills rather than PHP
      • Theming is powerful & flexible - Module theme overriding (functions & templates) - No need to alter module code
      • Every developer has a different approach - Find methods that work for you
  • 16. Planning the theme
      • Shouldnt be any major surprises in the design by this stage
      • Developers with a tight budget hate surprises
      • Highlights need for design & development overlap
      • Designers & Developers can & should get along
  • 17. Review the design
      • Ideally you review the final design before its sent to the client for review
      • Layout sizing & structure
      • Review potential block regions needed
      • Look for possible frontpage variations
      • Any possible module overrides ie. search form, login block, node type styles
  • 18. Getting Started
      • SVN set up
      • SVN benefits? (rollbacks, easy deployment)
      • Drupal & Localhost set up to begin with (quicker)(Acquia or Aegir)
      • Create the basic theme structure - Copy a theme from Drupal.org - Make you own template/skeleton theme - Start out with a CSS/HTML layout if needs be
  • 19. Building out
      • Start with the basic common structure ie. Header, content, columns and footer
      • Then build out any frontpage variations - drupal_is_front_page function (page.tpl.php) - custom body_class function (PHP & CSS) - Only use 1 page.tpl.php file for easier upgrading
      • Next focus on key features & details to theme out ie. Menu style, block styles, search block styling
      • Consider the theming of individual node types & Views lists
  • 20. Principles to consider
      • Refer back to your brief & mocks to make sure you dont miss anything, remember we hate surprises.
      • Avoid hard coding anything into your theme ie. Menus should the menu system, column content should be in blocks or modules if complex
      • Try not to fill your template.php file with custom code, use a module instead or include files
      • Use as fewer .tpl files as possible & keep them free of big chunks of code (use functions).
      • Browser check your work on a regular basic Mac & PC, IE6-8, Firefox, Safari
      • Make your theme flexible, look ahead but not too far ahead,
  • 21. Finalizing
      • Review the mock ups again, yes again. Attention to detail is important
      • Browser check again
      • Check all theme functionality like menu drop downs & any Javascript is working, check the error log and Firefox console
      • Get QA (Quality Assurance) done by someone else
      • Send to client for review :)
  • 22. This is the end We were: Alex J Ventpap (The Designer) http://all-x.ca Tom James (The other one) http://tomswebstuff.com http://drupalsn.com We are both proud to be part of ImageX Media http://imagexmedia.com