Branding in SharePoint 2013. #SPcincy2013 on Twitter Open wireless access is available. Feel free to Tweet (#SPcincy2013) and

Matthew W. TallmanDavid Ginn

Branding in SharePoint 2013

#SPcincy2013 on Twitterwww.sharepointcincy.com

• Open wireless access is available.

• Feel free to Tweet (#SPcincy2013) and blog during the session.

Thanks to our Platinum Sponsors



IntroductionsMatthew W. TallmanPrincipal Consultant at Cardinal SolutionsTwitter - @mwtallmanBlog – http://thesharedcontext.wordpress.comEmail – [email protected]

David GinnPrincipal Consultant at Cardinal SolutionsTwitter - @DavidMGinnEmail – [email protected]


Agenda1. Design Overview in SharePoint 2013

2. Design Manager Introduction and Techniques

3. Design Package Best Practices

4. Device Channel Overview

5. Responsive Design in SharePoint 2013

6. Overview of Composed Looks

7. Branding in SharePoint 2013 Apps


Design OverviewDesigning for SharePoint 2013 has brought about a fundamental change and approach.

• Team Centered Design

• HTML 5 Support

• CSS3 Support

• Updated Page Model

• Search Driven Content

• Device Channels


Demo


Design Manager


Design Manager – Import HTMLDesign Manager helps designers to import HTML easily. However, here are some good tips for importing clean HTML.

• XHTML Compliant

• Good HTML Structure

• Unsupported Tags

• Validate HTML


Design Manager – The ProcessDesign Manager is the central location for applying a custom design to SharePoint.

• Enable Publishing

• Create Minimal Master Page

• Map Drive to Upload Files

• Preview Design and Utilize Snippets

• Create Page Layout

• Publish Design


Design Manager – Advanced OptionsDesign Manager is the central location for applying a custom design to SharePoint.

• Disassociate a Design File

• Setting a Preview Page

• Display Templates


Demo


Design Package


Design PackageDesign Manager manages the deployment of a design through the use of a solution package.

• Importing a Package

• Creating a Package

• Design Package Do’s and Don’ts

• Including Search Configuration


Demo


Device Channels


Device Channels - CreatingThrough the use of device channels, SharePoint can accommodate a more responsive design.

• When To Use

• Device Channel Alias

• Device Inclusion Rules


Device Channels - PublishingThrough the use of device channels, SharePoint can accommodate a more responsive design.

• Apply Device Channel by Master Page

• Understanding the Order of Device Channels

• Removing a Device Channel


Demo


Adapts to Screen Resolution Media Queries CSS Grid Layout and Frameworks

What is Responsive Design?

http://twitter.github.io/bootstrap/


Responsive Design Demo



Browser Support Device Support Type of content

www.sharepointcincy.com

Considerations for Responsive Design in SharePoint

http://responsivesharepoint.codeplex.com/ Bootstrap Starter Master Page Page Layouts


Responsive SharePoint

http://responsivesharepoint.codeplex.com/


Responsive SharePoint Demo

Master Page Composed Looks Provider/Autohosted App SharePoint Hosted App


SharePoint App UX

Master Page Default CSS File

◦ http://msdn.microsoft.com/en-us/library/jj220046.aspx

Defaultcss.ashx


Master Page

http://msdn.microsoft.com/en-us/library/jj220046.aspx


Evolution of Themes


Composed Looks

Palette File Font File CSS Substitutions


Composed Look Contents

UX Guidelines Client Chrome Control Full Screen pages vs. Client Web Part page


Provider/Autohosted App

Token Persistence◦ Cookie◦ Single Page Applications (SPAs)


App Challenges

App.master Full Page View Client Web Part


SharePoint Hosted App

Responsive Frameworks◦ Bootstrap◦ Foundation

Responsive SharePoint on Codeplex MSDN Client Chrome Control MSDN App UX Guidelines


Resources

http://twitter.github.io/bootstrap/index.html

http://foundation.zurb.com/



http://msdn.microsoft.com/en-us/library/fp179916.aspx



•Remember to visit the exhibit hall.

•Get to know your user groups to find out about local activities and events in your area.

•Make sure you stick around for the closing session and turn in your business cards to be eligible for the prize raffles.



Please Support our Sponsors!

Documents

Branding in SharePoint 2013. #SPcincy2013 on Twitter Open wireless access is available. Feel free to Tweet (#SPcincy2013) and