I had an old website layout laying around that never quite fit any of my personal projects. So, I thought I would apply it to my friend’s site and see how it looks. The result is shown above. What do you all think? Personally, I like it. The St. Louis skyline seems to go along with the theme of his blog (minus the hot tub, RBV, bums, Mizzou, and NBA talk).  Anyways, he gave me the go-ahead to put it up.  So, watch for to land on his blog soon.

For the past couple weeks I have been working on a new blog design, and I am pleased to finally get it up on the site. I am calling this new design New Leaf, because for me, the design also brings with it a number of new sections to the site, notably a portfolio and an academics section.  These new sections mark a small shift in the purpose of the site.  In the past, it was just a simple blog, but now it is more of a combination of a blog and personal portfolio.  The portfolio section is a small collection and description of work I have done in over the past seven years of my career.  This will definitely continue to grow in the next couple years.  And, the academics section is a collection of work I did to earn my MBA.  After graduating with my undergraduate degree, I lost (and, honestly forgot about) just about everything that I had produced when in school.  So, this is kind of way to make sure that doesn’t happen again.  Right now, I have just a few papers and presentations up, but over time, I will try to update the site with anything that I produced that I thought would be somewhat interesting.

Anyways, I hope you all like the redesign.  And, if you find any bugs (I am sure there are a ton), let me know.

I just got done reading Chris Wallace’s advice on browser testing, and I figured I would try to extend the conversation by offering a few tips for building cross-browser websites.  So without further delay, here are a few techniques I use to better support multiple browsers.

1. Use a strict doctype—I wanted to start out with the most obvious tip first:  use a strict doctype.  Having had to do this in the past, it is very difficult (if not impossible) to build a cross-browser site that does not use a strict doctype.  This advice has been given over-and-over, so I am not going to beat a dead horse.  If you want more information, check out the always helpful ALA Article Fix Your Site with the Right Doctype by the man himself, Jeffrey Zeldman.

2. Clear styles on elements—If you are new to website development, one intricacy you will learn soon enough is that each browser vendor has their own default styles for HTML elements.  What does this mean?  Well, if you add a heading to a page (for example, <h2>) without any associated styles, it will probably look a bit different between Firefox and Internet Explorer.  Don’t worry, this is easily correctable. Yahoo! provides an easy to use reset.css file that will removes the inconsistent default styles.  This is done by setting the elements margin and padding to 0 by default.  See their code for more information.

3. Use absolute-relative positioning—This was a technique that I first learned from Stopdesign’s article Making the Absolute, Relative.  This is a must-read article for any new developer.  Because, once you master this technique, you can build almost any complex layout.  The key here is that any element that is positioned absolute is always positioned absolute, relative to its first parent that has been either relatively or absolutely positioned (or, to the window if no parent is positioned). Yeah, it sounds confusing. I do not want to make this into a tutorial, so please refer to the Stopdesign articlle for more information.

The key here is that absolute-relative positioning allows you to position elements across browsers with ease.  This is my goto technique for position logos, menus, sidebars, and almost anything that is not in the natural flow of the document.  For me, this is preferable to floating elements because when given a coordinate (x, y), a set width, and a height (or min-height for dymanic sizes) you get a very consistent behavior across all major browsers.

4. Use an IE6-specific stylesheet—Using an IE6-specific stylesheet is a good way to make up for the short comings of the old (but still relatively popular) browser.  What I like about the IE6 stylesheet is that you can pretty much build for newer browsers and support IE6 as an afterthought.  This is a good alternative to hacks when you are able to introduce new stylesheets without much difficulty.  Also, if you follow the next set of tips, you might be surpised by just how little you will need an IE6 specific stylesheet.  You can easily create IE6-specific stylesheets using conditional comments.

5. Apply margin and padding to interior elements rather than the container—This is a very simple solution to working around the box model issues with IE6 (quirks-mode) and IE5.5.  Rather than putting margin and padding on containing elements, put the margin and padding on the elements on the inside elements.  For example:

  div#content{
    position: relative;
    width: 600px;
    margin: 0; padding: 0;
  }

  div#content p, div#content h1, div#content h2{
    margin: 0;
    padding: 0 10px 10px 10px;
  }

6. Use padding rather than margins—If you have ever run into a problem where everything seems to line up in IE, but there is an odd space displaying between two content blocks in Firefox, then chances are you have run into an issue with collapsible margins.  According to Andy Budd, “At it’s core, margin collapsing is very easy to understand. Basically when two vertical margins meet up, instead of adding together, the largest margin takes precedent and the other one “collapses” to nothing”.  Personally, I find this behavior counter-intuitive to how I think the browser should render these elements.  But, apparently the way Firefox does it, is per the spec.  So, my work around is rather than dealing with this issue, to avoid it (when possible) by simply using padding rather than margins to space out elements.  That is why in the example for #5, I spaced the elements with padding rather than using  margins.  Now, there is a time and place for both margin and padding, but when they are interchangeable, stick with padding to avoid issues with collapsible margins.

7. Use a JavaScript library—My final tip is when trying to build a cross-browser website use a JavaScript library to assist you with common tasks.  A JavaScript library is a powerful way to abstract a lot of the complexity of supporting multiple browsers.  Personally, I do not think it matters which library you choose.  I have used Prototype, YUI, and JQuery with success.

8. Understand the limitations of PNGs—The PNG image file format is one of the most significant advancements provided by the newer browsers.  I really believe that alpha-transparency will open the door for a lot of real cool designs.  I use them on matthewsmith.com, but I choose not to support IE6 here, as well.  With that said, PNGs are not well supported by IE6.  Yes, there are hacks to get them to work.  But, at the same time, you can quickly convolute your markup if you use them frequently.  So, my tip is that if you want to support IE6, to only use PNGs when absolutely necessary (for alpha-transparency).  And, to use GIFs and JPGs for now until IE6 browser share dwindles to acceptable levels.

So, there you go.  I believe that these eight tips will help you build cross-browser websites with a lot less work.  If you have any tips, feel free to post them in the comments and I will update this post.

TwitterShow is a simple web widget (HTML, CSS, and JS) used to extend the look-and-feel of the Twitter JavaScript Badge by displaying your tweets in an animated slide show.  You can see the widget in the top right corner of my blog.

To add TwitterShow to your blog, you simply need to add a little bit of HTML, CSS, and JavaScript to your site.  To simplify things I created an example at: lab.matthewsmith.com/twittershow/example.html

Here are quick links to the individual files:

• HTML
• CSS
• JS
• Background Image
• Selected Image

The widget can easily be configured to match your site by editing the images and the CSS included above.

Last night, Microsoft announced the release of Mesh — a new product designed to better connect all your computers and devices. This release is significant for a number of reasons. The first is that it is the first time in awhile that Microsoft has launched a product that I didn’t know I wanted (or needed) until I heard about it for the first time. The second is because Mesh signifies a fundamental shift for the company from being OS focused to Web focused.

Lately, when I hear the PC vs. Mac or Windows vs. OSX discussions, I have thought to myself “Who cares? Does it have a browser?”. Because, now a days the web is everything. It is the new OS. Google recognized this with the release of their web-based application suites. Now, Microsoft has taken this a step forward with Mesh. They realized that “yes” the web is everything, but the devices we use to get to the web matter, as well. In the future, you may use a Mac, PC, iPhone, Blackberry, or Windows Mobile device to connect to the web (and, I am sure fanboys of each will still tell you which one you should be using), but what is important is that there is a glue that connects these devices. With Mesh, Microsoft is trying to be the glue.