Upload
tamsyn-green
View
213
Download
0
Tags:
Embed Size (px)
Citation preview
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.