Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Performance Considerations for   Custom Theme Development                   Kevin Weisser                  Noriaki Tatsumi
Overview•   Introduction to Themes•   Blackboard Customization Approach•   Introduction to CSS•   CSS Performance Consider...
Blackboard Custom Themes
Blackboard Custom Themes
Blackboard Custom Themes• Blackboard 9.x contains a flexible user interface  which can be easily branded to have the look ...
Blackboard’s Recommended           Customization Approach1.   Access Learn as System Administrator2.   Navigate to System ...
Blackboard’s Recommended          Customization Approach7. From Theme and Palette Catalog, select Create    Theme8. Provid...
Blackboard’s RecommendedCustomization Approach Cont.
Performance Stories From the Field• Customized login page loads slowly  – Mitigated by limiting the requests to those used...
Introduction to CSS• Imagine the following block:       ...       ul#summer-drinks li {          font-weight: normal;     ...
Introduction to CSS• You want to designate a favorite:    …    ul#summer-drinks li {       font-weight: normal;       font...
Introduction to CSSSelector                Specificity*                       0,0,0,0li                      0,0,0,1ul li ...
Introduction to CSS• Higher specificity selectors are applied• Last style declared is applied when a tie exists• !importan...
Quantifying Impact
CSS Performance Considerations• Anti-patterns  –   Unused Selectors  –   Universal Selectors  –   Over Qualified Selectors...
Unused Selectors• What are unused selectors?  – Declared selectors which are not applied to any    element of the DOM• How...
Unused Selectors• Mitigation techniques  – Split external CSS into smaller files grouped by    related functionality/style...
Universal Selector• What is a universal selector?  – Universal selectors are denoted by the ‘*’ symbol     • Example: .ite...
Universal Selector
Universal Selector
Over Qualified Selectors• What is an over qualified selector?  – ID selectors denoted by ‘#’ that has a preceding    eleme...
Over Qualified Selectors• How does this impact performance  – One more comparison is required during evaluation• Mitigatio...
:hover Psuedo Selector• What is the :hover pseudo selector?  – Elements that specify a different style when the    mouse h...
:hover Psuedo Selector• Mitigation techniques        <style type="text/css">          tr.S {background-color:#000000}     ...
Descendant Selector• What are descendant selectors?  – Descendant selectors filter based criteria     • Example: treehead ...
Descendant Selector• Mitigation techniques  – Use of child selectors prevent DOM traversal     • treehead > treerow > tree...
@import Usage• What does @import do?  – Allows stylesheets to include other stylesheets• How does this impact performance?...
CSS Minification• Process which removes comments, return  characters, and unnecessary white space• Sacrifices readability ...
CSS Minification
Image Performance Considerations• Anti-patterns  – Inappropriate image format  – Unreachable images  – Unused Images
Inappropriate Image Format:                  JPEG• Recommended for realistic pictures with smooth  gradients and color ton...
Inappropriate Image Format:               PNG and GIF• PNG and GIF should be used for solid color images  (charts or logos...
Unreachable Images• Make sure path to image is correct• 404 status on any request is a wasted request  – Request may be bl...
Unused Images• Request to unused images creates unnecessary  delays• Longer download times• Reduced parallelism
Front End Analysis Tools• Firebug (http://getfirebug.com/)   – Inspect HTML and modify style/layout in real-time   – Debug...
Questions & Answers
Please provide feedback for this session by emailing         DevConFeedback@blackboard.com.            The title of this s...
Upcoming SlideShare
Loading in …5
×

Blackboard DevCon 2011 - Performance Considerations for Custom Theme Development

867 views

Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Blackboard DevCon 2011 - Performance Considerations for Custom Theme Development

  1. 1. Performance Considerations for Custom Theme Development Kevin Weisser Noriaki Tatsumi
  2. 2. Overview• Introduction to Themes• Blackboard Customization Approach• Introduction to CSS• CSS Performance Considerations• Image Performance Considerations• Front-end Analysis Tools
  3. 3. Blackboard Custom Themes
  4. 4. Blackboard Custom Themes
  5. 5. Blackboard Custom Themes• Blackboard 9.x contains a flexible user interface which can be easily branded to have the look and feel of your institution• This can be accomplished by changing any of the following: – Themes/Color Palettes – Images – Customizing Login Page
  6. 6. Blackboard’s Recommended Customization Approach1. Access Learn as System Administrator2. Navigate to System Admin tab3. Click on Brands and Themes4. Click on Theme and Palette Catalog5. Click icon beside BbLearn Theme6. Download the theme and save it to your desktop
  7. 7. Blackboard’s Recommended Customization Approach7. From Theme and Palette Catalog, select Create Theme8. Provide the required fields (Theme Name and Reference Name) and click Browse My Computer9. Select the recently downloaded theme10. Click Submit11. Open the file on the application server (Bb root- >content->vii->BBLEARN->branding->themes- >Your Theme Folder) in your favorite editor and proceed to make your changes
  8. 8. Blackboard’s RecommendedCustomization Approach Cont.
  9. 9. Performance Stories From the Field• Customized login page loads slowly – Mitigated by limiting the requests to those used by the browser• Drag and drop functionality appears choppy – Mitigated by cleaning up poor performing CSS selectors• Pages load slowly in areas with limited connectivity – Mitigated by leveraging browser cache and ensuring that requests were compressed/minified
  10. 10. Introduction to CSS• Imagine the following block: ... ul#summer-drinks li { font-weight: normal; font-size: 12px; color: black; } … <ul id="summer-drinks"> <li>Whiskey and Ginger Ale</li> <li>Wheat Beer</li> <li>Mint Julip</li> </ul> …
  11. 11. Introduction to CSS• You want to designate a favorite: … ul#summer-drinks li { font-weight: normal; font-size: 12px; color: black; } .favorite { color: red; font-weight: bold; } … <ul id="summer-drinks“> <li class=“favorite”>Whiskey and Ginger Ale</li> <li>Wheat Beer</li> <li>Mint Julip</li> </ul>
  12. 12. Introduction to CSSSelector Specificity* 0,0,0,0li 0,0,0,1ul li 0,0,0,2ul ol li.red 0,0,1,3li.red.level 0,0,2,1#x34y 0,1,0,0style=“display:none” 1,0,0,0
  13. 13. Introduction to CSS• Higher specificity selectors are applied• Last style declared is applied when a tie exists• !important overrides the specificity
  14. 14. Quantifying Impact
  15. 15. CSS Performance Considerations• Anti-patterns – Unused Selectors – Universal Selectors – Over Qualified Selectors – :hover Pseudo Selector – Descendant Selectors – @import Usage• Optimization – Minification
  16. 16. Unused Selectors• What are unused selectors? – Declared selectors which are not applied to any element of the DOM• How does this impact performance? – CSS is blocking – More Styles = Larger Files = Longer download times – More Styles = More Parsing – More Styles = More Evaluations
  17. 17. Unused Selectors• Mitigation techniques – Split external CSS into smaller files grouped by related functionality/styles – When adding styles: • Be aware of already defined styles • Be aware of selector specificity • Be aware of which attributes are available various DOM elements
  18. 18. Universal Selector• What is a universal selector? – Universal selectors are denoted by the ‘*’ symbol • Example: .itemGallery *{zoom:1;}• How does this impact performance? – Right to left evaluation – Reflow in interactive pages• Mitigation techniques – Be specific
  19. 19. Universal Selector
  20. 20. Universal Selector
  21. 21. Over Qualified Selectors• What is an over qualified selector? – ID selectors denoted by ‘#’ that has a preceding element tag • Example: div#lightboxContent h2{position:relative}; – Class selectors denoted by ‘.’ that has a preceding element tag • Example: div.stopped p img{background:#fff -180px;}
  22. 22. Over Qualified Selectors• How does this impact performance – One more comparison is required during evaluation• Mitigation techniques – Don’t specify the element before the ID/Class selector – IDs should be unique – Classes can be unique
  23. 23. :hover Psuedo Selector• What is the :hover pseudo selector? – Elements that specify a different style when the mouse hovers over the element element • Example: – tr.S {background-color:#000000} – tr.S:hover {background-color:#FFFFFF}• How does this impact performance? – IE degradation on non-anchor elements – IE9 may correct this problem
  24. 24. :hover Psuedo Selector• Mitigation techniques <style type="text/css"> tr.S {background-color:#000000} tr.S:hover {background-color:#FFFFFF} </style> <table> <tr class="S"> <td>foo bar</td> </tr> </table> <table> <tr style="background-color:#FFFFFF" onmouseover="this.style.backgroundColor=#000000" onmouseout="this.style.backgroundColor=#FFFFFF"> <td>foo bar</td> </tr> </table>
  25. 25. Descendant Selector• What are descendant selectors? – Descendant selectors filter based criteria • Example: treehead treerow treecell {…}• How does this impact performance? – More evaluations
  26. 26. Descendant Selector• Mitigation techniques – Use of child selectors prevent DOM traversal • treehead > treerow > treecell {…} – Class selector is preferred • .treecell-header {…} – Use caution this approach can reduce reusability
  27. 27. @import Usage• What does @import do? – Allows stylesheets to include other stylesheets• How does this impact performance? – Set number of connections available to request resources – Eliminates parallelism• Mitigation techniques – <link> tags alllow for parallel CSS download
  28. 28. CSS Minification• Process which removes comments, return characters, and unnecessary white space• Sacrifices readability for smaller file sizes• Free tools available (ex. YUICompressor)• Themes uploaded from the System Admin tab are immediately compressed
  29. 29. CSS Minification
  30. 30. Image Performance Considerations• Anti-patterns – Inappropriate image format – Unreachable images – Unused Images
  31. 31. Inappropriate Image Format: JPEG• Recommended for realistic pictures with smooth gradients and color tones• Not lossless• Sacrifice compression for resolution• JPEGTran optimization
  32. 32. Inappropriate Image Format: PNG and GIF• PNG and GIF should be used for solid color images (charts or logos)• Use PNG over GIF unless – Image contains animation – Image is extremely small (a few hundred bytes), because GIF tends to be smaller than PNG• PNG is superior because – Copyright free – More efficient compression – Stores all bit depths• OptiPNG, PNGCrush for optimization
  33. 33. Unreachable Images• Make sure path to image is correct• 404 status on any request is a wasted request – Request may be blocking – Reduces parallelism• Verify all images are reachable via browser profile tools, such as Firebug
  34. 34. Unused Images• Request to unused images creates unnecessary delays• Longer download times• Reduced parallelism
  35. 35. Front End Analysis Tools• Firebug (http://getfirebug.com/) – Inspect HTML and modify style/layout in real-time – Debug JavaScript – Analyze network usage and performance• PageSpeed (http://code.google.com/speed/page-speed/) – Optimize with Web performance best practices – Rules of particular interest • Avoid bad requests • Avoid CSS @import • Combine external CSS • Minify CSS • Optimize Images • Use efficient CSS Selectors
  36. 36. Questions & Answers
  37. 37. Please provide feedback for this session by emailing DevConFeedback@blackboard.com. The title of this session is:Performance Considerations for Custom Theme (CSS) Development

×