Your SlideShare is downloading. ×
0
SUSTAINABLE THEMING                                                with                          FUSION                   ...
GOOD AFTERNOON!                    • TopNotchThemes - Custom Designs &                        Drupal Theming              ...
DO YOU WANT TO...                    • Decouple theming from development?                    • Reduce repetition in your w...
TOP 3                        UNSUSTAINABLE HABITS                          OF GOOD THEMERSSunday, June 12, 2011
ASSUMING                 STATIC NEEDS & CONTENT                    • New stakeholders, campaigns, features,               ...
STRIVING                        FOR PIXEL PERFECTION                          (or trusting photoshop in any way)          ...
REPEATING YOURSELF,                        REPEATING YOURSELF.                    •   Re-building Layouts & configuring gr...
QUICK FIXES                        TO MAKE ANY THEMING                        PROJECT SUSTAINABLESunday, June 12, 2011
DESIGN ABSTRACTION                    • OOGD - Object-Oriented Graphic Design                    • Plan for abstraction in...
CREATE YOUR DESIGNSunday, June 12, 2011
THEN ABSTRACTSunday, June 12, 2011
BEGIN WITH                        A SOLID BASE THEME                    • Ok, were a bit biased :)                    • 96...
STYLE GENERALLY &                         CREATE FLEXIBILITY                    •   Use real(ish) content                 ...
FUSION                HOW IT HELPS YOU THEME                  MORE SUSTAINABLYSunday, June 12, 2011
LOL CAT BREAK!!Sunday, June 12, 2011
SOLID, FLEXIBLE BASE                    • Easy-to-Customize Grid                     • More about grids in general: http:/...
HOW THE PIECES FIT                          FUSION CORE                        GRID                               SKINR MO...
SKINR                         CREATES OPTIONS                    • For designers & developers                    • For sit...
HOW YOU USED TO                TARGETING EACH                 STYLE BLOCKS                   BLOCK IDSunday, June 12, 2011
WHAT HAPPENS IF THE                 CLIENT’S NEEDS CHANGE?                                   Do they call you?            ...
SKINR STYLES APPLY       TO MANY BLOCKSSunday, June 12, 2011
CLIENTS CAN EASILY          CHANGE SKINS                        *with no CSS editsSunday, June 12, 2011
EASY, POINT-AND-                   CLICK INTERFACESunday, June 12, 2011
THEME BEFORE                           THE SITE IS BUILT                    •   What if you dont know block IDs?          ...
BUILD THEMES ON                   DEMO SITESSunday, June 12, 2011
TWEAK & POLISH  AFTER DEVELOPMENTSunday, June 12, 2011
MODULAR THEMING                    •   Look for common elements                    •   Avoid verbose CSS                  ...
SUSTAINABLE THEMING...                    • Embraces flexibility of advanced CMS                    • Works even when func...
FUSION RESOURCES                    • @topnotchthemes                    • fusiondrupalthemes.com                        •...
GET A FREE DEMO SITE                        Clone a copy of the demo site for our free theme,                             ...
THANKS FOR ATTENDING!Sunday, June 12, 2011
Upcoming SlideShare
Loading in...5
×

Sustainable Theming with Fusion - DCCO 2011

1,922

Published on

TopNotchThemes presentation on Sustainable Theming at DrupalCamp Colorado 2011.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,922
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Sustainable Theming with Fusion - DCCO 2011"

  1. 1. SUSTAINABLE THEMING with FUSION Drupal Camp Colorado 2011 TopNotchThemes - Stephanie Pakrul & Sheena DonnellySunday, June 12, 2011
  2. 2. GOOD AFTERNOON! • TopNotchThemes - Custom Designs & Drupal Theming • FusionDrupalThemes.com - Ready-to- download Drupal themesSunday, June 12, 2011
  3. 3. DO YOU WANT TO... • Decouple theming from development? • Reduce repetition in your workflow? • Focus more on design? • Hand off sites that are easier to maintain?Sunday, June 12, 2011
  4. 4. TOP 3 UNSUSTAINABLE HABITS OF GOOD THEMERSSunday, June 12, 2011
  5. 5. ASSUMING STATIC NEEDS & CONTENT • New stakeholders, campaigns, features, goals • Shifts in technology • Don’t work against Drupal’s flexibilitySunday, June 12, 2011
  6. 6. STRIVING FOR PIXEL PERFECTION (or trusting photoshop in any way) • Vestigial practice of print designers • medium Accept that you have little control over the • Differences in devices, browsers and usersSunday, June 12, 2011
  7. 7. REPEATING YOURSELF, REPEATING YOURSELF. • Re-building Layouts & configuring grids • Re-styling for common design motifs • Wrangling the same cross-browser issuesSunday, June 12, 2011
  8. 8. QUICK FIXES TO MAKE ANY THEMING PROJECT SUSTAINABLESunday, June 12, 2011
  9. 9. DESIGN ABSTRACTION • OOGD - Object-Oriented Graphic Design • Plan for abstraction in the design phase • Implement abstraction when themingSunday, June 12, 2011
  10. 10. CREATE YOUR DESIGNSunday, June 12, 2011
  11. 11. THEN ABSTRACTSunday, June 12, 2011
  12. 12. BEGIN WITH A SOLID BASE THEME • Ok, were a bit biased :) • 960, Framework Fusion, Zen, Omega, Genesis, • Taking care of the Drufaults • Provides scaffold CSSSunday, June 12, 2011
  13. 13. STYLE GENERALLY & CREATE FLEXIBILITY • Use real(ish) content • Read this: bit.ly/real-lorem-ipsum • Use a gridSunday, June 12, 2011
  14. 14. FUSION HOW IT HELPS YOU THEME MORE SUSTAINABLYSunday, June 12, 2011
  15. 15. LOL CAT BREAK!!Sunday, June 12, 2011
  16. 16. SOLID, FLEXIBLE BASE • Easy-to-Customize Grid • More about grids in general: http://bit.ly/ about-grids • Smart regions for flexible layout • Default skinr styles • GUI controls for rapid prototypingSunday, June 12, 2011
  17. 17. HOW THE PIECES FIT FUSION CORE GRID SKINR MODULE STYLE OPTIONS TO UI CUSTOM SUBTHEMESunday, June 12, 2011
  18. 18. SKINR CREATES OPTIONS • For designers & developers • For site admins and content managersSunday, June 12, 2011
  19. 19. HOW YOU USED TO TARGETING EACH STYLE BLOCKS BLOCK IDSunday, June 12, 2011
  20. 20. WHAT HAPPENS IF THE CLIENT’S NEEDS CHANGE? Do they call you? Do they write bad CSS on their own? What if they decide to switch to panels? Are they stuck?Sunday, June 12, 2011
  21. 21. SKINR STYLES APPLY TO MANY BLOCKSSunday, June 12, 2011
  22. 22. CLIENTS CAN EASILY CHANGE SKINS *with no CSS editsSunday, June 12, 2011
  23. 23. EASY, POINT-AND- CLICK INTERFACESunday, June 12, 2011
  24. 24. THEME BEFORE THE SITE IS BUILT • What if you dont know block IDs? • Working on a team • Parallel site development • Flexibility before content is enteredSunday, June 12, 2011
  25. 25. BUILD THEMES ON DEMO SITESSunday, June 12, 2011
  26. 26. TWEAK & POLISH AFTER DEVELOPMENTSunday, June 12, 2011
  27. 27. MODULAR THEMING • Look for common elements • Avoid verbose CSS • Location & size agnostic • Stack and extend skinsSunday, June 12, 2011
  28. 28. SUSTAINABLE THEMING... • Embraces flexibility of advanced CMS • Works even when functionality & content change • Creates an efficient workflowSunday, June 12, 2011
  29. 29. FUSION RESOURCES • @topnotchthemes • fusiondrupalthemes.com • Documentation • News • Forums • drupal.org/project/skinr • Documentation • Issue QueueSunday, June 12, 2011
  30. 30. GET A FREE DEMO SITE Clone a copy of the demo site for our free theme, Magazeen webenabled.com/application/tnt-fusionSunday, June 12, 2011
  31. 31. THANKS FOR ATTENDING!Sunday, June 12, 2011
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×