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
Hi Christophe,
I went back to your initial post on the pie charts at
https://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
Greg,
That is correct, it is about loading one 200 kb picture vs. dozens of 2kb pictures.
I haven’t yet published a tutorial for the pies, I’ll try to do this next month. They are part of the chart workshop series:
http://eusp-chartsandgraphs.eventbrite.com/
Pingback: SharePoint 2010: Recopilatorio de enlaces interesantes (V)! « Pasión por la tecnología…
Pingback: Dynamics CRM 2011 performance improvements: CSS sprites | Surviving CRM