Major functional areas of a SharePoint interface







> Ribbon / Server ribbon: The entire top portion of the UI is part of the ribbon. What is displayed depends on the user's current context.


> Site Actions Menu: The main menu for interacting with SharePoint. This is primarily used by content authors and administrators.


> Global breadcrumbs control: A new implementation of the global breadcrumbs control that was first introduced in Microsoft Office SharePoint Server 2007. This is a 16x16 folder structure icon. When clicked, the icon displays a dynamic HTML that shows a hierarchical view of the site. Use it to navigate up levels of the hierarchy from the current location in the hierarchy.


> Page State Action button: The button used to control the page state, and that typically displays a shortcut to edit or save the current page.


> Ribbon contextual tabs: Tabs present menus that are specific to the functions of the SharePoint site. What is displayed changes based on what the user is interacting with on the page. Some of the items will not be used on every site.


> Welcome menu: This menu shows the welcome message and enables the user to view their profile, to sign out, and to sign in as a different user. If other language packs are installed, the functionality to change the user's language is also available here. When the user is not logged on, the Welcome menu also shows the Sign In link.


> Developer Dashboard button: The button that opens the Developer Dashboard that typically appears at the bottom of the screen. The Developer Dashboard contains statistics about the page rendering and queries. This icon is shown when the Developer Dashboard's display level is set to OnDemand (other options include On and Off). Administrators can set the Developer Dashboard display level by using Windows PowerShell or by using the SharePoint API.


> Title logo: Sometimes referred to as site icon. It typically shows the SharePoint site icon, but can display a user-defined logo instead.


> Breadcrumb: This is a breadcrumb-like control that is specific to the v4.master master page. It includes the Site Title and the placeholder for Title in Title Area, which typically contains the Page Title. The Site Title is linked to the top level of the site.


> Social buttons: Used for marking items as liked and for adding tags and notes to content.


> Global navigation: Sometimes referred to as the Top Link Bar or Top Navigation Bar, it is the primary horizontal navigation mechanism for the site.


> Search area: The search box is used to enter terms for performing searches on the site.


> Help button: The help button links to the SharePoint 2010 help documents.


> Quick Launch: Provides current navigation. Sometimes referred to as the Left Navigation. It is the secondary or vertical navigation mechanism of the pages related to the current location.


> Tree View: Provides a Windows Explorer–style representation of the site. Because of its appearance, the tree view is often better suited for intranet sites.


> Recycle Bin: Provides a link to the Recycle Bin for the site, which is the area where items are stored when deleted. Typically, this is better suited for intranet sites.


> All Site Content: A link to the All Site Content page. This was the View All Site Content link in Office SharePoint Server 2007. Typically, this is better suited for intranet sites.


> Body area: Represents the main content placeholder that includes all of the content that is specific to the page. Required for rendering the content of the page.

Customizing SharePoint 2010 Master Pages: Approaches


To customize the primary master page in SharePoint 2010, you can use the v4.master page as your starting point by customizing a copy of it, or you can create a new custom master page from scratch, and make it the primary master page for your site.

Both approaches have their advantages and disadvantages...
1. By customizing a copy of v4.master, you’re using the existing SharePoint look and feel, with its features, brand, and design elements, and customizing it to meet your requirements. While it can be challenging as you try to understand how everything works in the v4.master page, this approach is useful for minimal branding or customization efforts, like changing the header of your SharePoint pages.

2. By creating a blank custom master page or by using the Starter Master Page as the basis of your page, you’re creating the whole design from scratch. While this approach can be challenging because you need to know how to implement a design in SharePoint, it’s also more flexible when you know the design you’re trying to create and you’re working off existing plans and prototypes. The mostly empty page acts like a canvas for you to first build your design and then add the required SharePoint components. 

Mastering a Master Page requires an understanding of the Content Place Holders and other tags in the code.
All the Content Place Holders are mandatory in a master page. You can only hide them with this property visible="false" in an asp panel if you dont require them. These Content Place Holders define sections like Global Navigation, Logo, Quick Launch, Top Navigation, User Welcome, Site settings, Main Content Area, Breadcrumbs, Left Navigation etc

Static and Dynamic Display Levels for SharePoint 2010 Global Navigation

The Code Snippet for Global Navigation in SharePoint 2010:



Code Snippet for SharePoint 2010 Global Navigation



















Static Display Levels refers to the levels you can see just looking at the page. 
The dynamic levels are the ones that you would see as drop-down items when you mouse over their "static parent."


The number of menu levels to render for a dynamic menu. The default is 3. The Maximum is 5.
It is advised to have the Global Navigation on the Left hand side of the SharePoint Page. The reason being, if you have 5 Dynamic display levels for the 'last static parent' in the Global Navigation, you will be unable to see all the drop down menu levels because they disappear from the page due to lack of space to display.


Users can display multiple menu levels in the static menu by setting the StaticDisplayLevels property to a value greater than 1. You can also display additional levels in dynamic menus by setting this property to a value greater than 0. For example, if you display two menu levels in the static menu (by setting the StaticDisplayLevels property to 2) and then set this property to 3, three additional menu levels are displayed in dynamic menus. All remaining higher menu levels (if any) are discarded.

Navigation in a SharePoint 2010 Site thru Breadcrumbs.

Two types of breadcrumbs that can help navigation in a SharePoint Site: Horizontal and Folder Breadcrumb. They show the navigation Path to the current/landing page and at the same time help you move (backward) to higher level sites on the Path.
With the Folder Breadcrumb, you can move across sub-sites within your team site. When you mouse over the Folder icon, you can view the Navigation from the Root Site to the Landing page.
The Horizontal Breadcrumb, you can move across pages within a site or view options to list pages.

If you don't like the SharePoint 2010 style breadcrumbs and want to revert to the SharePoint 2007 style breadcrumb, copy the 'Breadcrumb' code snippet from the v3 master page.
In the v3 master page (default.master) you can see the following code and paste in your v4.master master page.



I have noticed a few uncertainities and abnormal behavior in the Site Settings page where it does not display the path in a horizontal style. It works perfectly in most pages.

SharePoint 2010 Master Pages

Master pages define a common structure for all Web pages. By default, when a page is requested, the master page and content page are combined to produce a single page. The page contains the layout elements of the master page along with the content from the content page. By using a master page, all content and application pages share the same page structure and have a consistent look and feel.
Master pages contain static text and controls that appear on all pages. They also contain one or more ContentPlaceholder controls. Content placeholders define the regions where information that is stored in a content page appears. Custom master pages must have the same controls and content placeholders as the default master page.
The content placeholders for application and content pages are now the same in Microsoft SharePoint Foundation. By having the same content placeholders, content and application pages can use the same master page for a more consistent look and feel across a site.
SharePoint uses v4.master as its primary master page. All content and application pages use v4.master. When the product is installed, the master pages are located in the %ProgramFiles%\Common Files\Microsoft Shared\web server extensions\14\TEMPLATE\GLOBAL directory. As long as this master page is not customized, its page definition is cached on the front-end Web server and shared across sites. If the master page is edited for a particular SharePoint Foundation site, the edited copy of the master page file is stored in the content database.

v4.master: This is the default team site master page used with version 4 of the UI. It provides the ribbon bar and all of the other new visual UI changes such as the site actions menu on the left side. This will be the master page you typically use.
If you have upgraded to SharePoint 2010 and haven’t switched to the new UI yet, the old master page is still in default.master. This looks like the master page you use in SharePoint 2007 or version v3. It doesn’t have the ribbon bar and the site actions menu is still on the right side.
Changes from the v3 version…
Site actions have been updated for 2010 and they appear on left, Ribbon bar is available

Simplev4 Master pages
SharePoint Foundation includes seven pages that use the simplev4.master master page file. These pages render even if the site master page is broken or not accessible to the current user.
1. Login.aspx
2. SignOut.aspx
3. Error.aspx
4. ReqAcc.aspx
5. Confirmation.aspx
6. WebDeleted.aspx
7. AccessDenied.aspx


minimal.master: This is a slimmed down master page with just nothing on it. It doesn’t even have navigation. The Search Center uses this page by default.

simple.master: This page is used for login and error pages. It can’t be customized.
Pages using simple.master
· Login.aspx
· SignOut.aspx
· Error.aspx
· ReqAcc.aspx
· Confirmation.aspx
· WebDeleted.aspx
· AccessDenied.aspx

default.master: Sites upgraded from SharePoint 2007 use this unless they are changed to use a v4 version. It has Site actions on right side and are same as SharePoint 2007 version and No ribbon bar.
To customize any of these pages, a replacement page must be created and stored in the _layouts directory on the server.

Other Master Pages: Other miscellaneous master pages are generally not manipulated when branding a site.

These are:
· application.master
· applicationv4.master
· dialog.master
· layouts.master
· layoutsv3.master
· pickerdialog.master
· rtedialog.master
· simple.master
· simplev4.master
· mwsdefault.master
· mwsdefaultv4.master
· admin.master
· popup.master

SharePoint Master Page: Customizing it to brand your site

SharePoint Master Page: Customizing it to brand your site

Master pages provide the look and feel for all of the pages in your site. By changing the styles or content of the master page, you can quickly change the appearance of an entire site.

You can create and modify a copy of the existing primary master page (v4.master) and then apply the new or modified master page to all of the pages in your site that are attached to the primary master.

There are 2 applications of a Master Page: Site Master Page and System Master Page.

You can use SharePoint Designer 2010 to design your master page.

Master pages define your page layout. Master pages define the common layout and interface for SharePoint pages. The primary master page displays the persistent elements that you see when you navigate from page to page on a site, such as a company logo, title, navigation menu, search box, and the colors or graphics associated with the business or organization. Other typical persistent elements include a sign-in link, the Site Actions menu, and the Ribbon commands in the same place on every subsite. These elements are all stored in the primary master page.

The individual pages on a SharePoint site – the home page, a wiki page, a list view – are all handled as content pages on the site. When these pages are viewed in a browser, they are combined with the master page to produce a single, continuous web page. The master page displays the persistent elements and layout, while the content pages display the unique, page-specific content.

When you open your site in SharePoint Designer, and then click Master Pages in the Navigation pane. Click v4.master to see summary information in the Master Page Gallery. Click Edit File in the ribbon to open the master page. This opens the master page in the SharePoint Designer 2010 full-screen page editor. Here, you can edit the page in Design view, Split view, or Code view. With design-time support, you can see what the master page looks like as you customize it.

A number of features make it easier to create and customize master pages in SharePoint Designer 2010 than it has been in the past:

The navigation menu includes a Master Pages category that takes you directly to the Master Page Gallery on your site.

When editing master pages, you can use page editing tools to insert and manage layers, or position DIV tags; and you can quickly locate those layers and other elements using the Skewer Click option, which navigates through overlapping layers for you.

When you create a new site and Web Part Pages, they’re automatically associated with the primary master page, so you don’t have to manually associate them each time.

To use a custom primary master page in your SharePoint 2010 sites, you can:

Customize a copy of the default primary master page (v4.master), or Create a new custom master page from scratch, and make it the primary master page for your site.

To customize a copy of the default primary master page.

When you customize a copy of v4.master, you’re using the existing SharePoint look and feel, with its features, brand, and design elements, and customizing it to meet your needs. While it can be challenging as you try to understand how everything works in the v4.master page, this approach is useful for minimal branding or customization efforts, like changing the header of your SharePoint pages.

When you create a blank custom master page or use the Starter Master Page as the basis of your page, you’re creating the whole design from scratch. While this approach can be challenging because you need to know how to implement a design in SharePoint, it’s also more flexible when you know the design you’re trying to create and you’re working off existing plans and prototypes. The mostly empty page acts like a canvas for you to first build your design and then add the required SharePoint components.

DEFAULT MASTER PAGES IN SHAREPOINT 2010

The v4.master page is the default primary master page in SharePoint 2010. It provides the SharePoint 2010 look and feel, interface, and functionality, including the ribbon – a new interface with menus, buttons, and commands similar to Microsoft Office applications. The primary master page is used for both content pages and application pages in SharePoint 2010.

User Experience : The science of the art

The definition of User Experience has always remained blurry. In Wikipedia terms, it is the way how humans feel after having an interaction with a system. The problem with this statement is that it treats a human and a system as two different rigid entities. The idea that is always remained pertinent is customization. A system can never be designed to fulfill the experience of every human being, but does it have flexibility to create this experience?

So what is the science behind this art of getting the User to re-enter the system. Now there have been numerous studies on User Experience where they are trying to blend Information Architecture to Graphic design. Then there are behavioral studies such as Hassenzahl’s study that tend to judge the human behavior and attitude towards a product representation.

But these studies are still studying the surface and not hitting the core. One man who hit the core was Steve Jobs with products like Mac, iPads and iPhones. And how did he pull it off? Was it the exclusive studies and research on the creation of the User Experience? No, it was a simple arts class that he took, accidently, during his college days and was mesmerized with the way the content can be represented. He used the concept in Macintosh, which got copied into Windows and is used by most.

The Mobile Universe has captured the imagination of today’s users. Their User Experience can be described as fast, eye catching and configurable. The mobile UX is fascinating because user is emotionally attached to the device due to personalization; the data in the apps are concise and new plus the platform based devices have the capability to change the graphic designs every now and then. Mobile UX can conveniently be the yardstick for most of the web based applications for design.

User Experience is not about bombarding data to the end user or presenting flashy css (stylesheets). It has always been about meaningful representation of content. Symmetry and intent should be the driving points for any product’s UX.