• Save
Making SharePoint Look Good!
Upcoming SlideShare
Loading in...5
×
 

Making SharePoint Look Good!

on

  • 19,181 views

This presentation walks users through what to expect when trying to make SharePoint look good with emphasis on some of the points that should be considered before diving in. The presentation covers ...

This presentation walks users through what to expect when trying to make SharePoint look good with emphasis on some of the points that should be considered before diving in. The presentation covers the publishing features, the components of a publishing solution and helpful tips to consider when designing for SharePoint. Additionally, the demo at the end shows to two most common tasks when it comes to creating a publishing site: building a page layout and using the content query web part for content roll up. Learn more about Eastridge at http://www.eastridge.net.

Statistics

Views

Total Views
19,181
Views on SlideShare
19,150
Embed Views
31

Actions

Likes
6
Downloads
0
Comments
1

8 Embeds 31

http://ranaomerhussain.wordpress.com 15
http://connect 9
http://cstest01 2
http://www.mefeedia.com 1
http://corypeters.net 1
http://pinterest.com 1
http://www.linkedin.com 1
https://ranaomerhussain.wordpress.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • Nice presentation. Let me introduce you Bind Tuning a tool that comes to revolutionize the way how SharePoint sites are branded, with a lot of themes that are fully customizable you can give to the sharepoint site a unique design in just a few clicks.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • Before you brand consider this:You bought SharePointConsider the usability testing Microsoft has done on the productThink about training and having to update training materials for the new brandThink about reference materials such as blogs, books, video training that is done on OOTB brandingIf you move UI components in order to make it “not look like SharePoint” you’re going to potentially open a door that makes maintenance more difficult and confuses users that may be familiar with SharePoint alreadyPlan for future investments in your branding solution. 2010 introduces the Ribbon and social features such as tagging, notes, ratings, etc that need to be integrated into the brand
  • Start in SharePoint Designer. Show Page layouts Started by copying and pasting from ArticleLeft.aspxJump to SharePoint Show Content Type Show Content Type Association Show Content Type added to Pages Library Jump to SharePoint Designer Add Fields Build HTMLBack to SharePoint Create Page Cory Peters Change Page Layout Fill in information PublishSite Settings Modify Available Page Layouts Set default page layout Create a new page and then delete for demo
  • Go to employees homepage Add content query web part Target query to pages library Target content type to employee page Sort by title ASC Select Image on left Add in PublishingPageContent Publish PageRestore Employee Profiles CQWP

Making SharePoint Look Good! Making SharePoint Look Good! Presentation Transcript

  • Making SharePoint Look Good!
    Cory Peters
    Chief SharePoint Architect
    Eastridge Technology, Inc.
  • About Me
    Chief SharePoint Architect at Eastridge Technology, Inc.
    MCP, MCTS, VTSP
    Gamer, gadget geek, speaker
    Working with SharePoint since Portal Server 2003
    Comp Science from NCSU
    Worked with all aspects of SharePoint including
    Architecture
    Administration
    Implementation
    Development
    Branding
  • Agenda
    What You Think You Want vs. What You Need
    SharePoint Publishing
    The Pieces
    Common Goals
    Branding Tips
  • I want SharePoint
    But I Don’t want It to look like SharePoint
  • What do you need?
    Out of the box!
    Master page
    Theme
    Let’s talk about effort
    Custom master page
    Custom page layouts
    Custom theme/CSS
    Custom web parts
    $
    OOTB master page
    Custom Theme
    Custom CSS
    $$
    $$$
  • SharePoint Publishing
    What it is and when to use it
  • Publishing Features
    Create page level templates (page layouts)
    Better control over navigation
    Allows administrators to
    Change the welcome page
    Change the master page
    Apply custom CSS to all sites within the collection
    Apply a theme to all sites within the collection
  • When to use publishing
    Anytime you need high levels of branding customization
    Internet facing sites
    Driven by the marketing team
    Few authors, many readers
    Tightly controlled – workflow approval on content edits
    Need to support multiple browsers
    Internal facing sites
    Company intranet
    To maintain brand or provide consistent look and feel across sites
    Add a footer or additional content into all pages
  • The pieces
    What makes up a branding solution
  • Master pages
    Contains all
    Content placeholders
    Images
    Styles
    Controls
    Ribbon (2010)
    Top Navigation
    Left Navigation
  • Page layouts
    Contains web part zones
    Page structure
    Additional resources
    CSS
    JavaScript
  • Content Type
    Content areas
    Custom fields
    Images
    Date
    Text
    Dropdowns
    etc
  • Building the structure
    Master Page
    Page Layout
    My Bio
    Page Title Placeholder
    Left Nav
    Placeholder
    Main
    Content Area
    Placeholder
    Content Type
    Web Part Zone & Web Parts
    Name
    WP Zone
    Email
    Phone
    Body
  • Building the structure
    Master Page
    Page Layout
    My Bio
    Page Title Placeholder
    Left Nav
    Placeholder
    Main
    Content Area
    Placeholder
    Content Type
    Web Part Zone & Web Parts
    Name
    WP Zone
    Email
    Phone
    Body
  • Building the structure
    Master Page
    Page Layout
    My Bio
    Page Title Placeholder
    Left Nav
    Placeholder
    Main
    Content Area
    Placeholder
    WP Zone
    Web Part Zone & Web Parts
    Name
    Email
    Phone
    Body
  • Building the structure
    Master Page
    Page Layout
    My Bio
    Page Title Placeholder
    Left Nav
    Placeholder
    Main
    Content Area
    Placeholder
    WP Zone
    Name
    Email
    Phone
    Body
  • Building the structure
    My Bio
    Left Nav
    Placeholder
    Main
    Content Area
    Placeholder
    Name
    Email
    WP Zone
    Phone
    Body
  • Applying the CSS
    My Bio
    Left Nav
    Placeholder
    Main
    Content Area
    Placeholder
    My Bio
    Left Nav
    Placeholder
    Name
    Name
    WP Zone
    Email
    Email
    Phone
    Phone
    Body
    Body
    WP Zone
  • Themes
    In 2007
    Full ability to customize CSS
    Difficult to deploy / manage
    In 2010
    Customize colors and fonts using 12 colors and 2 fonts
    Easy to deploy
    Easy to develop
    Limited capability
  • SP2010 Themes
  • Branding tips
    Things to consider
  • #1 – Branding Navigation
    2007
    Navigation is a series of nested tables
    Very difficult to brand
    2010
    Navigation uses a UL (Unordered List)
    Much easier to brand
    Simpler CSS
    Very flexible
  • 2010
  • #2 – Handle flyouts
    Be sure to consider and be aware of flyouts and multiple level flyouts
  • #3 – Don’t reinvent the wheel
    Take advantage of the starter master pages
    Microsoft
    http://code.msdn.microsoft.com/odcSP14StarterMaster
    Randy Drisgill
    http://startermasterpages.codeplex.com/
    These help with
    Favicon
    Footer
    Fixed width designs
    Extra comments to understand what’s going on
  • #4 – user controls
    Don’t delete controls if you’re not using them… instead move them to a <asp:Panelrunat=“server” visible=“false”></asp:Panel> at the bottom of your master page
  • #5 – Configuring Page Layouts
    Make sure you set a default page layout (2010)
    Don’t use web parts on your default layout
    Make sure you configure which page layouts are available (2007 and 2010)
    Site Settings > Page layouts and site templates
  • #6 – Referencing Fields
    When referencing fields use the internal name rather than the ID of the field for maintainability
  • #7 – Web Part Design
    Stay away from rounded corner designs (Especially for an intranet or read only users)
    Make sure your web part designs can grow in both width and height
    Web Part Title
    This is the body of a sample web part. What happens if the user puts this web part in a zone that is too wide for the web part design?
  • #8 – Centering your Site
    Add class=“s4-nosetwidth”
  • Common Branding Goals
    Demos
  • Demo: page layout
    Building an employee profile page
  • Demo: content rollup
    Reusing content across your site
  • Questions?
    Contact Us
    201 West Third Street
    Suite 1250
    Winston-Salem, NC 27101
    (336) 831-9800
    Software Services for Customer Success
    Our Partners
    Stay Connected
    http://www.eastridge.net
    http://facebook.com/#!/EastridgeTechnology
    http://twitter.com/eastridgetech