Live from the SPC11 : Creating Beautiful and Engaging Web Sites with SharePoint 2010

Written by Yves

October 3, 2011

<Disclaimer>This is personal notes of what I retained during the session. This can be incomplete, partially right or wrong. It is just part of the notes I took and what retained my attention. Nothing prevents the user to get more information on their favorite web site.</Disclaimer>

DSC04533Some nice web sites with cool branding are presented : Brembo.com, qualia.com.au, chilis.com, calphalon.com, choosechicago.com, sharpie.com, etc

SharePoint can be fully branded and there is almost no limitations, but it is better to spend time upfront to do the things correctly the first time.

First, define your vision and goals and how to measure if we reached the goals. Then, build the team and planning and not directly going into creating the branding. Some specific requirements : types of content, style guidelines, navigation, search.

A design should be clean and simple and remember the 3-clicks rule : everything should be available with 3 clicks. In terms of usability, system response can vary from the implementation. Search is important as more and more users are navigating using search on a website

Show your concepts in B&W because it keeps the focus of the stakeholders on the concepts and not on the images and colors that are probably not yet defined at this stage.

In short, the process is : Requirements, Wireframes, Technical Specifications, Creative Components

Design Theory : Contrast, Repetition, Alignement and Proximity (CRAP Smile )

Use Microsoft Expression Design or Photoshop (an example of a grid design is presented) and start by a paper version. Keep on the ground and avoid things that are hard.

Use the A/B testing, by presenting two versions of the design and see which is the preferred one. Test the navigability and how users can find content (not only by searching).

Before going to SharePoint, check by doing an HTML site and use the XHTML Strict Doctype and test in the target browsers.

Different efforts for branding : Full, by doing the complete Master Pages, Layouts, CSS etc; Medium, by doing CSS, images and alternate CSS; And Low, by using only the out-of-the-box masters pages, UI and themes.

Use a start master page and modify it even by moving or hiding OOB elements.

Page Layouts can be considered as templates for page content. The most used web parts are CEWP and CQWP. The first can be used to add Javascript and CSS to page, the second to rollup content. One important thing is that HTML content fields remove the Javascript.

For mobile devices, turn off the mobile view and Android and iOS devices are not well supported.

Tag and document your content using meta-data in page layouts. Also, name the pages correctly.

Deployment process : MP, PL, CSS, WP are completed, then deploy and ensure that everything look fine. Then, enter real data to again check that everything is ok.

You May Also Like…

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *