1. Extreme Makeover: SharePoint 2013 Edition 801-555-1212

2. ITG - Brad Wilcox Sr. Consultant at ITG MS SharePoint Dev Certified Freaking Awesome http://www.itgsharepoint.com

3. ITG - Josef Nielsen VP of Engineering at ITG President of UG Uber-Nerd Amateur Gunsmith Chef Previous Incarnations: News Editor (newspaper), X-ray Technician, Professional Caterer, Chiropractic Assistant Twitter @EchefJosef Blog http://echef.chaosfarm.nethttp://echef.chaosfarm.net http://www.itgsharepoint.com

4. Overview Branding Sites HTML MasterPages Custom MasterPages Publishing Features The Page Content Type Page Layouts Managed Metadata Navigation Setup Use Responsive Design (Mobile Views) Why Responsive How it is done

5. SharePoint 2013 Design Manager 1.Design Manager is a publishing feature that is available in publishing sites in both SharePoint Server 2013 and Office 365. 2.You can create a visual design using only HTML and CSS, and then upload that design into SharePoint (using any HTML Editor).

6. What is an HTML MasterPage? With Design Manager, you can convert an.html file into a SharePoint 2013 master page, a.master file. After the conversion, the HTML file and master page are associated, so that when you edit and save the HTML file, the changes are synced to the associated master page. http://msdn.microsoft.com/en-us/library/jj822370.aspx#Prepare

7. 2 Choices for HTML MasterPage Design: Mockup HTML page with CSS / HTML / Javascript and convert to Masterpage. Create a Minimal master page that renders all the base controls needed for a SharePoint page to load. Also creates a minimal html master page.

8. Steps Using the Design Manager: 1.Mockup HTML Pages 2.Map design folder to the Master page gallery 3.Upload Design Files 4.Convert HTML file to a Master Page 5.Preview the Master Page and fix issues 6.Add any desired SharePoint snippets http://msdn.microsoft.com/en-us/library/jj822363.aspx

9. HTML Page Preparation Make sure your HTML file is XML- compliant. Get rid of any Form tags. Don't put blocks in the tag. These styles are removed during conversion. Instead, link from your HTML file to an external CSS file. Be cautious about applying styles to general HTML tags like,, and. Be prepared for Navigation changes for the Sharepoint Nav Add ms-design-css-conversion="no" to the tag if you're using a web font. http://msdn.microsoft.com/en-us/library/jj822370.aspx#Prepare

10. Auto Generated Tags: SharePoint namespace registration The tag ("SharePoint markup") provides a line registering a SharePoint namespace. The and ("Comment start" and "comment end") tags are ignored during the conversion process. The and ("Preview start" and "preview end") tags surround a section of HTML code that you shouldn't edit because this section affects only the design-time preview. The and ("markup start" and "markup end") tags denote the beginning and end of a SharePoint control or a snippet.

11. Snippets: SharePoint Controls Custom ASP.NET Markup Search Box Example…

12. What happens if I want to edit the MasterPage directly? The syncing goes in one direction only. Changes to the HTML master page are synced to the associated.master file, but if you choose to edit the.master file directly the changes are not synced to the HTML file. If you have a pair of associated files (HTML and.master) and you edit the.master file without breaking the association, the changes to the.master file will be saved, but you can't check in or publish the.master file, so those changes are not saved in a meaningful way. Any changes to the HTML file override the.master file. If you check in or publish the HTML file, the HTML file changes override any changes that were made to the.master file. The changes to the.master file are lost. http://msdn.microsoft.com/en-us/library/jj822370.aspx#Prepare

13. HTML MasterPages Pros No custom coding through Visual Studio Snippets make for easy SharePoint controls Packages can be downloaded and uploaded to any site collection. Cons Scaling across hundred of sites Restructuring a page (i.e. Ribbon) Only works with Publishing features

14. HTML MasterPages - Demo The HTML Creating the MasterPage Adding SharePoint Elements Other Design Manager Features

15. Classic MasterPages Pros Power Performance (Sever and Client) Flexibility Cons Steep Learning Curve More Work Easier to Break

16. Classic MasterPages - Demo The minimal.master From HTML to MasterPage in 5 minutes The role of Page Controls

17. Publishing Features The Page Content Type Page Template Associations Additional Site Settings tabs Managed Navigation

18. Publishing Features – Content Types Page Extending Page

19. Publishing Features – Page Layouts Associating a Content Type to a Page Layout Fields Editor View Security Trimming Controls Web Part Zones Publishing content controls

20. Publishing Features - Demo Extending “Page” Creating and associating a Page Layout

21. Publishing Features – Managed Navigation 1. Setup Navigation enabled term sets in Managed Metadata Service 2. Go to Site > Site Settings > Navigation 3. Select Managed Navigation for Header or Side Bar. 4. Select the term set and click save.

22. Publishing Features – Managed Navigation Pros: No Visual Studio coding Uses a global service available across the farm and not a list or set of lists on a single site. Quick Cons Only works with Publishing Features. Not as customizable – flyouts, sub menus, sites with sub sets of the same menus, etc.

23. Responsive Design – Why? One size fits all Simpler and easier to use than multiple sites Does not rely on Variations Enables targeting of content via design to mobile platforms (iPage, tablets, smartphones, netBooks, etc)

24. Responsive Design – What Browsers Desktop (old to new IE, Firefox, Chrome, Safari, Opera) Laptop (same as desktop) Tablet (similar to desktop, but generally newer) Phone (Opera-based, Firefox, Safari) Primary Tools CSS3 Media Queries Columns and Gutters Stackable Containers (think WPF)

25. Responsive Design - How Mobile Implications – Performance Media Queries Alternate Images Less content (hidden or modified) Positions Boundary sizes

26. Responsive Design - Demo How it works Making changes

27. Q&A