Randy Drisgill - SharePoint Branding and Design

SharePoint Saturday Orlando Registrations are Open

2012-05-07T15:00:00.001-04:00

We have opened up registration for the first ever SharePoint Saturday in Orlando, Saturday, June 9th, 2012. The event is free but seats are going quickly… we have given out about half of them already! If you are interested in attending please fill out our Eventbrite form so that we can make sure there is a spot for you!

Here is the registration link:

And here is the event website:

http://www.sharepointsaturday.org/orlando/default.aspx

Location:

ITT Technical Institute

Suite 100

8301 Southpark Cir

Orlando, FL 32819

Google Map

SPTechWeb Article: Customizing SharePoint 2010 My Sites Navigation

2012-04-30T17:49:00.001-04:00

Just wanted to put up a quick post pointing folks to my latest article about My Sites Navigation that is up at SPTechWeb. I cover the basics of changing the navigation as well as how you can manipulate the HTML and controls that live in the My Sites top bar.

Customizing SharePoint 2010 My Sites Navigation

SharePoint Saturday Orlando 2012 – June 9th

2012-03-28T15:09:00.001-04:00

I am proud to announce that Michael Hinckley, David Griffiths, John Ross, Dave McNamee and myself will be hosting the first ever Orlando Florida edition of the world famous SPSaturday event on Saturday, June 9th, 2012. If you live near the Central Florida area or are in town early for the big Microsoft TechEd Conference (June 11th to the 14th) come on by and check it out. We are hoping to provide a lot of valuable FREE SharePoint content to compliment the SharePoint sessions that Microsoft will be providing at TechEd.

Here is some info from our website to describe the event:

Join SharePoint architects, developers, and other professionals that work with Microsoft SharePoint Server 2010 for ‘SharePoint Saturday’ event. SharePoint Saturday is an educational, informative & lively day filled with sessions from respected SharePoint professionals & MVPs, covering a wide variety of SharePoint-orientated topics. SharePoint Saturday is FREE, open to the public and is your local chance to immerse yourself in SharePoint!

Location:

ITT Technical Institute

Suite 100

8301 Southpark Cir

Orlando, FL 32819

Google Map

If you are interested in sponsoring or speaking at the event please don’t hesitate to sign up at the Saturday Orlando website. Slots are filling up fast!

Find out more info on the event at http://www.sharepointsaturday.org/orlando

So… I’m a Racker Now!

2012-02-16T09:51:00.001-05:00

All of us at SharePoint911 are now Rackspace employees! Please allow me to rewind the clock a little…

You know things are going to get interesting when the owner of the small business you work for sets up a mandatory “all hands” meeting in the middle of the Christmas to New Year’s vacation time. The employees start to speculate what the news could be, and then we hear the words “The company has been sold”. After we all wake up from our individual panic attacks, we learn that one of our favorite partners, Rackspace is purchasing the company and we all need to be in San Antonio ASAP to discuss what this means. A bit of a shock given that we were all hoping for a calm start to 2012 (after the really busy 2011 we had).

We visited their corporate offices, which btw are in an old decommissioned shopping mall. From the outside it looks like any other out of business shopping center, but inside they have built a giant dotcom environment with café’s, a tether ball court, Zen meeting spaces named after game show and cereals, and even a twisty slide that you can take instead of the escalator if you desire.

That was very impressive, but the icing on the cake was seeing how amazing Rackspace as a company truly is. They are a publicly traded company that is committed to what they call Fanatical Support. In other words, rather than just say they want to be the best at customer service, they live and breathe making the customer feel awesome about working with them. They have been hosting SharePoint sites for a while now, and with our acquisition they want to become the leader in Fanatical SharePoint across the board. This doesn’t mean that all our customers need to even host at Rackspace! We will be servicing SharePoint projects (and my team will be branding them to not look like SharePoint) whether you host somewhere else or even on your own premises… but now we can also offer world class SharePoint hosting at Rackspace if you need it.

With anything like this, the future is not 100% written yet. But I’m really excited to be working with Rackspace and even more excited to be able to have their much bigger engine behind us. They are committed to keeping all the awesomeness of SharePoint911 while providing all the resources we need to take things to the next level. I can’t think of a better company to have bought us out!

Here is the official press release, wordsmithed much better than I ever could by profession marketing boffins:

http://www.rackspace.com/blog/welcome-sharepoint911-to-the-rackspace-family/

Also, here is a cool video of a day at the Rackspace offices. I won’t be located there, but I look forward to visiting throughout the year:

How to handle downtime by sending all requests to one HTML page

2012-01-15T23:26:00.001-05:00

I had a nice little Sunday planned today, but it was interrupted by the SharePoint911 uptime monitors telling me that our web server had pooped itself (technical term… trust me). Shane did some poking around and found that the hard drive had died… we have backups but bringing it back online is going to take a bit (our clients always come first!). We decided to temporarily put up a maintenance page until we can bring the site back completely. I had to do some GoogleBing’ing to find a simple way to funnel all of the web links that point to our various pages and blogs to one page telling people we are working on the problem.

Turns out the solution is actually pretty simple. Any ASP.NET 2 app (including SharePoint) can funnel all web traffic to one HTML page just by placing a file named app_offline.htm into the IIS web root. Here is more information on the technique:

Taking an ASP.NET 2.0 Application Offline

I did run into two gotcha’s:

Make sure the file is over 512 bytes – Not sure why, but IIS thinks the file couldn’t possibly convey any useful information if its under that size and doesn’t use it.
Loading images on the page can be challenging, they need to come from another web app or server or you need to do a lot of extra work to encode them. I didn’t bother with this method but you can search for it on the web if you want… I just hosted the images from our public Dropbox folder.

Come see me present at Microsoft’s SharePoint Conference 2011 in Anaheim

2011-08-31T14:07:00.003-04:00

If you are planning to attend the SharePoint Conference in Anaheim, Oct 3rd-6th 2011, come on out to one of my sessions and say hello. I was fortunate enough to be selected to co-present a couple different sessions with John Ross this year. SharePoint911 will also have a booth at the show and a good portion of the team is likely to be hanging around there at any given time AND we should have our brand new (top secret) squishy farm animal to give away.

Here are the sessions I will be co-presenting. I think the session date and times are still somewhat tentative so be sure to check the schedule at the conference:

Creating Beautiful and Engaging Web Sites with SharePoint 2010
Monday, October 3rd – 11:00 am
Randy Drisgill & John Ross
Level: 200
mySPC Link

The process of building, branding and delivering a beautiful web site is more than just skin deep. In this session we will walk you through best practices for planning, creating and deploying engaging web sites with SharePoint 2010. We will also share best practices around the branding process with lessons learned and examples from real world SharePoint branding projects.

NOTE: I want to be clear that this session isn’t about the mechanics of creating master pages and page layouts. There is another session that covers that topic. This is more of an overview of what goes into making public facing sites that don’t look like SharePoint.

Branding and Customizing My Sites with SharePoint 2010
Wednesday, October 5th – 10:30 am
John Ross & Randy Drisgill
Level: 300
mySPC Link

The My Sites capability of SharePoint 2010 is the backbone of SharePoint's social capabilities. In this session, we'll cover how to customize your My Site deployment and how to apply custom branding. We'll also discuss how you can effectively control which web parts are deployed to your users.

Branding a Public Website on Office 365
Wednesday, October 5th – 3:15 pm
Randy Drisgill & John Ross
Level: 200
mySPC Link

Are you considering building a website with SharePoint Online? Did you know that your Office 365 subscription includes the ability to publish a public facing Internet Site as well as the Team site? In this session, we will walk you through tips and best practices on how you can brand an Internet Site that runs on Office 365 as well as how to add a little style to your internal team site.

Pre-Announcement – IT Camp #3 – Orlando, FL (Saturday Jan 21, 2012)

2011-08-16T15:01:00.001-04:00

I know there is going to be a SharePoint Saturday in Austin Texas around this same time, which should be a blast. But for those that don’t want to travel to Texas, we are going to have an entire SharePoint track at Microsoft’s IT Camp #3 in Orlando, Florida on January 21, 2012. For those that don’t know what the IT Camp is, here is a description as well as a link to the previous camp in Tampa:

Join system administrators IT professionals and database professionals in addition to managers at all levels in Florida that work with Microsoft technologies for a “IT Camp Saturday” event on January 21^st 2012. IT Camps are a free, one day learning event for anyone seeking professional development. This event serves IT professionals and students with a focus on IT Pro related technologies. IT Camps offer a conference style learning environment free of charge.

What: IT Camp #3 – Orlando Florida

When: Saturday, January 21^st

Where: ITT - 8301 Southpark Cir. Suite 100, Orlando, FL 32819

What time: 8am-5pm

Previous Camp: http://itcampsaturday.com/tampa/

So, save the date and come on out… it’s going to be FREE after all! And if you are a SharePoint Guru (or aspiring guru) in the Orlando or surrounding areas feel free to hit me up on this blog or on twitter about potentially presenting.

CSS Chart for SharePoint 2010

2011-08-08T14:47:00.001-04:00

Personally I prefer to use the IE Developer Toolbar and Firefox for manipulating CSS in SharePoint 2010 but I know from the 100’s of people that have asked me that CSS charts are something people really want. Heather Solomon had the first CSS chart back in the SharePoint 2007 days and recently she has posted a preview of a new chart for 2010 and it looks like it should be a nice resource for everyone:

SharePoint 2010 CSS Reference Chart

SharePoint 2010 Mobile Devices and Scrolling

2011-07-06T16:05:00.001-04:00

This was a posted a little while back, but I’m guessing some of you haven’t seen it yet. Over at the SPTechWeb site I wrote an quick article where I reviewed three of the more popular ways (they weren’t pioneered by me btw) of handling scrolling in SharePoint 2010 specifically as it relates to mobile devices like the iPhone, iPad, and Android. The post was inspired by all the SPTechCon attendees that asked about mobile devices as well as my co-worker Todd Klindt for wanting to push the boundaries of SharePoint 2010 blogging for a public facing site.

SPTechWeb – SharePoint 2010: Mobile Devices and Scrolling

My SharePoint 2010 Branding Book has been Published!

2010-12-24T17:01:00.002-05:00

Things have been a little crazy over the past month, but now that the holidays are upon us I have a spare second to actually toot my own horn a little (not that there’s anything wrong with that). Everyone probably already knows this, but I figured I should still do a blog post to announce that at the end of last month my SharePoint 2010 branding book was officially published:

Professional SharePoint 2010 Branding and User Interface Design - Published by Wrox

This was my big project for 2010. Myself, John Ross, Jacob Sanford, Paul Stubbs, and Larry Riemann worked on creating a book for both beginners and professionals that want to learn about making SharePoint look as great as it performs. Here is the Table of Contents for the book:

Foreword.
Introduction.
PART I: INTRODUCTION TO SHAREPOINT BRANDING.

Chapter 1: What Is SharePoint Branding?
Chapter 2: What's New in SharePoint 2010.

PART II: BRANDING BASICS.

Chapter 3: Planning for Branding.
Chapter 4: SharePoint Designer 2010 Overview.
Chapter 5: Simple Branding.
Chapter 6: Working with Navigation.

PART III: ADVANCED BRANDING.

Chapter 7: Cascading Style Sheets in SharePoint.
Chapter 8: Master Pages.
Chapter 9: Page Layouts.
Chapter 10: Web Parts and XSLT.
Chapter 11: Deploying Branding in SharePoint.

PART IV: OTHER BRANDING CONCEPTS.

Chapter 12: Page Editing and the Ribbon.
Chapter 13: The Client Object Model and jQuery.
Chapter 14: Silverlight and SharePoint Integration.

You can purchase the paperback book online from several retailers like Amazon (http://amzn.to/bHau4J). Barnes and Noble lists the book as available for in store purchase but I haven’t seen it actually in any stores local to me yet. If you want to purchase it in store, you may need to request they purchase a few copies. Lastly, for those of you that want a digital version on your computer you can purchase an Adobe Acrobat version directly from Wrox (http://bit.ly/aEHwT6).
Thanks to my author team and everyone in the community that helped make this book a reality!

My Real World Branding with SharePoint 2010 MSDN Article has been Released

2010-12-24T16:51:00.001-05:00

Last month, an article I worked on for MSDN with Andrew Connell was published. It is a refresh of a SharePoint 2007 article we wrote that includes a sample master page for the fictitious Adventure Works Travel company. I’m pretty excited that we had the opportunity to write this article. I think it is a great introduction to the topic of planning, creating, and properly packaging and deploying a heavily stylized public facing SharePoint 2010 site.

You can read the MSDN article now at http://msdn.microsoft.com/en-us/library/gg430141.aspx

Starter Master Pages Update – October 8th 2010

2010-10-29T13:18:00.001-04:00

Another quick post to let everyone know that I have updated the starter master pages that are up on CodePlex. There are a couple fairly important fixes in them so if you are already using the old version you may want to think about updating your code to reflect the changes. I’ve tried to highlight all the changes by posting my WinMerge change report. Some of the changes are very minor (like spacing and comments) and some are more important like the navigation changes and a fix that is included for the View dropdown in the ribbon.

Also, I just wanted to say thanks to everyone that came up to me at SPTechCon in Boston to let me know you are like the starter master pages, good to know that people are finding them useful.

As always you can grab my latest starter master pages from: http://startermasterpages.codeplex.com

Converting a Custom SharePoint 2010 Master Page into a Search Center Master Page

2010-09-29T11:00:00.003-04:00

This is a topic that I’ve been asked probably a hundred times since the SharePoint 2010 bits were released. Before I get into how I solve it, I’ll provide a little back story. To quote from my upcoming book, Professional SharePoint 2010 Branding & UI Design:

There are three site templates to choose from when creating search sites in SharePoint 2010: Enterprise Search Center, Basic Search Center, and FAST Search Center. Unlike most other sites in SharePoint 2010, these sites do not have v4.master or even nightandday
.master applied to them; instead, they have minimal.master applied to them. If you have a custom master page that is based on v4.master, nightandday.master, or even one of the typical starter master pages and apply it to one of these search center sites, you notice that the search center doesn’t work properly. This is because the page layouts and pages that are created by default for these search center sites are hard coded specifically to work best with the way minimal.master is coded.

In fact, if you apply v4.master to one of the Search Centers, the search box seems to be removed from the page… when actually it is still on the page, just hiding up in the pop-out breadcrumb menu:

As you can tell, this is less than ideal. Also problematic is the fact that the default minimal.master that is applied to the search centers doesn’t really contain traditional navigation or ways of navigating back to the parent site. So how do you get custom branding to work with the search center in SharePoint 2010? You have some options:

Create a new custom master page based on minimal.master
Adjust the page layouts or pages in the search center, to use the standard content placeholders (UPDATE: Here is a nice sandbox solution to help do this for you. In many cases this might be the best course of action if you are comfortable using 3rd party solutions: http://sp2010searchadapters.codeplex.com/ )
Create a new custom master page with some minor adjustments for the way search centers work

For this post, we will focus on the third option. For simplicity, I will walk you through actually converting v4.master to work for the search centers. This can be useful if you want to show the typical SharePoint2010 navigation and UI that is normally hidden for the search center. The concepts here would work just as well with your own custom master page, in fact I have tried it a couple times with my own. Also, I will assume you understand the basics of working with master pages in SharePoint Designer 2010:

Make a copy of v4.master (or whatever other custom master page you are working with) and give it a new name like v4_searchcenter.master.
Edit the new master page and locate and remove the PlaceHolderTitleBreadcrumb. This will allow the pop-out breadcrumb to still function properly:

~~<asp:ContentPlaceHolder id="PlaceHolderTitleBreadcrumb" runat="server">~~
<SharePoint:ListSiteMapPath
runat="server"
SiteMapProviders="SPSiteMapProvider,SPContentMapProvider"
RenderCurrentNodeAsLink="false"
PathSeparator=""
CssClass="s4-breadcrumb"
NodeStyle-CssClass="s4-breadcrumbNode"
CurrentNodeStyle-CssClass="s4-breadcrumbCurrentNode"
RootNodeStyle-CssClass="s4-breadcrumbRootNode"
NodeImageOffsetX=0
NodeImageOffsetY=353
NodeImageWidth=16
NodeImageHeight=16
NodeImageUrl="/_layouts/images/fgimg.png"
RTLNodeImageOffsetX=0
RTLNodeImageOffsetY=376
RTLNodeImageWidth=16
RTLNodeImageHeight=16
RTLNodeImageUrl="/_layouts/images/fgimg.png"
HideInteriorRootNodes="true"
SkipLinkText="" />
~~</asp:ContentPlaceHolder>~~
Next, add the PlaceHolderTitleBreadcrumb back right before the PlaceHolderMain. This will allow the search center to inject the search box in a good location:

<asp:ContentPlaceHolder id="PlaceHolderTitleBreadcrumb" runat="server"></asp:ContentPlaceHolder>
<asp:ContentPlaceHolder id="PlaceHolderMain" runat="server"/>
Move PlaceHolderPageTitleInTitleArea (and any supporting HTML) to a hidden panel because this placeholder isn’t used the same way in the search center:

~~<asp:ContentPlaceHolder id="PlaceHolderPageTitleInTitleArea" runat="server" />~~
<asp:Panel visible="false" runat="server">
<asp:ContentPlaceHolder id="PlaceHolderPageTitleInTitleArea" runat="server" />
</asp:Panel>
For v4.master you will also want to remove ClusteredDirectionalSeparatorArrow and <h2></h2>. It won’t make sense to show these at the top now:

~~<SharePoint:ClusteredDirectionalSeparatorArrow runat="server"/>~~
~~<h2></h2>~~
Next, several lines of CSS need to be added to make sure things look right for the search center. You can add them to the <head> section of the master page:

<style type="text/css">
/* remove left margin */
.s4-ca {
margin-left: 0px;
}
/* remove gray background at top (optional) */
.srch-sb-results {
background:transparent none repeat scroll 0 0;
}
/* clean up top padding on 1st search page */
.srch-sb-main {
padding-top: 20px;
}
/* remove centering on 1st search page (optional) */
.srch-sb-results4 {
margin: inherit;
padding-left: 20px;
}
/* remove background color on 1st search page (useful for colored designs) */
.ms-bodyareaframe {
background-color: transparent;
}
/* ------------------------------------------ */
/* -- CSS that may be req. to reset the search styling -- */
/* ------------------------------------------ */
/* fix height of area above search results */
td.ms-titleareaframe, div.ms-titleareaframe, .ms-pagetitleareaframe {
height: auto !important;
}
/* fix border color on search results */
.ms-main .ms-ptabrx, .ms-main .ms-sctabrx, .ms-main .ms-ptabcn, .ms-main .ms-sctabcn {
border-color: #eeeeee;
}
/* fix arrangement of body area on search results */
.srch-sb-results {
height: auto;
}
/* fix positioning of prefs and advanced link on results */
.ms-sblink {
display:block;
}
/* fix the color of the prefs and advanced link on results */
.ms-sblink a:link, .ms-sblink a:visited, .ms-sblink a:hover {
color:#0072BC;
}
</style>
5. Save the new master page, and check in / publish as a major version and approve it. Apply this master page to only the search center, and apply it as site master page while leaving system master page set as v4.master.

UPDATE: Some commenters have pointed out that if you want to edit pages in the Search Center (and who doesn’t?) these changes result in a double ribbon scenario. I haven’t fully tested this fix, so I’d be curious to hear about the results, but it looks like this would fix it:

Add <asp:ContentPlaceHolder id="PlaceHolderGlobalNavigation" runat="server"/> to the hidden panel.
Remove <div id="s4-ribboncont">…</div> and ALL of its contents.
Add in its place this line: <asp:ContentPlaceHolder ID="SPNavigation" runat="server"></asp:ContentPlaceHolder>

This should fix the double ribbon issue, but you also LOSE the top popout breadcrumb and the quick edit/save button at the top left of the ribbon.

Here are screenshots of the final result:

You can employ these same techniques on your own master pages to create search center specific branding.

If you had trouble following the code changes you can download the completed v4 search center master page: v4_SearchCenter.zip

SP2010 Branding Tip #13 – Hiding the Recently Modified on Team Sites

2010-09-28T14:49:00.001-04:00

I was asked today about hiding the Recently Modified menu from SharePoint 2010 Team sites. If you aren’t familiar with the menu, here is a screenshot of it:

I did some poking around and it seems that the wiki pages add <SharePoint:RecentChangesMenu> to the PlaceHolderLeftActions of the master page. While you could remove the placeholder, I’m sure it is used for other things. The safer thing to do would be to hide the Recently Modified section like this:

<style type="text/css">
.s4-recentchanges { display: none; }
</style>

You can either add that to the master page or custom CSS for your SharePoint site or you could add it to an individual page as discussed here: http://blog.drisgill.com/2010/09/sp2010-branding-tip-12-hiding-quick.html

HTML5 and SharePoint 2010 (and the IE9 Beta)

2010-09-16T14:42:00.001-04:00

With the release of the IE9 Beta yesterday (http://ie.microsoft.com/testdrive/) I’ve already started getting questions about whether HTML5 / CSS3 can be used with SharePoint. There is technically nothing that would stand in the way of using either with SharePoint (note, the page won’t validate as proper HTML5 code… but that should be obvious). That being said, I thought it would be interesting to take some SharePoint 2010 master pages and change the DOCTYPE to HTML5 and see how they look in the IE9 Beta. So I changed out the typical DOCTYPE with:

<!DOCTYPE HTML>

Also note, by default, most SharePoint 2010 master pages have the following meta tag in them:

<meta http-equiv="X-UA-Compatible" content="IE=8" />

This locks the page to displaying in IE8 rendering even in IE9, so I had to change this to IE=9 as well. With the DOCTYPE set and the meta tag changed, the master pages renders as an HTML5 page. Here is how the modified v4.master renders:

The biggest problem I see here is the scrollbar at the bottom shouldn’t be there. I tested this in the latest Chrome build and the scrollbar isn’t there, so I’m guessing this is something SharePoint injects just for IE. I’m not sure what causes that, but in theory, if there is a work around for that issue, we should be able to create SharePoint 2010 sites that leverage all of the great new HTML5 functionality (such as: Canvas, Web Fonts, Border Radius, etc.).

Remember that I was testing this by forcing the page to render in IE9 mode. Without me forcing it, IE9 would display a typical SharePoint 2010 without any problems at all because the browser will use the IE8 rendering engine. Check out, how IE9 renders my custom master page, after I Pin it to the taskbar:

Notice that the Favicon is shown in the taskbar and the Back and Forward buttons are colored in a similar shade to the icon. That was all automagic behavior… pretty cool. BTW – I can’t figure out how to get Aero Glass turned on for my Remote Desktop to my VM, so that’s why we don’t see the cool transparency stuff.

Now, we just need to wait until all the latest browsers are installed on the majority of machines so that we can actually rely on using these new HTML5 / CSS3 techniques. For now, I’m off to try out some rounded corners in SharePoint 2010 and HTML5.

Update October 5th 2010:

I played around with the canvas tag using this example: https://developer.mozilla.org/en/Canvas_tutorial%3aDrawing_shapes. Here is the result loaded in a Content Editor Web Part:

As you can see, I used the Canvas to draw a unique little thought bubble. Pretty cool!

Its also worth noting that I did see another problem with SP2010 layout in IE9 / HTML5, take a look at the New Page dialog:

Hopefully they can get that cleaned up with an update or something.

SP2010 Branding Tip #12 – Hiding the Quick Launch at the Page Level

2010-09-02T17:15:00.001-04:00

A question I get asked almost every week. Randy, how do I hide the Quick Launch for just one page in SharePoint 2010. The answer is simple my friends: Content Editor Web Part with some specialized CSS. Note, this code is written specifically to work with v4.master, any other master page may need different CSS code to hide the Quick Launch.

Edit a page, Site Actions > Edit Page
Click in a wiki text or rich text area and from the ribbon click Insert > Web Part (or add a Web Part to a Web Part zone)
Under Media and Content select Content Editor and click Add
With the new Web Part selected, from the ribbon click Format Text > HTML > Edit HTML Source
Enter the following HTML / CSS and click OK

<style type="text/css">
body #s4-leftpanel { display: none; }
.s4-ca { margin-left: 0px; }
</style>

Hide the Web Part chrome by selecting the Web Part and on the ribbon click Web Part Tools Options > Web Part Properties and on the right click Appearance > Chrome Type > None and then click Ok.
Save and close your page and you are done… no Quick Launch!

My Review of Four iPhone 4 Cases

2010-07-22T11:00:00.000-04:00

[Note, this review is slightly off topic from my standard posts, if you want to learn more about SharePoint branding, scroll down to my previous posts. Thanks!]

From the second I ordered my iPhone 4, I knew I was probably going to use a case to carry it around most of the time. This was even before “antenna-gate” proved to be an issue and everyone was told they were going to get a free case. Since I ordered online, my iPhone arrived before the stores had them, and by the time I decided to brave the crowds the Apple store was all out of cases (note: as of 7/21/2010 they still are out of all iPhone 4 cases in my area). So I went over to Best Buy and bought two temporary cases to try out and wasn’t super thrilled with them so I also ordered two online (with the plan to return whichever ones I didn’t like). So for all of you that want to get a case for your iPhone 4 but are unsure which is right for you, I provide my quick review of four commonly available options. I really wanted to review the new Speck CandyShell but I haven’t seen any available anywhere that weren’t crazy colored (take note AT&T stores, the black one looks much nicer than the purple one). Oh, and if any other case companies want to send me cases for review I’d be happy to add photos and reviews for them, just use my contact form in the top navigation :)

For me, the most important aspects of a case are A. that it protects the phone from drops and basic scratches and B. that it doesn’t weigh very much or make the phone look terrible. All weights listed are my own measurements based on just the case (no packaging) on a food scale and all photos were taken by me (the flash on my camera really brought out some of the dust and made some of the grays a little lighter than they actually are, in most cases all of these cases were clear or black/dark gray.

Griffin Reveal - $24.99

(Case Weight: .65 Ounces)

This was one of the cases I ordered online because it looked interesting to me. I liked the idea that it protected the back of the phone but still showed off the phone. The back looks good, pretty much like a naked iPhone 4 with the only noticeable difference being the camera cutout. The side rubber is snug but does lift up a bit when you apply pressure, I’d prefer this rubber to be more rigid but I suppose it would be difficult to remove if it was. The buttons feel good and even my cheap Monoprice power adapters fit fine with the case on (none of these cases work with my old 3Gs dock… I would suspect none work the the iPhone 4 dock either). Out of these four cases, this is one of my favorite, and probably the best choice for overall protection. Note, that I did leave something rigid in my iPhone pocket the other day and was able to scratch the bejeezus out of the clear backing, but the phone was unharmed so I guess it served its purpose by protecting the phone).

http://www.griffintechnology.com/products/reveal-iphone4

Apple Bumper - $29.00 Free for the early adopters

(Case Weight: .30 Ounces)

I really like this case, its very light (the lightest of these four by far) and it has a nice professional look. Yes… it is expensive for a piece of plastic that probably costs Apple twenty cents to make, but it is well made. I had to order it on the website and wait a few weeks for it to come in; I guess I’m going to get a refund for this one now… thanks Steve! I like the combination of the softer rubber and the harder plastic to make the case rigid but flexible (in the photos the soft rubber appears much grayer than it should, the case is basically very dark all around). I also like the way the buttons are separate from the case itself, they are very easy to press and feel like real metal buttons. I do still feel like I need some protection on the back of the phone though, perhaps a “screen” protector might help with that. I still use the Griffin Reveal when I’m going anywhere where I might accidently drop the phone or there is a lot of dirt… but when I get a back protector sticker I may switch to the bumper fulltime. I think if anyone makes a case that is a lot like the bumper only with the addition of a very thin back on it, that might be the perfect case. One other downside is that my cheap Monoprice charging cable doesn’t fit well with this case on, and I suspect that some smaller headphone jacks may have problems.

http://store.apple.com/us/product/MC597ZM/A

Belkin Grip Vue - $24.99

(Case Weight: .75 Ounces)

I wanted to like this case, it was the second that I was able to find in store at Best Buy and is now available at Amazon as well. I could only find it in clear, but I think I would have preferred the darker model since the clear made the sides look a bit too cheap. The plastic that is used is fairly rigid, which I liked and the buttons were a little stiff but worked ok. I did notice that the front lip of the case did seem to be a “micron” smaller than it should be because I could frequently feel the case click forward into the proper position and then slide back ever so slightly. Also, note that this case didn’t want to stand up on its own for the photos (not a problem in the real world) so I propped it up with my old iPhone dock.

http://www.amazon.com/gp/product/B003R6KW7A?ie=UTF8&tag=blogdrisgillc-20&linkCode=as2&camp=1789&creative=9325&creativeASIN=B003R6KW7A

Rocketfish Silicone Fitted Case - $15.99

(Case Weight: 1 Ounce)

Not my favorite case by a long shot. It was available day one from Best Buy so it was my first and only option for a bit. I believe it is a Best Buy exclusive case. It is large, heavy (1 full ounce, the heaviest from this group!), and generally not very attractive. It seems to pick up every piece of dust that touches it. Also it doesn’t fit overly snug, which is concerning to me because it could allow dirt to get inside the case and potentially cause problems. The buttons work well but they are thick and molded into the same plastic so they aren’t the easiest to press down. I will say though that it would probably protect the phone nicely from falls, I’m thinking it would just bounce gently because of the type of rubber used.

Rocketfish™ Mobile - Case for Apple® iPhone® 4 - Black

That’s about it, so far my favorite are the Apple Bumper and the Griffin Reveal. If I get a chance to review any others, I will add them directly here or perhaps add a link to the new review. Let me know if you like any other specific cases and why.

Updated 2010 Starter Master Pages up on CodePlex

2010-03-08T10:00:00.000-05:00

Just a quick note to tell everyone that I have updated my starter master pages on CodePlex. I have made several minor tweaks that should help them be more “minimal” for easier use in your branding projects.

Here are some of the bigger updates in this release:

Additions to the SharePoint Server starter master page to include some My Site support
A third starter master page that works with the Meeting Workspace (yes they still require a unique master page in 2010 but unlike in 2007, they are very similar to the standard master page)

You can grab my latest starter master pages from: http://startermasterpages.codeplex.com

If you still need the previous version here is the link: http://startermasterpages.codeplex.com/releases/view/36075

Microsoft’s SharePoint 2010 Starter Master Page

2010-02-03T11:00:00.000-05:00

Last week, Microsoft’s Dallas Tester (http://twitter.com/dgtester) posted a new starter master page for SharePoint 2010:

http://code.msdn.microsoft.com/odcSP14StarterMaster

For those that don’t already know, “Starter” is the new term for minimal master pages that were available for SharePoint 2007. Here are some screenshots of the starter master page in action, you will see that it is quite minimal:

This is a great resource for learning about SharePoint 2010 master pages. If you are interested in another type of starter master page experience, you can always check out my own starter master pages at http://startermasterpages.codeplex.com. They are less minimal, but still are a good starting point for SharePoint 2010 branding projects.

Removing the Name ActiveX Control Warning in SharePoint 2010

2010-02-01T15:46:00.001-05:00

When I initially looked at SharePoint 2010 I was disheartened to see that my old nemesis the Name.dll ActiveX control warning was still popping up on my sites. If you haven’t seen it yet, here is a screenshot:

The warning has to do with SharePoint wanting to show presence info (the little green icon next to people in your organization that are currently online). It often ends up showing on public SharePoint sites because it is elusive in development environment, it will only show in these circumstances:

IE7 or IE8
Site must not be in the Intranet zone, which typically automatically includes any site that you are local to or share a domain with
Must have Office, or Messenger or any other similar program installed
Must have NOT already said yes to IE installing the ActiveX control

If any one of those criteria isn’t met, the warning doesn’t show for you, but it most likely WILL show for anonymous internet users. In the past we had to use some JavaScript in the master page to hide this warning, but thanks to Kirk Evans’ blog post (http://blogs.msdn.com/kaevans/archive/2010/01/28/presence-in-sharepoint-2010.aspx), I have just learned that the message can also be turned off via Central Administration in SharePoint 2010, here’s how:

Open Central Administration and click Manage Web Applications. From there select your web application from the list and then from the ribbon click General Settings > General Settings:

After that, simply change the “Enable Person Name smart tag and Online Status for members” to No, and click OK:

That’s all you have to do to get rid of the warning, so no one has any excuse now if you are working on a public SharePoint site it should be turned off. Also, its worth noting that you can still get rid of the message via JavaScript in the master page if you prefer:

<script type="text/javascript">
function ProcessImn(){}
function ProcessImnMarkers(){}
</script>

If you have access to Central Administration that is probably the preferred method, but if you don’t or you want to ensure that it never is turned on by mistake, the master page method is a sure fire way to hide it always.

Error in Current Docs for Upgrading Fixed Width Master Pages to SharePoint 2010

2010-01-15T15:07:00.001-05:00

This probably affects anyone that has tried to make a fixed width master page in SharePoint 2010 (unless you have already noticed the error) it affects the MSDN article “Upgrading an Existing Master Page to the SharePoint Foundation Master Page” and my Starter Master Pages (expect an update to my starter master pages very soon).

In the article it states:

If your page is fixed width, add the class s4-nosetwidth to the bodyContainer div element. The updated div element would look like the following. <div ID="s4-bodyContainer" class="s4-nosetwidth">

In actuality you need to place the s4-nosetwidth on the previous div tag like this:

<div ID="s4-workspace" class="s4-nosetwidth">

Without that line SharePoint injects CSS inline to your <div> and sets the width the current size of the browser (which completely wrecks most fixed width design).

SP2010 Branding Tip #11 – Un-Floating the Ribbon in custom Master Pages

2010-01-15T14:26:00.002-05:00

In the 2010 out of the box master pages, Microsoft has included code that causes the ribbon to float above the rest of the page content (you might say it sticks to the top of the page). You can see the effect here:

See how the right scroll bar stops at the ribbon? That’s the new functionality at work. It makes editing the page a nicer because you don’t have to scroll to the top of the page constantly.

But what if you are doing a VERY stylized branded SharePoint site? Sometimes this functionality can get confused, especially if you are using CSS to position the body “fixed”. I saw this happen recently when Paul Keijzers (@KbWorks on Twitter) was having problems using my Starter Master Pages (http://startermasterpages.codeplex.com). His problem would have been the same if he used Microsoft’s v4.master.

So, how do we make the page scroll in a more traditional fashion? Pretty easy, just follow these steps in your custom master page (or css):

Remove or override the CSS that hides the body overflow - body { overflow:hidden; }. You can override with body { overflow:auto; } Note: if you are using v4.master, you need to override this with body.v4master { overflow:auto; }
Remove scroll="no" from the <body> tag
Remove ID="s4-workspace” from the <div> tag that surrounds the page content (below the ribbon). You can remove the entire <div> tag and its corresponding </div> if you would prefer.

Save and check-in / approve and you should have a page that scrolls normally. The ribbon will stay at the top and scroll off the page if you have a lot of page content. Note, there may be an easier way to do this by using something like the class="s4-nosetwidth" code that takes away the width setting, but I haven’t been able to find anything that would change the scrolling behavior.

New SDTimes Article: The New Theming Engine

2009-12-22T11:00:00.000-05:00

My latest article for SD Times has been published to their website, titled Spotlight on 2010: The New Theming Engine. Obviously, it's an overview of how themes work in SharePoint 2010. Check it out:

Spotlight on 2010: The New Theming Engine

SharePoint 2007 Branding Article - Conditional Logic in XSL Using the XML Web Part

2009-12-14T11:00:00.000-05:00

I just realized that my SD Times “SharePointer” article from September was published (probably has been for a while). This article is a simple example of how you can use conditional logic in XSL to color code XML data in a SharePoint XML Web Part based on certain numeric values in the data.

SD Times - Share Pointers: Conditional Logic in XSL Using the XML Web Part

Starter Master Pages for SharePoint 2010 (Formerly Known as Minimal Master Pages)

2009-11-18T12:35:00.001-05:00

In the tradition of those SharePoint branding folks that came before me, I have put together two minimal master pages that can be used to start a SharePoint 2010 Branding project. They contain only very minimal HTML styling in order to accommodate some of the specific needs of SharePoint 2010 and are commented throughout. I hope you find them useful as a good starting point for creating branded SharePoint sites. If you make improvements upon them that could be used to improve the Starter Master Page experience for others, please share the changes with me so that I can potentially roll them into the main distribution.

Note: With SharePoint 2010, Microsoft has actually included their own master page called minimal.master which has a specific use for pages that will have very minimal chrome. Because of this, I am using the term Starter Master Page for my Master Pages instead of the term Minimal Master Page.

Here is the link to download the CodePlex project:

Starter Master Pages for SharePoint 2010

(http://startermasterpages.codeplex.com/)

I have copied and pasted my notes from the CodePlex site here, please read them if you intend to use the Starter Master Pages:

I am placing them on CodePlex and will be releasing updated versions as time goes on
They are currently considered a beta release
Please send feedback (here or on my blog, http://blog.drisgill.com) on problems or changes that you think would help everyone
Use at your own risk!
There are two versions of my Starter Master Pages:
- _starter.master - Specifically for use with SharePoint Server 2010
- _foundation_starter.master - Specifically for use with SharePoint Foundation 2010
These two versions are extremely similar. The primary difference being the navigation and corresponding data sources
The Starter Master Pages should work with all out of the box SharePoint 2010 pages including Application pages (like Site Settings) and Lists and Documents
Replace the word “SiteName” throughout the code with your project site’s name and directory
There are some minimal styles included and are commented accordingly.
All styles and images are loaded from the Style Library with simple “/Style Library/sitename” references. This helps with viewing them in Design View in SharePoint Designer 2010. Some deployment instances may require a more robust path usage (such as branding that is deployed to Site Collections that are not at the root web site). In these cases you can either place your styles and images in the 14 folder on the server (_layouts) or use the $SPUrl variable (more info here: http://msdn.microsoft.com/en-us/library/ee354190.aspx#odcsp2007RealWorldBrand_CreatingBrandinSP)
The SharePoint 2010 standard Ribbon controls are being used. This is the same code as in v4.master and NightAndDay.master only with the addition of some comments
The Starter Master Pages employ the standard SharePoint 2010 technique of forcing the Ribbon to “stick” to the top of the page. This is why the ribbon and main body areas are wrapped in specific div classes
There are two div’s that have custom classes, “customLeftNavHolder” and “customBodyHolder”. These are required to handle the left navigation and main content areas with minimal HTML and also will allow for hiding of the left navigation when SharePoint 2010 Dialogs are in use
There are several div’s throughout that have a class of “s4-notdlg”. This is the standard SharePoint 2010 method of hiding branding (like logos and navigation) from the SharePoint 2010 Dialog windows
I have tried to identify most of the ContentPlaceHolder’s that actually contain content in the out of the box SharePoint 2010 pages and included them in the displayable areas of the Starter Master Pages. All other unneeded (but required) ContentPlaceHolder’s are relegated to the hidden asp:Panel at the bottom of the master page.

Other optional things I have included because I think they are helpful (you can remove as needed, the approximate line number in _starter.master is included):

Line 24 - Favicon code
Line 92 - JavaScript to address the ActiveX Name.DLL issue (See http://support.microsoft.com/default.aspx/kb/931509 for more info)
Line 388 - Class “s4-nosetwidth” is being used to allow for fixed width branding (See http://msdn.microsoft.com/en-us/library/ee539981(office.14).aspx for more info)
Line 393 - An area for a header logo that has a link back to the home (you can replace this with the site icon and title if you prefer. See lines 308-317 from v4.master)
Line 498 - A footer area for a copyright notice
Line 503 - The Developer Dashboard code (which is turned on from STSADM or Powershell).
Line 571 - WarnOnUnsupportedBrowsers is being used at the very bottom of the Starter Master Pages to alert IE6 users that the browsing experience is deprecated