Branding Internet facing web sites with SharePoint in the cloudRandy Drisgill & John RossSharePoint MVPsRackspace

SPC290

Manager-SP Branding & UX Team at Rackspace Author

SharePoint 2013 Branding & UI Design http://bit.ly/SP2013Branding

Professional SharePoint 2010 Branding http://bit.ly/sp2010-brandingbook

Blog: http://blog.drisgill.com

Twitter: http://twitter.com/Drisgill

Orlando, FL

Randy Drisgill

Technical Product Manager at Rackspace Author

SharePoint 2013 Branding & UI Design http://bit.ly/SP2013Branding

Professional SharePoint 2010 Branding http://bit.ly/sp2010-brandingbook

Blog: http://johnrossjr.wordpress.com/

Twitter: http://twitter.com/johnrossjr

Orlando, FL

John Ross

Intro to Branding Intro to SPO Public Sites Low Effort Branding Medium Effort Branding High Effort Branding Custom Code with Apps

What are we going to talk about?

Introduction to Branding

Started with ranchers branding their cattle Moved to being a symbol of quality Now a marketing term which describes the feeling and

emotions elicited by something Branding is why you use Kleenex® instead of tissue

and how someone can charge $2.00 for a cup of coffee

Branding through the ages

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

general look and feel of a corporate website.

Branding for SharePoint: Master pages, page layouts, CSS, web parts, images, etc.

Branding on the web

Approaches to BrandingSharePoint 2010

Full EffortCustom Master Pages, Page Layouts, XSLT

Medium EffortCustom CSS

Low EffortPage Editing & Themes

Full EffortCustom Master Pages, Page Layouts, XSLT

Medium EffortCSS

Low EffortPage Editing & Themes

Approaches to Branding SharePoint 2013

Full EffortCustom Master Pages, Page Layouts, Display Templates

Medium EffortDesign Manger for Publishing SitesCustom CSS & Background Images

Low EffortPage Editing & Composed Looks

Introduction to SPO & Public Sites

Small Business Plan (P Plan) Designed for up to 25 employees who want: One site collection for collaboration One Public web site automatically created at the root

Enterprise Plans (E Plans) Full access to create different types of site collections Can turn on the publishing features One Public web site automatically created at the root

What flavor of SharePoint comes with Office 365?

The one public facing website option you have with SharePoint Online http://yourname-public.sharepoint.com Or a custom domain name can be used

Similar to a SharePoint Server Publishing site but with several differences

A lot of the complexity is removed from SP to focus on just public facing website options

What is a SPO Public Site?

Site Settings menu options are focused on Public sites 25 Site Settings links for Public Sites vs. 63 Settings links for regular site

Includes new “Site” Ribbon menu Makes page editing and design a little easier

Includes a simple way to add custom CSS Only one generic mobile Device Channel Includes editable Header & Footer Elements that

persist across pages The ability to make the site Online or Offline No Content Query Web Part or Content Search Web

Part

What is different about SPO Public Sites?

Tour of a SPO Public Site

Randy Drisgill

Includes many powerful features… but… Geared for smaller brochure websites

Examples: Local Retail, Restaurant, Law Office, Medical Office, Realtor, Consulting

You can make almost any design work in SPO Public Sites (if you are willing to spend the time)

Less settings & control than a farm based install of SharePoint Probably not appropriate for large scale, dynamic, ecommerce, or highly scalable

sites

What kind of websites can you make?

Example SPO Public Sites

www.microsoftofficedemos.com

www.whymicrosoft.com

Randy’s Waffles

Simple BrandingUsing Composed Looks

Similar to Themes in SP2010 Very easy to change the look of your site SPO Public Site includes many looks geared

to small business 41 Looks vs. 18 Looks in standard SP sites

Composed Looks

Composed Looks

Pick a predefined Composed Look from: Settings > Change the Look

From there you can change: Background Image Colors Site Layout (or Master Page) Fonts

Composed Looks

Composed looks are NOT created with Office client Unlike SP2010 Themes

They are preconfigured from the Composed Looks Gallery

Custom Colors and Fonts are defined in XML “Theme” Files

Composed Looks

Composed Looks Gallery / Change the Look

Demo:Composed Looks

Randy Drisgill

Medium BrandingUsing the Design Manager

Ease of branding & design was a big feature in 2013

You can tell because the Design Manager is featured in the Site Actions drop down!

Available in SharePoint sites with Publishing activated and SPO Public Sites

Work with Master Pages for shell of you design

Work with Page Layouts for the page content formatting

Design Manager

SharePoint Designer is no longer the only choice Still available if you are most comfortable with it Warning: SharePoint Designer 2013 lacks the Design View

Map a drive to the Site > Master Page Gallery and edit away Configure and Troubleshoot Mapped Drives in O365 -

http://support.microsoft.com/kb/2616712

Use any tool you like to edit code Adobe Dreamweaver Microsoft Expression Web (Free – No longer being updated) Text editors like: Notepad++ Frontpage and Hotdog Pro? (Someone please try and let us know!)

Common Design Tools

Master Pages can now be edited in HTML Design Manager can create a new minimal master Design Manager can convert existing HTML designs to

functioning master pages Converted HTML file is associated to Master Page Every time you save the HTML file the Master Page

updates

HTML based Master Pages & Page Layouts

Used to add SP functionality to your Master Page Commented HTML code that you add to HTML Master

Page Navigation Breadcrumbs Search Box Title / Logo Sign In Web Parts Header & Footer Elements – (Only for Public Sites)

Snippet Gallery

HTML5 and CSS3 Responsive Design using

CSS3 Media Queries Display changes dynamically to a more

mobile friendly view at small sizes

Web Fonts Lobster 2 & Bitter Fonts from “G**gle

Fonts”

jQuery + FlowType Plugin Text that resizes with browser

Demo HTML Design

Demo:Design Manager

Randy Drisgill

Create HTML Design Map network drive to Master Page Gallery

Instructions and Troubleshooting: http://support.microsoft.com/kb/2616712

Add HTML, Images, & CSS Use Design Manager to convert to HTML Master

Page Edit HTML and add Snippets Customize CSS to change the look Publish all the files Apply the Master Page to the site

Overview of Steps

Check the DOCTYPE Conversion likes uppercase like <!DOCTYPE HTML>

Watch out for IE Hacks like <!--[if lt IE 8]> Conversion process gets confused

JavaScript embedded on page can be bad Conversion will sometimes comment out the code Include a separate JavaScript file instead

Watch out for HTTP & HTTPS references Authenticated SPO uses HTTPS Browser may ignore HTTP calls thinking they are insecure You can use protocol relative reference like: //domain.com/jquery.js

Don’t forget to Publish all your files Anonymous folks won’t be able to see them

HTML Master Page / SPO Gotchas

Advanced BrandingDoing Stuff the Old Fashioned Way

Use a Starter Master Page StarterMasterPages.CodePlex.Com

Steps similar to using Design Manager Create HTML Design Map network drive to Master Page Gallery

Instructions and Troubleshooting: http://support.microsoft.com/kb/2616712

Add starter master page, as well as images and CSS Add HTML to Starter Master Page – Arrange functionality with custom

HTML Instead of using Snippets - Add controls and move placeholders Customize CSS to change the look Publish all the files Apply the Master Page

Creating SP Branding Manually

Custom Code in SPOApps! Apps! Apps!

Self contained functionality web application Written in common languages like HTML,

JavaScript, & .NET connect to SP through REST and Client API’s

Enhance default SharePoint functionality or UI You can Apps full page or you can embed functionality on pages using App Parts

Developers can write their own Or find 3rd party Apps for SharePoint in the Office

Store Beware – Not all Apps work with SPO Public Sites / Anonymous users

What are Apps?

Bright Banner (Free) –Rotating banner with effects

Location Finder (Free and $9.99) – Mapping

Our Stock Price (Free) – Show current stock prices

Example Apps

Cloud = Running on other people's servers On-Prem has multiple meanings

Location Build of SP that isn't SPO

For more information:http://johnrossjr.wordpress.com/2014/02/25/sharepoint-on-premises-or-in-the-cloud-why-not-both

Cloud vs On-Prem

Should you use an SPO Public Site? Public Site Farm Install / On Prem

Need quick nice looking branding

Need highly stylized / complex branding

Migrating Existing SharePoint Branding

Cross-site Publishing & Catalogs

Custom Infrastructure Needs

Small-scale brochure site

Content Query or Search WP’s

Legend: Good Choice Better Choice

Lots of options for branding Internet-facing sites

No matter your skill level... Or requirements... There's great options! SharePoint Online Public Sites On-Prem w/ Azure or other options

What'd we talk about?

MySPCSponsored by

connect. reimagine. transform.

Evaluate sessionson MySPC using yourlaptop or mobile device:myspc.sharepointconference.com

© 2014 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.