Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

Like this presentation? Why not share!

Atlanta Drupal User Group (ADUG)

on

  • 2,439 views

 

Statistics

Views

Total Views
2,439
Views on SlideShare
2,219
Embed Views
220

Actions

Likes
2
Downloads
19
Comments
0

3 Embeds 220

http://www.mediacurrent.com 217
http://mongoose.mediacurrentstaging.info 2
http://adug.dev 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Atlanta Drupal User Group (ADUG) Atlanta Drupal User Group (ADUG) Presentation Transcript

    • Design To Theme:The Drupal WayBy Danté R. TaylorMediacurrent Senior Drupal Designer
      Atlanta Drupal User Group (ADUG)
      @thememaster
    • About Me
      Bachelor of Fine Arts (BFA) from Savannah College of Art and Design
      Worked as a Designer for the past 10 years
      Have worked with Drupal since version 4.7 release
      Biggest project in Drupal issavannahnow.com
      Favorite project in Drupal is ymib.com
    • Who this presentation is for
      If you are new to Drupal and need a basic idea of where to begin
      If you want to understand the process of turning a design into a Drupal theme
      If you want to make improvements to an existing theme or design
      `
    • What we will cover
      Common tools to use to turn your design files into a Drupal theme
      How to look at a design the Drupal way
      Common theme techniques and practices
    • Presentation Format
      Topic 1: Use The Right Tools
      Topic 2: Design-to-Theme Concepts
      Topic 3: Common Theme Techniques
    • Topic 1:
      Use The Right Tools
      `
    • The right tools
    • Photoshop
      Advanced Image/photo manipulation tool
      Can be used for web design layout
      Used to create bitmap and vector artwork
      Basic image slicing functionality
      Most designers will deliver finial creative files in a Photoshop format
      Industry standard software
    • Fireworks
      Advanced Image/photo manipulation tool for web design
      Built-in features for web design professionals
      Advanced image slicing functionality
      Firework is not as commonly used tool for non-web designers & publishers
      Industry standard software for web designers
      Fireworks works well with Photoshop
    • The GIMP
      Its Open Source and powerful!
      Advanced Image/photo manipulation tool
      Basic image slicing functionality
      Most designers will not deliver final creative files in a GIMP format
      Not an industry standard software
      Some Photoshop transparencies and filters will cause issues when working between tools
      Major differences in UI compared to Photoshop and Fireworks
    • Illustrator
      • Used primary to create vector based artwork
      • Basic image slicing features
      • Good for logo and line artwork
      • Use this tool for typography work
      • Most designers will not deliver final artwork in an illustrator format.
      • This tool is ideally used for custom icon work and site background artwork
    • Firebug
      • Powerful tool and a must have for anyone building web sites
      • Inspect HTMLstructure
      • Dynamically alter site CSS & HTML inside web browser
      • DebugJavascript code
      • Easy determine layout (padding, margin, border and positioning)
      • Determine DOM hierarchy
    • Web Developer
      • This is a Firefox plug-in that is a very powerful way to debug your themes
      • This tool has validation tool that will warn you when your code does not validate
      • Can set tool to resize browser based on common browser resolutions
    • Popular Browsers
      • Firefox, Safari, Internet Explorer, and Chrome are the top four major browser operating on the Internet
      • Learn the quarks and bugs associated with all major browsers
      • All four browsers have some from of web development toolkit packaged with browser
      • Know your audience and their common browser of choice
    • Color Pickers
      • ColorZilla is a Firefox plug-in that will allow you to pick colors right from a website
      • DigitalColor Meter will allow you to pick colors from anywhere on your OS (This is a Mac app)
      • These tools come in handy when you need to quickly grab colors from a web site design and don’t have time to open Photoshop or search through a style sheet
      `
    • Theme Developer Module
      • This is contributed module that is used with Drupal to help developers and themers identify Drupal core code variables, functions, and templates
      • This is a great tool that will help you save time
    • The Staging Site (MAMP)
      • This tool will allow you to work locally on your machine and is set up just like a common web server
      • Use this tool to set up local Drupal sites to test module functionality
      • Use WAMP if you are on a PC
    • Topic 2:
      Design-to-Theme Concepts
      `
    • Drupal Theme Terms
      Hooks
      Preprocess Functions
      Theme Functions
      Template Files
      Regions
      Nodes
      Blocks
      • Content Types
      • Taxonomy
      • Settings.php
      • Template.php
      • Views
      • CCK
      • Menu System
      `
    • Drupal Theme Anatomy 101
      `
    • Granddaddy Garland
      `
    • Drupal Theme: GMC Life
    • Drupal Theme: AutoTrader
      `
    • Drupal Theme: University of Georgia:
      `
    • Drupal Theme: AdGiants
    • WARNING:Stay away from Trends!
    • WARNING:Stay away from Trends!
    • Getting started
      Install Drupal to experiment and learn how modules UI functions work together, before you begin your design project.
      Use built-in features of Drupal and modules to achieve Design objectives. (Try not to reinvent)
      Think in terms of how your Design elements can be reused or repeated throughout Web site.
      Work closely with specialist in Drupal Design or Development to save on time and budget as you plan your Drupal project.
      `
    • Common Themes & Modules
    • Main considerations in a Drupal design?
      What HTML/CSS does Drupal produce natively
      Consider the code that contributed modules will produce and how that code will interface with your design goals
      Look for repeating elements in your design that can be reused in your CSS file.
      `
    • See it the Drupal way
      • Break the design up into pieces
      • Where are elements repeating
      • WhatDrupal modules will produce the ideal results with theme work applied
      • What will have to be custom built on this page
      • How heavy is this page in terms of imagery and how can I optimize it
    • Create a Drupal Theme the easy way
      Create Theme Name directory (mytheme) inside “/sites/all/themes/” (create new directories if they do not exists)
      Copy Garland theme from “/themes” and move it to “/sites/all/themes/”, then rename it to mytheme directory.
      Change the garland.info file to mytheme.info. Open new mytheme.info file and change all names with garland to mytheme.
      Change the screenshot.png file to match your new theme.
      Clear system cache. (/admin/settings/performance)
      Go to Themes list page and select mytheme, to start using or editing your new theme. (/admin/build/themes)
      `
    • Image Preparation
      type-location-element-(state).file-type
      Type: Describe how the image is being used in HTML or CSS. Examples: bg (background image), icon, button, inline, etc
      Location: Communicates where image is located within HTMLExamples: header, body, content, sidebar, footer, etc
      Element: Describe what the image object is in the HTMLExamples: gradient, shadow, search, book, etc
      State: (Optional)Describe the condition the image object is being used as in the HTMLExamples: rest, active, focus, etc
    • Good Image Name
      bg-header-trim-active.png
    • Bad Image Name
      header_trim.png
    • Ugly Image Name
      headerTrim_01.png
    • Theme Considerations
      Comment where HTML code starts and ends
      Use a prefix for class and id selectors to reduce possible namespace conflicts
      Structure HTML so that elements can be reused (naming conventions)
      Think about what could go wrong and what the next person may need to add later to support the project
      Use correct Doctype
      Wrap conditional statements around all HTML not just variables, especially for regions and blocks.
      Use CSS to manage alternate page layouts when possible
      Use transparent (gif/png) for inline images and position images with CSS
      Only use inline CSS with dynamic scripts (jQuery, Javascript, LightBox, etc)
    • CSS Considerations
      CSS should be indented like any other programming language
      Your file should be organized in same workflow of the page that it corresponds to.
      Each group of declaration blocks should have a brief comment or description to described the section/page it belongs to
      Files should be named with project prefix
      Use “em” over “px” and “pt” for fonts and spacing
      Set fonts, link colors and shared elements once at top of CSS document
      Always use shorthand and alphabetize CSS attributes
    • CSS Considerations
      prefix-(location)-element-(state) {
      Rarely place on one line
      Always use shorthand
      Always indent code
      Place in alphabetical order
      }
    • Good CSS
    • Bad CSS
    • Ugly CSS
    • Topic 3:
      Common Theme Techniques
    • CSS Reset
      • This set all containers and html attributes to basic standard
      • This helps standardize you html/css across all browsers
      • Takeout the vertical-align: baseline (cause some issues with type)
      Reference: http://meyerweb.com/eric/tools/css/reset
    • Sliding Door Method
      • Drupal produces rectangular tabs by default
      • To add rounded corners use the <li> and <a> tags to apply left and right rounded background images to each respectively. Make the left background image much longer than you make the right cap piece
      • UseCSS to position them in place with padding and line height
      • This technique can be used for block headers and form button graphics as well
      Reference: http://www.alistapart.com/articles/slidingdoors
    • Load Menu Last
      • SEO is a very important consideration in any site development
      • Robots crawl your site from top to bottom and by placing the primary navigation code at bottom you can insure that the meta rich content gets crawled first before the repetitive menu content
      • Place menu html in the code near footer but absolutely position it at the top of the page using CSS
      • Support.com is a good example. Take a look at the source code. The menu is at bottom but appears to viewer at top
    • Where to Find Help?
      Mediacurrent.com/blogs
      Drupal.org
      Api.drupal.org
      Drupal.org/project/Themes
      AListApart.com
      Lynda.com
      Drupal.org/node/39451
      Drupal.org/books
      `
    • Thank you!