SharePointlessness Rotating Header Image

Uncategorized

SharePoint Evolution Conference 2013

I am extremely excited to have been selected to speak at my 3rd SharePoint Evolution Conference in London in April. (Sadly if not for that Ash Cloud it would be my 4th)

This conference is one of my favorites each year and being selected as a speaker is the highlight of my winter of 2012. Many people ask me why I love this conference so much and the answer is simple.

At no other conference that I have attended is so much attention paid to the quality of speakers and sessions that are selected. Each year I am happy to not only present sessions but to attend and learn in other sessions. Not only is the content of the sessions and the caliber of speakers top notch, but this conference also takes excellent care of its attendees. Between the food, the sessions you might think that this is enough, but add to it the top notch social events. Exhibitor reception, SharePint and attendee party.

This is definitely a don’t miss event if you have any money at all in your training budget. And don’t miss out on my SharePoint 2013 branding sessions and those of Heather Waterman and Penny Coventry as well.

Presenting on Governance at the AvePoint booth at SPC 12

So I have had the great pleasure of working with the group at AvePoint for many years. Working for Planet Technologies who is an AvePoint partner I was honored to be able to present a quick demo at the SharePoint Conference in their demo theater.

This presentation was on the “Top 10 Questions to Ask about SharePoint Governance.”

Here is that presentation.

It was truly an honor to get this opportunity to present and I got some great feedback from the crowd. This was my first opportunity to step out of my branding persona and speak a little bit about the other side of my SharePoint work.

Many people don’t know that I do a lot of Requirements Gathering, Governance and Taxonomy Development. It is fun to split my brain off and move beyond the look and feel perspective into a total User Experience perspective.

To me a lot of the methods and thoughts are the same around both Branding and Governance. When I do requirements gathering and thinking to plan for branding in a SharePoint site I focus on how Users will actually interact with the site.

Approaching a site from a governance and taxonomy perspective is actually a very similar thought process. I have always found that when you talk to users if you talk to them about how they work and what they would like to see instead of in technology terms you will learn more than you could imagine.

That is where this list of questions came from. I hope it helps a few people out.

A Guest Blog Post – So you want to use Modernizr with SharePoint?

A good friend of mine and fellow SharePoint User Experience person, Bryan Gulley, asked if I would be willing to post a guest blog post for him since he doesn’t have his own blog yet. 

One of my favorite things about the SharePoint Community is learning from each other and helping other people out. So I have no hesitation in posting for you guys Bryan’s post below. He is a great resource for me and I know he has valuable information to share with others.

About Bryan Gulley:

bryan_gulley_hsBryan is a User Experience and User Interface designer working for Slalom Consulting in the Chicago metropolitan area with extensive experience in architecting and developing custom branding solutions and frameworks for SharePoint 2007, SharePoint 2010, and Office 365.

@UXJester


How to make Modernizer and other libraries compatible with SharePoint

Bryan Gulley Monday July 2nd 2012

A couple of months ago I discovered that Modernizr breaks the wpadder.js file in SharePoint. You can guess by its name that wpadder.js is the JavaScript file that provides the web part adder menu when a page is in edit mode. Steve Ottenad found that IE has issues with extending the Array Prototype detailed in his post here http://labs.steveottenad.com/type-mismatch-on-wpadder-js/

Obviously Modernizr and several other libraries extend Array Prototype. Doing this causes the Type Mismatch error and won’t let wpadder.js load and as a result you can’t add a web part. So just throw Modernizr and all other useful libraries and shims out the window right?… WRONG!

While working on another project I was making use of the Edit Mode Panel to apply different CSS styles to the page when it was in edit mode. I figured I would try to apply the same sort of principle to loading scripts like Modernizr that have conflicts with SharePoint scripts. The result did not disappoint. You can see my code (added to the head of the master page) for the Edit Mode Panel below. The h1 tags are in there for testing so you know which mode you are in. If you are familiar with how SharePoint works in edit mode then you can remove these and just use the page status bar for reference.

<!– Edit mode panels provided to prevent modernizr and other JS library conflicts with SharePoint OOTB JS files –>

<PublishingWebControls:EditModePanel ID=“EditModePanelEdit” runat=“server” PageDisplayMode=“Edit”>

<h1>You are in EDIT mode</h1>

</PublishingWebControls:EditModePanel>

<PublishingWebControls:EditModePanel ID=“EditModePanelDisplay” runat=“server” PageDisplayMode=“Display”>

<h1>You are in DISPLAY mode</h1>

<SharePoint:ScriptLink language=“javascript” name=“~sitecollection/Style Library/Framework/js/libs/modernizr-2.5.3.js” OnDemand=“false” Localizable=“false” runat=“server”/>

</PublishingWebControls:EditModePanel>

OK great. We can add Modernizr and other feature detection libraries to SharePoint. Now what? Well I took it a step further and decided I wanted to use the header tag (<header></header> for those unfamiliar with HTML5). This tag does not render in IE8 and below. What to do?… Edit Mode Panel to the rescue.

<PublishingWebControls:EditModePanel ID=“EditModePanelHeaderEdit” runat=“server” PageDisplayMode=“Edit”>

<div id=”header”>You are in EDIT mode</div>

</PublishingWebControls:EditModePanel>

<PublishingWebControls:EditModePanel ID=“EditModePanelHeaderDisplay” runat=“server” PageDisplayMode=“Display”>

<header>You are in DISPLAY mode</header> </PublishingWebControls:EditModePanel>

Now I’m guessing several of you are sitting there excited to try this out. One word of caution; you do not want to write Edit Mode Panels for headers, footers, sections, asides, etc. It would just take too much time. If you have the time then good on you; feel free to create Edit Mode Panels to your heart’s content. If you don’t have time fear not; there are several other things you can do with the Edit Mode detection. Take hiding the ribbon for example.

I am constantly frustrated by the ribbon and how it can really mess with a design, so I decided to strip out the site actions and welcome menu and hide it in display mode. This lets me have a good looking site that doesn’t look like SharePoint and still allow contributors to edit pages and have access to the ribbon.

<script type=text/javascript>

$(document).ready(function(){

var inDesignMode = $(‘#MSOLayout_InDesignMode’).val();

var wikiPageMode = $(‘#_wikiPageMode’).val();

if (inDesignMode == “1” || wikiPageMode == “Edit”){

$(‘#s4-ribbonrow’).show();

}

else {

$(‘#s4-ribbonrow’).hide();

}

});

</script>

Final thoughts. If we can’t make use of feature detection libraries like Modernizer without creating a twin element using a div while the page is in edit mode why use them at all? Simple. It’s in the name of the type of library. With the mobile device zombie apocalypse upon us and practices like responsive design becoming more common place we will need feature detection. It is far easier to ask a browser if it supports a feature than a device. Besides, who wants to maintain that kind of device library? I know I don’t.

Making a Metro UI for SharePoint 2010

A while ago my friend Eric Harlan approached me asking if I could strip down a master page to its bare bones and make a Metro UI for SharePoint 2010. He had a project he wanted to put in place that would make the landing page of SharePoint look very much Metro.

As we started working on this project, we decided to share it with the community so that others could create their very own Metro UI landing pages. http://sp2010metro.codeplex.com/

When I started working on the master page for this project we quickly determined that we would also need a custom page layout to make the page editable in the browser. The project consists of a custom Master Page, a custom Page Layout, CSS and UI images.

We have created a very simple master page that has stripped away all navigation and left just the necessary items in the Ribbon for editing the page. This allowed us to create a blank page for the page layout to handle the web part zones for each of the Metro tiles.

In order to strip down the master page, I utilized an asp:Panel with its display status set to hidden to contain the content placeholders that we did not want to render in our page. Some of the important things to remember when working to strip down a master page is that you should not delete content placeholders from a master page.

Also when working on a master page there are lots of things to test. You should always test for the Dialog boxes as well as for the Web Part Editor. These are two elements of SharePoint 2010 that are important for editing your page properly within the browser.

For now this project is set up for just a landing page within a SharePoint 2010 site.

We will continue to update this project with suggestions or requests. The first is that we are already working with Paul Schaeflein (@paulschaeflein) today to package this as a sandboxed solution.

Please leave us feedback on the Codeplex project. We’d love to hear from you.

  1. Erik Akers – http://www.erikakers.com @erikakers
  2. Cathy Dew – http://www.sharepointcat.com @catpaint1
  3. Eric Harlan – http://www.ericharlan.com @ericharlan

SharePointCat’s Adventures in Wonderland

This year is flying by.  As I sit here almost packed and ready to head off to London for the International SharePoint Conference next week, I wanted to share some thoughts with you all.

Where exactly is this White Rabbit leading me, and why does he want me to drink this bottle of liquid and eat this little cake? I’m always up for an adventure and a challenge.

In the last month I was awarded SharePoint MVP. This is a huge honor and I’m super excited to sit down at the Mad Hatter’s Tea Table.

The next big adventure is that I have decided to part ways with Summit 7 Systems. While I’m not sure where I am going, I have faith that the White Rabbit is going to lead me to the right rabbit hole.

So much like Alice, I have been on a grand adventure and am looking forward to the next chapter of the story.

Who Me… MVP, I’m honored.

What an awesome and humbling day April 1st has been this year. I’m still having a bit of trouble grasping the fact that is not indeed an elaborate April Fools Day joke.  This quarter I was given the great honor of being named a Microsoft SharePoint Server MVP.

This is a honor that isn’t given out to a great number of people. I am so honored to be included in this group. Over the years I have had the pleasure of meeting many of the SharePoint MVPs who have shared their wisdom and friendship with me. I just hope that I can follow their lead and do the same to the very high standard I have seen them put forth.

I want to also thank Microsoft for including me in part of this group of dedicated community members. I’m looking forward to a wonderful year in the SharePoint community and trying to find more ways to connect and help others. Smile

Women in SharePoint at SPTechCon

Wow, what a great event. I can’t say enough good things about the BZ Media crew and the great conference that I have been attending for the last 3 days.  I was very pleased to hostess a Women in SharePoint lunch at the San Francisco 2012 version of SPTechCon.

We had a great time getting to know one another and talking about issues that we face as females in a predominantly male industry.  I must say though, that at SPTechCon you wouldn’t know that SharePoint is still a 2/3 male dominated industry.

I want to take this time to thank all of the BZ Media crew, especially David Rubenstein for providing us with a perfect medium for networking and socializing at their conference.  And they did a wonderful job of promoting the event.

I must say it was a tad bit disconcerting when I arrived and checked in for the conference to find my face on the Lunch Tickets for Tuesday’s lunch as well as on the program guide highlights of events.  It was some great awareness for the Women in SharePoint group that is so near and dear to my heart.

Now for the important part.  I encourage the ladies who attended the lunch to sign up and get involved in Women in SharePoint.  We are always on the lookout for new groups to start up under new leadership wherever there are people wanting to meet. All you have to do is let us know you are interested and we will help you get started.

It is exciting to me to see the groups starting, growing and having success.  In fact the Women in SharePoint in DC are hosting their first major Career Building Seminar this Thursday.

The board is certainly excited to see more and more groups forming and events happening around the country for Women in SharePoint!

For more information or to find groups near you, please check out the Women in SharePoint website at: http://www.womeninsharepoint.org/SitePages/Home.aspx

I Walk the Line

There seems to be a recurring theme so far this year.  Everyone wants to up their game and increase their value through marketing and a redesign of something.  As I work in each of these areas I find this trend intriguing. I have always had a curiosity about what drives people to want to make a change.

As we start off 2012, and I delve deeper into this world of magic and sparkles, (yes I said sparkles because I keep getting asked for pop, and bling in design) I wonder where does the line between what you need and what you desire blur.

Designing for SharePoint (or really any web platform) is an interesting world. It is full of pitfalls and obstacles that require at times someone with catlike agility or the determination of a U.S. Navy Seal to overcome the challenges. It is all about making form and function work with pretty and well designed. And determining which side of the line you would prefer to stay on.

There are some universal truths that no matter which side of the line you normally stand on that bring us to walking down the straight line ahead.

By answering these 5 questions you will start to gain insight into the actual drivers for the project.  Some of biggest hurdles that I face when designing what the client “needs” vs “wants” is lack of content definition and lack of a clear purpose.


1. Define the purpose: What are we hoping is our end result? Communication, Collaboration, both?

There are different design considerations for different site types. When working on an intranet most likely you will have to split your attention between communication and collaboration. This means you are really straddling the line of pretty vs functionality.

Example of want vs need:You might want a fixed width site, but the site’s primary purpose might be collaboration meaning you need fluid/dynamic width.


2. Identify our primary target audience: Who are we communicating with or targeting for collaboration.

Audience is a huge component in branding. We need to know who our audience is in order to understand how they will interact with the site.  Will they be using the site daily, weekly, monthly, hourly? Are they visiting to absorb information or to collaborate?

Example of want vs need: You might want to create a navigation that is determined by organizational structure but visitors are using the site for business driven tasks so you need a business factor driven navigation.


3. What defines success?

How do you measure the success of your site? This is a very important goal to define when working with branding. Knowing the driving factors behind the site whether visual or not will help you to determine the emphasis to put on certain factors like: navigation, content placement, images, brand, and functionality.

Example of want vs need: One of your success factors is increasing the number of documents put onto your site for storage, but you make uploading too difficult by burying links under other items. You need to focus on how to bring attention to the upload areas and desired behavior of the client. This is a need for function over design.


4. Who is creating the content?

It is hard to think about how to visualize content when we don’t know what the content is in the first place.  This is a major difference in working with SharePoint as a web development platform.  SharePoint is content and user centric in design.  Understanding your content and who is creating this is essential to a successful site.

Example of want vs need: You want to make the Ribbon scrollable on a collaboration site to save space, but you really need to leave it fixed to the top of the page so that users have access to the actions they need to perform on content within your sites.


5. What is the budget for the project?

The second biggest hurdle is always budget.  We always want Filet Mignon on a Ramen Noodles budget.  So then it becomes a challenge for the designer and developer as to how to add the right mix ins to the Ramen to make it as satisfying as a juicy Filet.

Example of want vs need: You want to provide dynamic content in your sites, you design the site with concepts like tabbed content controls and custom jQuery in mind. What you need is to focus more time on the navigation controls so you should be looking to use some of the Out of the Box components of SharePoint to provide this dynamic content.

Don’t overlook the value that the Out of the Box SharePoint components can play in your site design with just a very minimal amount of customizations.


Which side is the right side of the line? Should I be walking the straight and narrow right down the middle? It depends is my favorite answer, because honestly each situation is different.  

 

Answering these questions will provide you with information that you can use to guide your user interface and user experience. Great user experience is about taking chances and finding new ways to present the same information in a new way.

Walking the line is a challenge. So whether you are a tightrope walker, an acrobat, or someone pulled over for suspicion of DUI… walking the line requires balance and stability. So make sure you examine and analyze the details that your users and system requires before you take your first step.

SharePoint Saturday the Conference–Recap

Let me start this blog post out with a gigantic thank you to all the organizers and sponsors for this amazing event! Without all of their hard work and dedication to the SharePoint community this event never would have happened.

Next up, a giant thank you to everyone who attended this event.  I am always surprised at just how many people come out to learn about SharePoint. And I am humbled every time someone comes to hear me speak.

At SharePoint Saturday the Conference – DC I was able to present a full day workshop: SharePoint Branding 101.  This workshop was exciting for me to try and fit in as much branding goodness into 6 hours as I could.  It was certainly a challenge.

During the day we discussed a full range of topics from Requirements Gathering for Branding all the way through to Implementation and Deployment of Features.

Now that we have all had a moment to take a breath and recover a bit from this very full day of branding learning. I wanted to post out a few things for you.  First up are the slides from the presentation.  Hopefully they will help some of you out as you approach projects in the future. (Thanks for the feedback from a few of you I helped already, it certainly makes me happy to share)

SharePoint Branding 101 Presentation

I really enjoyed spending the day with those of you who were able to join my session in DC. I look forward to meeting many more of the SharePoint Branding intrepid over the next few months!

I am sorry for the delay in posting this.  I also wanted to add a quick listing of helpful tools and items I mentioned in the session.

Wireframing:

Balsamiq Mockups – This is a for purchase application, not free

Visio Graphic Stencils – These are a free download

Visio User Interface Stencils – These are for purchase, not free.

SharePoint Design: (both of these are great and a huge undertaking for both of the creators!)

Starter Master Pages Courtesy of Randy Drisgill – A Gigantic Thanks to Randy

SharePoint 2010 CSS Chart Courtesy of Heather Solomon – A Gigantic Thanks to Heather

SharePoint 2010 Branding & Design:Begin at the Beginning

There are so many blog posts running around in my head at the moment that I am struggling how to start this first one out.  I am simply going to go back to my third grade teacher who once told me, “Just Begin at the Beginning” when I was excited one day to tell her a story. So here goes…

SharePoint 2010 Branding and Design is a wondrous world full of new ideas and new challenges. But what does this mean to those of us who design sites to make SharePoint look not like SharePoint? It simply means that we are beginning a new adventure and will learn many lessons along the way.

In the past months I have been on a crazy journey of speaking engagements and conferences. But in the midst of all of this I have been in the trenches working on new SharePoint 2010 branding for clients as well.  In this process I have encountered a few things that really made me scratch my head.

SharePoint Cat and the Raiders of the Lost Ark … Problems with the z-index

Today in Lesson #1 we are going to talk about just one of the small things that has driven me up the wall trying to track down, but in the end once found just made me sit back and think, well that was simple but it still doesn’t make sense why it must work this way.

What do you do when you have a site all redesigned and one element, in this case it was the Welcome Menu dropdowns that just don’t work the right way? The menu items were dropping down behind another element on the page. It just isn’t right I tell you.

So in digging around, looking at custom CSS classes and my custom Master Page I started my quest. I really did kind of feel like Indiana Jones in the Raiders of the Lost Ark as the movie starts and he is running from the giant boulder that threatens to crush our star while he is searching for the golden statue.

I examined the Welcome menu, all seemed to be in place, I checked the Z-index css class and made sure that element was set to display above other items. So what could this problem be. Next option, check the z-index on the other css classes of the Welcome Menu itself.

You see, the z-index and SharePoint 2010 and internet explorer have known issues. Their sessions with a therapist have not been successful yet, in fact they may be headed towards a divorce, they are already separated.

But there has to be a solution to this Welcome Menu dropdown problem that is simple and in my sleep deprived brain I am just not making the easy connection. After much debate and trying to change the z-index out on each element I finally locate the solution. I grabbed the golden statue and ran for the exit.

But wait, what exactly was the solution you ask? Well, you simply have to find the <div> that is the outer container for the element that you were looking to set a z-index on. In my case the <div> was the custom right top menu that contained the search component, the social notifications, and the welcome menu. Once I added a higher z-index on this element, for me I set z-index:9999 it worked perfectly. No more dropdown problems.

This is just the first of many issues with z-index and SharePoint 2010, but I wanted to share this one first as it is a simple fix that we can reuse many times in the future.