Concept to Production

SharePoint Saturday Austin, TX #SPSATX – March 2, 2013

g :Branding 101:

2 | SharePoint Saturday Austin 2013

• 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!

THANK YOU FOR BEING A PART OF SHAREPOINT SATURDAY AUSTIN!

SharePoint Saturday Austin is hosted bythe Austin SharePoint User Group

(@AustinSPUG)

D’arce HessDeveloper, Athlete and MusicianPixelMill

Blog: www.thebrandingbutterfly.com

Website: www.pixelmill.com

Email: dhess@pixelmill.com

About me

@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

pThe 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.

Once upon a time

gyWhere do you begin?

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 ArchitectureWhat subsites and pages will you have?

Content ArchitectureWhat 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

j gProject Planning

p pSite Map Example

WireframesCreated 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

pp gResponsive Design

Desktop View Tablet View Mobile View

yWhich is best for you?

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.

yDid you know?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)

RWD Considerations

Audience Positives Negatives Resources

Mobile Users

Desktop Users

One Masterpage that adapts to all devices.

Uses Fluid Grids

Uses HTML5/CSS3 Media Queries

Limited Overhead

Bandwidth

Wide Lists and Site Settings pages are not mobile friendly

Responsive Web Design by Ethan Marcottehttp://bit.ly/bcKwQS

Responsive Framework at CodePlexhttp://responsivesharepoint.codeplex.com

Configure SharePoint Server 2010 for Mobile Device Accesshttp://bit.ly/cg6Yo

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

pMockup

yJThe Journey

Not all SharePoint sites use the same branding

Team Sites Publishing Sites My Sites Search Site

pSite Templates

SharePoint 2013 Team Site

Team Sites

Publishing not availableon these sites

Uses Wiki layout

Not as customizableSharePoint 2010 Team Site

MySites

Uses the Wiki layout

pThemes & Composed Looks Recommended way to brand Foundation and non-publishing sites

SharePoint 2010 SharePoint 2013

Needed to be created using MS PowerPoint.

Needed to import and link through CSS sheet into a Masterpage.

Used for MySites and Team Sites

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

Posed l

SharePoint 2013Themes available out of the box

Composed look

CSS Web Parts

MasterPages

Javascript &

jQuery

PageLayouts

Your SharePoint

Site

gThe Building Blocks

gMaster Pages

What do they do?

Contains Content PlaceHolders to tell SharePoint where to

load features. i.e. Navigation

Defaults visitors to IE8 even if

using IE9

Used to standardize

branding over multiple sites

Contains the references to CSS and JS,

JQuery files.

yWhat do they do?

Masterpage without Page Layout content

g yPage Layouts

Only available in SharePoint Server, not Foundation

Loads after the Master Page

Create custom layouts to add columns and position content

Can be used as templates for more than one page

yWhat do they do?

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

g yCSS (Cascading Style 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.

J Jp Q yJavascript & jQuery

yWhat do they 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

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

yWhat they do

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

yThank you

45 | SharePoint Saturday Austin 2013

THANKS TO OUR SPONSORS!