SPTechCon - Introduction to Share Point 2010 Branding

8/4/2019 SPTechCon - Introduction to Share Point 2010 Branding

1/53


2/53

SharePoint911

Established in 2004 by SharePoint MVP Shane Young Full service SharePoint Consulting

ro ec ann ng

Architecture

Development

Help Desk

We truly are The SharePoint Authority.

http://www.sharepoint911.com


3/53

Randy Drisgill MVP SharePoint Server

Branding and Design Lead SP911

Author

Professional SharePoint 2007 Design

Professional SharePoint 2010 Branding (Q2 2010)

Real World SharePoint 2010 2 2010

Blog:

http://blog.drisgill.com

http://twitter.com/Drisgill

Orlando, FL


4/53

John Ross MVP SharePoint Server

Sr. SharePoint Consultant SP911

Author

MOSS Explained

Professional SharePoint 2007 Design

Real World SharePoint 2010 (Q2 2010)

Blog:

p: www.rossonmoss.com Twitter:

http://twitter.com/johnrossjr

Orlando, FL


5/53

And the Audience?


6/53

Agenda

What is Branding? Terminolo

SP2010 UX Overview

Approaches to Branding in SP2010

Getting Started


7/53

What does branding mean?


8/53

What does branding mean?

Branding: The act of building a specific image or identity that

peop e recogn ze n re at on to your company

Website Branding: The colors, fonts, logos, and supporting graphics that

make up the general look and feel of a corporatewebsite.

Branding for SharePoint:

, , , , ,images, etc.


9/53

Clarification

The word design can often be confused withSoftware Design (planning for softwareeve opmen


10/53

Vocabulary Lesson

SharePoint Foundation 2010 is the free version ofSharePoint

ocuse on co a orat on w t ocuments an g tediting of web pages

SharePoint

Includes amon other ca abilities the PublishinFeature

Much better platform for creating a strongly brandedweb site


11/53

Whats new?

Master Pages UX

Standards and Compliance

More fanciness


12/53

SharePoint 2010 UX


13/53

SP2010 UX Overview


14/53


15/53


16/53

Master Page Enhancements

Can be applied to Application pages Pages with _layouts in the URL

In 2007 this meant creating a Theme or even

worse customizing the Application.master

Some pages still reference Simple.master likelogin and errors

What does this mean to Branders?


17/53

OOTB Master Pages


18/53

Master Page applied to _layouts


19/53

Web Standards Enhancements Web Content Accessibility Guidelines (WCAG) 2

Cross-browser support: IE, Firefox, Safari

NO IE6

Less HTML Tables

CSS Sprites Better caching for


20/53

Browsers in 2010Level 1 Experience

Windows XP, Windows Vista, Windows Server 2003, Windows Server

Internet Explorer 7, Internet Explorer 8, Mozilla Firefox 3.5

Windows 7, Windows Server 2008 R2

Internet Explorer 8 (32-bit), Firefox 3.5


21/53

Browsers in 2010Level 2 Experience

Apple Mac OS X Snow Leopard

App e Sa ar 4.x, Moz a F re ox 3.5

Windows XP, Windows Vista, Windows Server 2003, Windows Server

2008

Internet Explorer 7, Internet Explorer 8 (64-bit)

Windows 7, Windows Server 2008 R2

Internet Explorer 8 (64-bit)

UNIX/Linux 8.1

re ox .


22/53

Navigation Enhancements

The AspMenu now has a Simple Renderingmode

Cleaner code based on HTML unordered lists

Can be styled to look the same as always

If this frightens you, turn off Simple Rendering

method and all your old CSS styling will work


23/53


24/53

Simple Rendering Mode HTML

=" - "

Heading

Item

< >


25/53

New Theming Infrastructure

SharePoint 2007 Themes Were hard to build

Only worked with default.master


26/53

SharePoint 2010 Themes Colors (including shading images) + fonts in open XML

format

Can be created and adjusted by site owners in their

browser!

CSS has comments in the markup that tell SharePoint whatcolors and fonts to replace

Can apply to your custom branding if you use thecomments / themeable folder

/* [Re laceColor(themeColor:"Li ht1")] */

background-color:#fff;


27/53

SharePoint 2010 Themes


28/53


29/53

Wiki Pages

Tagging and Ratings Team Sites

Easy page editing / linking

n erpr se rep aces o a ora on or a

Wiki pages + Publishing

Page Layouts, Workflows, Master pages,caching, etc


30/53

Wiki Pages


31/53

The Ribbon

Contextual user interface Can have fixed osition or floatin

You can add and remove buttons easily


32/53

Status Bar / Notification Area

Status bar Below the ribbon

Displays color coded messages

Notification Area

ppears on e r g s e op Messages show for 5 seconds

Can be extended with Server or client code


33/53

Status Bar / Notification Area


34/53

Dialog Framework

Often used to add and edit items

Reduces number of a e refreshes

Dragable, Resizeable

Custom Master Page applies to both the site and

hide elements of the Master Page with the CSS -


35/53

Dialog Framework


36/53

Visual Upgrade

SharePoint 2007 / 3.0 Styles

Existing master pages & page layouts retained

Only a temporary solution

Remove 2007 controls

Add Ribbon

Add 2010 controls

Use 2010 Simple Navigation

Adjust CSS

More info: http://bit.ly/3xapTl


37/53


38/53

Other Awesomeness

Silverlight

Silverlight web parts allows easy Silverlight

Client Object Model

programmatically

Filter based on page fields

ommon ew e s


39/53

Other Awesomeness

Multi-lingual User Interface (MUI)

Alternate languages for various UI elements

Enabled once Language Packs are installed

Asset Library optimized for digital assets

e a e ar ver g v eo p ayer Media Field Control

Media in Content Query Web Part


40/53

SharePoint Designer 2010

Not sold in stores

Made in Redmond

Beware of imitators

SharePoint Designer

www.microsoft.com/spd SPD 2010 Beta -

http://bit.ly/7G9rCY


41/53

SharePoint Designer 2010 Still very affordable

Can be more restricted by Admins

New Ribbon UI

Can create Lists, pages, sites, content types, site columns Other features

Reusable workflows

Business data sources


42/53


43/53


44/53

Approaches to Branding in SP2010 Low Effort

Use the out of the box branding

V4.master, N g tAn Day.master, OOTB T emes

Medium Effort

Create Alternate CSS

Hi h Effort

Custom Master Pages, Page Layouts, custom CSS

Good for ublic internet sites, em lo ee ortals, artner

extranets, etc.


45/53


46/53

Recreating in Your Environment

Create a theme with Office and import intoSharePoint and apply it to the site

Create a wide header graphic

A l header with Alternate CSS Add a logo by setting the site icon


47/53

Can I upgrade my branding?


48/53

Answer!!!

Definitely without a doubt with somework

Visual Upgrade

Custom themes?

Have you ear a out t e new t eme engine?


49/53

Converting Existing Master Pages Remove 2007 controls

Publishing Console, Site Actions, Login

Stick it to the top of the page if you want

Content

CSS: body { overflow: hidden; }

SPPageManager, ScriptManager, ScriptLink

More info: http://bit.ly/3xapTl


50/53

Converting Existing Master Pages Use 2010 Simple Navigation


51/53

Starting a New SharePoint 2010 Master

The 2007 term Minimal Master Page has beenreplaced with Starter Master Page

M SharePoint Server 2010 and SharePointFoundation 2010 Starter Master Pages:

htt ://startermaster a es.code lex.com/


52/53

Starter Master Page


53/53

Contact Information Blog:

http://blog.drisgill.com

http://www.rossonmoss.com

Twitter:

ttp: tw tter.com r sg

http://twitter.com/johnrossjr

ma

randy @ sharepoint911.com

.

SPTechCon - Introduction to Share Point 2010 Branding

Documents

Transcript of SPTechCon - Introduction to Share Point 2010 Branding