Category Archives: Design

Tools for SharePoint User Experience (UX) Design: Interactive Prototyping

You may also be interested in: O’Reilly - SharePoint 2010 at Work


Editor’s note: Contributor Adrian England is the Senior User Experience Designer at Creative Sharepoint. Follow him @ade_england


Following on from the previous articles in this series Scamping, Paper Prototyping and Wireframing, the topic for this article is Interactive Prototypes.

What is Interactive Prototyping?

In the previous articles in this series a concept was taken through the stages of initial scamps to get the ideas down on paper and iterated quickly, a paper prototype to explain individual elements of functionality and then the creation of wireframes to show how the content will sit within the site.

At this stage you will probably have a number of wireframes depicting the different pages within a site. These wireframes will undoubtedly have the correct content and layout in place, but it may be difficult to illustrate how the individual pages come together to form a complete site.

This is where the interactive prototype comes in. Using Axure to create the initial wireframes means that these pages can now be wired together to form a clickable, navigable site. Again these files should contain no element of design, these should be purely monotone layouts with no imagery or stylised fonts, ensuring the focus is on the content with the addition of interaction.

Taking the wireframe created in the previous blog we can now add functionality, links, interactions and more… For the purpose of this blog I will focus on making the site navigable but there is a lot more that can be achieved by Axure, their site has a number of tutorials ( and a lot more resources can be found online.


Using Axure to create an Interactive Prototype

First off we need to decide which elements of the site will be used across all (or multiple) pages. For the purpose of this wireframe the header containing the navigation, site logo and search area will be required as a consistent element across the entire site.

For larger projects these elements could include document libraries, lists, newsfeeds, calendars or any other element that should remain consistent.

Similar to the SharePoint Ribbon in our SharePoint2013 Axure Library any page element can be turned into a “Master”.

Taking the wireframe created earlier, drag and select all of the elements in the header area.


Right click on this selection and “Convert to Master”, naming the item “Header”.


This new Master element will be displayed in the Masters panel (to the left of the prototype). Rename the pages (in the Pages panel) as required, then right click on the Header Master (in the Master panel) and select the pages it should be added to. The Master element can also be dragged on to an individual page and repositioned if required.


Now edit the master by double clicking on the master element, either on the page (highlighted in red) or in the Master panel, this will open the Master created earlier so you can edit all the pages globally.

Links can be added to the Navigation buttons by right clicking on them and adding cases. The Header will now be updated with links on all pages that it has been placed on allowing the site to be navigable.


When finished adding content and functionality to each page, the prototype can be exported into a html prototype allowing the user to click through the site and explore.

Once tested by the user and approved the project can then progress to the design stage, confident in the knowledge that the content and functionality have been agreed. Going through this process and separating content, functionality and aesthetics allows the designs to be considered purely on their own merit and the underlying functionality understood without further explanation or iteration.

SharePoint 2010 Status Indicators

You may also be interested in: O’Reilly - SharePoint 2010 at Work


Editor’s note: Follow contributor Justin Singer @dynamics_101

What are SharePoint 2010 Status Indicators?

Set a goal to increase sales in North America by 10 % in 6 months but don’t know how to monitor the up-to-date business performance? Want to increase employee retention rate but don’t know what to measure in order to improve it? Have all the data collected from your calling center but can’t visualize employee work performance? Status Indicator in SharePoint 2010 can help you solve these problems easily. Status Indicator can use any kind of numeric information to measure performance or progress against a set of targets and therefore allows you to visualize the real-time status of a process. This post explains Status indicator in details and shows you step by step how to create a Status Indicator in SharePoint 2010.

How can SharePoint Status Indicators improve performance?

Having said that status indicators are used to keep track of progress against its target, well-selected status indicators can actually help improve business performance. For example, utilization rate of a consultant is a key success factor to a consulting firm. If this value is measured, updated and shown on a Web page, the managers can monitor employee performance easily and the employees are encouraged to improve work performance. In order to utilize Status Indicator to improve performance, the manager needs to identify the most important factors of business success. Taking into the consideration of the source of the data, the calculation, the goal settings and data security, the manager needs to carefully design the indicator so that it addresses the key issues of an organization.

Data Source:

Indicator values can be selected from different sources of data. Depending on the source, there are four types of status indicator that can be created in SharePoint 2010:

  • Data from SharePoint lists: If you have numeric data stored in a SharePoint list, you can select, count, or aggregate the values in the SharePoint list to be used as an indicator value.
  • From Microsoft Excel workbooks: If you have a Microsoft Excel workbook stored in a SharePoint library, you can select the value in a cell from the Excel workbook directly as the indicator value. When the workbook data changes, the indicator value will be updated automatically.
  • From Microsoft SQL Server 2005 Analysis Services: If the indicator value is retrieved through a data connection with SharePoint server, this option should be selected. E.g. You can import a Key Performance Indicator (KPI) from a SQL Server Analysis Service cube
  • Manually Entered information: If you want to manually enter information to be used an indicator value, choose this indicator type. It is recommended for measuring process of one-time projects.

Data Security:

Data security is a key element to the success of using Status Indicator. Whether the status indicator contains sensitive information or not, to guarantee accuracy of the indicator, only authorized personnel should view or change the data. To protect data, there are several ways to set permissions in SharePoint 2010, such as setting permissions on a source list and etc.

Create a status indicator:

In order to create a status indicator, you first need to create a Status List or a Web Part with Status List. Here I’ll show you step by step how to create a Status List on a SharePoint site:

Step 1: Click Site Actions, then click View All Site Content


Step2: On the All Site Content page, click Create


Step3: From the Custom Lists column, click Status List


Step4: Enter the Name and Descriptions of the Status list and choose Yes to display the list on the Quick Launch bar, and then click Create


Now you can view the list from the Quick Launch bar and create new status indicator here:


Step 5: Click New and choose the status indicator type based on data source


Step 6: Enter the Name and Description of the status indicator. Notice the settings of status indicator vary depending on the type you selected. Here we will show you examples of Fixed Value based and Excel workbook based indicator.

  • Fixed Value based Status Indicator:

Manually enter Indicator Value:


  • From Microsoft Excel workbooks

    If you choose to create status indicator from Microsoft Excel workbooks, you will see the following box. To set the indicator value, first type the URL of the workbook. Note that the Excel workbook must be saved in a SharePoint library in the same site. Click the icon on the right side of the box to browse the site and select the workbook.


Click the icon on the right side of the Cell Address box to select the cell:


Step 7: Set the Status Icon rules. From the Better values are dropdown list, choose higher if the higher values are better and choose lower if the lower values are better. Enter manually the goal value and the warning value

Step 8: (Optional), In the Details Page box, enter the URL of the page that has detailed information about the indicator.


Note: you can also choose to set Update Rules if the indicator value is NOT entered manually


Step 9: Click OK


An indicator is created and listed in the Status List (named Employee Monthly Sales Details):


To view the details of the indicator, click on the name of the indicator:


Well done! You’ve just created a Status list and a Status Indicator on a SharePoint site.





SharePoint Style Counsel

You may also be interested in: ViewPoint for SharePoint


Editor’s note: Contributor Ellen van Aken is an experienced intranet adoption manager. Follow her @EllenvanAken

2013-05-17-SharePointStyleCounsel-01.jpgWhen you select your clothes for today, you can decide to wear something that is clean, whole and covers what needs to be covered. You can also refine your selection by choosing something that matches your mood and flatters your personality, figure and colouring. Then you can add accessories like jewelry, a scarf and a good handbag to make the end result even better.

Hello! This is a SharePoint blog!

Yes, be patient, I am getting there2013-05-17-SharePointStyleCounsel-02.gif.

Most people think that SharePoint does not look nice. So they customize the standard look and feel. They bring in a bunch of designers for every site that facilitates an important corporate initiative. They add pictures, icons and headers to sites with lesser visibility, all to make it look a little better.

Yet these are just the accessories that only work well when the content is good, and is displayed in the best possible way.

How do I display my content in the best way?

Using the default view for a web part or a list/library is dressing your content in something that does what it must do. Functional, but not always optimal. Why not put in some effort to make sure it is really both the best possible content and it looks good?

First of all, check if the columns, sort order, filters and grouping that you display are just right for your purpose and your audience.

Then you can select a View Style that enhances your content style, makes it easy for your audience to use it, and displays it in its full glory.

Where do I find the View Styles?

They are on the page where you create or modify a View, between “Totals” and “Folders”. If you expand it, you will see a number of different styles. Most styles mentioned below are available for Lists as well as Document and Picture libraries.

Basic Table and Default.

This is the default look. In my Office 365/SharePoint 2010 environment they are the same. In Picture Libraries, the default style is the Picture Library Details style.

Default View

Boxed, no labels and Boxed.

Both styles display your line item in a coloured box, showing two items next to each other in the zone. This is ideal to display content such as contact details. The “Boxed” displays the column names, the “Boxed no labels” does not and is somewhat crisper, but only when the content speaks for itself. (e.g. you will recognize that the content is address and telephone number, or as in the example below, it is an announcement).

This style is comparable to the “Document Details” view in Document and Picture Libraries.

Boxed No Label

Document Details

Newsletter and Newsletter, no lines.

If your list has a “multiple lines of text” column the Newsletter Style will make the most of your text content. Your text field will be spread over the full width of the zone, which reads much easier and makes much better use of the column width.

Make sure the text box is the last column to be displayed in the view, and use the minimum of other columns (e.g. Title, Created and Created By) to make your text stand out!

I have used this style for the memo’s in Facebook in a Team Site, and for an in-company blog (based on an Announcement list) before we had proper blog functionality.

Newsletter Style


Does your long list look plain and boring? Is it difficult to see which line item is which? Are you tired of that solid block of white background? You may want to try the Shaded Style. This adds a soft background colour to alternate line items. It is ideal to break up long lists or lists where the column content is spread over two or more lines. Using the Shaded view makes it easy to see which content belongs to which line item. This is the style I use most often.

Shaded View – the exact shade is depending on theme; here it is not very pronounced.

Preview Pane.

Do you want to show many columns in your list, but you do not have enough room in your zone to display nicely? Or do you have a long list wtih many columns? The Preview Pane shows all item titles on the left hand side, and the other selected columns of the item when you hover over the title. This way you can show your content on-demand, in a compact way. Your titles should be very precise, of course, because you have no other indication of the content.

Preview Pane landing page

Preview Pane upon selecting a title

Please note that styles may change functionality; please read Veronique’s post.

Do you have any nice examples of using different styles to display your content? And what is your favourite style?

Title based on the band The Style Council. I wonder where they got their name from?2013-05-17-SharePointStyleCounsel-02.gif

TechEd Australia Recording: Real World: SharePoint Customisation - Developer vs. IT Pro


The recording of the session I did with Mark Rhodes is now up on Channel 9! We came second in the Office track with a full room…people spilling out the door and sitting on the floor! Was a great event! This is a great webinar for anyone who is a Developer or an IT Pro to watch…!


Hack SharePoint Master Pages: Introduction

You may also be interested in: the only cloud-based Dev/Test solution for SharePoint by CloudShare


Editor’s note: Contributor Marc-André Bilodeau Lamontagne is a .NET developer at Group GSoft. Follow him @forumma

Last week, I read an article by Benjamin Niaulin, where he explained why to "Brand your SharePoint?". Afterwards, I did some research on the subject and discovered there are not a lot of resources for power users who want to be able to understand and apply nice branding to their SharePoint site.

Basically, there are three levels of branding in SharePoint 2010. The first level is to change the site theme; to have new color and new font inside your site. This is really easy to do, but the result is really basic. The second level of branding is to change the CSS or use a custom CSS file. This is the main topic of Benjamin’s series. With this, you can make some really nice improvements and change the look and feel of your site. But the results are limited to changing the existing design. Adding sections or HTML is impossible. The third level is more complex but allows you to bring your site branding to the next level. For this, you will need to combine the custom CSS and the modification of the master pages.

In this series I will write about the master page. I will explain what it is, how it works and how you can modify it to improve the user experience. The biggest challenge of this series will be to keep it accessible for the power user.

I have been a .NET web developer for about 6 years and I have used master pages on several projects before. I’m pretty new to SharePoint, so while writing this series on how SharePoint uses master pages, I will be learning with you. I think it’s a good thing that I’m not a SharePoint expert because I will really start from the beginning and just explain it from there. For those who don’t know what a master page is, this is the perfect place to start.

What is a Master Page?

The master page is used to separate the design element from the content. It is inside the master page that you set the consistent layout for your pages. It’s also where you set the common elements like the logo, the navigation, the header and the footer. All pages that use the master page will use the predefined zone to display its contents. This way you can be sure that each page with the same master page will have the same look and feel.

With the following screen shots, you can compare the differences between each level of branding. You will be able to see for yourself how much better your site can look when combining a modification of the CSS and master page. So check out my future articles if you want to learn more.


THEME (Level 1 of branding)

CSS (Level 2 of branding)

Screenshot from :

MASTER PAGE + CSS (Level 3 of branding)

Screenshot from :

Boil it down to the basics… the SharePoint 2010 Ribbon

You may also be interested in: SharePoint training by SharePoint911


Editor’s note: Contributor Heather Solomon is a SharePoint Branding and User Interface Specialist. Follow her @speheather

Sigh, the ribbon. Those two words manage to give most SharePoint developers and designers the chills. And not necessarily in the good way. While the ribbon provides a lot of cool interactivity and functionality for our end users, you just look at it wrong and stuff can go whacky in your SharePoint site. This is the first post in a series dedicated to working with the ribbon. Let’s start off with reviewing what the ribbon really is and what code bits are involved.

What is a part of the ribbon?

When you imagine the ribbon, you likely picture this:

There are a lot of elements that are grouped with the ribbon that don’t have to be:

There are several aspects of the ribbon area and what is grouped around it that goes against well established usability patterns… what people are looking for and expecting when they visit a web site.

  • Site Actions is located on the left instead of the right – if you think through all of your favorite shopping sites, banking sites, etc. the action to log into a site, modify your profile and perform administrative duties is usually located in the upper right of the web page.
  • The global breadcrumb (folder icon with up arrow) is collapsed – most breadcrumb systems list the full path of where you are in the site hierarchy and in full view.
  • Social tagging (“I like it” and “Tags & Notes” buttons) in the upper right – generally options to “like” a post, option to share it, tweet it, etc. are listed at the bottom of the article/content. You are remarking on the content itself, not on the site as a whole.
  • The current location breadcrumb, or what we affectionately refer to as the SharePoint Jumbocrumb, located in the site title area – while this breadcrumb does show your location without selecting an icon (what the global breadcrumb requires) the placement is just weird. The site title is essentially pulling double duty as both a site title and a breadcrumb system. In usability patterns, site titles are just that. A site title. Breadcrumb is located under the header area and usually formatted with a much smaller font size.
  • And the biggest of them all… the ribbon toggle between the actual ribbon and the area that it uses when toggled on. Once your users do something to trigger the ribbon toggle, the site icon, title, Jumbocrumb, social tagging, top navigation bar and search all disappear. They have to figure out on their own to select the “Browse” tab to toggle the ribbon back off, thus showing those page components again.

So, what to do? Rip all of that stuff out of the ribbon and move those components to other places on the web page that makes sense to your users. Doing so will require creating a custom master page. Please don’t start off with a copy of v4.master. Instead use one of my master pages. They include comments and small code fixes and are a heck of a lot easier to modify than diving into v4.master. Now let’s get to coding.

  1. Open your custom master page and switch to Code View.
  2. Open the Find dialog and search for id=”s4-ribbonrow”. Please make sure Find in source code is checked under the Advanced column in the Find dialog box. Double click the search result and you should be here:

  3. <div id="s4-ribbonrow" class="s4-pr s4-ribbonrowhidetitle">

  4. This is the outermost container for the ribbon. Be sure to keep it around. SharePoint relies on the ID for some of the ribbon magic your site does.
  5. Next up is another wrapper DIV element and the actual ribbon control.

  6. <div id="s4-ribboncont">
    <SharePoint:SPRibbon runat="server" PlaceholderElementId="RibbonContainer" CssFile="">

    These are the only things that need to remain in the s4-ribbonrow DIV element.

  7. After that is the peripheral content control.

  8. <SharePoint:SPRibbonPeripheralContent runat="server" Location="TabRowLeft" CssClass ="ms-siteactionscontainer s4-notdlg">

    This is one of two controls like this. The control does what it sounds like, it is peripheral content for the ribbon area. You can move the items out of these controls to wherever you like in your master page and then delete the controls. The second control looks just like the first and has a Location of TabRowRight.

  9. Now it is up to you to get creative and think about where to move elements in your web page. Just remember that the elements that get moved around have three choices:
    • Go within the workspace (div id=”s4-workspace”)
    • Go above the ribbon DIV element (div id=”s4-ribbonrow”)
    • Go wherever you like and remove it from the page flow and absolute position it using CSS

    If you go outside of these three choices you will likely have display issues with your content area not scrolling properly or content getting cut off at the bottom. This goes back to the fancy math that SharePoint does to calculate the workspace area.

  10. When everything has been moved out and positioned elsewhere, you will end up with a neat and tidy ribbon in your master page. Here is a full code example, based on what I do in my custom master pages

  11. <!-- =SharePoint - Content in Ribbon -->
    	 <aside id="s4-ribbonrow" class="s4-pr s4-ribbonrowhidetitle">
    	 <!-- ^ =SharePoint =Container - Ribbon Block
    	  -The s4-ribbonrow DIV ID is mandatory and must be kept for the ECMAScript logic (Ribbon) so the Ribbon will function; also used for modal dialog box styles.
    	  -It is not recommended to add anything within the Ribbon container below as the height is set using static values that will not adjust to additional content.
    	  	<div id="s4-ribboncont">
    			<!-- =Ribbon =Container - Control -->
    			<SharePoint:SPRibbon runat="server" PlaceholderElementId="RibbonContainer" CssFile=""/>
    		<!-- =Ribbon =Container - Notification area under Ribbon -->
    		<div id="notificationArea" class="s4-noti"></div>
    		<asp:ContentPlaceHolder ID="SPNavigation" runat="server">
    			<!-- =Publishing - Enables publishing features on Publish tab in Ribbon -->
    			<SharePoint:DelegateControl runat="server" ControlId="PublishingConsole" Id="PublishingConsoleDelegate"></SharePoint:DelegateControl>
    		<div id="WebPartAdderUpdatePanelContainer">
    		<!-- ^ =Page Tools =Container - Add Web Parts Panel -->
    			<asp:UpdatePanel ID="WebPartAdderUpdatePanel" UpdateMode="Conditional" ChildrenAsTriggers="false" runat="server">
    					<WebPartPages:WebPartAdder ID="WebPartAdder" runat="server"/>
    					<asp:PostBackTrigger ControlID="WebPartAdder" />
    	<!-- =SharePoint =Container - Ribbon Block - END s4-ribbonrow -->

A note about Site Actions

The Site Actions menu code must appear above the ribbon control in your master page, or Site Actions menu won’t function properly on your site. If you don’t plan on editing anything in the Site Actions menu or after you do so, I suggest that you run the code block through a tool to remove extra line breaks and spaces. It will make you master page easier to navigate and manage.

Keeping your site header visible at all times

You have removed the non-ribbon elements from the ribbon area. Now it is time to take charge of our site header area, including site icon, title, top bar navigation and search.

  1. In your custom master page, open the Find dialog and search for id=”s4-titlerow”. Double click the search result and you should be here:

  2. <div id="s4-titlerow" class="s4-pr s4-notdlg s4-titlerowhidetitle">

  3. Remove the ID. Save your file and check out the results in the browser. You should see the header area appear lower on the page when the ribbon is toggled on.

And that is it!

You will likely want to continue to move elements around from the header area. The same rules listed above still apply:

  • Go within the workspace (div id=”s4-workspace”)
  • Go above the ribbon DIV element (div id=”s4-ribbonrow”)
  • Go wherever you like and remove it from the page flow and absolute position it using CSS

The follow up post in this series will start to discuss layout options for the ribbon.

Your (SharePoint Site Is) Driving Me Crazy: Design Tips for Non Designers

You may also be interested in: SharePoint Search and List Previews by Vizit


Editor’s note: Contributor Wendy Neal is a SharePoint 2010 Developer/Architect for GreatAmerica Leasing Corp. Follow her @SharePointWendy

Now that I’m seeing more and more public internet facing websites and blogs that are built in SharePoint 2010, I’m seeing more and more really bad SharePoint sites.

Full disclosure: One of my passions is user interface design, and I do realize that not everyone has that passion or the ability to design pretty websites. However, there are a few things I’ve been noticing over and over again here lately that absolutely drive me insane, and are quite easy to remedy with little to no design skills required.

Change your site image and theme

If you aren’t going to fully brand your site (by fully branding I mean creating custom master pages, CSS files, page layouts, the whole nine yards), then for the love of god at least change the site image in the upper left corner of the ribbon area, and even change the colors/theme while you’re at it. This takes very little time or effort; the most challenging part is finding an appropriate image to use for your site image.

There are tons of websites out there that provide icons and images royalty-free; here’s one, and another, and yet another one. I’ve also used to search for images, but you need to be careful that you aren’t breaking any copyright infringements on the images you choose.

To change the site image, first upload the image you’ve chosen into a library on your site. Then navigate to Site Actions -> Site Settings -> Title, description, and icon. In the URL field, enter the location of your image that you just uploaded.

To change your site’s theme, simply navigate to Site Actions -> Site Settings -> Site theme. Here you can choose a pre-canned theme, or even set your own colors (be very careful here; please don’t choose bright green text on a black background!)

Make sure your site image has a transparent background

This is one I’m seeing more and more: You’ve made the effort to change your site image, hooray! However, the background of the image is white and the background of your ribbon header is [insert different color here]. Maybe it’s just me and my anal retentiveness, but I think this looks ridiculous! I’m not going to call out any sites here, but hopefully you are seeing this and will fix your issue pronto.

It’s pretty easy to give an image a transparent background, and you don’t need to spend an arm and a leg on PhotoShop to do it. In fact you don’t need to spend a penny. Just download Paint.Net (which is free) and then follow these instructions:

  1. Open the image in Paint.Net (File -> Open)
  2. Select the Magic Wand tool and set the Tolerance to 25%. Then click anywhere on the background that you wish to make transparent
  3. Go to Edit -> Cut. You should see a gray and white "checkerboard" pattern where the image is now transparent
  4. If there are still any non-transparent areas, repeat steps 2 & 3 (this could happen if the image runs up along the top or side borders, causing the background not to go all the way around the image)
  5. Save your image (File -> Save As). Be sure to choose file type PNG or GIF (other file types don’t support transparency).

I wish I could say I figured this out myself, but I didn’t. These tips came from a post on the Paint.Net Forums.

Change the default Quick Launch links

Nothing shows your lack of originality (or is it just laziness?) than making no effort to change the appearance of the quick launch links (those are the links that show up in the left navigation). For Intranets it might be acceptable to leave them unchanged, but not for public facing Internet sites. I mean, have you ever in the history of the Internet seen on any public site, ever, a link called Lists, then sub-links below them of every list on your site? Or a link called Discussions, with sub-links for each of your discussion lists? I haven’t either. So please take 10 minutes and think about the content you want users to access, and customize your Quick Launch accordingly.

You can customize the appearance of your Quick Launch links by navigating to Site Actions -> Site Settings -> Navigation (for sites based on the Publishing template or sites that have publishing features turned on) or Site Actions -> Site Settings -> Quick launch (for non-publishing sites).

So what are you waiting for?

Again, I realize that not everyone is good at branding, but these are really simple, quick, and relatively painless things you can do that will make a big impact on your site. So if you are in violation, please make these changes today!

This article was originally posted on Wendy’s blog SharePointWendy.

Responsive Design for SharePoint (internet sites)

You may also be interested in: The SharePoint Shepherd’s Guide for End Users from SharePoint Shepherd


Editor’s note: Contributor Will Saville is a co-founder of BrightStarr. Follow him @sharepointux

Overview of Responsive Design

The argument to provide multi-device and multi-channel support for your website is compelling. Three years ago, desktops made up around 90% of the devices we used to connect to the internet. That percentage has now dropped to around 50%, solely due to the number of smartphones and tablets contented to the internet – a trend that it’s fair to assume will continue and over the next few years there will be more people using these devices than desktops.

Anyone that is serious about their web strategy clearly needs to ensure that they can optimise the user experience for mobile users and deliver relevant content across different devices and platforms.

Responsive design is one of a number of techniques that enables content to be delivered in a mobile optimised way. It is literally a ‘one sized fits all’ approach to delivering cross-device content and uses CSS media queries to detect the screen size of the device the content is being viewed on, and displays the content in accordance with the size of the device (whether it’s a large format plasma TV or a small screen smart phone).

Responsive design and SharePoint

Responsive design sits really well with content management systems such as Microsoft SharePoint. With responsive design, you can achieve a cross-platform, cross-device experience without having to build additional native mobile applications or content management tools. This means that SharePoint can still be a single repository for all your media and content.

Once a responsive framework is in place, content can be managed in SharePoint without any change to the editing process or workflow. Editors can continue to manage their content in the same way they always have done. The only real content challenges come into play when you take a purist approach to responsive design. Let me explain. Responsive design scales media assets to fit the size of the screen; this means, for example, a large image will shirk to fit a mobile device. Great I hear you say, but that image will still be the same file size, this ultimately means that the weight of the page will be the same on a desktop (where you need large media assets) as it is on a mobile (where you need smaller assets). There are really two answers to this problem; 1) the first is to create additional mobile media assets in SharePoint and then use a mobile framework to serve those assets based on the device that’s view the site. 2) the second is to do nothing and except that the ability for content managers to deliver content faster (by only having one set of media content to create) outweighs the need to reduce page weight and therefore load time on mobile devices.

A responsive approach

Planning and delivering a responsive website in SharePoint requires a bit of a mind shift and a change in approach if you want to be successful. There are really 3 key things you need to do to ensure successful delivery:

  1. Mobile first mind-set
    Your team needs to think mobile, mobile, mobile. Let’s face it, we’ve all been used to looking at websites on desktop devices but to be successful at mobile design you need to think mobile. This usually means focusing on the most important content and information that an end user will see and interact with. There isn’t any room on a small screen for unnecessary screen elements or content. Although this can be a mind shift at first, it usually results in an overall better user experiences that’s focused on the essentials.

  2. Find a suitable responsive framework
    There are a number of frameworks out there now and there is no point in reinventing the wheel. I would recommending testing out a few different frameworks and find the one that works best with your requirements and the skills of your team.

  3. An iterative project approach
    Designing and planning a site to be cross-device is challenging. For example, standard techniques like wire-framing can fall over when you’re planning to go across different devices. Having just completed my first responsive SharePoint web project (, I would strongly recommend the use of an agile iterative methodology that will enable you to explore ideas and concepts across devices, test them out and then tweak and change them based on user feedback.

So where is the return on investment?

The return on responsive is pretty straightforward. The more people you can communicate to on the web through different devices, the more likely your products and services are likely to be found and purchased by perspective customers.

There are also cost savings to be made when it comes to responsive design and SharePoint. For example, maintaining a single code base that can deliver an optimum experience across all internet connected devices means that additional applications don’t need to be developed and more importantly, changes can be made in a single place rather than on multiple platforms.

Responsive design also means that content managers only need to use SharePoint to manage their content, resulting in reduced training cost and time savings.

With responsive design delivering content across devices, using WCM platforms like SharePoint doesn’t need to be difficult. There will be challenges along the way but these are far outweighed by the potential benefits.

Create Custom CSS and Master Page in SharePoint 2010

You may also be interested in: Build a Scalable Architecture by KnowledgeLake


Editor’s note: Contributor Gokan Ozcifci is a SharePoint Consultant at Vision IT Group. Follow him @gokanozcifci

1 Create Web Application

Create a web application where we will make some modifications. Choose any name for it, and be sure that it works correctly. I created mine in my test environment http://master.Spdev.local:888

You don’t have to fill this page with any data or document since we will only change the style of this page.

2 SharePoint Designer

SharePoint Designer is used for the management of SharePoint sites and lists, for creating and managing internal and external data sources, creating views and forms to work with data, creating workflows in order to represent business processes and finally SharePoint Designer is used for branding sites by customizing the look feel.

SharePoint Designer 2010 can be downloaded for free from Microsoft while SharePoint Designer 2007 wasn’t free of charge at the release of SharePoint 2007 which changed during time. While SharePoint Designer 2007 offered you the ability to edit SharePoint and non-SharePoint sites this has changed with the version published in 2010: You can only edit SharePoint 2010 sites using SharePoint Designer 2010.

SharePoint Designer 2010 is available in a 32bit and a 64bit version. If you intend to use SharePoint Designer 2007 besides the 2010 version you need to install the 32bit version of SharePoint Designer 2010.

One major complaint with the 2007 version was the difficult lockdown of SharePoint Designer 2007 which has changed with SharePoint Designer 2010: You can now easily manage the capabilities at the web application or site collection level.

2.1 SharePoint Designer 2010 download

Here are the downloads including Service Pack 1:

3 Install SharePoint Designer

The first step in this process of course, is to get SharePoint Designer installed. To do so, I am starting from the first site I have created in my new environment.

Since I do not already have Designer 2010 installed, a dialog window pops up, basically letting me know that I do not have it installed, and I can do so. Just like SharePoint Designer 2007, SharePoint Designer 2010 will be free for all users. And since the Beta is all that is around now, that’s what it will install for me

I select the language I want to install SharePoint Designer in (German, Spanish, Japanese, French, Russian, and Chinese are other available languages that can be selected, in addition to English, as shown above), and choose my platform. Even though SharePoint 2010 is only 64-bit, SharePoint Designer 2010 is available in both 32 and 64 bit, as it is intended to be run from the desktop, and many of us still run 32 bit desktops, as we probably will for a long time to come.

Once done, selecting the Download button goes out and fetches the right download, and prompts me to run and/or save it.

It’s sizeable for my options as I’ve chosen (English 64-bit) at 277MB, so I’m happy that I have a nice and fast connection.

Once it’s up and running, the installer will extract the files, and then move on.

You have the usual EulA; agree and continue

Once accepted, you really cannot miss what is needed on the next screen. Microsoft made sure of that.

However, you can customize your installation by clicking on the Customize button, setting a new installation directory, setting your user information, and adding or removing features from the install. With the default installation, it’s a fairly hefty installation at 1.03G, but, I have a feeling it will be well worth it…

The installation begins (of course after you have clicked the Install Now button). And that’s it. You’re done!

4 Basic Designs

4.1 Active features

Where do you set the master page / page layouts if you create a Team Site / non publishing site collection? Well, Microsoft obviously knew that people would want to use the publishing features with the non-publishing enabled site collections, so this is an example of where the feature framework really works well. To resolve the “problem” simply complete the following steps:

  • Navigate to the landing page of your newly created site collection
  • Click on “Site Actions”
  • Click on “Site Collection Features”
  • Enable “SharePoint Server Publishing Infrastructure”

Enable on site collection level

  • Click on “Site Actions”
  • Click on “Manage site features”
  • Enable “SharePoint Server Publishing”

Enable on a site level

Once completed, you can again access the master pages and page layouts via site settings as you would normally do for a publishing portal.

4.2 Leave Default Master Pages in Peace

SharePoint 2010 comes with three out-of-box Master Pages – v4.master (the default SP2010 design), is the default.master In this tutorial we will create a new masterpage using the v4.master as a template and then connect the newly created custom Master Page to our site. It is a good idea to leave the default Master Pages untouched (at least for the examples in this post).

First we need to clone the v4.master file. Open SharePoint Designer 2010, and from the Sites tab select the Open Site icon and enter your site URL.

The site root will be opened in SharePoint Designer 2010. Now select Master Pages from the left menu, click on the v4.master file and press CTRL+C and CTRL+V to create a copy of the .master file.

Name your master page – click on the Rename icon in the ribbon and enter your custom name (for example myCustom.master).

Using the newly created master page we are now ready to make the modifications. Users of your SharePoint site will not notice that we are changing anything, and if you break something – it will be the custom master page, not the one users are seeing.

4.3 Create a Custom CSS to Add Branding

Next we need a CSS file which overrides the default core4.css style definitions. To see some changes to our customizations, we will include the fixed width style for our new master page.

Open SharePoint Designer 2010, select All files from the left menu and then enter the Style library.

To create a new css file, right click on the Style Library and select New > CSS from menu.

Name this file myCustom.css, just to keep the naming schema consistent with our custom Master Page.

Right click the newly created .css file and select the Edit file in Advanced Mode option.

Now enter some code in the css file. One thing we will do in this tutorial is to render the SharePoint site with a fixed width of 1024 pixels (making a site fixed width is actually a very difficult task using just SharePoint 2010). Additionally, we will also change the ribbon background color and the site background color.

Enter the following code in your css file:

#s4-bodyContainer {
                width: 1024px !important;
body #s4-ribbonrow {
body.v4master {
                overflow: visible;
.ms-cui-ribbonTopBars {
                width: 1024px !important;
.ms-cui-ribbonTopBars > div {
                border-bottom:1px solid transparent !important;

We now have a custom CSS in the Style Library and a custom Master Page. Now we need to associate the css file with the custom Master Page.

Open the myCustom.master file with SharePoint Designer (in advanced editing mode). You will see the site preview, because by default it will open your Master Page on the Design tab.

Click the Code tab on the bottom of the editor. You will see the entire Master Page code and content, with many placeholders, Server Ribbon code etc. Fortunately, you don’t have to learn all of these to do some serious branding and modification.

First, we need to connect our Master Page with the css file. Within the <head> tag, we need to add a link to our custom CSS file:

<link href=”/Style%20Library/myCustom.css” rel=”stylesheet” type=”text/css” />

Now modify the s4-workspace area so it will read our css file properly:

Find the line:

<div id=”s4-workspace”>

and replace it with:

<DIV id=”s4-workspace” class=”s4-nosetwidth”>

This will add the class attribute to s4-workspace tag. Without this, our fixed size setting in the CSS file will be overridden by the default inline CSS.

Now we can test our Master Page, before we link it to our production site. The best way is to create a new test page from the selected Master Page. Go back to the Master Pages item in the left menu, and right-click our myCustom.master file, then select the New from Master Page option.

Give the site a name such as myCustom_Site and select where it should be created – the default Site Pages is fine.

After a while a new page will be created and SharePoint Designer will open it for editing (in code view). Click the Preview icon on the ribbon to see your changes.

4.4 Going Live with Your Custom SharePoint Master Page

If we have ensured that the newly created Master Page looks fine we can now connect it with our live production SharePoint site.

Open SharePoint Designer 2010, navigate to the Master Pages option in the left menu, right click the myCustom.master file and select Set as default Master Page.

Now, if you go to your main site (in my SP farm it’s http://master.spdev.local:888/) you should see the changed layout

5 Source Code

Preview SharePoint 2010 Theme Colors in PowerPoint



In SharePoint 2010 it is easy to create custom color themes to jazz up a site. Theme colors can also be created in PowerPoint 2010 with a few clicks. But how do the chosen colors actually look in the SharePoint site? The attached PowerPoint has a preview of all the main elements of a SharePoint 2010 site with the selected color theme.

A few drawbacks:

Using Office Themes for SharePoint 2010 sites is easy, but can be time consuming. You need to create new theme colors in PowerPoint, save the file as an Office Theme with the .thmx extension, upload that theme to your SharePoint site collection gallery, and select it in the site via Site Settings > Site Theme.

The Site Theme page has a preview button where the site landing page is then displayed in the new theme colors, but there are a few drawbacks:

  • chances are that this page does not show all the site elements that are affected by the theme changes
  • you cannot click through to another page of the site to check the new colors there
  • the preview is slow to generate
  • some site elements, for example the list form backgrounds, use shades of the main accent colors, and you could end up with a lot of trial and error time until you finally arrive at the desired color effects for all site elements
  • the preview is buggy (it often throws an error in my environment and also often just does not display the correct colors)

All in all, there is a lot of trial and error involved when testing theme colors, and doing the trial and error in SharePoint is just too slow.

To add a little bit of confusion, the order of the theme colors in the color palettes is slightly different. In the SharePoint Site Theme dialog, the first four colors (for light and dark text/background) are listed in the order Dark 1, Light 1, Dark 2, Light 2. In the PowerPoint palette, the order is Light 1, Dark 1, Light 2, Dark 2. The following screenshot shows the color palettes side by side.

PowerPoint and SharePoint palettes

Since I will be creating a lot of sites in the next few months, I was not looking forward to the time and effort involved in creating good-looking site themes. So I spent a little time re-creating the elements of a typical SharePoint Team site in PowerPoint 2010. The deck consists of three slides.

Slide 1 shows the typical Home page of a Team Site, with the major HTML styles added to the page.


Slide 2 has the Markup styles and two table layouts.


Slide 3 shows a List form in edit mode, with the ribbon and the color background that will be applied to the data fields area of the form.


Every element on these slides is formatted with same theme colors and shades that SharePoint uses.

On any of these slides, you can click the Design ribbon and scroll through the Colors drop-down in the Themes panel. As you hover the mouse over a color theme, all slides in the deck will instantly change their appearance, even the muted colors behind the List form.


Much, much faster than the SharePoint preview.

A few notes:

  • The colors for the links below the Getting Started heading on the home page are hard coded and will not change with any theme.
  • The SharePoint callout styles 1 through 4 are also hard coded and are not affected by themes, so I did not include them in the slide deck.
  • The PowerPoint deck deals with theme colors only. It does not take into account theme fonts.
  • PowerPoint seems to "forget" some color settings. It should always apply the second shading of the Light 1 color to the first row of the medium two tone table style, but if the Light 1 color is set to a dark color, PowerPoint applies a different shade, and when checking the theme color for the element, it no longer sits on the second shading of that color. Go figure.
  • It may be tempting to apply different colors to the elements on the PowerPoint slide directly. Don’t. It will not have the desired effect when the color theme is used in SharePoint.
  • In order to protect the formatting of the slide elements, I’ve moved them to the Slide Master, so you can’t easily click an element in the PowerPoint slides.
  • And finally, sometimes the colors of a new theme are not applied correctly to a slide that did not have focus when the theme colors were changed. In that case, bring that slide into focus and toggle the theme colors again.