UX & IA Design Thinking

I have been wanting to write this one for a while now. It is really amazing how UX is really finding is way into everything that we use and interact with. From Custom applications both mobile and on a desktop to document management or large data visualizations. There is always room for better usability and new concepts. SharePoint lists and library functionality really has not changed much for the past 10 years... I remember back in 2003 when I saw the same table/grid based views of documents and list items that exists in SharePoint 2013. But now we can look at them in a whole new way! In this video blog you will see how to create a responsive CSS table so that when the browser size is reduced it will hide specific columns. However hiding data is not always the right thing to do. What if a user needed those columns to filter on or to use for comparison to another document? Well that is where the custom jQuery Column chooser comes in. It allows you to see what columns are displ...

I have been wanting to write about this topic for quite some time. In this post I will review what all this buzz is about around Responsive design and relate it back to SharePoint 2013. In this post I will not be focusing on any of the Twitter bootstrap or HTML5 boilerplate stuff. I will simply be focusing on CSS3 Media Queries and how it relates to SharePoint 2013. In the video below I have put together some discussion points around min-width vs. max-width and also different ways that you can make SharePoint 2013 responsive with just CSS. Per the video above here is the code that I referenced: Simple Responsive CSS Custom Responsive CSS Overall I wish there were more standards on how and when to use these media queries. I will be looking forward to your comments and suggestions for more topics. Thanks!

First off I would like to apologize for the lack of posts. I have been really busy with my new role as the UX Design lead within Slalom Consulting Boston. I will share more about that in another post. In a previous post Create Really Small Calendar I showcased how to do this for SharePoint 2007. However the 2010 and 2013 calendar views have changed and therefore we cannot use the same method or CSS as 2007. SharePoint 2010 Small Calendar: SharePoint 2013 Small Calendar: See video below for a video walk through on how to create a small calendar for SharePoint 2010 and & SharePoint 2013 with just CSS. Per the video above here is the code that I referenced: 2010 CSS link reference in Master Page: <SharePoint:CssRegistration name="<% $SPUrl:~sitecollection/Style Library/smallcalendar.css %>" After="corev4.css" runat="server"/> 2010 CSS: /**** Small Calendar ***/ .ms-acal-item{height: 10px !important;}...

After reviewing the main CSS files that make up the base look and feel for the SharePoint 2013 look and feel. The number one font is “Segoe UI” which is applied to the global BODY element. One thing to note that for having over 13,660 lines of CSS within the corev15.css to only have 46 font-family references and 30 of them being the primary ones that shows the consistency and reduction in the amount of CSS used for this new version of SharePoint. Example: font-family:" Segoe UI ","Segoe",Tahoma,Helvetica,Arial,sans-serif; corev15.css : Primary CSS file referenced font-family:" Segoe UI "; (Used – 19 times) font-family:" Segoe UI Semilight " (Used – 7 times) font-family:" Segoe UI Light " (Used – 3 times) font-family:" Segoe " (Used as secondary – 11 times) font-family: Tahoma (Used as secondary – 6 times) font-family: Helvetica (Used as third – 21 times) font-family: Arial (Used as f...

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

In this session I will describe the process of taking an existing HTML file and converting it into a HTML Master Page within SharePoint 2013. The HTML file used is based on the Twitter Bootstrap responsive design.

In some cases when you need to add a footer to a custom brand you will notice that on pages that have really tall left navigations (Quick Launch) and a small content area the left side navigation will overflow and display on top of your custom footer. The reason for this is that your left side navigation is floating to the left of the content area. And therefore it is no longer being considered for height and will ignore your footer. By default your content area will push your custom footer down as it grows larger. Here is an example where the left navigation is really long and floats on top of the custom footer: To fix this you will need to set the footer div to have a inline-block property and also set the width to 100%. Your custom footer will be included right below that DIV. See below example. <div id="s4-bodyContainer">     <div id="s4-mainarea">         <div id="s4-l...

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...

For content authors the ability to stylize web parts with just a few simple clicks is a big win. In some cases you might want to emphasize a web part on the page and make it stand out. There are basically 4 main web part styles/chrome that you can apply to any webpart. You will notice below that the chrome type “None” and “Title Only” do not have a unique class name so they will share the same style. The “None” style simply does not show the web part title. Chrome ( None ): . ms-WPBody { font-size:8pt; font-family:verdana,arial,helvetica,sans-serif; } Chrome ( Title Only ): . ms-WPBody { font-size:8pt; font-family:verdana,arial,helvetica,sans-serif; } Chrome ( Title and Border ): . ms-WPBorder , .ms-WPBorderBorderOnly{ border-color:#9ac6ff; border-width:1px; border-style:solid; } Chrome ( Border Only ): .ms-WPBorder, . ms-WPBorderBorderOnly { border-color:#9ac6ff; border-width:1px; border-style:solid; } ...

After 6 months of hard work my SharePoint 2010 Branding Book: Practical SharePoint 2010 Branding and Customization   is finally available for order from Amazon !!! If you are quick and order now, you can get it under your tree by tomorrow! This book is a great deal as it comes with 2 pre-built visual designs , a visual studio solution for applying the designs, and of course a great resource book to help you on your branding journey. The two Visual designs included in the SharePoint Branding Kit : Many thanks to Chris Arella, Matt Lally, Robert Dornbush, and the team at Apress. This would not be at all possible without the support from my family and friends! Happy Holidays!

Have you ever wondered what are the major font types, sizes, colors, and images for SharePoint 2010? This post will cover some of the major statistics that are related to SharePoint Branding. This post originally spawned the topic of why SharePoint uses PT’s for font sizes when PX or EM’s are much better. Kyle Schaeffer created a very nice post about why you should use one format over the other: http://kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/ . Over 75% of all font sizes declared in the standard SharePoint 2010 base style sheets use a font-size in Points. Example: font-size:8pt; Below are some other interesting statistics when it comes to other SharePoint 2010 support file statistics. Server Side Files: Not surprisingly there are a lot of images that are used to make SharePoint look the way that it does. The number would be slightly larger if the sprite images were broken out. There a ton of CSS files and what surprised me most is the amount of uni...