Benjamin Niaulin Presented at: SharePoint Saturday Utah SharePoint Geek Step into the SharePoint Branding World: Tools and Techniques

Description Everyone expects their SharePoint to be beautiful and for you to brand it in no time. However, you are not a web designer and the task is proving more difficult than you anticipated. In this session, you will learn how to start branding a SharePoint Site so that you can get closer to the look and feel of the famous Ferrari.com that consultant talked to you about. In this session, we will look at the tools available and the different ways to brand your SharePoint Site from start to finish. From CSS to HTML passing by Master Pages, at the end of this session you will be able to start branding your SharePoint site and Re-Experience SharePoint. #SPSUtah

Who is this guy talking? Benjamin Niaulin Speaker, Trainer, Consultant, SCRUM Master Blog bniaulin.wordpress.com Website share-gate.com nothingbutbranding.comshare-gate.comnothingbutbranding.com TWITTER!:

INTRODUCTION

THE BRANDING PROCESS ONE STEP AT A TIME

Overview and checklist Make sure to have a Project Sponsor Has clear vision of the needs and the goals No one brands to brand… have goals you can measure Site Map architecture (XMind or Mind Manager) Content Architecture What shows up in each part of the site map? Ex: What do we want on the home page? Wireframe Mockup (does not = Wireframe) Build it Test it

Wireframe Is used to get an idea of where things will be placed for the mockup of the design to come. Is Not final. Tools: Balsamiq** Visio Photoshop

Wireframe repointbreakfast/

Mockup Information and PSD files available for download on technet

HOW DO WE GET THERE

Site Templates Not all SharePoint sites can use the same branding Differences in: Team Site Publishing Site My Site Search Site Have some common elements but one size does not fit all

What we play with Master Pages Page Layouts CSS Web Parts (DVWP, CQWP, CEWP, RSS Feed, etc) jQuery

MASTER PAGES

What is it? HTML that says where things are on the page Controls flow of the page Defaults visitor to IE8 even if using IE9 Content PlaceHolders are placed to tell SharePoint where to load it’s features Huh? List of content placeholders placeholders-HA aspx placeholders-HA aspx Standardize brand across sites with a single page Loaded first Loads resources like CSS or jQuery Libraries

Content Place Holders

Can be used to add a footer © Copyright 2012 Benjamin Niaulin – Sharegate Geek Added after dev dashboard **Note the s4-notdlg

downloads Heather Solomon’s just the essentials sharepoint-master-pages/#more-29 Starters by Randy Drisgill

PAGE LAYOUTS

What is it? Used in Publishing Sites Loaded after Master Page Created from Content Types Allows for site columns to be part of the design Pages created become tagged content as it is authored Have different page designs within the content of the master page in the Main placeholder Very powerful with Intranets/Extranets News, Calendars, Articles, etc..

CSS

What is it? Add colors and design to the HTML structure HTML uses ID and CLASS to tell which CSS to apply Start learning by overriding CSS Tools: Heather Solomon’s Chart My home page CSS summary Ribbon CSS explained Browser Tools (F12) Branding Series for beginners Learn CSS in 24 hours

Tools & Techniques CSS Reset by Kyle Schaeffer SharePoint CSS will override you every step of the way Make sure your CSS or HTML can be used by your browsers Content Editor Web Part Allows to write CSS to affect the page on which the Web Part has been added. Can be linked to a centralized text file Useful to test CSS Use the Style Library to store your files

DEMO LET’S GET OUR HANDS DIRTY

Demo

Q&A

THANK YOU! Follow me on twitter for updates! Tweet me if you need the files (CSS, jQuery used Benjamin Niaulin