www.it-ebooks.info Practical SharePoint 2010 Branding and Customization ■ ■ ■ Erik Swenson www.it-ebooks.info Practical SharePoint 2010 Branding and Customization Copyright © 2011 by Erik Swenson This work is subject to copyright. All rights are reserved by the Publisher, whether the whole or part of the material is concerned, specifically the rights of translation, reprinting, reuse of illustrations, recitation, broadcasting, reproduction on microfilms or in any other physical way, and transmission or information storage and retrieval, electronic adaptation, computer software, or by similar or dissimilar methodology now known or hereafter developed. Exempted from this legal reservation are brief excerpts in connection with reviews or scholarly analysis or material supplied specifically for the purpose of being entered and executed on a computer system, for exclusive use by the purchaser of the work. Duplication of this publication or parts thereof is permitted only under the provisions of the Copyright Law of the Publisher's location, in its current version, and permission for use must always be obtained from Springer. Permissions for use may be obtained through RightsLink at the Copyright Clearance Center. Violations are liable to prosecution under the respective Copyright Law. ISBN-13 (pbk): 978-1-4302-4026-6 ISBN-13 (electronic): 978-1-4302-4027-3 Trademarked names, logos, and images may appear in this book. Rather than use a trademark symbol with every occurrence of a trademarked name, logo, or image we use the names, logos, and images only in an editorial fashion and to the benefit of the trademark owner, with no intention of infringement of the trademark. The use in this publication of trade names, trademarks, service marks, and similar terms, even if they are not identified as such, is not to be taken as an expression of opinion as to whether or not they are subject to proprietary rights. While the advice and information in this book are believed to be true and accurate at the date of publication, neither the authors nor the editors nor the publisher can accept any legal responsibility for any errors or omissions that may be made. The publisher makes no warranty, express or implied, with respect to the material contained herein. President and Publisher: Paul Manning Lead Editor: Joanthan Hassell Technical Reviewers: Chris Arella, Robert Dornbush, and Matt Lally Editorial Board: Steve Anglin, Mark Beckner, Ewan Buckingham, Gary Cornell, Morgan Ertel, Jonathan Gennick, Jonathan Hassell, Robert Hutchinson, Michelle Lowman, James Markham, Matthew Moodie, Jeff Olson, Jeffrey Pepper, Douglas Pundick, Ben Renow-Clarke, Dominic Shakeshaft, Gwenan Spearing, Matt Wade, Tom Welsh Coordinating Editor: Annie Beck Copy Editor: Jill Steinberg Production Support: Patrick Cunningham Indexer: BIM Indexing & Proofreading Services Artist: SPi Global Cover Designer: Anna Ishchenko Distributed to the book trade worldwide by Springer Science+Business Media New York, 233 Spring Street, 6th Floor, New York, NY 10013. Phone 1-800-SPRINGER, fax (201) 348-4505, e-mail orders-ny@springer-sbm.com, or visit www.springeronline.com. For information on translations, please e-mail rights@apress.com, or visit www.apress.com. www.it-ebooks.info Apress and friends of ED books may be purchased in bulk for academic, corporate, or promotional use. eBook versions and licenses are also available for most titles. For more information, reference our Special Bulk Sales–eBook Licensing web page at www.apress.com/bulk-sales. Any source code or other supplementary materials referenced by the author in this text is available to readers at www.apress.com. For detailed information about how to locate your book’s source code, go to http://www.apress.com/source-code/. www.it-ebooks.info I dedicate this book to my wife, Karissa, for supporting me through this long process and to my boys, Gavin and Bryce, for encouraging me to always do my best. —Erik Swenson www.it-ebooks.info v Contents at a Glance About the Author xix About the Technical Reviewers xx Acknowledgments xxi Introduction xxii ■ Chapter 1: Intro to SharePoint 2010 Branding 1 ■ Chapter 2: Overview of UX/Branding Process 21 ■ Chapter 3: Gathering Branding Requirements 43 ■ Chapter 4: Creating the Visual Design 65 ■ Chapter 5: Development Environment Setup 85 ■ Chapter 6: Building the Design 101 ■ Chapter 7: Testing the Visual Build 145 ■ Chapter 8: Tips and Tricks 169 ■ Chapter 9: Tools and Resources 205 ■ Appendix: CSS Reference Guide 219 Index 319 www.it-ebooks.info vi Contents About the Author xix About the Technical Reviewers xx Acknowledgments xxi Introduction xxii ■ Chapter 1: Intro to SharePoint 2010 Branding 1 Why Brand SharePoint? 1 Key Topics and Guiding Principles 2 What to Expect and Things to Know 2 Identify the Support Team 2 Seek a SharePoint Community 2 Understand That All Projects Are Different 3 Rely On Multiple Roles for Support 3 Understand the Project Scope 3 Take It One Step at a Time 3 Don’t Skip Ahead 3 Don’t Be Intimidated by SharePoint 4 Learn the Basic Features of SharePoint 4 Remember the 80/20 Rule 4 Have Fun 4 Try New Things 5 Identify the Design Types 5 Look Out for Pitfalls 5 www.it-ebooks.info ■ CONTENTS vii Know Your Branding Limitations 5 Work With SharePoint, Not Against It 5 Make a Great First Impression 5 Be Prepared 6 Maintain Brand Consistency 6 Allocate Time for Testing 6 Don’t Expect to Get It Right on the First Shot 7 Know That There Is Never One Way to Do Something 7 Try Not to Take Shortcuts 7 Understand the Purpose of the Site 7 Make SharePoint Not Look like SharePoint 7 Keep Up With Design Trends 8 Offer Mobile Support 8 Provide Accessibility 8 Learn Application Shortcuts and Quick Keys 8 Avoid CSS Overload 8 Save Often and Create Backups 8 Basic HTML 9 Cascading Style Sheets 9 Color Formats 12 CSS Property Tags 13 SharePoint Master Pages 19 SharePoint Page Layouts 19 Summary 20 ■ Chapter 2: Overview of UX/Branding Process 21 The 4 Ds 22 Discovery 22 Definition 25 Design 30 www.it-ebooks.info ■ CONTENTS viii Development 31 Roles and Responsibilities 33 Business Analyst 34 Information Architect 37 Visual Designer 39 Front-End Developer 40 Summary 41 ■ Chapter 3: Gathering Branding Requirements 43 Key Questions to Ask 44 The Value of Referencing Other Designs 48 Things to Watch Out For 52 Generating Creative and UX Discovery Briefs 53 Creative Brief 54 UX Discovery Brief 56 Estimating Effort Level and Time Required 56 L1: Basic Theme 56 L2: Brand Adaptation 58 L3: Custom Brand Adaptation 60 L4: Custom Design 61 Summary 63 ■ Chapter 4: Creating the Visual Design 65 Design Preparations 66 Review Final Wireframes 66 Review Requirements 68 Review UX/Creative Brief 68 Establish Review Cycles and Schedules 68 Creating the Design 68 Create Sketches 69 www.it-ebooks.info ■ CONTENTS ix Photo-Editing Tools 69 Base SharePoint Design 70 Adobe Photoshop Basics 71 Design Grids 75 Base Shell Styles 77 Web Part Styles 79 Content Frame 79 Final Polish 80 Conducting Design Reviews 81 What to Include 82 How to Organize 82 Who Should Attend 83 Summary 83 ■ Chapter 5: Development Environment Setup 85 Virtual Environment or Physical Server 86 Choosing Your SharePoint Edition 86 SharePoint Foundation (free) 87 SharePoint Server 2010 (Standard) 88 SharePoint Server 2010 (Enterprise) 88 Running SharePoint on Windows 7 89 Virtualization 89 Server Configurations 90 Minimum Required Specifications (Development) 90 Standalone vs. Server Farm 91 Minimum Requirements for Branding 91 Remote Desktop 92 Required Access Levels 93 Features That Affect Branding 93 www.it-ebooks.info [...]... Fortune 500 web site based on SharePoint, Practical SharePoint 2010 Branding and Customization is the only book you'll need to quickly, easily, and efficiently brand and customize your environment Who This Book Is For This book is for anyone who works within SharePoint sites and wants to make changes to how those sites look, whether they're minor changes or wholesale branding and customization efforts As... all of your support and contributions xxi Introduction Practical SharePoint 2010 Branding and Customization cuts through the fluff and discusses accessible, easy-to-understand consulting and processes to create aesthetically pleasing, highly usable branded and customized SharePoint web sites Designed to be a quick-reference how-to guide that lets you dive straight into the task at hand, you'll find this... Swenson, Practical SharePoint 2010 Branding and Customization © Erik Swenson 2011 1 CHAPTER 1 ■ INTRO TO SHAREPOINT 2010 BRANDING Questions about whether design is necessary or affordable are quite beside the point: design is inevitable The alternative to good design is bad design, not no design at all Key Topics and Guiding Principles As you explore the branding process, keep the following key topics and. .. to detail and pragmatism make it an attractive companion during your branding experience SharePoint 2010 deployments are more common than ever, as is the desire to make the environment branded and attractive to your needs However, since SharePoint is more than just a collection of web pages, customizing the look and feel and completing the process of branding the platform itself is complex and requires... changes to all sites and pages, you can simply edit the styles of the CSS and it automatically updates all areas where that CSS file is referenced and the class or ID is used For example, if you remove all CSS references in SharePoint, then the site branding is stripped down to just text and icons, as shown in Figure 1-2 9 CHAPTER 1 ■ INTRO TO SHAREPOINT 2010 BRANDING Figure 1-2 SharePoint 2010 with no style... all of these roles and tasks are achieved in a well-organized manner As an Executive, Stakeholder, Information Worker, or other role within a project with branding you will get a better understanding of the benefits that come with branding a SharePoint 2010 site and its return on investment How This Book Is Structured This book is structured based on the process by which the visual branding is created... issues that come up Explore blogs and forums, and attend a conference if you can Start networking 2 CHAPTER 1 ■ INTRO TO SHAREPOINT 2010 BRANDING Understand That All Projects Are Different No two projects are the same They might have similar features and functionality but differ entirely in brand approach The scope and length of the project also determine how much customization you can apply to your... interaction between the tester and the participant 6 CHAPTER 1 ■ INTRO TO SHAREPOINT 2010 BRANDING Don’t Expect to Get It Right on the First Shot Branding SharePoint takes patience When working with CSS you often make multiple passes at creating the design Refer to your style guide and plan ahead Be organized and take it slow If you rush you might end up missing key style attributes and end up having to do... SharePoint 2010 Branding What’s In This Chapter? • Why Brand SharePoint? • Key Topics and Guiding Principles • What to Expect and Things to Know • Basic HTML • Cascading Style Sheets • SharePoint Master Pages Whether you are starting your first SharePoint branding project or you have done it all before, this book helps guide you down the right path towards success There are many things to consider and prepare... of SharePoint Before you start defining your portal it is critical that you understand the basic features of SharePoint and how it works Get access to a development environment or online lab and explore ways in which you can edit and customize sites In SharePoint 2010 the inclusion of the ribbon takes some time to get used to The ribbon is used for list and library management—for example, uploading and . Practical SharePoint 2010 Branding and Customization ■ ■ ■ Erik Swenson www.it-ebooks.info Practical SharePoint 2010 Branding. xxii ■ Chapter 1: Intro to SharePoint 2010 Branding 1 ■ Chapter 2: Overview of UX /Branding Process 21 ■ Chapter 3: Gathering Branding Requirements 43 ■ Chapter