14 Improvements in Designing Websites for Microsoft SharePoint 2010

Mark  Ryan

May 12, 2010

Related Topics

Periodically we find that some designers find Sharepoint 2007 to be a limiting platform. This often stems from the amount of time it takes to build out free-formed design elements and/or integrating media components such as Flash. To set the record straight, it is not that Sharepoint can’t do free-formed, table-less designs – it’s that most Sharepoint engineers have been trained to do rectilinear pages and it therefore takes more time to do free formed designs.

The newly released Sharepoint 2010 makes good strides to eliminate some of the hurtles in designing unique public facing websites. As Elisabeth Olson described at Mix10, SharePoint 2010 allows engineers to implement ‘pixel perfect’ designs. SharePoint 2010 gives designers more freedom with enhancements in the following areas:

  1. Complete layout management with CSS, XHTML, and Div’s – Table-less layouts! – in other words you don’t have to fight SharePoint to implement non-rectangular designs. Some Webparts do still require rectangular Tables, but the designers can create nice liquid graphics. There are also new capabilities in terms of placing Widgets outside of rectangular Zones.
  2. Enhanced reusable controls with elements such as ribbons, dialogs, and status bars.
  3. New functions for Blogs and Wikis allow engineers to implement this functionality within SharePoint 2010 as opposed to 2007 which favored integration with outside systems.
  4. Better browser support for IE 7, IE 8, Firefox, Safari, and some mobile browsers.
  5. Less effort is required to create unique Theme’s for simple designs.
  6. Enhanced development features in SharePoint Designer enable engineers to make code updates and preview layout changes simultaneously significantly decreasing the amount of time it takes to implement unique designs.
  7. Better functions for pre-rending elements of a page for faster loading design elements.
  8. Completely new Theme functions for managing design elements (i.e. fonts), custom CSS can be used for generating themes.
  9. My favorite – improved integration with JavaScript. A completely new set of JavaScript libraries that grab dynamic data from SharePoint (i.e. ActiveX, JQuery) allows designers to use cool JavaScript functions within a site. Client OM allows engineers to easily get data out of SharePoint in JavaScript without web services. jQuery now comes as a built-in JavaScript library. In fact, SharePoint 2010 uses jQuery all over the new interface
  10. The Silverlight Web Part is completely updated allowing multiple dynamic data feeds for rich media designs
  11. Designers and Web Developers now have at their disposal an arsenal of methods to access SharePoint data and present it in the most creative ways such as using the new Client Object Model right within a Silverlight animation.
  12. External Content Types allow the user experience team to more easily include dynamic data outside of SharePoint (i.e. product pricing information).
  13. With Business Connectivity Services (BCS) an engineer can easily mashup data from existing backend systems and easily display, sort, filter and report on dynamic date right from SharePoint 2010 pages.
  14. SharePoint 2010 now has more social features such as content tagging and the ability for users to ‘Like’ posts by their peers and colleagues on various content

There are some features that have not changed considerably. The templates still rely on .Net 2.0 Master Templates, XSLT is still the favored platform for managing presentation, and only a few changes in menu controls. Web Part Zones are still rectangular although this is not a significant limitation anymore. SharePoint engineers still speak a unique language when discussing elements such as templates and widgets.

Both the designers and the engineers are excited about these features and we are looking forward to seeing new sites taking SharePoint 2010 in new directions. Some of our favorite SharePoint site designs are below: