Subject: Compensation for heartache
To: Microsoft
From: Pete Peterson

Hi Microsoft,

My name is Pete, and I have been doing work on the web for about 10 years now. Although I do not blame you (Microsoft) for the active use of Internet Explorer across the inter webs, you did however produce this atrocious piece of software. The versions have been steadily getting better, but, there is this thing called the a “standard” for web delivered information which would be great if you could find time to read them and apply them to how Internet Explorer renders web pages.

Here is a web address (also called a URL) for reference: http://www.w3.org/standards/

As I mentioned before, I don’t blame you (Microsoft) for the hundreds of thousands of people who still use your archaic browser (specifically IE 6), but since it was you that produced it, I feel I should be compensated for the countless hours spent in hacking html, css, javascript to get your browser to display the way it should. Not to mention all the aspirin, ibuprofen, coffee, Valum, whiskey that I have had to consume in order to endure having to work with this shoddy piece of ether that has been the bane of my existence since I decided on this career path.

I believe that $5000.00 is fair. Please enclose a check payable to Peter Peterson. No hard feelings.

Regards,

Pete

————————————–
My customer support id for this message is 1135554260
please feel free to follow along.

[EDIT]

I recieved a response from Microsoft regarding my gripe:

For replacement media or hardware please contact the Microsoft Order Desk by calling (800) 360-7561. Their hours of operation are Monday through Friday, 5:00 A.M. to 7:00 P.M. Pacific Time.

Please note this is an unmonitored alias. If you have further questions for customer service please contact us by Email: https://support.microsoft.com/contactus/emailcontact.aspx?scid=sw;en;1208&ws=orderautoreply

Thank you,
Microsoft Customer Service

I guess they aren’t going to pay me.

I’ve toyed with a few CSS frameworks in the past such as Yahoo!’s YUI framework, but 960 is the best I’ve come across so far. Here is what they provide:

• A flexible framework for creating your designs in a grid based layout
• Templates for doing your design work and have it fit nicely into a grid
• Simple, understandable markup where if you revisit your code in a month you won’t be stuck saying “Huh?”.
• Light weight, the CSS (minified) is only about 4Kb.

There are others out there, but I’ve found that 960 is the easiest to work with. So why 960? Its based on a 960 pixel width because “960 is divisible by 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320 and 480.” This is what makes it so flexible.

What if you don’t want a 960 width layout or perhaps you want less columns in your layout, Spry-Soft.com has a customizeable grid creator for you.

They provide you with everything you might need, even the ever popular reset.css and a text.css to get you off and running. They even give you a printable “sketch sheet” you you can pencil in your design/layout ideas on paper before you hit photoshop or fireworks or visio or omnigiraffe.

Here is what the photoshop .psd template looks like:

I’ve added this to my default group of files whenever I start a new project. I highly recommend it, give it a try, it will make slicing up your designs soooo much easier.

http://960.gs/

If you could add some sort of interesting-ness to a common problem, does that make it an oportunity? Absolutely! When someone accidentally hits a page that doesn’t exist on your site, the standard 404 page doesn’t do much, if if you entice the poor misguided traveler, they might stick around and see what you have to offer.

Enter the fun world of custom 404 pages, here is mine. I have included the source code at the bottom of this post including the original flash file I used to create this. Feel free to use it, change it, distribute it as you see fit.

I stumbled on to this one last week and thought it was very clever and briliantly designed: bluedaniel.com/404.shtml. It turns out the whole site is interesting. I spent quite some time there looking at the trailers, etc.

So I did a search and Smashing Magazine has a whole article on some cool designs, use it as inspiration.

I’ve included jquery, and jquery flash plugin. If you end up altering the flash file, make a backup of the html file as publishing will overwrite it. I prefer using jquery so I usually just export the swf.

Most of it is pretty explanitory, you may change some of the defaults simply by changing the javascript in the 404.html file:

Javascript

flashvars : {
   outlink:"http://blog.inspirefocus.com",
   max_stars: 60
}

max_stars sets the total stars to generate (careful too many will bog your system/browser down)
max_bg_stars sets the maximum number of stars in the background
link_label sets the text to display as the link to where
outlink points to.

Here is an example:
Javascript

$(document).ready(function(){
   $("#flash").flash({
       src: '/path/to/your/404.swf',
       scale: 'exactfit',
       width: '100%',
       height: '100%',
       flashvars : {
	  outlink:"http://somelinktosendpeopleto.com",
	  max_stars: 60,
          max_bg_stars: 700,
          link_label: "I want to go to there!"
       }
   });
});

Have fun with it, and send me a link to what you create, or if you simply reuse mine. Remember, don’t forget your towel!

Update: I just found another post to 70 creative 404 pages: here.

Attachments: 404page.zip

Web Design+ — Tips and advice on web standards development. via CSSBeauty.

This is a great resource for getting around some troublesome areas around web design. A lot of the information here also relates to best practices and details what works and what doesn’t and why. If I find a part of a page particularly tricky to accomplish to solve with css, I usually resort to jQuery, which works, but could potentially be limiting to some people.

This list of essentially dos and don’ts is the perfect resource for anybody creating a template, or converting a design to actual markup. A few of the resources I employ are the Yahoo YUI Reset css sheet, 960.css for grid designs, and a starter CSS sheet that I generaly use for all designs across the board. This page covers a few tricks that will definately be going into my bag of tricks.