The 2013 Design Manager
From HTML to SharePoint

Eric Overfield
SharePoint Advocate and Enthusiast
PixelMill
Introduction – Eric Overfield
 Founder and SharePoint Branding/UI Lead, PixelMill
 Speaker, Teacher, Advocate
 Author, ...
Agenda

 Why Design Manager?

 Display Templates

 Accessing Design Manager

 Device Channels

 Import a Site Design
...
Why Design
Manager?

@EricOverfield - pixelmill.com
Tools Already Exist

Design Tools not SP Focus
No Design View – Help!

@EricOverfield - pixelmill.com
@EricOverfield - pixelmill.com
Tools Already Exist

Design Tools not SP Focus
No Design View – Help!

XSLT? What is That?

@EricOverfield - pixelmill.com
@EricOverfield - pixelmill.com
Tools Already Exist

Design Tools not SP Focus
No Design View – Help!

XSLT? What is That?
Open the Door to Designers
@Eri...
Agenda

 Why Design Manager?

 Display Templates

 Accessing Design Manager

 Device Channels

 Import a Site Design
...
Design Manager
 Publishing Infrastructure Required

 Sorry Collaboration Sites
 Unless you enable Publishing

 Treat B...
Site Collection Level Feature

Site Level Feature

@EricOverfield - pixelmill.com
Access Your Design Files

Using WebDAV
Mac/PC – Dreamweaver, Notepad, Your Choice
@EricOverfield - pixelmill.com
Access Design Manager
Demo

@EricOverfield - pixelmill.com
Agenda

 Why Design Manager?

 Display Templates

 Accessing Design Manager

 Device Channels

 Import a Site Design
...
Import a Site Design
 Import a HTML Prototype Directly in SharePoint
 Some assembly required

@EricOverfield - pixelmill...
HTML Master Page
 HTML Prototype must by XML Compliant

@EricOverfield - pixelmill.com
XML Compliancy error

@EricOverfield - pixelmill.com
@EricOverfield - pixelmill.com
HTML Master Page
 HTML Prototype must by XML Compliant
 Add SharePoint functionality with Snippet Manager

@EricOverfiel...
@EricOverfield - pixelmill.com
HTML Master Page
 HTML Prototype must by XML Compliant

 Add SharePoint functionality with Snippet Manager
 Plan your p...
@EricOverfield - pixelmill.com
HTML Master Page
 HTML Prototype must by XML Compliant

 Add SharePoint functionality with Snippet Manager
 Plan your p...
HTML Master Page
Demo

@EricOverfield - pixelmill.com
Agenda

 Why Design Manager?

 Display Templates

 Accessing Design Manager

 Device Channels

 Import a Site Design
...
Page Layouts
 Controls layout of main content

 Many out the of box layouts
 Also uses Snippets and Snippet Manager

 ...
Page Layout
Demo

@EricOverfield - pixelmill.com
Agenda

 Why Design Manager?

 Display Templates

 Accessing Design Manager

 Device Channels

 Import a Site Design
...
Display Templates
 The center of displaying SharePoint 2013 Search

 Replaces XSLT!
 Control Templates
 Item Templates...
@EricOverfield - pixelmill.com
@EricOverfield - pixelmill.com
Display Templates
Demo

@EricOverfield - pixelmill.com
Agenda

 Why Design Manager?

 Display Templates

 Accessing Design Manager

 Device Channels

 Import a Site Design
...
Device Channels
 Interfaces tailored and mapped to specific device(s)

 Based on User Agent

@EricOverfield - pixelmill....
Screen shot of creating a device channel
and maping to a master page

@EricOverfield - pixelmill.com
Screen shot of creating a device channel
and maping to a master page

@EricOverfield - pixelmill.com
Agenda

 Why Design Manager?

 Display Templates

 Accessing Design Manager

 Device Channels

 Import a Site Design
...
Design Packages
 Design Manager will package your custom branding

 Redeployable, even to another farm
 Creates a wsp (...
Design Package
Demo

@EricOverfield - pixelmill.com
Agenda

 Why Design Manager?

 Display Templates

 Accessing Design Manager

 Device Channels

 Import a Site Design
...
Publish and Apply
 Must still publish a Major Version

 For Master Pages and Page Layouts
 OOTB – Simplified Publishing...
Publish and Apply
Demo

@EricOverfield - pixelmill.com
Embrace Design Manager

It can be your friend
If you let it
@EricOverfield - pixelmill.com
The 2013 Design Manager
From HTML to SharePoint

Thank You
Eric Overfield
@EricOverfield
ericoverfield.com
eoverfield@pixe...
Upcoming SlideShare
Loading in...5
×

The 2013 Design Manager - From HTML to SharePoint

1,071

Published on

The biggest change to Branding SharePoint with SharePoint 2013 is undoubtedly the Design Manager but how do you use it and how will it help? In this session we will open up Design Manager and see how it works. We will look at how we can build prototypes in any web design tool, even Notepad, and import our design “quickly” and “painlessly” into SharePoint 2013. Ok, not so quick and not so painless, but we learn what’s great and what may need a few workarounds. We will learn what snippets are and how they enable us to add “SharePoint” into our designs. Come see how you will leverage Design Manager in your SharePoint endeavors.

Published in: Education
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,071
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • Slides will be available from blog and twitterIn-depth look a SharePoint 2013 Design ManagerMeat will be in the demos
  • Will make available on blog and twitter (slideshare.net), so if you remember one of those then you can always review everything we discuss
  • Web Distributed Authoring and Versioning
  • Access Design ManagerMap a network drive
  • Review a prototypeLook for snippet commentsImportAdd logo snippetMove main placeholder
  • Create a page layoutMove to a new directoryMove layout from Master PageReplace area with a WPZ snippet
  • Screenshot from http://sharepoint.microsoft.com/blog/Pages/BlogPost.aspx?pID=1041
  • Screenshot from http://msdn.microsoft.com/en-us/library/jj945138.aspx
  • Show search results pageThen find display templatesCreate new control templateEdit control templateMight be too much
  • Allow for one interface for all desktops and another for most tablets let's say.Only 10 device channels per site collection, but do you really want to maintain 10 MP’s?
  • Quickly create a design package
  • Screenshot of composed looks to right
  • Quickly create a design package
  • Thank You!Don’t forget to check out my blog where you can download this presentation or the recording.Easiest way to get to the material I referenced
  • The 2013 Design Manager - From HTML to SharePoint

    1. 1. The 2013 Design Manager From HTML to SharePoint Eric Overfield SharePoint Advocate and Enthusiast PixelMill
    2. 2. Introduction – Eric Overfield  Founder and SharePoint Branding/UI Lead, PixelMill  Speaker, Teacher, Advocate  Author, SharePoint Community Organizer  Located in Davis, CA Co-author: “Pro SharePoint 2013 Branding and Responsive Web Development” (Apress – June 12th, 2013) Order Your Copy http://pxml.ly/zsqykd Co-author: “Black Magic Solutions for White Hat SharePoint” (August, 2013) ericoverfield.com @EricOverfield
    3. 3. Agenda  Why Design Manager?  Display Templates  Accessing Design Manager  Device Channels  Import a Site Design  Design Packages  Page Layouts  Publish and Apply @EricOverfield - pixelmill.com
    4. 4. Why Design Manager? @EricOverfield - pixelmill.com
    5. 5. Tools Already Exist Design Tools not SP Focus No Design View – Help! @EricOverfield - pixelmill.com
    6. 6. @EricOverfield - pixelmill.com
    7. 7. Tools Already Exist Design Tools not SP Focus No Design View – Help! XSLT? What is That? @EricOverfield - pixelmill.com
    8. 8. @EricOverfield - pixelmill.com
    9. 9. Tools Already Exist Design Tools not SP Focus No Design View – Help! XSLT? What is That? Open the Door to Designers @EricOverfield - pixelmill.com
    10. 10. Agenda  Why Design Manager?  Display Templates  Accessing Design Manager  Device Channels  Import a Site Design  Design Packages  Page Layouts  Publish and Apply @EricOverfield - pixelmill.com
    11. 11. Design Manager  Publishing Infrastructure Required  Sorry Collaboration Sites  Unless you enable Publishing  Treat Branding Assets as Local Files! @EricOverfield - pixelmill.com
    12. 12. Site Collection Level Feature Site Level Feature @EricOverfield - pixelmill.com
    13. 13. Access Your Design Files Using WebDAV Mac/PC – Dreamweaver, Notepad, Your Choice @EricOverfield - pixelmill.com
    14. 14. Access Design Manager Demo @EricOverfield - pixelmill.com
    15. 15. Agenda  Why Design Manager?  Display Templates  Accessing Design Manager  Device Channels  Import a Site Design  Design Packages  Page Layouts  Publish and Apply @EricOverfield - pixelmill.com
    16. 16. Import a Site Design  Import a HTML Prototype Directly in SharePoint  Some assembly required @EricOverfield - pixelmill.com
    17. 17. HTML Master Page  HTML Prototype must by XML Compliant @EricOverfield - pixelmill.com
    18. 18. XML Compliancy error @EricOverfield - pixelmill.com
    19. 19. @EricOverfield - pixelmill.com
    20. 20. HTML Master Page  HTML Prototype must by XML Compliant  Add SharePoint functionality with Snippet Manager @EricOverfield - pixelmill.com
    21. 21. @EricOverfield - pixelmill.com
    22. 22. HTML Master Page  HTML Prototype must by XML Compliant  Add SharePoint functionality with Snippet Manager  Plan your prototype with Design Manager in mind @EricOverfield - pixelmill.com
    23. 23. @EricOverfield - pixelmill.com
    24. 24. HTML Master Page  HTML Prototype must by XML Compliant  Add SharePoint functionality with Snippet Manager  Plan your prototype with Design Manager in mind  Don’t touch the .master! @EricOverfield - pixelmill.com
    25. 25. HTML Master Page Demo @EricOverfield - pixelmill.com
    26. 26. Agenda  Why Design Manager?  Display Templates  Accessing Design Manager  Device Channels  Import a Site Design  Design Packages  Page Layouts  Publish and Apply @EricOverfield - pixelmill.com
    27. 27. Page Layouts  Controls layout of main content  Many out the of box layouts  Also uses Snippets and Snippet Manager  With Design Manage, associated with a Master Page  Don’t touch the .aspx file! @EricOverfield - pixelmill.com
    28. 28. Page Layout Demo @EricOverfield - pixelmill.com
    29. 29. Agenda  Why Design Manager?  Display Templates  Accessing Design Manager  Device Channels  Import a Site Design  Design Packages  Page Layouts  Publish and Apply @EricOverfield - pixelmill.com
    30. 30. Display Templates  The center of displaying SharePoint 2013 Search  Replaces XSLT!  Control Templates  Item Templates  Do not touch the JavaScript! @EricOverfield - pixelmill.com
    31. 31. @EricOverfield - pixelmill.com
    32. 32. @EricOverfield - pixelmill.com
    33. 33. Display Templates Demo @EricOverfield - pixelmill.com
    34. 34. Agenda  Why Design Manager?  Display Templates  Accessing Design Manager  Device Channels  Import a Site Design  Design Packages  Page Layouts  Publish and Apply @EricOverfield - pixelmill.com
    35. 35. Device Channels  Interfaces tailored and mapped to specific device(s)  Based on User Agent @EricOverfield - pixelmill.com
    36. 36. Screen shot of creating a device channel and maping to a master page @EricOverfield - pixelmill.com
    37. 37. Screen shot of creating a device channel and maping to a master page @EricOverfield - pixelmill.com
    38. 38. Agenda  Why Design Manager?  Display Templates  Accessing Design Manager  Device Channels  Import a Site Design  Design Packages  Page Layouts  Publish and Apply @EricOverfield - pixelmill.com
    39. 39. Design Packages  Design Manager will package your custom branding  Redeployable, even to another farm  Creates a wsp (i.e. a sandboxed solution – really? – Yup)  Not ready for primetime @EricOverfield - pixelmill.com
    40. 40. Design Package Demo @EricOverfield - pixelmill.com
    41. 41. Agenda  Why Design Manager?  Display Templates  Accessing Design Manager  Device Channels  Import a Site Design  Design Packages  Page Layouts  Publish and Apply @EricOverfield - pixelmill.com
    42. 42. Publish and Apply  Must still publish a Major Version  For Master Pages and Page Layouts  OOTB – Simplified Publishing Workflow  Use Design Manager or Master Page Gallery @EricOverfield - pixelmill.com
    43. 43. Publish and Apply Demo @EricOverfield - pixelmill.com
    44. 44. Embrace Design Manager It can be your friend If you let it @EricOverfield - pixelmill.com
    45. 45. The 2013 Design Manager From HTML to SharePoint Thank You Eric Overfield @EricOverfield ericoverfield.com eoverfield@pixelmill.com

    ×