Tag Archives: Web Design

The Pains of Altering the SharePoint UI

Hirschs Branding Effort

Hirsch’s Branding Effort

I was recently tagged to “brand” a SharePoint installation for Hirsch Pipe & Supply Co.  I knew it would be an interesting challenge, but I had no idea how bad it truly would be.

SharePoint is built on ASP.NET 2.0 which I had worked with in my previous job. I found ASP.NET very powerful and flexible. Master pages, App_Themes, CSS Friendly Adapters, and more made working on ASP.NET interfaces relatively painless.  Knowing that SharePoint utilized master pages I thought it would be much easier than it was.  However, it turned out to not be the case.

The Default Master Page

I was immediately struck by the mess that is the default master page.  The master page is laid out with, of course, tables which is reminiscent of why Microsoft is such a joke in the designer world.  Well, I decided to rip out the tables, and surely that would make it easier right?  No.  It turns out that SharePoint only uses one standard ASP.NET control (the navigation control), and the rest are SharePoint specific “delegate” controls which made layouts with CSS difficult.  These are of course stored on the file system, and the only way to edit them is to create painful features.  It looked as though I was stuck with extensive tables for much of the layout.

When I did yank out much of the table layouts it only opened up a headache down the road.  It was actually more painful to try and layout it with CSS then just sticking with the table layouts.  What made it difficult are the extensive nuances in the SharePoint interface that are dependent on others.  For instance, I would lay it out in CSS, but when I went to edit the page to add web parts everything went awry due to dependencies on extensive tables for layout.  I was able to lay out the majority of the default master page with CSS, but I ended up reverting to tables for the main content area due to pain after pain. I did go with Heather Solomon’s minimal base master page for publishing sites which was a better start then I had.

The CSS

The fun doesn’t stop there.  SharePoint has a core stylesheet that is over 4,000 lines long.  I’ve dealt with more styles in one shot, but looking at the stylesheet you would think a 10th grader created them.  There is a lack of shorthand, units of measure, and extensive IE proprietary styles.  Add onto the fact there are no comments in the stylesheet it is absolutely useless to attempt to decode it.  You also can’t simply remove the core styles; well, you could, but it’s another headache that is ultimately not worth tackling.  It’s again easier to deal with the bad then try to make it better.

SharePoint does allow you to specify an alternate stylesheet which does, thankfully, get rendered after the core styles.  The cascade becomes your best friend in altering the styles.  You’ll also notice the “classitis” that abounds in the master page and core styles.  They all have a prefix of ms– which is unneeded and unhelpful.  I wasn’t surprised to find a lack of advanced CSS 2 selectors due to the pressure to support IE 6, but they are hardly any descendant selectors which would drastically decrease the amount of classes in the markup.

The JavaScript

I know Microsoft is now supporting jQuery which we can only hope will reduce the amount of “obtrusive” JavaScript through the site.  It reminds me of how I wrote JavaScript back in the day.  Attempting to decode the core JavaScript is a puzzle I didn’t even attempt.  You are once again forced to use proprietary JavaScript instead of taking it on to write it any better.  If they did abstract the obtrusive JavaScript it would drastically decrease the complexity of the markup sent to the browser. I did end up using jQuery to set the size of certain divs, and I also attempted to clone() and append() DOM elements but it proved fruitless.

Hope for SharePoint vNext

I hope, first that I never have to alter the SharePoint UI again, but that the next version of SharePoint will construct a better default UI with the following changes.

  1. Use CSS for layouts.
  2. Ditch the delegate controls to use more of the standard ASP.NET controls (or at least improve them).
  3. Use a well-commented core CSS file with advanced selectors to eliminate the need for classes.
  4. Switch to an unobtrusive JavaScript model.
  5. An increased focus on accessibility for public-facing sites.

IE 8 Compatibility Mode and SharePoint

Recently, the Internet Explorer team released IE 8 beta 2.  It’s a monumental leap forward for not only web designers but also the Internet.  However, it is not without controversy, but first it needs a little background.

A Little Background

Internet Explorer has for a long time been the bane of web developers.  Every since they won the browser war over Netscape (nearing a decade ago now) with what were judged unethical and illegal means which led to a monopoly investigation.  That was settled and Microsoft allowed to continue.  Since then web designers have had to hack, glue, and curse IE due to its large lead on browser usage.

Internet Explorer 6 released in 2001 has been the infamous browser that just will not go away.  Grassroots movement such as Save the Developers have said “enough is enough” and want to see IE 6 erased from the technology landscape.  But even in 2008, seven years later, they still average around 25% of all browsers in usage today.  IE 7 was released and was a huge step forward in standards conformance, security, and compatibility.  It gave both designers and end users hope for the future of IE.

The Controversy Today

Recently when IE 8 was announced it boasted an impressive conformance to several web standards including CSS 2.1, DOM improvements, and even parts of HTML 5.  It also boasted that it passed the Acid 2 test which tested conformance to the CSS standard published by the W3C.  We were all excited until they made their second announcement.

The IE team, under intense political pressure, offered three modes of browsing in terms of web standards support.  It offered the following.

  1. Quirks Mode — long standing behavior reminiscent of IE 6, and it was used when no DOCTYPE was specified.
  2. IE 7 Mode — With a DOCTYPE it rendered according to IE 7’s standards support.
  3. Standards Mode — with the inclusion of a META tag IE 8 would render in the strictest manner possible according to the DOCTYPE.

The community revolted in a way I’ve never seen before, and the IE team decided to have the standards mode be initiated by default with a DOCTYPE, and if the designer wanted IE 7 mode he had to use a META tag.  A major victory was won, and designers everywhere rejoiced and anticipated IE 8.

Compatibility Mode for Intranets

With the release of beta 2 of IE 8 they introduced compatibility mode with some interesting defaults.  They announced that IE 8 would, by default with a DOCTYPE, render all Internet (public) pages in the strictest manner possible per the aforementioned victory.  However, by default all intranet sites (with a URL such as http://moss) would render in compatibility mode.

It’s interesting that they mention SharePoint specifically in the blog post, because I’m sure this move was politically based as I have yet to see a web-based MS application with the political clout that SharePoint has in the enterprise.  This setting is configurable by Group Policy, but it is doubtful that many enterprises will take this as an action item.

Thankfully, the IE team has two META tags that can override all these compatibility view settings.  One emulates IE 7 rendering engine used most prominently for backwards public-facing sites, but there is also an emulate IE 8 META tag to force sites, even specified to render in compatibility mode.

So, Why Should I Care?

I believe there are two major ramifications of this.  The first effects the end user, and the second effects intranet developers.  The only people I can really see caring about this on the development side are those branding SharePoint.  Let’s talk about each.

First of all, the end user doesn’t have the final say whether or not a site is rendered in standards mode or not.  Now, probably most if not all end users could care less, but the addition of a button in the address bar that appears “broken” designates pages that may not be broken but actually rendering perfectly in standards mode but the end user could be drawn to change the behavior because it appears the page is broken.  So with a misleading option in the UI and overriding behavior given to developers over users is a concern.

Secondly, the concern is for those branding SharePoint or other intranet sites.  What scares me is that this decision was pushed by, for instance, the SharePoint team for its product.  I fear that this is indicative of how the next version of SharePoint will be crafted—around compatibility mode and not standards mode.  Any developer will tell you how horrendous the markup and CSS is for SharePoint out-of-the-box.  I was eagerly anticipating the SharePoint team learning from their mistakes in crafting the core styles and master pages by going to a much stricter standards-based site which makes it much easier to brand, far more accessible, and even faster loading.

What Should MS Do?

My hope is that the IE team will respond to such a critique as this as they did their first decision.  Here are some steps I’d encourage the team to take:

  1. Render all sites, intra or internet sites in standards mode unless a META tag is present or lack of DOCTYPE.
  2. The end user has control over whether or not the site truly displays one way or another.
  3. Remove that confusing button in the IE UI which is a poor UX decision.

Will they respond as they did before?  I don’t know, but I can only hope they’ll see the negative ramifications of this for end users and developers alike.

A Primer on Information Architecture: Navigation

Navigation and IA

Navigation is without a doubt one of the most essential elements of any interface, and as a result adequate time and thought is necessary to ensure your interface’s navigation is usable and comprehensive.  From the all important global navigation that stays the same throughout the site, to local navigation which changes based on the content of the page, to contextual navigation which exists within the content itself.  They all work together to form a powerful navigation experience.

Types of Navigation

There are typically a few types of navigation: global, local, contextual/supplemental.  Sometimes you may only need one, but other times you may need all three depending on the amount of content and the complexity of the interface.  Understanding how and when to use these different types

  • Global navigation is a navigation structure that stays consistent through your application to provide familiarity and a good overview of your site’s content.
  • Local navigation is a navigation structure contingent on the current content.
  • Contextual navigation refers to navigation that is embedded within a site’s content to facilitate further browsing.  The best of example of this is Wikipedia which links content together inside the articles.

Breadcrumbs

Hansel and Gretel weren’t the only two who wanted to get back to where they started.  Breadcrumbs, when well thought out and implemented in moderation, can add a dynamic and usable element into your interface.

Pagination

Pagination is often an over-looked aspect of effective navigation architectures.  When combined with a thoughtful search architecture it will increase findability drastically.

Navigation Design Patterns

Design patterns are a great way to see how others are starting to standardize the way they approach certain aspects of design and their resulting interactions.  Most often, navigation mistakes are made, because the designer doesn’t take into account existing patterns that users may be familiar with.