Your SlideShare is downloading. ×
0
From HTML to SharePoint
Eric Overfield
SharePoint Advocate and Enthusiast
PixelMill
The 2013 Design Manager
Introduction – Eric Overfield
 Founder and SharePoint Branding/UI Lead, PixelMill
 Speaker, Teacher, Advocate
 Author, ...
Agenda
 Why Design Manager?
 Accessing Design Manager
 Import a Site Design
 Page Layouts
@EricOverfield - pixelmill.c...
Why Design
Manager?
@EricOverfield - pixelmill.com
Tools Already Exist
@EricOverfield - pixelmill.com
Design Tools not SP Focus
No Design View – Help!
@EricOverfield - pixelmill.com
Tools Already Exist
Design Tools not SP Focus
No Design View – Help!
@EricOverfield - pixelmill.com
XSLT? What is That?
@EricOverfield - pixelmill.com
Tools Already Exist
Design Tools not SP Focus
No Design View – Help!
XSLT? What is That?
@EricOverfield - pixelmill.com
Op...
Agenda
 Why Design Manager?
 Accessing Design Manager
 Import a Site Design
 Page Layouts
@EricOverfield - pixelmill.c...
Design Manager
 Publishing Infrastructure Required
@EricOverfield - pixelmill.com
 Sorry Collaboration Sites
 Unless yo...
@EricOverfield - pixelmill.com
Site Collection Level Feature
Site Level Feature
Using WebDAV
Mac/PC – Dreamweaver, Notepad, Your Choice
Access Your Design Files
@EricOverfield - pixelmill.com
Access Design Manager
Demo
@EricOverfield - pixelmill.com
Agenda
 Why Design Manager?
 Accessing Design Manager
 Import a Site Design
 Page Layouts
@EricOverfield - pixelmill.c...
Import a Site Design
 Import a HTML Prototype Directly in SharePoint
@EricOverfield - pixelmill.com
 Some assembly requi...
HTML Master Page
 HTML Prototype must by XML Compliant
@EricOverfield - pixelmill.com
@EricOverfield - pixelmill.com
XML Compliancy error
@EricOverfield - pixelmill.com
HTML Master Page
 HTML Prototype must by XML Compliant
@EricOverfield - pixelmill.com
 Add SharePoint functionality with...
@EricOverfield - pixelmill.com
HTML Master Page
 HTML Prototype must by XML Compliant
 Add SharePoint functionality with Snippet Manager
@EricOverfield...
@EricOverfield - pixelmill.com
HTML Master Page
 HTML Prototype must by XML Compliant
 Add SharePoint functionality with Snippet Manager
@EricOverfield...
HTML Master Page
Demo
@EricOverfield - pixelmill.com
Agenda
 Why Design Manager?
 Accessing Design Manager
 Import a Site Design
 Page Layouts
@EricOverfield - pixelmill.c...
Page Layouts
 Controls layout of main content
 Many out the of box layouts
 Also uses Snippets and Snippet Manager
 Wi...
Page Layout
Demo
@EricOverfield - pixelmill.com
Agenda
 Why Design Manager?
 Accessing Design Manager
 Import a Site Design
 Page Layouts
@EricOverfield - pixelmill.c...
Display Templates
 The center of displaying SharePoint 2013 Search
 Replaces XSLT!
@EricOverfield - pixelmill.com
 Cont...
@EricOverfield - pixelmill.com
@EricOverfield - pixelmill.com
Display Templates
Demo
@EricOverfield - pixelmill.com
Agenda
 Why Design Manager?
 Accessing Design Manager
 Import a Site Design
 Page Layouts
@EricOverfield - pixelmill.c...
Device Channels
 Interfaces tailored and mapped to specific device(s)
 Based on User Agent
@EricOverfield - pixelmill.com
@EricOverfield - pixelmill.com
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
Agenda
 Why Design Manager?
 Accessing Design Manager
 Import a Site Design
 Page Layouts
@EricOverfield - pixelmill.c...
Design Packages
 Design Manager will package your custom branding
 Redeployable, even to another farm
 Creates a wsp (i...
Design Package
Demo
@EricOverfield - pixelmill.com
Agenda
 Why Design Manager?
 Accessing Design Manager
 Import a Site Design
 Page Layouts
@EricOverfield - pixelmill.c...
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
It can be your friend
If you let it
Embrace Design Manager
@EricOverfield - pixelmill.com
Eric Overfield
@EricOverfield
ericoverfield.com
eoverfield@pixelmill.com
Thank You
From HTML to SharePoint
The 2013 Design...
Upcoming SlideShare
Loading in...5
×

SharePoint 2013 Design manager – from HTML to SharePoint

14,832

Published on

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

No Downloads
Views
Total Views
14,832
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
182
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
  • Transcript of "SharePoint 2013 Design manager – from HTML to SharePoint"

    1. 1. From HTML to SharePoint Eric Overfield SharePoint Advocate and Enthusiast PixelMill The 2013 Design Manager
    2. 2. Introduction – Eric Overfield  Founder and SharePoint Branding/UI Lead, PixelMill  Speaker, Teacher, Advocate  Author, SharePoint Community Organizer  Located in Davis, CA ericoverfield.com @EricOverfield Order Your Copy http://pxml.ly/zsqykd Co-author: “Pro SharePoint 2013 Branding and Responsive Web Development” (Apress – June 12th, 2013) Co-author: “Black Magic Solutions for White Hat SharePoint” (August, 2013)
    3. 3. Agenda  Why Design Manager?  Accessing Design Manager  Import a Site Design  Page Layouts @EricOverfield - pixelmill.com  Display Templates  Device Channels  Design Packages  Publish and Apply
    4. 4. Why Design Manager? @EricOverfield - pixelmill.com
    5. 5. Tools Already Exist @EricOverfield - pixelmill.com Design Tools not SP Focus No Design View – Help!
    6. 6. @EricOverfield - pixelmill.com
    7. 7. Tools Already Exist Design Tools not SP Focus No Design View – Help! @EricOverfield - pixelmill.com XSLT? What is That?
    8. 8. @EricOverfield - pixelmill.com
    9. 9. Tools Already Exist Design Tools not SP Focus No Design View – Help! XSLT? What is That? @EricOverfield - pixelmill.com Open the Door to Designers
    10. 10. Agenda  Why Design Manager?  Accessing Design Manager  Import a Site Design  Page Layouts @EricOverfield - pixelmill.com  Display Templates  Device Channels  Design Packages  Publish and Apply
    11. 11. Design Manager  Publishing Infrastructure Required @EricOverfield - pixelmill.com  Sorry Collaboration Sites  Unless you enable Publishing  Treat Branding Assets as Local Files!
    12. 12. @EricOverfield - pixelmill.com Site Collection Level Feature Site Level Feature
    13. 13. Using WebDAV Mac/PC – Dreamweaver, Notepad, Your Choice Access Your Design Files @EricOverfield - pixelmill.com
    14. 14. Access Design Manager Demo @EricOverfield - pixelmill.com
    15. 15. Agenda  Why Design Manager?  Accessing Design Manager  Import a Site Design  Page Layouts @EricOverfield - pixelmill.com  Display Templates  Device Channels  Design Packages  Publish and Apply
    16. 16. Import a Site Design  Import a HTML Prototype Directly in SharePoint @EricOverfield - pixelmill.com  Some assembly required
    17. 17. HTML Master Page  HTML Prototype must by XML Compliant @EricOverfield - pixelmill.com
    18. 18. @EricOverfield - pixelmill.com XML Compliancy error
    19. 19. @EricOverfield - pixelmill.com
    20. 20. HTML Master Page  HTML Prototype must by XML Compliant @EricOverfield - pixelmill.com  Add SharePoint functionality with Snippet Manager
    21. 21. @EricOverfield - pixelmill.com
    22. 22. HTML Master Page  HTML Prototype must by XML Compliant  Add SharePoint functionality with Snippet Manager @EricOverfield - pixelmill.com  Plan your prototype with Design Manager in mind
    23. 23. @EricOverfield - pixelmill.com
    24. 24. HTML Master Page  HTML Prototype must by XML Compliant  Add SharePoint functionality with Snippet Manager @EricOverfield - pixelmill.com  Plan your prototype with Design Manager in mind  Don’t touch the .master!
    25. 25. HTML Master Page Demo @EricOverfield - pixelmill.com
    26. 26. Agenda  Why Design Manager?  Accessing Design Manager  Import a Site Design  Page Layouts @EricOverfield - pixelmill.com  Display Templates  Device Channels  Design Packages  Publish and Apply
    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?  Accessing Design Manager  Import a Site Design  Page Layouts @EricOverfield - pixelmill.com  Display Templates  Device Channels  Design Packages  Publish and Apply
    30. 30. Display Templates  The center of displaying SharePoint 2013 Search  Replaces XSLT! @EricOverfield - pixelmill.com  Control Templates  Item Templates  Do not touch the JavaScript!
    31. 31. @EricOverfield - pixelmill.com
    32. 32. @EricOverfield - pixelmill.com
    33. 33. Display Templates Demo @EricOverfield - pixelmill.com
    34. 34. Agenda  Why Design Manager?  Accessing Design Manager  Import a Site Design  Page Layouts @EricOverfield - pixelmill.com  Display Templates  Device Channels  Design Packages  Publish and Apply
    35. 35. Device Channels  Interfaces tailored and mapped to specific device(s)  Based on User Agent @EricOverfield - pixelmill.com
    36. 36. @EricOverfield - pixelmill.com Screen shot of creating a device channel and maping to a master page
    37. 37. @EricOverfield - pixelmill.com Screen shot of creating a device channel and maping to a master page
    38. 38. Agenda  Why Design Manager?  Accessing Design Manager  Import a Site Design  Page Layouts @EricOverfield - pixelmill.com  Display Templates  Device Channels  Design Packages  Publish and Apply
    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) @EricOverfield - pixelmill.com  Not ready for primetime
    40. 40. Design Package Demo @EricOverfield - pixelmill.com
    41. 41. Agenda  Why Design Manager?  Accessing Design Manager  Import a Site Design  Page Layouts @EricOverfield - pixelmill.com  Display Templates  Device Channels  Design Packages  Publish and Apply
    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. It can be your friend If you let it Embrace Design Manager @EricOverfield - pixelmill.com
    45. 45. Eric Overfield @EricOverfield ericoverfield.com eoverfield@pixelmill.com Thank You From HTML to SharePoint The 2013 Design Manager
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×