This document provides an overview of branding and design concepts for a SharePoint site redesign project. It recommends starting with project planning, creating a site map, wireframes and mockups. It discusses responsive design approaches and considerations. It also explains the building blocks of SharePoint branding like master pages, page layouts, CSS, JavaScript, web parts and themes/composed looks. The document demonstrates these concepts and provides additional resources for learning about CSS, frameworks and starter master pages.

1. Branding 101:
g :
Concept to Production
SharePoint Saturday Austin, TX #SPSATX – March 2, 2013

2. THANK YOU FOR BEING A PART OF
SHAREPOINT SATURDAY AUSTIN!
• Please turn off all electronic devices or set them to
vibrate
• If you must take a phone call, please do so in the hall
• Wi-Fi is available, you will need your Guest ID/password
(at registration desk)
• Feel free to tweet and blog during sessions. Remember
to follow @SPSATX and tag #SPSATX in your tweets!
SharePoint Saturday Austin is hosted by
the Austin SharePoint User Group
(@AustinSPUG)
2 | SharePoint Saturday Austin 2013

3. About me
D’arce Hess
Developer, Athlete and Musician
PixelMill
Blog: www.thebrandingbutterfly.com
Website: www.pixelmill.com
Email: dhess@pixelmill.com
@darcehess
www.linkedin.com/in/darcehess/
http://www.youtube.com/user/DarceHess

4. PixelMill
Developing SharePoint
SharePoint Branding and UI
solutions since Specialists
2004
Developer of Your
Cost effective SharePoint
SharePoint Branding
Templates Experts

5. Once upon a time
p
The owner of your company recently met with a consultant who showed him
several examples of what your SharePoint site CAN be. Your boss has now
charged you with recreating the same “Wow” factor in your company’
s
SharePoint site.

8. Where do you begin?
y g

9. j
Project Planning
g
Ideally, you should have the following before beginning your project:
 Have a Project Manager
Has vision of needs and goals of project.
Make sure goals can be measured.
 Site Map Architecture
What subsites and pages will you have?
 Content Architecture
What shows up in each part of the site map? i.e. the Home page
 Wireframe (Can be adjusted)
 Mockup (NOT the same as a wireframe)
 Build it
 Test it in every browser possible

10. Site Map Example
p p

11. Wireframes
Created to get an idea of where general items will be placed for the mockup of
the design.
They can be adjusted later. NOT FINAL
Balsamiq Just in Mind Visio Photoshop

13. Responsive Design
p g

14. Desktop View Tablet View Mobile View

15. Which is best for you?
y
Responsive Design: Uses CSS3 media queries and
proportion-based grids. All elements continue to be
shown as screen width changes.
Adaptive Design: Uses CSS3 media queries to hide
elements as screen width lessens.
Progressive Enhancement: Design for the mobile view
first, then add elements as the screen increases in width.

16. Did you know?
y
By the end of 2013, there will be more mobile devices on Earth
than people.
(Source: Cisco, 2013)
Mobile search will generate 27.8 billion more queries than
desktop search by 2016
(Source: BIA/Kelsey report, 2012)
Smartphones and tablet computers will increase mobile Web
traffic by 26 times during the next four years
(Source: Cisco Systems, 2011)

17. RWD Considerations
Audience Positives Negatives Resources
 Mobile Users  One Masterpage that  Bandwidth  Responsive Web Design by
adapts to all devices. Ethan Marcotte
 Desktop Users  Wide Lists and Site http://bit.ly/bcKwQS
 Uses Fluid Grids Settings pages are not
mobile friendly  Responsive Framework at
 Uses HTML5/CSS3 Media CodePlex
Queries http://responsivesharepoint
.codeplex.com
 Limited Overhead
 Configure SharePoint Server
2010 for Mobile Device
Access
http://bit.ly/cg6Yo

18. p
Mockup
Use Photoshop to create a
layered .PSD of what your site
will look like finished

19. The Journey
J y

20. Site Templates
p
Not all SharePoint sites use the same branding
 Team Sites
 Publishing Sites
 My Sites
 Search Site

21. SharePoint 2013 Team Site
Team Sites
Publishing not available
on these sites
Uses Wiki layout
Not as customizable
SharePoint 2010 Team Site

22. MySites
Uses the Wiki layout

23. Themes & Composed Looks
p
Recommended way to brand Foundation and non-publishing sites
SharePoint 2010 SharePoint 2013
 Needed to be created using MS  Name: the name of your composed look;
PowerPoint.  Master page: the master page that you want
to use;
 Theme URL: the URL to your color palette;
 Needed to import and link through CSS
 Image URL: the URL to your background
sheet into a Masterpage. image;
 Font Scheme URL: the URL to your font
 Used for MySites and Team Sites scheme;
 Display Order: this will be used to arrange
your composed looks ordering.

24. SharePoint 2010

25. SharePoint 2013
Themes available out of the box
Posed l
Composed look

26. The Building Blocks
g
Master Page
Pages Layouts
Javascript &
CSS Web Parts
jQuery

27. Master Pages
g

28. What do they do?
What do they do?
y
Contains the Defaults visitors Used to Contains Content
references to to IE8 even if standardize PlaceHolders to tell
CSS and JS, using IE9 branding over SharePoint where to
JQuery files. multiple sites load features. i.e.
Navigation

29. Masterpage without Page Layout content

30. Page Layouts
g y

31. What do they do?
y
Only available Create custom Loads after Can be used as
in SharePoint layouts to add the Master templates for
Server, not columns and Page more than one
Foundation position page
content

32. Page Layout in Edit Mode
with Empty Web Part
Zones
Page Layout once Image
Viewer and Content Editor
Web Parts have been
added and saved

33. CSS (Cascading Style Sheets)
g y

34. What does it do?
Add colors and Uses “ID” and Gives ability to Referenced in
design to HTML “Class” to target create one page vs.
structure specific areas for Responsive inline.
design Design through
Media Queries

35. Javascript & jQuery
J p JQ y

36. What do they do?
y
Used to create Allows for Hides Quick Adds
custom drop Slideshows Launch functionality to
down and custom Navigation forms
navigation web parts when needed

37. Navigation in
SharePoint 2010
Navigation in
SharePoint 2013

38. Web Parts

39. What they do
y
Placed in page Makes it easier Used to create Can create
layouts to add for users to add custom list views custom views
functionality images, video with SharePoint for search
and media to Designer results
sites and pages

40. Web Part
Categories and Web
Part Zones
Menu used to edit a Web Part.
i.e. “Content Editor” Web Part

41. Demo

42. Additional Resources
CSS:
 Heather Solomon’ Chart
s
 Home Page CSS Reference by Benjamin Niaulin
 Branding Series for Beginners by Benjamin Niaulin
 20 Useful Resources for Learning about CSS3
Frameworks:
 Responsive SharePoint
Starter Master Pages:
 Jumpstart Branding for SharePoint 2010
 Starter Masterpages for SharePoint – Randy Drisgill
 Responsive V5 Masterpage for SharePoint 2010 – Kyle Schaeffer

43. Thank you
y

45. THANKS TO OUR SPONSORS!
45 | SharePoint Saturday Austin 2013