UX & IA Design Thinking

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 created a blog post about 2 years ago on how to create a centered fixed width design for SharePoint 2007 . Well now with a little help from a few other posts ( The SharePoint Muse , Elumenotion , Styled Point ) we can create a SharePoint 2010 fixed with centered design. Now this does come with some drawbacks. By default the ribbon is intended to stay static and always be visible to the contributors on the top of the page. However due to the complexity of fixing a site’s width. The ribbon will need to scroll with the body of the page to avoid a vertical scroll in the middle of your page once it is centered… The trick to get this to work is to do the following: Open up your master Page and remove scroll="no" from the body. If you do not do this there will be no scroll bars on long pop up modal windows In the Master Page search for “s4-workspace” remove this whole DIV tag and its close Div tag at the bottom of the master page. This ID is ...

To convert the large social buttons to smaller ones you simply have to modify the following: Within your custom Master Page search for: “ GlobalSiteLink3 ” Simply Add “ -mini ” to the control ID Original Large Control: <SharePoint:DelegateControl ControlId=" GlobalSiteLink3 " Scope="Farm" runat="server"/> New Small Control ID: <SharePoint:DelegateControl ControlId=" GlobalSiteLink3 -mini " Scope="Farm" runat="server"/> If you want to make the small buttons horizontal versus vertical simply add the following to your custom CSS: .ms-mini-socialNotif-Container{     white-space: nowrap; } Enjoy!

I have been working with the State of Illinois to get their public .gov SharePoint 2007 site up and running. http://www.illinois.gov . The site has undergone a major UI and Usability overhaul and is now live! This site is built for all users. Accessibility has been a huge focus. We plan on adding some additional features that will really make this a top 10 State Government Website. During the process we reviewed some of last years top ranked state government websites: Center for Digital Government Ranking site. 1st Place: Utah 2nd Place: California 3rd Place: Arkansas (SharePoint) 4th Place: Maine 5th Place: Colorado Others: West Virginia (SharePoint) Maryland (SharePoint) The Governors site is in the process to be upgraded as well.

I have been asked quite a few times if the SharePoint 2007 two tier global navigation will work with SharePoint 2010. The answer is yes with a few slight modifications. The approach stays the same: Master Page points to web.config > web.config points to .sitmap file > Page Renders custom navigation control. The difference between 2007 and 2010 of course is that you want to add the custom site map provider to the new 2010 web.config file. Search for the following in the web.config file: “ sitemap ”. within the last row add the following: <add name=" DEMOGlobalNavSiteMapProvider " siteMapFile="/ _layouts/1033/styles/demo/DemoGlobalNav.sitemap " type="Microsoft.SharePoint.Navigation.SPXmlContentMapProvider, Microsoft.SharePoint, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" /> You will notice that I placed my custom sitemap file in the style folder within the layouts directory. There is also some slight changes to ho...

I was recently on a project where there was a requirement to have many items in the main navigation. There was not an option to consolidate these into smaller groups. The idea was to move the search box up into the top ribbon bar. This would allow for more horizontal space for the navigation items. However in my attempt to move the search I found a little gotcha. I selected the search control in SharePoint Designer and moved it right above the welcome navigation control code. Wrapped the control in a div tag and temporarily added an inline style of float left. <div style="float: left;">    <asp:ContentPlaceHolder id="PlaceHolderSearchArea" runat="server">       <SharePoint:DelegateControl runat="server" ControlId="SmallSearchInputBox" Version="4"/>    </asp:ContentPlaceHolder> </div> I saved the master page and then ...

I created a post about a year ago about Using Visio for SharePoint Wireframes . So now that 2010 has been released I got busy building the next generation Visio Wireframe Toolkit for SharePoint 2010. It is currently around ~40 pages that range from Wiki, team site, meeting workspaces, search, my sites, and application pages. All the text, navigation, web parts, and images are editable and can be added, moved, edited or deleted. In this version I made sure that the correct colors, fonts, and web part placements were true to the application. On most of the templates I have included some basic information about the page layout, web parts on the page, and libraries/lists included. Here are some samples: Team Site Contacts Web Database My Profile Silverlight Organization Viewer I wish I could share it with everyone but my hands are tied and I cannot. It is an EMC Consulting artifact and I am writing this blog post to mainly get the word out that Visio is st...