UX & IA Design Thinking

SharePoint 2013 Display templates are one of the many new features in SharePoint 2013 Publishing site Design Manager. In the following video blog I walk you through creating a mocked up wireframe that includes a image rotator, document, blog post, and task query. I created a custom Page layout and also walked through the process of customizing and creating your own display template. This is all possible with the use of the new Content Search Web Part. Enjoy!

In this session I will walk you through creating a new HTML Page Layout and adding snippets.

I just recently needed to add in the default audience field control to a publishing page layout. So that when you edit the page you can easily specify the target audience for the page without having to go to “Edit Properties” in the ribbon. The only issue is that it is not as simple as you would think. In my previous post I provided detail on how to Hide SP 2010 Page Layout Metadata – WebControls however the “Audience” field control requires some additional references to the Microsoft.Office.Server.UserProfiles field types. I found this blog here: Showing the Audience Target field in an EditModePanel #SharePoint #SP2010 #in #ProjectServer #PS2010 that really helped with solving my problem. So basically to add in the audience field control to the page in edit mode you would simply have to do the following within your custom page layout. Add in the following to the reference section near the top of your page layout. <%@ Register TagPrefix="OfficeWebControls"

If you ever needed to add in the local time and a date for the logged in user to your custom page layout or master page below are some ways that you can achieve this. Option #1 The first method uses a SharePoint Portal Web Control to display the logged in users current time. This control is normally used on the profile pages to show current time for the profile that you are viewing. One benefit that you get from this approach is that if you have users that view the site from multiple locations around the world they would see the current time based on the time zone that they have set in their my site Profiles. To add this web control to your master page do the following: Add in the following registration to the top of the master page: <%@ Register Tagprefix="SPSWC" Namespace="Microsoft.SharePoint.Portal.WebControls" Assembly="Microsoft.SharePoint.Portal, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> Ad

In this post I will walk you through the process of adding in “Hidden” metadata to your page layouts so that they are only visible when editing the page. For example if you want to create a news article with categories, start date, end date, keywords, and other metadata that might not be relevant to the consumer then instead of forcing your content authors to create content in the edit mode and then force them to update metadata by editing the page properties why not have them all on the page. This allows for a single page authoring experience. This post also provides the specific field names for the most common SharePoint 2010 base columns and web controls. (Really good stuff) Microsoft.SharePoint.WebControls Namespace Standard columns that are used for most metadata column types. URL: http://msdn.microsoft.com/en-us/library/ms413880.aspx Example: <SharePointWebControls:RichTextField FieldName="MultipleLines" runat="server" /> Microso

Update: Quick fix at the bottom of this post. Here is a SharePoint 2010 Bug that needs to be fixed. If you have a custom design and you moved the site actions out and below the Ribbon Control, you will notice that when you go to change a publishing page layout via the ribbon the option is disabled. Here is what the SharePoint 2010 publishing site Ribbon Page Layout Chooser looks like when active: If you move the Site Action Control <SharePoint:SiteActions out and below the Ribbon Control <SharePoint:SPRibbon something similar to this: And then edit the page and try to change the publishing page layout you will notice that some of the ribbon buttons are now disabled. The key issue here is that the site actions control is removed from the SPRibbon control and placed BELOW it. If you move it out of the ribbon control and above it it seems to work fine. Thanks to my friend Chris Arella he was able to figure out why this was happening. A big thank you to Ju

I was recently asked: " How can I hide the side nav bar on the main homepage layout ?? I want to be able to use the side NAV with in the team site etc etc, but I don't want it on the front page.. " There are a couple of ways to do this in SharePoint 2010 . If you are using a non-publishing site you can add a Content Editor Web Part to the page and add the following to the HTML Source. <Style> body #s4-leftpanel { display: none; } .s4-ca { margin-left: 0px; } </style> Basically the CSS above hides the left navigation Div, and then sets the content area to not have a left margin. Once you are done, simply modify the web part and hide it on the page. If you are using a publishing site for your homepage simply add the same styles specified above to a custom page layout. That way if you have a need for other pages that do not need the left side navigation you can re-use the page layout.

I have been searching for a simple tab web part for SharePoint but mostly came up empty handed… I was looking for something that a user can easily drag and drop a web part onto a specific tab within the page. There are quite a few free tab web parts out there but most of them were not just quite what I wanted. I checked out the following Tab web part solutions. Easy Tabs : From Path To SharePoint Pro: The tabs automatically take the name of the web part. Con: There is no option to add more than one web part per tab, and the User Interface is not that intuitive. Zone Tabs : From MSDN Pro: You have a lot of options for tab customization Con: It’s a web part that you have to install on the server. From what I remember it’s not that easy to re-arrange the web parts on the page. I finally found this article from Bits Of SharePoint Site : http://www.bitsofsharepoint.com/ExamplePoint/Site/TabPage.aspx His code was exactly what I needed. All

Rounded corners have become a staple in website design. But they come with a price. Don't get me wrong I really like the look of them and they really help soften the look of the site. In most cases you can create this look by using the method below. Later on in this post I will highlight some of the things you can do and some of the things not technically possible without major custom development. Design 1: Rounded corners to frame a site: Open up your master page and add 1 <div> tag right before the ms-main table to represent the site container (This is used to position the site and give it its width) Add 4 more <div> tags before the ms-main table to represent your 4 corners (top left, top right, bottom left, bottom right) <div id="xyz-content-corner-tl"> <div id="xyz-content-corner-tr"> <div id="xyz-content-corner-bl"> <div id="xyz-content-corner-br"> Add in the followin

After all branding files have been created we as designers sometimes don't get the option to install and implement the visual design ourselves. So the creation of an Install Guide can be important in two ways. Ability for the site owner/Administrator to have a back up guide on how to re-apply the visual design in case of a Disaster Recovery. If someone other than the creator of the branding files needs to apply the branding due to security reasons/Location. Below are some install instructions for a site with the following: Publishing Site Custom Master Page Custom Page Layout Custom CSS Custom Images Step 1: Enable Publishing Feature: Enable the Office SharePoint Server Publishing Infrastructure Feature for the top level site collection. Click on Site Actions > Modify All Site Settings Click on Site collection features Make sure the "Office SharePoint Server Publishing Infrastructure" is Active Enable

Master Pages, Page Layouts, and CSS are the building blocks of SharePoint. Understanding the In's and Out's of all of these might require a Master's degree. But don't worry we have tools to make this process allot easier. I guess you could think of SharePoint as a house. To build this house, we need to start with a foundation (Master Page). As we start building we plan out the different rooms in the house and the layout (Page Layouts). Finally once we get the plumbing and electrical in (Controls/Webparts) we take out the paint brushes and start designing the look and feel.(CSS) Within the Master Page's Head is where the default CSS file is referenced. <SharePoint:CssLink runat="server"/> also within the master page is where main content placeholder is referenced. This main content placeholder is the Page Layout for publishing sites. <asp:ContentPlaceHolder id="PlaceHolderMain" runat="server"> </asp:Content