Becoming a SharePoint Design Ninja

416-888-7777 kanwal@khipple.com

Kanwal KhippleBrightStarr

About Me• Kanwal Khipple• BrightStarr.com• Passionate about designing

and optimizing SharePoint sites

Twitter @kkhipple

@sharepointbuzz

About You

The SharePoint Person in your company

Designer Experience (100)• HTML• CSS• SharePoint Designer 2010

Developer Experience (100)• Visual Studio• .NET

416-888-7777 kanwal@khipple.com 4

50% Of Top Intranet’s Use SharePointSOURCE: NIELSEN NORMAN GROUP

Secrets to Successful Branding

Agenda

• Why Brand SharePoint?• Tools for Branding• Advanced Tips & Tricks• Secrets to Successful Branding!

WHAT IS BRANDING?

SharePoint Branding Overview

Branding is more than adding a pretty header to your site and making it another color besides SharePoint blue

Ice Berg Principle

WHAT’S NEWSharePoint 2010

WCM Features• Status Bar• Themes• Server Ribbon• Tagging & Rating• Client OM

Accessibility Improvements

• Cross-browser support• Built-in support for keyboard navigation• WCAG 2.0 Level AA• Proper use of heading structures (H1, DIV, SPAN, etc.)

Browser Resolutions

Browser Market Share

Supported Browsers• Internet Explorer 9– Coming in SharePoint 2010 Service Pack 1

• Internet Explorer 7-8 (32-bit)– IE Dev Toolbar (embedded in IE8+)

• Mozilla Firefox 3.6– FireBug (addon to Firefox)

• Safari 4.04• Google Chrome (Service Pack 1)– Coming in SharePoint 2010 Service Pack 1

http://spbuzz.it/sp2010browsers

Here’s What You Get Out of the Box

Make It Not Look Like SharePointConsistent User Experience

NEW INTERFACEDEMO

What’s Involved?

• Information Architecture• Design• Wireframes• Branding• Page Layouts• Master Pages• HTML, CSS, JavaScript

Customization OptionsChange Site Logo, Format, Parts

Change Colors, Backgrounds, Fonts Edit CSS files

Change Page Layout and ContentEdit Master Pages

Edit Page Templates (SharePoint Server only)

Share Your Customization with Others Build Themes and Site Definitions

easyBrowser

SharePoint Designer

SPD + Visual Studio

complex

What Do Your Users Want?

http://spbuzz.it/sptopsiteshttp://spbuzz.it/bsdesigns

Agenda

Wireframes1. Paper Prototyping2. Collaborative Wireframes

http://spbuzz.it/bmockupsdemo

BALSAMIQ MOCKUPDEMO

Wireframes• Microsoft Visio Wireframe– http://spbuzz.it/sp2007visiotemplate

• Adobe PDF Wireframe– http://spbuzz.it/sp2007pdftemplate

• Photoshop PSD file– http://spbuzz.it/sp2007psdtemplate – http://spbuzz.it/sp2010psdtemplate

• Balsamiq Mockups wireframe– http://spbuzz.it/sp2010bmockupstemplate

MASTER PAGES & PAGE LAYOUTSSharePoint Terminology

What’s new with Master Pages• Placeholders the same between content and application pages• Master Page changes apply to Application (_layouts) pages• Greater use of DIV/CSS layouts -> Fewer Tables• XHTML Strict document type• Much better support for Accessibility• Cross-Browser support

What’s the Same?What has not changed from SharePoint 2007• Complex nested page structures• Lots and lots of styles• Mostly same list of content placeholders• Inconsistent Web Part markup injection• Same default and custom master page tokens

Custom Master Pages:• Copy V4.master and tweak• Start with Minimal or the *Starter* Master Page

Master Pages• Team site master page• User content pages (lists\content pages\etc)• _layouts pages (site settings, etc)

v4.master

• For app experiences, like Search or Office Web Applications• If you do not need site navigation, do not have a ribbon• If your app needs the space

minimal.master

• For error pages or login pages• Not customizable, but pages can be replacedsimple.master

• Show site using legacy interface• No Ribbon, no fluencydefault.master

Master Pages + Page Layouts

Master Page

Page Layout

Content Placeholders<asp:ContentPlaceholder ID="PlaceHolderLeftNavBar"> runat="server" />

Content PlaceholdersContent Placeholder Description

PlaceHolderAdditionalPageHeadUsed to add extra components such as JavaScript, Jscript, and Cascading Style Sheets in the head section of the page.

PlaceHolderBodyAreaClass The class of the body area. This placeholder is no longer used in SharePoint 2010.

PlaceHolderBodyLeftBorderThis placeholder does not appear as part of the interface but must be present for backward compatibility.

PlaceHolderBodyRightMarginThis placeholder does not appear as part of the interface but must be present for backward compatibility.

PlaceHolderCalendarNavigator The date picker used when a calendar is visible on the page.

http://spbuzz.it/sp2010dcph

MASTER PAGES & PAGE LAYOUTSDEMO

THEMESSharePoint Terminology

Themes

• 12 colors, 2 Fonts• Control look and feel of your site• Uses Office theme (.thmx files)• Create theme via PowerPoint

SHAREPOINT 2010 THEMESDEMO

Agenda

Advanced Tips & Tricks

Performance Goals• Reduce page weight

Techniques• Output Caching• Blob Caching• CSS Sprites • Consolidate JS and CSS

files • Cache JS, CSS and

image files in browser • Minification of JS and

CSS• Anonymous access for

CSS, JS and image files

Tools• Yslow• Fiddler• Wireshark

During Visual Upgrade, show content based on UI version

<Sharepoint:UIVersionedContent ID="myContentIDv3" runat="server" UIVersion="3"> <ContentTemplate> <p>This content displays only when UIVersion=3.</p> </ContentTemplate></SharePoint:UIVersionedContent>

<Sharepoint:UIVersionedContent ID=" myContentIDv4" runat="server" UIVersion="4"> <ContentTemplate> <p>This content displays only when UIVersion=4.</p> </ContentTemplate> </SharePoint:UIVersionedContent>

Remove specific content from Search Results<div class=“footer noindex”/> </div>

Security controlled content

<Sharepoint:SPSecurityTrimmedControl runat="server" Permissions="ManageWeb"> </Sharepoint:SPSecurityTrimmedControl>

http://spbuzz.it/msdnspbasepermissions

Handling Legacy Browsers

Warn users when they are using an unsupported browser

<SharePoint:WarnOnUnsupportedBrowsers runat="server"/>http://spbuzz.it/ie6-upgrade-warning

Hide Design Elements from Dialog Boxes

Add s4-notdlg for HTML elements that you don’t want to show in the dialog boxes

Easily show a Favicon in SharePoint 2010

• Easily show a Favicon in SharePoint 2010

SharePoint 2007 approach<link rel=“shortcut icon” href=“/Style Library/images/favicon.ico”/>

SharePoint 2010 approach<SharePoint:SPShortcutIcon runat=“server” IconUrl=“/Style Library/images/favicon.ico”/>

Custom Ribbon Fonts & Styles

.ms-rteStyle-BlueBackground { -ms-name:Blue Background; background-color: blue; color: white;}

H1.ms-rteElement-H1Blue { -ms-name:Blue Heading 1; color: blue;}

Float Ribbon

1. body { overflow:auto; }2. Remove scroll="no" from the <body> tag3. body #s4-workspace {

left:0;overflow:visible;position:relative;}

4. html.ms-dialog body #s4-workspace {overflow-x:auto;overflow-y:scroll;}

Handling the Name.dll ActiveX Control

You can turn off the message on the General Settings page of the Manage Web Applications section of Central Administration. Set Enable Person Name smart tag and Online Status for members to No.

http://spbuzz.it/mskb931509

Design Considerations• Identify dependencies

– Package common components separately• Be easy on the portal home page

– Use sandbox to limit resource usage– Avoid referencing the items collection directly– Avoid excessive looping constructs

• Avoid the use of custom site definitions– Utilize site templates– Utilize feature templates

• Consider upgrades– Understand the effects of upgrading the feature– Anticipate the effect of upgrading to v Next

Want more?

• Content Query Web Part• Data view web part in SharePoint Designer• XSLT templates• JQuery • SPServices• ClientOM

Tools for Branding?

Take Baby Steps

Ice Berg Principle

Professional SharePoint 2010 Branding and User Interface Design

Provides expert tips, techniques, and insights from the author team of SharePoint 2010 and branding experts

• CSS• master pages• page layouts• SharePoint themes• XSLT• jQuery• Silverlight

http://spbuzz.it/prosp2010ui

Agenda

Secrets to Successful Branding

• Organize your content– End users are more likely to use search then navigation

• Follow Web Standards– Optimize and accessibility and standards

• Listen To Your Users

http://spbuzz.it/iYKom7

Announcements

• TSPBUG (the “B” for Business) – http://www.meetup.com/tspbug

• SharePoint Saturday The Conference – http://www.spstc.org

http://www.kanwalkhipple.com

@kkhipple @sharepointbuzz

Your Feedback Is Very Important To Me

SharePoint BrandingFrom START to FINISHThank you!

Becoming a SharePoint Design Ninja

Technology

Transcript of Becoming a SharePoint Design Ninja

Becoming a Note-Taking Ninja

Kawasaki Ninja

Tried & True Tactics for Becoming A YouTube Marketing Ninja by Manny Rivas

Becoming A DIGITAL CPA - Flagg Management Inc · Becoming a Digital Ninja CPA What We’ll Cover ---1. First impressions 2. Literacy 3. Recognizing Disruptive Technologies 4. Trends

Becoming an Email Ninja and staying at Inbox Zero

CloudKit 365 Webinar - Become a SharePoint Online Ninja

Becoming a SharePoint Chef: A Non-Culinary Calling

Becoming a Google Search Ninja

Becoming a search ninja.. First. Know your enemy.

Becoming a ZFS Ninja

Ninja Multiplication - Weeblymathletes4agora.weebly.com/.../0/9620241/ninja-multiplication-workbook.pdf · Ninja Multiplication Multiplication Flash Cards Ninja Multiplication: Multiplying

Becoming a Google Search Ninja Derrick Waddell. How do I find to what I really need when there are 91 million results?

Excel ninja

Becoming a Hypnotic Influence Ninja - Transform Destiny

Becoming A Php Ninja

Becoming an inbox ninja * Inbox Overload.

Becoming a measurement ninja

NINJA ASSASSIN PRODUCT INFO SHEET - Atomosdownloads.atomos.com/ninja-assassin/ninja-assassin-product-info-sheet.pdf · NINJA ASSASSIN PRODUCT INFO SHEET - UPDATED SEPTEMBER 2015 ANAMORPHIC

OWNER’S GUIDE - Quench Essentials...Nutri Ninja | Ninja Blender Duo with Auto-iQ Technology Features: • Ninja Blade Technology • BPA Free Pitcher, Nutri Ninja® Cups and Lids

PowerPoint Presentation€¢ Microsoft Strategy • Why? • Demand for flexibility • Wireless network becoming main network ... • Hololens? • SharePoint Mobile App for Android,