SharePoint 2013 Branding and User Interface Design E-Book

Randy Drisgill

• Herausgeber: John Wiley & Sons
• Kategorie: Wissenschaft und neue Technologien
• Sprache: Englisch

Seitenzahl: 527

Veröffentlichungsjahr: 2013

Beschreibung

Plan, design, and launch a brand in SharePoint If you are planning, designing, and launching your brand using SharePoint, this book and author trio will walk you through everything you need to know in an understandable and approachable way. From specific technologies such as master pages, page layouts, and CSS to offering best-practices and real-world experience for creating successful branding projects through SharePoint 2013, you will learn how to approach your branding project in effective new ways. This visual book provides step-by-step instructions in a simple and striking format that focuses on each of the tasks you will face in your own branding project. * Explains the various approaches to SharePoint branding and methodologies for creating an engaging UI. * Guides you through planning for branding and using the Design Manager to start a design. * Addresses implementing modern web techniques such as HT ML5, jQuery, and mobile responsive design into SharePoint. * Explores creating SharePoint branding for public facing websites as well as internal intranets, including a deep dive into how custom SharePoint branding is created from scratch. Provides coverage on designing apps for SharePoint.

Leseprobe

Foreword

I joined Microsoft at a time when the development of SharePoint 2013 was well underway. My first week there, I was told that I owned the Design Manager and Device Channel user experiences, which you’ll learn about in just a matter of pages. As quickly and thoroughly as possible, I had to ramp up on a set of features that would later be part of the keynote demos at SharePoint Conference 2012 in Las Vegas. My starting point was the previous version of this book, written for SharePoint 2010. But the world changed significantly between these releases, and the authors went along for that ride, becoming my friends along the way as we worked together to make designing websites on SharePoint a great experience all around.

SharePoint has a rich history as a document management tool, but branding was often an afterthought. Although it was possible to create beautiful SharePoint sites, it wasn’t a familiar process for designers. It was with this in mind that we created a new way to approach design in SharePoint Server 2013. We didn’t want you to have to make the trade-off between an easy, gorgeous design and a SharePoint site. Whether you’re a small business owner who can’t afford to hire a designer, or a large enterprise with the ability to hire an entire design team, SharePoint Server 2013 provides a number of site design capabilities to match every customer.

People with no previous SharePoint experience should be pleased with the revamped and reenergized theming experience that gives you access to a swath of full-blown composed looks, which you should think of as a restaurant meal with whatever substitutions you’d like! From one place, you can mix and match fonts, color palettes, layouts, and background images to your heart’s content. If that’s not enough, you can also build your own set of composed looks for your company, using the existing ones as a template. More advanced users are able to break down the wall between HTML mockups and SharePoint implementation; with a couple of button clicks, you can convert your HTML design into something SharePoint understands while continuing to work in whatever code editor you like best. You’ll find a set of common HTML controls you’ll use to hook up SharePoint functionality, as well as the ability to easily create mobile- or tablet-specific designs.

All these improvements amount to an experience where you are no longer working from scratch or having to worry too much about how SharePoint works. Instead, you get to focus on adjusting and improving your design to make full use of the features and power SharePoint offers, and I can’t wait to see what you do with it. The authors of this book will help get you there. They’ve been exploring these tools since we could first let them. They know the ins and outs of branding in SharePoint as well as, if not better than, anyone. In this book, they’ll share with you their tips and tricks so you can go forth and build great sites!

—Alyssa Levitz, SharePoint Program Manager, Microsoft Corporation

Contents

Foreword

Introduction

Part 1: The Basics

Chapter 1: What is SharePoint Branding and UI Design?

Chapter 2: SharePoint Overview

Chapter 3: Working with the SharePoint 2013 User Interface

Part 2: Planning a Design and Getting Started

Chapter 4: Planning for Branding

Chapter 5: Using the Design Manager to Start a Design in SharePoint

Chapter 6: Cascading Style Sheets and SharePoint

Part 3: Advanced SharePoint Branding

Chapter 7: Creating Custom Master Pages and Page Layouts

Chapter 8: Advanced SharePoint Branding Tasks

Chapter 9: Creating Content Rollups with SharePoint WCM

Chapter 10: Composed Looks and Custom Branding

Part 4: Other Branding Concepts

Chapter 11: Modern Web Design and SharePoint

Chapter 12: Designing Apps

End User License Agreement

Introduction

Thank you for picking up this book! We are truly experiencing an interesting step in the evolution of SharePoint. For the first time since SharePoint was invented, Microsoft is embracing the idea that creating beautiful and engaging SharePoint sites should be within reach of anyone from business users to developers, and of course, traditional web designers. With the creation of new features such as the Design Manager and composed looks, Microsoft has lowered the barriers to creating branding in SharePoint.

This book is intended to explain the beginner features but also to provide knowledge of the underlying SharePoint branding technology so that you can build a complete solution for branding your SharePoint site, whether it is an internal intranet site or a public-facing Internet site. Making the SharePoint user interface look good requires a designer that is comfortable with design theory and traditional web technologies, as well as having the ability to deal with topics traditionally handled by developers.

Not everyone who picks up this book is looking to become the next Picasso of SharePoint. For these readers, the first two sections of the book are dedicated to understanding just enough about SharePoint branding to plan, create, and apply custom designs to their sites. After you become comfortable with the basics of SharePoint branding, the second two sections of the book take you on a tour of creating custom SharePoint branding from scratch, providing the background knowledge needed to understand how the new, easy branding features work behind the scenes.

How This Book Is Organized

The primary goal is to provide the best source of knowledge for SharePoint 2013 branding no matter what your specific skill level is. Although you can certainly use the book as a reference for specific topics, some of the examples throughout the book do build on each other. By the end of the book, you will have learned how to work with all the technology needed to create a fully branded SharePoint site.

The book is divided into four sections:

The Basics

Introductory topics are explored, such as understanding what SharePoint branding means, understanding the basics of how SharePoint works behind the scenes, and an overview of how the SharePoint user interface can be used to edit the page-level branding.

Planning a Design and Getting Started

After explaining the basics, the book dives into planning for branding and starting a design in SharePoint. This section includes topics such as requirements gathering, wireframes, using the new SharePoint 2013 Design Manager and composed looks features, and a deep discussion on how CSS works in SharePoint.

Advanced SharePoint Branding

The second half of the book goes into more intricate topics starting with advanced SharePoint branding. This includes a deep dive into creating master pages and page layouts from scratch, and a chapter that focuses on many of the common tasks associated with creating a fully branded SharePoint site. Rollup Web Parts such as the Content Query Web Part and the Content Search Web Part are covered as well as information on creating composed looks.

Other Branding Concepts

The final section of the book discusses using modern design techniques with SharePoint such as HTML5, CSS3, jQuery, web fonts, and responsive web design. Finally, you learn about using simple online tools to create and style SharePoint apps.

Who Should Read This Book

One of the most common SharePoint requests you might hear is to make a site “not look like SharePoint.” In most organizations this request might be made to someone who wears many hats but isn’t specifically a web designer. In other cases, the request might be made to a web designer or even a developer. To many of those users, SharePoint branding might simply mean that you want to change some colors and put your company header at the top of the page, whereas other users want to create a highly branded corporate intranet portal with a cutting-edge design.

This book is intended for a wide range of readers and skill levels. There is a basic assumption that you have some understanding of how modern websites are created. This includes knowledge of HTML, CSS, and some understanding of the creative design process.

Tools You Need

Having a SharePoint 2013 installation available to follow along with the examples can definitely make a big difference when you read this book. If you don’t have access to a dedicated SharePoint 2013 server, you can install SharePoint 2013 on a virtual machine to try it out locally, or you can look into cloud-based options such as Office 365’s SharePoint Online.

You will also want to have a code-editing tool such as either Visual Studio, Adobe Dreamweaver, Expression Web (recently discontinued, but a free download), or even the free Notepad++. Along with these, you may also need to have some traditional web design programs, such as Adobe Photoshop or Microsoft Expression Design (also discontinued and free). The following list can get you started with software for following along with the book:

• SharePoint 2013 Download: http://technet.microsoft.com/en-us/evalcenter/hh973397.aspx

• Install and Configure SharePoint 2013: http://technet.microsoft.com/en-us/library/cc262957.aspx

• Office 365 Trial: http://www.microsoft.com/en-us/office365

• Visual Studio 2012: http://www.microsoft.com/visualstudio/eng/downloads

• Adobe Photoshop: http://www.adobe.com/products/photoshop.html

• Adobe Dreamweaver: http://www.adobe.com/products/dreamweaver.html

• Notepad++: http://notepad-plus-plus.org/

• Microsoft Expression Web and Design: http://www.microsoft.com/expression/

What’s on the Website

As you work through the examples in this book, you may choose either to type in all the code manually or to use the source code files that accompany the book. All the source code used in this book is available for download at http://www.wrox.com. When at the site, simply locate the book’s title (either by using the Search box or by using one of the title lists) and click the Download Code link on the book’s detail page to obtain all the source code for the book.

The Road Ahead

As you start to learn about branding a SharePoint site, it’s not uncommon to get frustrated. Designing for SharePoint is different than designing for your own website. It involves overriding and adjusting a design to fit within someone else’s code base, in this case Microsoft’s out-of-the-box SharePoint code. But don’t get discouraged; with a little patience and the appropriate help, you can apply branding to SharePoint. This book aims to provide you with all the knowledge and techniques required to bridge this gap.

1

The Basics

1. What is SharePoint Branding and UI Design?

2. SharePoint Overview

3. Working with the SharePoint 2013 User Interface

1

What Is SharePoint Branding and UI Design?

What’s in this Chapter

1. Reasons for SharePoint Branding

2. Exploring Intranet, Internet, and Extranet sites

3. Branding SharePoint at Low, Medium, and Full Effort

When most organizations think about SharePoint, style and design for the user interface (UI) traditionally hasn’t been one of the first things to come to mind. But as SharePoint has evolved from its humble beginnings as a pure collaboration tool, the UI design has slowly moved up the list with every release. What was once a luxury for most SharePoint sites, custom branding and design are now an important part of every implementation. The old adage is, “You can’t judge a book by its cover,” and although that may be true, you can tell a lot by comparing the various versions of SharePoint to the earlier editions of this book. Beginning with the first edition of this book on SharePoint 2007 design, each edition has evolved from just another typical looking technical book to the full-color book you are reading today.

Chances are that if you are reading this book, you’ve already decided to take control of the way SharePoint looks. Perhaps you have a dated intranet that you want to replace with SharePoint 2013. Maybe you want to make your site look more modern and improve the function with better design. Or maybe you just want your site to not look like a SharePoint site.

There are plenty of reasons why people end up on the branding and UI design path, but no matter your reason, it can be difficult to know where to start. The goal of this book is to provide you with all the tools you need to brand your SharePoint sites. This book is structured into four sections, starting with easier concepts and moving to more advanced branding concepts. The first section is an overview of concepts that you must understand before diving into branding topics; as you progress through the book, the topics continue to become more granular. Whether you are new to design work, new to SharePoint design work, or someone who does SharePoint design full-time, there is something in this book for you.

This chapter starts at the highest level and discusses SharePoint branding: what it is and why it is important. You’ll get an idea of exactly what branding means in the world of SharePoint. Later, the chapter discusses the branding features in SharePoint 2013 and explains what options are available.

Introducing SharePoint Branding

The textbook definition of branding is the act of building a specific image or identity that people recognize in relation to your company or product. That’s quite a mouthful! In more simple terms, branding refers to the thoughts and feelings conveyed by a company or product. For example, one of the most iconic brands is Coca-Cola. When you simply see the logo, you can associate feelings or recall good times you’ve had in affiliation with the product—at least that’s what the company hopes. There are plenty of other examples of companies with well-known brands such as Nike, McDonald’s, UPS, Walt Disney, and others. These companies have chosen a marketing identity that enables the public to quickly and easily recognize them. This is branding and is one of the most important things to a company.

“A word is a word, and a picture is worth a thousand…but a brand is worth a million.”

—Tony Hsieh, CEO Zappos in Delivering Happiness

A company’s branding is applied in many different ways, one of which typically includes a website. On the web, conveying a corporate brand usually involves the colors, fonts, logos, and supporting graphics all pulled together with HTML and CSS to provide the branded look and feel for a site.

You have likely visited a company’s website before, so the idea of what it means to apply branding to a website shouldn’t be a new concept. But when you start to think about SharePoint branding, additional elements are used to create the branding on the screen. The traditional aspects of branding on the web still apply; however, there are more moving parts in SharePoint. Master pages, page layouts, Web Parts, and other pieces are all involved. If you are a traditional web designer, you might be used to approaching a new site as if it were a blank canvas. SharePoint, however, was created to be used out of the box with no changes—applying branding and design essentially require an understanding of how to work with someone else’s code, which in this case is the code generated by SharePoint. This can be a challenge for some who might be new to the world of SharePoint. For example, in an HTML site, if there’s something on the page that you want to remove—say you want to hide the search box—the typical behavior might be to just remove it from the code. One of the most common stories told by designers who are new to SharePoint is just this: they want to remove something from the page and they try to just remove the code. In many cases this simple and familiar act creates an undesirable effect, such as the entire page failing to load and displaying an error message. The point here isn’t to scare anyone, but rather to explain that branding in SharePoint is a little different. Most people don’t consider driving to be too difficult, but you wouldn’t advocate someone who has never driven just to hop behind the wheel without a little guidance.

Why Brand SharePoint?

If you are reading this book, it is likely that you don’t need to be convinced to brand SharePoint. Organizations decide to brand SharePoint for a number of reasons, such as to match their corporate brand or even simply to make the new site “not look like SharePoint.”

Consider that SharePoint wasn’t created with a look and feel that necessarily works best for your organization. Branding isn’t just about aesthetics; it also plays an important role in usability and user adoption. Part of the equation is helping users to feel comfortable using a site, which always seems to be an easier proposition when it feels familiar. In a corporate setting, users are inundated with corporate branding, so having a site that matches certainly helps. Branding also helps organizations that have employees geographically dispersed. If all employees log in to the same site, it helps if that corporate brand is reinforced, no matter where the user is located. All that might sound a bit touchy-feely but consider the alternative—a site with little or no branding that doesn’t reflect your company’s corporate image. In that case, the sky isn’t going to fall; however, it isn’t too difficult to see how a well-branded site can have a positive impact on its users. It is the same type of feeling you get walking into a well-designed and decorated room. You just get an extra welcoming and harmonious feeling.

As mentioned earlier, branding is a marketing term that has been also applied to SharePoint to refer to changing the look and feel of something. In a more complete sense, SharePoint branding is also often referred to as User Experience (UX) development. That term implies a deeper meaning than aesthetics and starts to show the complete value of why an organization might want to brand its SharePoint site. Although the value aesthetics bring is difficult to quantify, when you start to think about improving the UX for a site, there most definitely is measurable value. As a simple example, think about your company’s current intranet or public website. It isn’t uncommon for people to say that they think that it is difficult to find things on the current site or that it needs to be redesigned.

So why brand with SharePoint? The answer is going to be different for every organization, but the basic goal is to create a great user experience for anyone that visits the site. There’s going to be many factors that ultimately determine what a “great user experience” means for your users. As you read through this book, you’ll get a good idea of the options available and what is involved to deliver on those options to create the best possible experience for your users!

Is SharePoint Beautiful?

When you look at SharePoint, what do you think? When you create your first site, is what you see on the screen beautiful? Depending on what template you look at, you might see something different, but in general SharePoint has a distinct out-of-the-box look. Over the years, most would agree that the distinct SharePoint look has improved; although the most common branding request has remained unchanged: Can you make the site not look like SharePoint?

Companies spend lots of money developing their brand. Companies want to stand out in the crowd, which makes sense for many reasons. It isn’t much different from how people feel about their personal “brand.” Imagine if everyone in the world who worked with Microsoft technologies had to wear the same uniform. Some folks might be perfectly content, but many would prefer to wear whatever makes sense to them. For some that might mean suits; for others it might mean a shirt, shorts, and flip-flops. Therefore, out-of-the-box SharePoint may be beautiful to you but not to others. However, one thing most can agree on is that it is nearly impossible to come up with a single look for a product that’ll work for every organization on the planet using SharePoint. Customization is inevitable.

With the idea that custom branding is a common desire, it begs the question, “How much can I customize the design?” In truth, you’ll most likely be more limited by time, budget, and technical resources than you would by SharePoint capabilities to customize a design.

Communication Versus Collaboration

Although SharePoint sites are unique, they all fall into one of three categories: intranet, Internet, or extranet. Each of these SharePoint sites has a different audience and design considerations as part of the planning phase. It is important to note that the intended purpose for your site will have a major impact on your ultimate design.

The next few sections discuss the typical considerations for each of the three environments. At a higher level, each environment consists of many SharePoint sites, and each of these sites is usually designed to primarily facilitate either communication or collaboration. It is certainly possible to do a little bit of both, but for the core decisions made about branding, most sites favor one more than the other. For example, most of the sites on an organization’s intranet fall under the category of a collaboration site because this is where most users store content and collaborate with others on their day-to-day tasks. The intranet home page for most companies is usually also designed as a place to convey information to employees, such as the latest company news, announcements, or events. When users first visit the site, they are taken to this homepage where they are presented with all this information, and from there they navigate to another area of the intranet to do work and collaborate. Effectively harnessing all SharePoint’s capabilities into a seamless experience for users is part science and part art.

Branding projects often overlook the importance of determining whether the intended purpose of a site is either collaboration or communication. From a technical standpoint, sites designed primarily for communication or collaboration require different SharePoint templates, which require different approaches to branding. Consider that the approach for branding a SharePoint site based on the Publishing Portal template (which is designed for public-facing sites) is different from a branding site, which is designed purely for internal collaboration.

Considering who uses the site and how they are supposed to use it should be key in creating the design for your site. There’s a distinct difference in the intended purpose of a site designed purely for communicating information in a one-way fashion verses a collaboration site designed for a two-way flow of information.

Intranet Sites

Intranet sites are typically available only to employees and partners who connect locally to the network or use a virtual private network (VPN). The focus of intranet sites is to facilitate information delivery and collaboration for specific sets of users. These sites often have multiple content authors, as well as many users who consume the content and collaborate on new content.

Unlike public Internet sites, the browsers and system capabilities of intranet sites are usually controlled by the IT department. This makes designing a SharePoint intranet easier because fewer variables need to be considered. For example, if your organization supports only one browser, your need to design and test is reduced to only that one browser.

As mentioned in the previous section, most intranets are designed to facilitate communication, but the vast majority of sites that are created are of the collaboration variety. Usually, this necessitates a highly customized homepage for the site with subsites that are focused on pure collaboration. Often, intranet sites must be customized to match the look and feel of a company’s corporate branding. Following is an example of a custom-branded SharePoint intranet site that uses a custom master page, CSS, and images to create a new look and feel. Note that the version of SharePoint you use impacts the templates you can choose from (discussed more in Chapter 2, “SharePoint Overview”).

Internet Sites

Internet sites are public-facing and typically have anonymous users visiting them using a variety of Internet browsers and devices. These sites are usually driven by marketing, with only a few content authors and tightly controlled content.

Typically, public-facing Internet sites offer the opportunity to create highly stylized designs. They pose a greater design challenge than internal-facing sites because it is more difficult to control the technology being used by visitors who access the site. In other words, additional effort must be taken to ensure that the site displays properly across all types of browsers and conforms to whatever compliance standards need to be met for the given site. Not only is the creative effort usually greater for an Internet site than for an intranet site, but the actual implementation effort is also typically higher because of the added complexity.

One example of a corporate-branded Internet site that was built with SharePoint is Ferrari.com. It has a highly customized user interface, and without some poking around in the HTML source, it is hard to see any evidence that it uses SharePoint.

Extranet Sites

Extranet sites combine the security and collaboration of an intranet site with the more heavily emphasized branding found in Internet sites. The goal for most extranet sites is to enable external partners to collaborate with an organization. This is usually accomplished by having a public-facing Internet site that users can access initially. When on the site, users enter a username and password to access a secure site, where they can collaborate with users from inside the company. For example, a manufacturing organization might have an extranet site to enable distributors to log in and place orders or to obtain other information to help them sell the organization’s products.

The biggest challenge with extranets is usually security. Most organizations want external users to log in to see what they need to see, but no more. Maintaining this balance of security can be tricky. From a branding perspective, it usually means that you must ensure that your branding is consistent across all areas of the site, especially those that extranet users will be accessing.

Understanding the Levels of Branding

When you are thinking about your SharePoint branding project, understanding the environment you’ll be customizing is the first step. As discussed in the previous section, each environment presents unique challenges. Another consideration is deciding what it is that you plan to actually implement. For instance, have you ever tried to do a home improvement project? Most people have no trouble changing a light bulb; a smaller number of people would be comfortable laying tile in a room; and even a smaller group would be comfortable adding on a new room to their house. The simplest tasks around the house can take a few minutes and are done by just about anyone, but other tasks take more time and require a more complex skillset. Customizing and branding SharePoint is similar. Depending on what you want to accomplish, some tasks require more skill or effort.

The various levels of branding for SharePoint have changed somewhat for SharePoint 2013 because the overall approach to branding has changed a bit more with this release than in previous versions. This section helps set expectations for some of the varied branding tasks in SharePoint and what’s required for each level.

Following are three different approaches to create branding in SharePoint:

• Low effort—Typically, this approach includes all the branding tasks that an end user with limited training can perform. By using out-of-the-box branding, even someone with little knowledge of traditional website development and design can create a customized site. With out-of-the-box functionality, users can select master pages or composed looks. It is even possible to add a logo image to the top of every site by simply uploading an image and changing the reference in one of the menus (see the example “Replacing the Default Logo on a Composed Look” in Chapter 3, “Working with the SharePoint User Interface.”) All these changes can be made through SharePoint menus and be completed in a matter of minutes.

•Medium effort—This approach is good to add some level of unique branding to a site. A medium level of effort would typically require users who have an understanding of CSS and HTML. These users can make changes to the CSS or HTML of a site or even copy and modify out-of-the-box master pages or other SharePoint pages to create custom branding for their site. Medium-effort users would typically make their changes with a design tool such as Dreamweaver or Expression Web. This approach usually takes days or weeks depending on the specific tasks.

• Full effort—If your design requirements are highly customized, your only option is the full-effort approach. This involves creating custom master pages, custom CSS, and potentially some custom page layouts. This approach is good for those who are experienced with traditional website design and have some knowledge of SharePoint or ASP.NET master pages. It is also well suited for public Internet sites and highly styled internal employee portals. These types of highly customized efforts can take weeks or months.

Which option you choose is likely going to depend on the skill set of the people doing the work and the budget for the project. Throughout this book you see different examples about what is possible for each of the approaches.

Summary

•Branding is the act of building a specific image or identity that people recognize in relation to your company or product. It applies to both traditional websites as well as SharePoint.

• The basic goal for branding SharePoint is to create a great user experience for anyone that visits the site.

• Every site created in SharePoint is focused on either communication or collaboration. The types of sites you have impact the approach to branding you take.

•SharePoint 2013 has new options that have changed the ways that many approach branding. Whether you are a new SharePoint user or a seasoned SharePoint branding veteran, anyone can brand SharePoint!

2

SharePoint Overview

What’s In This Chapter

1. SharePoint Basics

2. Master Pages and the Master Page Gallery

3. Tools for Applying Branding in SharePoint

4. New Branding Features in SharePoint 2013

For those of you who are familiar with SharePoint, much of this chapter might be a review. If you are new to SharePoint, however, this chapter is designed to give you a broad overview of the product—especially the elements relevant to the branding process. This chapter sets the stage for many of the concepts and terminology used throughout the book.

What You Need to Know About SharePoint

SharePoint is a vast product, and there are likely several dozen books written on a wide variety of topics pertaining to it. The focus of this book is obviously SharePoint branding and design—the cover probably gave that away. However, as a designer, you must have a fundamental understanding of SharePoint and the various pieces you’ll be working with that can ultimately impact the type of work you create.

Versions

The most basic piece of information you need to understand is which version of SharePoint you’ll be using. SharePoint 2013 is available at the time of this writing in a few different varieties:

• SharePoint Foundation 2013—Sometimes referred to as the free version of SharePoint. SharePoint Foundation provides the core collaboration and document management capabilities.

• SharePoint Server 2013—SharePoint Server is the licensed version of SharePoint and comes in two varieties: Standard and Enterprise.

• Office 365 (SharePoint Online)—SharePoint Online is the SharePoint component of the Office 365 suite. A number of plans are available, each with its own set of features and functionality.

For a more detailed comparison of the different versions of SharePoint, see http://technet.microsoft.com/en-us/library/jj819267.aspx.

Both SharePoint Server 2013 and SharePoint Online include the set of functionality referred to as publishing, which has several useful additions for branding projects:

•The Web Content Management (WCM) functionality provides users with a robust publishing platform. This means that users can author pages with rich and structured content and publish the pages in a controlled way using out-of-the-box workflows.

•Publishing provides more robust options for navigation. This gives users more control and provides greater flexibility than what is provided out-of-the-box by SharePoint Foundation.

•Publishing also enables site administrators to easily change a master page for any site, and all its subsites, from a SharePoint site’s settings page.

NOTE

From a branding perspective, the publishing functionality in SharePoint Server 2013 and SharePoint Online provides many more options for creating highly styled sites than SharePoint Foundation 2013. Therefore, many of the examples throughout this book are geared toward sites with publishing enabled. However, in most cases the examples still apply to a nonpublishing site with minimal changes to the steps. The only exception to this would be when the examples cover functionality that is not available with SharePoint Foundation 2013. Where possible throughout the book, different approaches for achieving the same results in SharePoint Server, SharePoint Online, and SharePoint Foundation are highlighted.

Although the public site in SharePoint Online does use publishing, its features are slightly different from typical publishing sites. For more information on this, see Chapter 8, “Advanced SharePoint Branding Tasks.”

Understanding the Site Structure in SharePoint

The version of SharePoint you use helps to determine what specific functionality is available to you, but some concepts in SharePoint are universal across every version. The overall structure of SharePoint objects is one of these concepts. The following list gives an extremely high-level overview of these major objects. These objects are listed in order of the biggest container to the smallest:

• Web applications—Essentially the same thing as a website in Internet Information Services (IIS). By default, each SharePoint web application has a unique URL and also a separate content database in SQL.

• Site Collections—Each web application contains one or more site collections. These are containers that define permissions and other functionality for the sites within the site collections.

• Sites—A site (developers sometimes refer to them as webs—short for website) is a collection of lists, libraries, and other content usually around a specific topic.

• Lists and Document Libraries (Apps)—Specific containers where content resides. Terminology for SharePoint 2013 had changed, so adding a new list or document library is under the Add an App menu of the Settings menu . Apps can also be added from the Site Contents page.

• Items and Documents—Individual pieces of content created in lists and libraries.

From a practical perspective, there are a few things to remember about the site structure. The first thing is that there are permissions at each level and how tightly (or loosely) controlled they are can cause unique challenges. This is usually something outside the realm of a typical SharePoint designer, but it is important to consider.

The second thing is that to create your branding in SharePoint you need to create things that interact with each of these objects to some degree. Which files need to be put where? What needs to be done at the site collection versus the site? The answers to these types of questions will become more obvious as you proceed through the book.

Master Page Gallery

The Master Page Gallery is a specialized document library. In SharePoint 2013, the Master Page Gallery has become the default location for all SharePoint branding assets. If you are used to creating websites with a technology that isn’t SharePoint, this concept of all branding assets living under the same hierarchy is probably familiar. In previous versions of SharePoint, master pages and page layouts were stored in the Master Page Gallery, and this is still the case for SharePoint 2013. Other assets such as CSS, Images, and JavaScript were usually stored in a separate document library. The SharePoint 2013 approach is just simpler, which is often a good thing.

Every site has its own master page gallery that you can access by going to Settings menu⇒Site Settings and then clicking on the Master Pages and Page Layouts link under the Web Designer Galleries section. At this point the details of the contents in the Master Page Gallery aren’t too important, but you’ll become familiar with this library as you progress.

How Branding Works in SharePoint

Before diving into the specifics of creating branding in SharePoint 2013, you must understand some of the key ways in which branding can be applied in SharePoint. The following sections examine these key concepts in detail.

Composed Looks

Imagine that you want to make some changes to spruce up your home that can be done relatively quickly and easily. Your budget is limited, so you decide to paint the walls with a brighter and more appealing color. In SharePoint terms, this would be equivalent to applying a theme. Technically speaking, themes can be thought of as changes that are applied to the existing look and feel through the use of CSS.

Over the past few versions of SharePoint, themes have evolved more than any other branding function. In SharePoint 2007, themes were stored on the file system of the SharePoint server and consisted of mostly XML, CSS, and images that were applied to a master page. The bigger issue was that although themes were considered to be one of the simplest approaches to branding, creating custom ones was actually quite complicated and required changes to files on the server, which required direct access to the file system. SharePoint Server Administrators aren’t usually too fond of making changes to files on the file system, so to address this problem SharePoint 2010 took a new approach to themes and used the same mechanism used by Microsoft Office to create .THMX files that enabled users to select from twelve colors and two fonts. This could all be done through Office clients or through the SharePoint UI, which made custom theme creation much easier than with SharePoint 2007. When created, these files could be uploaded and applied to any site. This meant that themes could be applied without making any changes to the file system, but the downside here was that themes in SharePoint 2010 essentially just recolored sites. They didn’t provide a way to modify CSS or add images. Many users felt this iteration of themes was almost too simplistic.

SharePoint 2013 introduces another approach to themes that is noninvasive like SharePoint 2010 but enables more flexibility to add background images and other customizations similar to the types of customization typically made with SharePoint 2007 themes. This new approach to themes is called composed looks. A composed look consists of a color palette, fonts, background image, and associated master page. When a user selects a composed look, all these associated design elements are applied to the site. There are several composed looks available to choose from out-of-the-box, but you can also customize these or even create your own.

Composed looks are a simple way to brand your SharePoint sites, especially collaboration sites. Larger implementations will likely have both publishing and collaboration sites. In these cases a combination of approaches that include composed Looks and custom master pages could be used to present a unified look and feel.

NOTE

You can learn more about using composed looks in Chapter 3, “Working with the SharePoint User Interface,” and about creating composed looks in Chapter 7, “Creating Custom Master Pages and Page Layout.”

Master Pages

Revisiting the home improvements metaphor, if applying a composed look is comparable to painting the walls, then using master pages is comparable to altering the physical structure of the house. By changing the physical structure of your house, nearly anything is possible. Want to add a new room or knock down some walls? No problem. The sky is the limit as long as you have the right skills or can find a good general contractor to help you get the job done. The same is true with master pages in SharePoint.

Remember the good old days of classic web design, all the way back to the late 1990s and early 2000s, when web pages were created with the look and feel hard-coded in every page? Changing the footer, for example, typically required you to access every page in the site, repeating the same change on each one, and then uploading them back to the server. This tedious manual process created many opportunities to introduce errors.

With the advent of ASP.NET 2.0, master pages were introduced to alleviate this problem. Just like in a typical ASP.NET website, master pages enable designers and developers to create a consistent look and feel for all the pages in a SharePoint website. Every page on a SharePoint site references a master page. When a page is loaded in a browser, SharePoint merges the master page with the page, and the resulting styled page is returned to the user. Master pages enable organizations to create a consistent look and feel across all sites, which is a far better approach than was available in the past.

In the typical SharePoint site, master pages define the outer shell of the website. Sometimes called the chrome, this shell defines much of the overall look for every page loaded in the site. Master pages include HTML; SharePoint-specific controls (navigation, search, and so on); and content placeholders, containers used to load specific pieces of content from the referring content. A content placeholder is essentially a named container used to render various pieces of content. The most common example of this is PlaceHolderMain, which exists on every page layout. This is the content placeholder where field controls, Web Part zones, and anything else that is to be rendered in the central area of the page typically would exist.

SharePoint comes with a few out-of-the-box master pages that can be used for website branding right away. Unlike previous versions of SharePoint, the same out-of-the-box master pages are available for all versions:

Content Pages

As discussed in the previous section, master pages define the outer shell of a SharePoint page, but the body of the page itself is also important. Depending on the purpose of your site (collaboration versus communication) and the site template you choose, you can have different types of content pages available to you. There are three main types of content pages in SharePoint 2013:

• Publishing pages

• Web Part pages

• Wiki pages

Each type of page has different options and a different intended use, so your functional requirements dictate which page is right for each scenario.

Publishing Pages

Publishing pages are available only in SharePoint on sites where the publishing feature is enabled. Publishing enables authors to create pages that have an approval workflow so that content can be reviewed and approved before being published. For example, you might create a page announcing a new policy, but the new page would need to be approved by your manager before it could be viewed by others on the website.

Publishing pages are created by using page templates called page layouts. If master pages create the outer shell of a SharePoint page, then page layouts define the body of a page. They enable content authors to create pages that contain text, HTML, graphics, rich media, and more.

To continue with the house metaphor used throughout the chapter, imagine a room with furniture in it—perhaps a couch and a few chairs and tables. The room would be similar in concept to a page in SharePoint; the pieces of furniture would be the various fields on the page. Applying a new page layout would be similar to rearranging the furniture in the room. The room is still the same and the pieces of furniture are still the same, but they are laid out differently and ultimately have a different look and feel.

Several out-of-the-box page layouts can be used right away in a SharePoint Server site, but also remember that designers and developers can always create their own custom page layouts. For example, when a user creates a new page in SharePoint Server, the same content can be arranged as a news article or as a welcome page, based on the page layout that is selected.

NOTE

Chapter 7 discusses page layouts in greater detail.

Along with defining how content is arranged on a page, page layouts also define the location of editable fields and Web Parts. Web Parts, which can be thought of as self-contained widgets of functionality, can be arranged in pages through the use of Web Part zones that are defined in page layouts. Web Part zones enable content authors to add and arrange multiple Web Parts vertically or horizontally.

Publishing pages are the most highly structured of the SharePoint content pages. Not only do they use page layouts that provide a fairly strict template for creating content, but the approval workflow helps to prevent unwanted content from ever being seen. Because of the structure provided by publishing pages, they are best-suited for sites where communication is the primary goal. For situations that require a highly stylized layout, a publishing page with custom page layout is ideal.

Web Part Pages

The function of Web Part pages is fairly obvious by their name. They are pages that contain Web Part zones, where Web Parts can be placed that display things like list data, images, rich media, or other functionality. Any user with the proper permissions, usually a user with at least Contribute permissions, can create and edit Web Part pages.

Web Part pages are most appropriate when you simply need a page to display some information via Web Parts. Because the goal of Web Parts is to deliver functionality to the page, often by displaying content from lists and libraries, in most cases the Web Part page itself wouldn’t be the place where actual collaboration occurs. In addition, it lacks the structure and formalized publishing process that you get with a publishing page. All versions of SharePoint 2013 support Web Part pages.

Wiki Pages

The goal of a wiki is to enable users to quickly create content and collaborate with other users; thus, wikis tend to be informal and unstructured.

One of the most commonly created types of site across most implementations is the Team site, which is intended to be a place where teams can collaborate. Beginning with SharePoint 2010, the Team site template came with wiki functionality. From a branding perspective this is important because Team sites will likely be the template used for the greatest number of sites across your organization—assuming you use SharePoint for your intranet.

When you create a Team site, the first page you see when you go to the site is an example of a wiki page. In addition, every time you choose to Add a New Page from the Settings menu, a new wiki page is created. Wiki pages are unique because they have been designed to support this idea of quicklyadding content to the page. For example, if you click the Edit button at the top right of a Team site, you see a few different areas that initially look like Web Part zones because they contain Web Parts. What you are actually looking at is a Text Layout, which arranges content areas on the page. In these content areas you can put text, HTML, rich media, or even Web Parts. You can also easily change the layout for the page by clicking the Text Layout button on the ribbon to choose from eight different options.

Wiki pages are available in all versions of SharePoint. Specifically for SharePoint versions with publishing available, the Enterprise Wiki template supports the capability to create and use page layouts with wiki pages.

Disabling Wiki Pages

Text Layouts are useful because of how they can be used to quickly create content. Designers, however, seem to have diverse opinions about wiki pages. Some love the flexibility, whereas others feel that because of the flexibility and unstructured nature of the wiki pages, it causes more problems than it solves. The purpose here isn’t to pick one side or the other—but to point out the various opinions.

If you do find yourself in the camp that doesn’t like wiki pages, the good news is that the functionality is easy to disable. All you need to do is click the Settingsmenu⇒Site Settings and click Manage Site Features,which is found under the Site Actions heading (not to be confused with the old Site Actions menu). From here, click the Deactivate button next to the Wiki Page Home Page feature. Now when you go back to the homepage of your site, you’ll notice that when you put the page into edit mode, you have a Web Part page instead of a text layout page. If you prefer this approach to the default Team site with the wiki, you could save your new site as a template, which would enable you to quickly create more non-wiki Team sites.

Cascading Style Sheets

CSS is pervasive in SharePoint branding. Almost every aspect of SharePoint is styled by CSS. All the SharePoint controls loaded by a master page are styled by CSS, as well as many Web Parts—even composed looks use CSS. Because of the importance of CSS in SharePoint, a sound understanding of it is crucial to becoming skilled at branding in SharePoint. Chapter 6, “Cascading Style Sheets and SharePoint,” explains the typical SharePoint elements and what is involved with styling them using CSS.

SharePoint 2013 splits its default CSS across several smaller CSS files that are loaded according to whatcontrols are available on a given page; however, much of the main CSS for SharePoint still resides in one CSS file named corev15.css. The intent of this division of labor is to load only the CSS that’s necessary to render a given page. This approach reduces the total amount of data that needs to be downloaded with every page load compared to loading everything, regardless of whether it was needed.

What’s New for Branding in SharePoint 2013

With more than 100 million SharePoint users worldwide, it is probably fair to assume that a good portion of those who are reading this book have at least some familiarity with SharePoint and its features. Whether you are a seasoned SharePoint design pro or someone who is just learning the ropes, there’s been a large number of changes to branding and the processes related to branding in SharePoint 2013. Starting with SharePoint 2007, branding was something that started growing in importance, and by SharePoint 2010 custom branding seemed like it was a key part of every implementation project. Microsoft made a lot of investments in improving not only the features related to branding and design, but also around the process of creating custom branding.

New Approach to Branding

One of the most common perceptions people have about SharePoint branding is that it is a specialized skill that is difficult to master. One problem is that many traditional web designers struggle with some of the technical aspects of SharePoint. On the flip side, there are also plenty of developers who understand the technical aspects of branding but don’t have design skills. This gap between designers and developers is an issue that Microsoft has attempted to address in SharePoint 2013 by looking at the way traditional web designers work and trying to adjust the way branding is created in SharePoint.

When you look at how websites are usually created, the design process across most platforms is the same. Most people start creating a design in whatever tool you are familiar with, such as Adobe Photoshop. From there the next step is to turn that design into HTML and CSS. However, turning your HTML and CSS into a SharePoint master page can be a tricky process, and this caused some confusion for traditional web designers. There are several tales of talented web designers who were brought to their knees the first time they tried to brand SharePoint. You’d usually hear them yelling things like “I don’t understand why I can’t make this work” or “[Other web technology] doesn’t make me have to do it that way!”

To make the process of branding SharePoint 2013 sites less daunting, one of Microsoft’s goals with thisrelease was to create an experience that removed some of the technical hurdles many designers faced. Traditional web designers have no trouble creating working HTML and CSS-based mockups of a site design, but the process of converting that working mockup into a master page needed to be addressed.

Design Manager

The answer to this dilemma was to create a tool in SharePoint that did all the dirty work for you. The Design Manager is collectively a set of pages and functionality in SharePoint 2013 that can help guide you through the design process. Basically, the design manager gives you the ability to map a local drive to a site’s Master Page Gallery and import HTML and CSS files into SharePoint. From there, SharePoint actually converts the HTML files into a master page. This helps to address one of the biggest pain points that designers had with SharePoint, but that is just scratching the surface of the possibilities. What if you don’t have a designer? No worries. A quick search on the Internet can turn up a number of sites that offer various HTML design templates, many of which are free. You could even use one of these templates as the starting point for your SharePoint design.

NOTE

Chapter 5, “Using the Design Manager to Start a Design in SharePoint,” offers details about the Design Manager.

HTML-based Master Pages and Page Layouts

The Design Manager has a number of other pages that give you the ability to further customize your design. One of the other important things to remember is that after you import your HTML and convert it into a SharePoint master page, there is still a corresponding HTML version of that master page. The same thing is true if you have any page layouts. Initially, this might seem strange—why would you want to have two versions of the same file?

The answer to that question is another big change to the branding approach for SharePoint 2013. Web designers usually have their favorite tools when it comes to building HTML and CSS, such as Adobe Dreamweaver, Microsoft Expression Web, or something else. In the past, the SharePoint design process would force them out of the tools that they were the most comfortable with and into others such as SharePoint Designer. So in SharePoint 2013, after HTML and CSS are imported, designers can still edit HTML and CSS files with the tools they are most familiar with, even after they’ve been converted into a master page. As designers make changes to the HTML files, SharePoint automatically makes the appropriate changes to the corresponding master page or page layout.

Cross-site Publishing

One of the more common complaints with previous versions of SharePoint was about the limited options for sharing content. For example, although it was possible to share content in SharePoint 2010, there wasn’t an out-of-the-box option to create content in one site collection and have it roll up to another site collection. The result was that often trade-offs were needed for certain scenarios.

A new feature of SharePoint 2013 is called cross-site publishing, which uses search to surface content—this is referred to as search-driven content. This concept might seem a little strange at first, but there are a number of examples across the web where search-driven content is already used. Perhaps you’ve been to a site such as Amazon.com and noticed that after buying a birthday present for your 4-year-old daughter the site is kind enough to show you other items it thought you might enjoy, such as various dolls and princesses. The site kept track of the items you had looked at in the past and, using search-driven content, displayed those items to you on the site’s homepage the next time you visited. In a scenario like this, a lot of content that appears personalized to you is likely displayed via search-driven content.

A number of pieces work together to make the functionality known as cross-site publishing, which are discussed in this section. At the most basic level, this includes the site where the content is authored, the search piece that crawls and indexes the content, and a Web Part to query and display the content. It might all seem a bit complicated, but the goal for this section is to provide some basic information on the functionality; if your project needs cross-site publishing, you’ll most certainly be interested to know how to brand and style it.

NOTE

For more information about cross-site publishing, see the following articles:

• “SharePoint 2013 Cross-site Publishing Overview: Part 1” (http://sharepoint.microsoft.com/blog/Pages/BlogPost.aspx?pID=1038)

• “Plan for Cross-site Publishing in SharePoint Server 2013” (http://technet.microsoft.com/en-us/library/jj635876(v=office.15).aspx)

•“How to set up a Product-centric Website in SharePoint Server 2013” (http://blogs.technet.com/b/tothesharepoint/archive/2013/02/14/how-to-set-up-a-product-centric-web-site-in-sharepoint-2013.aspx).

Catalogs

A catalog is basically just an attribute that can be used to specify that a list or library contains content that you’d want to make accessible to be shared by other site collections. For example, imagine you have a public-facing product site. You might have all the information about your products in an internal site collection that only specific authors have access to. From there they can create, edit, and manage all the details of the products, which would be presented on your public-facing Internet site. This all might sound like an obvious scenario, but this wasn’t easily possible in SharePoint before this version.

This new approach essentially enables the separation of content from the presentation. Content can be authored in a list as fields of data that are indexed by search and then presented to the user where they are needed and presented in a way that makes the most sense depending on the location. That means that the same content can be presented in different ways if needed. So if you consider the example of a product site, you might have a camera that has a corresponding page that provides all the usual details you might expect on a website. But if that camera goes on sale or you want to highlight it in a special way, you can present that same camera in a different way on a different page somewhere on the site—all you need to do is style the presentation accordingly. This is made possible through display templates, which are discussed later in this section.

You might want to use catalogs in several different ways. The following is a list of some common scenarios where this tool can be useful:

• Intranet—Authoring content in one site collection that is presented to another site collection. In this case, marketing or another department might be creating all the content in a central site that would then be displayed on the main intranet pages.

• Internet—Authoring content and products could be done in separate internal sites and syndicated to specific external sites as needed. This would be similar to the intranet scenario but would add a separate catalog for products in addition to the content. Content from multiple catalogs could be shared to one or more public-facing Internet sites.

• Extranet—Authoring for content could be done in internal sites and then shared with specific external sites. In this scenario, content could be shared from a single catalog to many external sites.

There is more involved with catalogs than just purely sharing content. The whole subject of catalogs could easily fill an entire chapter in this book. This section provided a high-level overview on the subject, but a deeper dive is needed to cover all the specific details. A good starting point is the Microsoft TechNet article, “Configure cross-site publishing in SharePoint 2013” (http://technet.microsoft.com/en-us/library/jj656774(v=office.15).aspx).

Content Search Web Part

In the past, the primary means of rolling up content was using the Content Query Web Part (CQWP), which basically sent out a query across all the objects in a site collection to find items that matched a specified set of criteria. Rolling up content using search is a more efficient way to do things because it pulls results from an index that is optimized for serving results. A more practical way to describe the difference between the two approaches is to do a search for a file on your computer. If the computer has been indexed, the results display almost immediately, but if the computer must search folder by folder, it takes significantly longer. In the case of SharePoint, that isn’t to say using the CQWP was a bad thing; it just had limits to its scalability. The CQWP is still available in SharePoint 2013 and will remain an important way to roll up content for certain scenarios.