Field Notes Inside an Integrated Communications Agency

Today, I'm reviewing a .NET site for a prospective client.  Like nearly all of the .NET sites I've evaluated, it seems to be a solid showcase of back-end logic and functionality.  Unfortunately, all of this is obfuscated by a UI that appears to have been written in 1996.  Each page is very square and clunky and really only works on one type of browser.  Open the same page in Firefox and it looks completely different (and terrible).

By contrast, when I look at similar sites based on non-Microsoft frameworks, I rarely find weak front-end code.  Their HTML is almost always standard-compliant and elegant to boot.  Why this pattern?

Before coming to work for Capstrat, I hadn't realized how poor my HTML skills were.  This may have been because most of my previous work was on corporate intranets, which rarely need to adhere to standards and address cross-browser issues. Also, I had never worked with a team that had placed such strong emphasis on well-written user interfaces.  And, perhaps not coincidentally, I'd never worked with Apple-centric developers.

This has me wondering.  Why do I and so many of my .NET comrades lag behind the Macintosh cult when it comes to XHTML/css?  Does Apple's emphasis on design attract developers who are more likely to obsess over the user experience?  Or could it be that so many of us .NET developers cut our teeth on projects in which database and business logic development were critical and the front-end was almost an afterthought?

Either way, I have learned that by doing only a few little things, we .NET-types can match the niceties of standards-compliant and visually impressive front-end code to the power of the .NET framework.  Here are a few pointers I've picked up while working among these curious folk with their silvery laptops that have an "Apple Key" where the "Alt key" should be.

1) Stop looking at every web page as a giant HTML table with stuff in the table cells.  The mantra here is: don't use tables for layout.  This was the hardest thing for me to accept because, when you're accustomed to tables, using proper markup and css for layout is soul-crushingly frustrating.  It's worth the effort, though, because table-based layouts can make your life miserable when you need to make site-wide changes or have to make your site work across all browser types.

2) There are free tools, such as Firebug and the IE Developer Toolbar, which make css development a lot easier. They let you explore and modify the HTML and css on a web page on the fly.  I won't even try to explain all the things these two applications do to make your life better.  Just download them and play.

3) There are a number of web sites that will help you on your path to XHTML enlightenment.  I found these two particularly helpful:

• For getting started, Yahoo Grids is a huge help: http://developer.yahoo.com/yui/grids/builder/
• Css Zen Garden will inspire you while demonstrating the benefits of separating your content from your markup: http://www.csszengarden.com/

Microsoft is feeling the heat in the browser arena. Internet Explorer 8 (IE8) is in development and they are planning to robustly support RSS, CSS 2 and Javascript. No way?! IE 8 might almost be as good as Firefox 2!

After putting the last nail in Netscape's coffin in 2001, Microsoft rested on its laurels and enjoyed the spoils of the browser war. Since then Firefox has taken a quarter of the browser market by winning people over with it's standards support, tight security and an easy add-on framework. After waiting five years, Microsoft finally released Internet Explorer 7. But their loss of market share is driving them to immediately jump into full development of Internet Explorer 8.

But regardless of motive, this is fantastic news. It seems that browser competition is once again driving innovation in the browser business. It really speaks to the maturity of the open source movement that Mozilla is spurring Microsoft to once again take browser innovation seriously.

Read more about IE 8 here.

Client: What is CSS?
Heidi: Good question. We have spent the last few (insert time here) finalizing the design for your new Web site. We created a homepage, interior page, etc. and these are called templates. They were created in a program like Photoshop (a reference 98% of clients understand) and there is a step between Photoshop files and a clickable Web site.
Client doing lots of right, hmmhmms.
Heidi: That is where CSS, aka Cascading Style Sheets comes in. Site development has lots of layers and CSS is the design layer. It is what tells a headline to be blue and a background to be white.
Client silence...
Heidi: It is a really smart way to build your site. Imagine in two years you decide you want to change all the headlines in your site to a different color. Don't worry it isn't going to cost you eight hours in maintenance fees, with CSS it is one simple switch and boom, the whole site is updated. Not to mention the benefits it has to accessibility.

(Side note to readers, accessibility is something that is really important to Capstrat and our clients. This is where Mike's article is way better than mine; I suggest you check it out if you want to learn more about CSS and accessibility.)

The solution is simple, but if you spit out some geek speak to a client when they ask this question you might be heading down a rough road. It is easy to forget that sometimes the Web world can be an exclusive club, with exclusive language.

If you've been into the development game for any time at all, chances are you've encountered the famed Suckerfish dropdown navigation system at some point. I have successfully employed this chunk-o-brilliance - and it's successor, Son of Suckerfish - more than a few times. I recently had cause to implement dropdown navigation over Flash content, and was dismayed to see Safari comPLETEly freak out and throw a tantrum, causing my dropdown menu items to flicker in and out of existence. After much poking about, I decided that Safari must just not handle z-index as well as other browsers. I set up a little javascript function to detect the user's browser, and point to a separate CSS file if Safari was encountered.

It was only after pausing for a moment of silent reflection for all those users who would never see my handy navigation that I thought to try to find a similar case online. I started at the top of my bookmarks. Four sites in, and right there, at the top of Adobe.com , was my answer.

In order to make all other browsers behave when rendering your dropdown nav over Flash content, all you have to do is a) make use of the wmode tag for your Flash div, setting it to either transparent or opaque, and b) assign a z-index value of 2 to the block-level element containing your dropdown menu. Safari balks. To make it behave, you have to burrow down into your nav CSS and add z-index tags to every nested element, including the links:

#navdiv {
    z-index:2;
} 

#navdiv ul {
    z-index:3;
}

#navdiv ul li {
    z-index:4;
}

#navdiv ul li ul {
    z-index:5;
}

#navdiv ul li ul li {
    z-index:6;
}

#navdiv a {
    z-index:7;
}

Presto! Change-o! Safari's nasty flicker is tamed. Lesson to be learned here: take advantage of Firebug , and don't worry about reinventing the wheel. I was able to find a working example of what I wanted, and Firebug gave me the behind-the-curtain insight needed to make it happen. If you are not currently in the know on the incredible development resource that is Firebug, I implore you - drop everything and go get it!

Have you ever had the distinct pleasure of listening to a web development nerd ramble on about why your website needs to use CSS and XHTML? Did you find your mind wandering or eyes glazing over when he went on and on about W3C standards? Don't worry - this happens all the time. As a web developer, I apologize for our kind's overzealous and sometimes ridiculous excitement over these obscure acronyms. But apologies aside, I would like to say a few things about why we all get so worked up about a few simple letters.

The technology for producing and publishing on the web has grown out of its infancy. The changes adopted in the past five years are now the cornerstone of modern web design and development: two languages called XHTML and CSS. The magic of these two languages (the part that gets web developers so excited) is their power and flexibility. In a nutshell, XHTML is a web language focused on content. It is used to spell out the textual content, media, and links on a web page. CSS is a language focused on formatting. It gets coupled with XHTML to specify things like where text should be placed on the page or what color the background of the page should be.

Bored yet? Well, don't be - here comes the good part... The underlying point here is not to simply explain these acronyms (by the way XHTML = eXtensible Hypertext Markup Language and CSS = Cascading Style Sheets), but rather to examine the design philosophy that these languages enable us to use. Modern web standards dictate that page content should be separated from page format. Concretely, this is actually done by storing the page content in an XHTML file and the page format in a separate CSS file. It may not be immediately clear why anyone would want to do things this way, so consider the following scenarios:

• Your web site has over 500 distinct pages. Recently your organization decided to change the background color of all the pages from pure white to a striking blue that matches your logo. Unfortunately, the pages weren't designed with XHTML and CSS, so a poor intern at your organization gets assigned the tedious task of changing the background color in hundreds of web page files. With modern design methods, all that would need to be changed is a single line of code in a CSS file.
• Market analysis shows that a significant and increasing number of your company's customers use their mobile phones to browse the Internet, and you'd like to attract them to your website. Your site was designed with its formatting embedded in the content (rather than in a separate CSS file). The site's width is 750 screen pixels, but a mobile-ready version of the site must be only 300 pixels wide. Since the site's format was specified in the same file as its content, every single file on the site will need to be rewritten to accommodate the change in width. Had the site been designed using XHTML and CSS, it would only have been necessary to modify a handful of CSS files to produce layout changes throughout the entire site.
• A customer with a vision disability visits your website using an assistive technology called a screen reader that reads the content of the site's pages aloud. Your site was designed in the year 2000, and its layout was created by embedding text and images inside of tables nested within tables (sound messy?). This sort of design was very common just a few years ago, because it allowed web designers to achieve precise control over how the website displayed in different web browsers. Unfortunately, the customer's screen reader cannot make sense of the table layout, and it reads the textual contents of the site in a confusing and illogical way. Frustrated by the experience, the customer returns to Google to search for a competitor's site that is more accessible. Had this site's content been separated from its format using XHTML and CSS, the customer's screen reader would have read the text on the site in the correct, logical order that was intended by the designer.

These scenarios demonstrate the key features of separating format from content in web design: maintainability, modifiability, and accessibility (and that's not even mentioning code readability, content manageability, or how-could-it-possibly-be-more-awesomeability). In a world where we all use document editors that let us format our text line by line and see the results immediately, it can be difficult to imagine how separating the text content from its format could be useful. What I mean is, imagine having to create and edit an extra file to change the font face from Times to Arial in the letter you just wrote in Word. That doesn't seem convenient or intuitive, but in a website, it's essential. Modern sites are typically hand-coded in XHTML and spread out across many files. There is no method to "select all text" and "change the font face to Arial" for every page in the site - that is, unless you're using CSS! So the next time your web development nerd rambles on about CSS, rest assured, he's speaking in your best interest.

At Capstrat, we're committed to keeping up with the web. We are experts in the usage of XHTML, CSS, and other key web technologies. Whether you have an aging site that could use a facelift or you need a new site built from the ground up, our designers, developers, and communications experts will help your business or organization achieve the future-ready web presence that you need to succeed in this digital age.