Concept to Production

SharePoint Saturday Houston, TX #SPSHOU April 13, 2013

g :Branding 101:

1 .Back_Row{2 move to front3 }

The Test

1 $(“tr:last”).each(function () {2 moveForward();3 });

For Coders

4

Welcome to SharePoint Saturday Houston

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

Thank you for being a part of the 4th Annual SharePoint Saturday

for the greater Houston area!

5

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

6

Please Leave Feedback During Q&AIf you leave session feedback and provide contact information in the survey, you will be qualified for a book, ebook or DVD giveaway.

Scan the QR Code to the right or go to bit.ly/spshou72

5.71"

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

PixelMillDeveloping 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

Web page title

http://www.Ferrari.com

gyWhere do you begin?

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 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?

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

SharePoint 2010

SharePoint 2013

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 ResourcesCSS:

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

48

Thanks to all our Sponsors!