Concept to Productio SharePoint Saturday Houston, TX #SPSHOU April 13, 2013 g : Branding 101:
Apr 22, 2015
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: [email protected]
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
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 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
48
Thanks to all our Sponsors!