Sharepoint 2010 : Putting Your Site on the Web - Customizing the User Experience (part 1) - Working with Master Pages

12/28/2013 8:48:58 PM

In this article we’ve taken you through some functional elements associated with content on your Internet site. However, there is still a big part of WCM that has to do with defining and managing the user experience (UX). In fact, some would argue that the user experience is the true measure of the overall success of a Web site.

What is UX? A user’s experience on a Web site can be segmented into four categories: 1) Branding, 2) Usability, 3) Functionality, and 4) Content. One segment is no more important than the others; they all need to be optimized for users to embrace and appreciate the overall experience of interacting with a Web site. To this point, we’ve touched upon how SharePoint 2010 offers certain functional elements to make it easier for visitors to navigate and discover information, where the focus has been on making it easy to update and present important content on the Web site. Let’s extend our discussion into a key UX segment: branding.

Branding is an essential part of any Web site. It defines the aesthetic appeal and visual presentation of your Web pages. At the highest level, branding provides visitors with an engaging experience (which increases the likelihood that they will buy your product or at least return for another visit). To create a strong impact, remember that branding is about consistency; consistency among the Web pages (in terms of color palette, content organization, layout, and navigation), and consistency with the brand identity (as it relates to an organization’s other public materials like print collateral). In addition, graphics, collateral and multimedia are all part of branding and are used to add value to the overall experience.

How does SharePoint 2010 handle branding? There are two key elements: master pages and page layouts.

1. Working with Master Pages

Master pages define the look and feel and standard behavior that affect all of the Web pages in a Web site. For those familiar with SharePoint 2007 (or .NET 2.0 for that matter), master pages work pretty much the same in SharePoint 2010. The concept is that a master page defines a template for how content will be presented and that template is applied to all associated pages so you don’t have to keep building pages from scratch. In addition, the use of a template makes the propagation of changes to all pages quick and seamless.

SharePoint 2010 provides some base master pages as the starting point for branding customization. Master pages are edited and applied with the use of SharePoint Designer (a separate, freely available Office product for Web design). Let’s look at a few:

  • v4.master is the default master page for SharePoint 2010 look and feel. It includes the ribbon and all other UI changes new to SharePoint 2010. If you want to apply a custom branding to the native SharePoint 2010 look, start by making a copy of this master page and edit accordingly with SharePoint Designer.

  • default.master should be familiar to those who have used SharePoint 2007. It does not have the ribbon and mimics the look and feel of SharePoint 2007. If you upgrade from SharePoint 2007 to SharePoint 2010 you will notice that this master page will be used in your upgraded application.

  • minimal.master is the master page used for search results. It is a very simple master page and allows you freedom to customize the user experience associated with search.

  • simple.master is used for login and error pages. You can override this master page if you wish to present a custom login or error screen.

To change the master page associated with your site, go to Site Actions → Site Settings → Master pages. This is shown in Figure 1. You can change the master page by altering the selection shown on the Site Master Page Settings, as seen in Figure 2.

Figure 1. Users with appropriate permissions can get to the Master Page screen through Site Settings

Figure 2. You can alter the selected master page for your site by changing the option on the Master Page screen

One important change with SharePoint 2010 is the fact that custom master pages apply to all pages in the /_layouts directory. This includes the system page. For those who struggled with creating a custom system.master page with SharePoint 2007 or were forced to build a custom theme, this is welcome news!

  •  SharePoint 2013 and Windows Azure (part 3) - Creating a Simple Autohosted SharePoint App - Building A Client App Web Part
  •  SharePoint 2013 and Windows Azure (part 2) - Creating a Simple Autohosted SharePoint App - Building Your First Autohosted App
  •  SharePoint 2013 and Windows Azure (part 1) - Understanding SharePoint Cloud-Hosted Apps and Windows Azure
  •  Sharepoint 2013 : SharePoint Installation and Configuration - Create a New Subsite
  •  Sharepoint 2013 : Join a Server to the SharePoint Farm, Create a New Web Application, Create a New Site Collection
  •  Sharepoint 2013 : Install Without a Product Key in the Configuration File, Configure a New SharePoint Farm
  •  Sharepoint 2013 : Prepare the Microsoft SharePoint Installation Module , Install SharePoint Unattended
  •  Sharepoint 2010 : Putting Your Site on the Web - Additional Features
  •  Sharepoint 2010 : Putting Your Site on the Web - Key Terms and Architecture , Richer User Experience
  •  Sharepoint 2010 : Putting Your Site on the Web - Web Content Management (part 2) - Web Publishing 101
    Most View
    Spring Is Here (Part 2)
    Is 802.11ac Worth Adopting?
    BlackBerry Z10 - A Touchscreen-Based Smartphone (Part 1)
    LG Intuition Review - Skirts The Line Between Smartphone And Tablet (Part 5)
    Fujifilm X-E1 - A Retro Camera That Inspires (Part 4)
    My SQL : Replication for High Availability - Procedures (part 6) - Slave Promotion - A revised method for promoting a slave
    10 Contenders For The 'Ultimate Protector' Crown (Part 3) : Eset Smart Security 6, Kaspersky Internet Security 2013, Zonealarm Internet Security 2013
    HTC Desire C - Does It Have Anything Good?
    Windows Phone 7 : Understanding Matrix Transformations (part 2) - Applying Multiple Transformations
    How To Lock Windows By Image Password
    - First look: Apple Watch

    - 10 Amazing Tools You Should Be Using with Dropbox
    - How to create your first Swimlane Diagram or Cross-Functional Flowchart Diagram by using Microsoft Visio 2010 (Part 1)

    - How to create your first Swimlane Diagram or Cross-Functional Flowchart Diagram by using Microsoft Visio 2010 (Part 2)

    - How to create your first Swimlane Diagram or Cross-Functional Flowchart Diagram by using Microsoft Visio 2010 (Part 3)
    Popular Tags
    Microsoft Access Microsoft Excel Microsoft OneNote Microsoft PowerPoint Microsoft Project Microsoft Visio Microsoft Word Active Directory Biztalk Exchange Server Microsoft LynC Server Microsoft Dynamic Sharepoint Sql Server Windows Server 2008 Windows Server 2012 Windows 7 Windows 8 Adobe Indesign Adobe Flash Professional Dreamweaver Adobe Illustrator Adobe After Effects Adobe Photoshop Adobe Fireworks Adobe Flash Catalyst Corel Painter X CorelDRAW X5 CorelDraw 10 QuarkXPress 8 windows Phone 7 windows Phone 8 BlackBerry Android Ipad Iphone iOS
    Top 10
    OPEL MERIVA : Making a grand entrance
    FORD MONDEO 2.0 ECOBOOST : Modern Mondeo
    BMW 650i COUPE : Sexy retooling of BMW's 6-series
    BMW 120d; M135i - Finely tuned
    PHP Tutorials : Storing Images in MySQL with PHP (part 2) - Creating the HTML, Inserting the Image into MySQL
    PHP Tutorials : Storing Images in MySQL with PHP (part 1) - Why store binary files in MySQL using PHP?
    Java Tutorials : Nested For Loop (part 2) - Program to create a Two-Dimensional Array
    Java Tutorials : Nested For Loop (part 1)
    C# Tutorial: Reading and Writing XML Files (part 2) - Reading XML Files
    C# Tutorial: Reading and Writing XML Files (part 1) - Writing XML Files