Download Document

Brandingg 101::
Concept to Production
SharePoint Saturday Houston, TX #SPSHOU April 13, 2013
The Test
1 .Back_Row{
2 move to front
3}
For Coders
1 $(“tr:last”).each(function () {
2 moveForward();
3 });
Welcome to SharePoint Saturday Houston
Thank you for being a part of the
4th Annual SharePoint Saturday
for the greater Houston area!
• Please turn off all electronic devices or set them to vibrate.
• If you must take a phone call, please do so in the hall so as not
to disturb others.
• Thanks to our Title Sponsor:
4
Information
• Speaker presentation slides will be available at
bit.ly/GoSPSHOU within a week
• The Houston SharePoint User Group will be
having it’s next meeting Wednesday April 17th.
Please join us at www.h-spug.org
5
Please Leave Feedback During Q&A
If you leave session
feedback and
provide contact
information in the
survey, you will be
qualified for a book,
ebook or DVD
giveaway.
5.71"
Scan the QR Code to
the right or go to
bit.ly/spshou72
6
About me
D’arce Hess
Developer, Athlete and Musician
PixelMill
Blog: www.thebrandingbutterfly.com
Website: www.pixelmill.com
Email: [email protected]
@darcehess
www.linkedin.com/in/darcehess/
http://www.youtube.com/user/DarceHess
PixelMill
Developing
SharePoint
solutions since
2004
SharePoint
Branding and UI
Specialists
Developer of
Cost effective
SharePoint
Templates
Your
SharePoint
Branding
Experts
Once upon
p a time
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.
Web page title
http://www.Ferrari.com
Where do you
g
y begin?
j Planningg
Project
The Path to Success requires:
 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
Site Mapp Example
p
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
Responsive
Design
g
p
Desktop View
Tablet View
Mobile View
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.
Did you
y know?
RWD Considerations
Audience

Mobile Users

Desktop Users
Positives

One Masterpage that
adapts to all devices.

Uses Fluid Grids

Uses HTML5/CSS3 Media
Queries

Limited Overhead
Negatives
Resources

Bandwidth


Wide Lists and Site
Settings pages are not
mobile friendly
Responsive Web Design by
Ethan Marcotte
http://bit.ly/bcKwQS

Responsive Framework at
CodePlex
http://responsivesharepoint
.codeplex.com

Configure SharePoint Server
2010 for Mobile Device
Access
http://bit.ly/cg6Yo
Mockupp
Use Photoshop to create a layered
.PSD of what your site will look like
finished
The Journey
J
y
Site Templates
p
Not all SharePoint sites use the same branding




Team Sites
Publishing Sites
My Sites
Search Site
SharePoint 2013 Team Site
Team Sites
Publishing not available
on these sites
Uses Wiki layout
Not as customizable
SharePoint 2010 Team Site
MySites
Uses the Wiki layout
SharePoint 2010
SharePoint 2013
Themes & Composed
Looks
p
Recommended way to brand Foundation and non-publishing sites
SharePoint 2010
 Needed to be created using MS
PowerPoint.
 Needed to import and link through CSS
sheet into a Masterpage.
 Used for MySites and Team Sites
SharePoint 2013
 Name: the name of your composed look;
 Master page: the master page that you want
to use;
 Theme URL: the URL to your color palette;
 Image URL: the URL to your background
image;
 Font Scheme URL: the URL to your font
scheme;
 Display Order: this will be used to arrange
your composed looks ordering.
SharePoint 2010
SharePoint 2013
Themes available out of the box
Posed l
Composed look
The Buildingg Blocks
Master
Pages
CSS
Page
Layouts
Web Parts
Javascript &
jQuery
Master Pages
g
What
do
they
do?
What do theyy do?
Contains the
references to
CSS and JS,
JQuery files.
Defaults visitors
to IE8 even if
using IE9
Used to
standardize
branding over
multiple sites
Contains Content
PlaceHolders to tell
SharePoint where to
load features. i.e.
Navigation
Masterpage without Page Layout content
Page
g Layouts
y
What do theyy do?
Only available in
SharePoint
Server, not
Foundation
Create custom
layouts to add
columns and
position content
Loads after the
Master Page
Can be used as
templates for
more than one
page
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
CSS (Cascadingg Style
y Sheets)
What does it do?
Add colors and
design to HTML
structure
Uses “ID” and
“Class” to target
specific areas for
design
Gives ability to
create
Responsive
Design through
Media Queries
Referenced in one
page vs. inline.
Javascript
J
p & jQuery
JQ y
What do theyy do?
Used to create
custom drop
down navigation
Allows for
Slideshows and
custom web
parts
Hides Quick
Launch
Navigation
when needed
Adds
functionality to
forms
Navigation in
SharePoint 2010
Navigation in
SharePoint 2013
Web Parts
What theyy do
Placed in page
layouts to add
functionality
Makes it easier
for users to add
images, video and
media to sites
and pages
Used to create
custom list views
with SharePoint
Designer
Can create
custom views for
search results
Web Part Categories
and Web Part Zones
Menu used to edit a Web Part.
i.e. “Content Editor” Web Part
Demo
Additional Resources
CSS:
 Heather Solomon’s Chart
 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
Thank you
y
Thanks to all our Sponsors!
48