Designing for
SharePoint 2013
Session Overview
• SharePoint MVP, Marc Anderson, will introduce you to the possibilities of
design and customization in SharePoint 2013. Tour the newest interface
features, learn best practices, and discover exciting new ways to interact
with your SharePoint 2013 environment.
• While we can still implement designs in SharePoint 2013 the “old way”
we’re used to, there are new capabilities that can make the process easier
for both designers who are very familiar with SharePoint and those
designers who have never worked with SharePoint.
• We’ll look at the new Design Manager capabilities and learn how to create
and integrate Master pages, Display Templates, and Page Layouts. Not
only does the Design Manager make it easier to create new designs for
SharePoint from scratch, it can also help you manage your existing designs
after an upgrade. The Design Manager even allows designers to use the
tools they know and love like Dreamweaver, Photoshop, or any other HTML
editor.
But What Is Design?
de·sign /dɪˈzaɪn/ [dih-zahyn]
verb (used with object)
1. to prepare the preliminary sketch or the plans for (a work to be executed), especially to
plan the form and structure of: to design a new bridge.
2. to plan and fashion artistically or skillfully.
3. to intend for a definite purpose: a scholarship designed for foreign students.
4. to form or conceive in the mind; contrive; plan: The prisoner designed an intricate escape.
5. to assign in thought or intention; purpose: He designed to be a doctor.
6. Obsolete. to mark out, as by a sign; indicate.
verb (used without object)
7. to make drawings, preliminary sketches, or plans.
8. to plan and fashion the form and structure of an object, work of art, decorative scheme,
etc.
Definition from Dictionary.com http://dictionary.reference.com/browse/design
But wait…
Noun
9. an outline, sketch, or plan, as of the form and structure of a work of art, an edifice, or a
machine to be executed or constructed.
10. organization or structure of formal elements in a work of art; composition.
11. the combination of details or features of a picture, building, etc.; the pattern or motif of
artistic work: the design on a bracelet.
12. the art of designing: a school of design.
13. a plan or project: a design for a new process.
14. a plot or intrigue, especially an underhand, deceitful, or treacherous one: His political
rivals formulated a design to unseat him.
15. designs, a hostile or aggressive project or scheme having evil or selfish motives: He had
designs on his partner's stock.
16. intention; purpose; end.
17. adaptation of means to a preconceived end.
Form vs. Function
The Form v Function Ratio by Dan Antion http://www.aiim.org/community/blogs/expert/The-Form-v-Function-Ratio
What’s the
SharePoint Solution?
Use SharePoint as an out-of-box application whenever possible We designed the new SharePoint UI to be clean, simple and fast
and work great out-of-box. We encourage you not to modify it
which could add complexity, performance and upgradeability
and to focus your energy on working with users and groups to
understand how to use SharePoint to improve productivity and
collaboration and identifying and promoting best practices in
your organization.
“The New SharePoint” by Jeff Teper on the Microsoft SharePoint Team Blog http://sharepoint.microsoft.com/blog/Pages/BlogPost.aspx?pID=1012
Design Lite
Change the Look
Publishing Portal
Information Architecture
Site Columns
Content Types
Design Manager
Design Manager Requirements
Design Manager is only available with Publishing Features
activated, thus SharePoint Server only
Site Collection
Site
Design Manager Trick
• Create a new Site Collection for design work
• Activate the Site Collection Feature: SharePoint Server
Publishing Infrastructure
• Activate the site feature: SharePoint Server Publishing
• Do your design work in that Site Collection with Design
Manager
• Copy design artifacts into your core Site Collection or deploy
per your governance model
• Caveat: Some adaptation is required
Design Manager Capabilities
Device Channels
Upload Design Files
Map a Network Drive
• How to: Map a network drive to the SharePoint 2013 Master
Page Gallery
Edit Master Pages
Snippets
Master Page Snippets
Edit Display Templates
Edit Page Layouts
Create a Page Layout
Page Layout Snippets
Publish and Apply Design
Create Design Package
Image Renditions
Image Renditions Requirement
• The Blob Cache must be enabled in IIS
• Configure cache settings for a web application in
SharePoint Server 2013
Image Renditions
Working with Image Renditions
Contact Information
Email marc.anderson@sympraxisconsulting.com
Blog http://sympmarc.com
SPServices http://spservices.codeplex.com
SPXSLT http://spxslt.codeplex.com
eBook http://bit.ly/UnlockingDVWP
The Middle Tier Manifesto http://bit.ly/middletier