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.
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
When working with SharePoint branding you often run across the problem of how to properly deploy your work. The best practice for deploying branding is to put it into a feature by creating a wsp.
But what is a wsp or Solution file and how do we create this. Most of us who are Designers first and SharePoint people second, might never have heard of a wsp before SharePoint. Let me explain the advantages to using a Solution file.
Creating a wsp for your SharePoint Branding will allow you:
- Easier ability to troubleshoot site errors. You can turn the feature off and eliminate your branding as the root cause of problems
- Make it Managed Code, which makes our developers happy and allows us to have a versioned copy of our files.
- Easier to Update. Having all your files in one package will give you the ability to more easily make changes and updates.
- Provides a greater sense of control. You can enforce policy around your site branding and even change the behavior around things like new site creation.
- The other big component is where your files are located. Solutions will allow you to place the files for your branding on your server instead of in the content database. This will help with performance and page load times.
These are just a few of the reasons that we deploy SharePoint branding as a feature. But what exactly is a feature and how do we create this mysterious thing. If you are a developer or have a staff of developers you can enlist their help in creating this.
The long and short of it is, that a solution for SharePoint branding is made using Visual Studio. In order to make this transition you should set up a solution in Visual Studio much like you would if you were writing a web part.
I have attached a sample wsp and Visual Studio 2010 project file to this post. You can use this as a basic sample for how you might start to set up your very own branding solution. This sample solution is being provided to you in conjunction with Paul Schaeflein, SharePoint MVP. I am not a developer, so I had to enlist some help to properly form this solution file.
There are some big tips in working with solutions and moving your files into a proper SharePoint 2010 Branding solution. If you are anything like me, you will have worked your initial branding development using SharePoint Designer. When it comes time to move your files into Visual Studio you will find yourself asking what is the best method.
I have found that simple exporting your files out and importing them into Visual Studio leaves you open to what I affectionately refer to as SharePoint Designer Gobbledygook. (Yes that is my very own fun technical term) SharePoint Designer is a great tool for working with SharePoint branding, but it has a tendency to create issues when it comes to moving your files outside of it.
My favorite method for moving files from SharePoint Designer into Visual Studio is to simply copy the code out of your files in SPD and move it into a simple text editor like Notepad. Then when I have Visual Studio open I will create blank files and copy my code out of Notepad into these blank files.
Once you have done this you will still want to check for that gobbledygook. This can come in many formats. The most common are hard returns in the files or the insertion of some SharePoint Designer specific file characters in the head tag and !DOCTYPE declarations. This extra information can and will cause problems for you. So you will want to remove this as you find it.
Working with Visual Studio and SharePoint branding can be a bit of a challenge for those without an understanding of basic SharePoint development, but it is not impossible. Once again, I am providing you with a very basic SharePoint branding solution that you can start to see how it works.
And again, thanks to Paul Schaeflein for helping me out and writing a solution and agreeing to allow me to share it with all of you.
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.
Just wanted to put out a quick update for everyone. This is my new blog site. Don’t worry, I will still be posting to the www.sharepointcat.comsite as well. The posts will be duplicated onto this site if they are SharePoint related.
Coming up next week for me is the Best Practices Conference. At this conference I will be speaking on a variety of SharePoint 2010 branding topics including: How do you Begin and Design in the Hands of the End User. I will also be co-presenting with Lori Gowin a session on Pretty and Practical: Do they need to stay separate or can they function together to make your site better.
Also while at the Best Practices Conference I will be participating in the Ask the Experts panel on Branding. You will also be working the Summit 7 Systems booth in the exhibitor hall.
As if these items weren’t enough, I will also be coordinating the live blogging effort by the Women in SharePoint group for the conference. We will be tweeting out information about where you can catch the live blogging streams as well as working on the table for the Women in SharePoint group.
After the days of the main conference, I will be participating in the Summit 7 Team’s Post Conference session on Friday at Best Practices.
Once the Best Practices Conference concludes in DC on Friday afternoon I will be headed over to Baltimore to participate in the SharePoint Saturday event there the following day. On Sunday Scott Edwards and I will be completing the whole experience with a road trip back home to Huntsville, AL from Baltimore towing the Summit 7 tradeshow booth in a trailer home.
So let me know if you have topics that you would like me to post on at this blog on SharePoint branding, design and user experience.
