The “Big Picture”: CSS sprites in SharePoint 2010

I wanted to share this mosaic from the official SharePoint 2010 site, as an example of how Web design techniques are making their way into SharePoint 2010.

If you are familiar with Web design, you’ll recognize a CSS sprite. The principle: multiple images used throughout the Web page are combined into a “master image”. This reduces server requests and improves page load performance.

In the above example, the master image is used to populate the list ribbon (also a feature introduced in SP 2010):

Note that I already talked about CSS sprites a couple months ago, with this example designed to display inline pies in SharePoint lists: http://pathtosharepoint.com/Utilities/PieSprite50.png

Some references if you’d like to learn more and see other real life examples:
– CSS Sprites: Image Slicing’s Kiss of Death by Dave Shea March 2004
http://www.alistapart.com/articles/sprites 
Sprites are the extension of a technique called “sliding doors”, used to create button rollover effects.
– The Mystery Of CSS Sprites: Techniques, Tools And Tutorials
http://www.smashingmagazine.com/2009/04/27/the-mystery-of-css-sprites-techniques-tools-and-tutorials

Advertisements

4 thoughts on “The “Big Picture”: CSS sprites in SharePoint 2010

  1. Hi Christophe,

    I went back to your initial post on the pie charts at
    http://blog.pathtosharepoint.com/2009/11/25/sparklines-more-information-in-less-space/
    but I couldn’t find your ‘tutorial’ to create the PieSprite50.png
    and where to locate/ call it the most efficient way from a SP list.

    When you mention increased page load perfomance, I am guessing this is
    use CSS sprite as 1 ‘big picture’ versus calling multiple individual pics located in the Shared Images library ro the default icons libraries
    Ref. http://www.endusersharepoint.com/2009/08/07/displaying-default-icons-in-sharepoint-library-of-images/

    Greg

  2. Pingback: SharePoint 2010: Recopilatorio de enlaces interesantes (V)! « Pasión por la tecnología…

  3. Pingback: Dynamics CRM 2011 performance improvements: CSS sprites | Surviving CRM

Comments are closed.