Web design Web standards

Third annual CSS Naked day

April 5th, 2008 is Bette Davis’ 100th birthday and it is also the third annual CSS Naked Day. If you are viewing this on April 5th then you will see no styling. Any other day it will look normal. A properly written web page should fail gracefully and still be useable by browsers that do not understand CSS. It is the web standards way. πŸ™‚

The idea behind this event is to promote Web Standards. Plain and simple. This includes proper use of (x)html, semantic markup, a good hierarchy structure, and; well, a fun play on words. I mean, who doesn’t want to get naked?. Feel free to see the original reference article for more information.

Web standards

April 5th is CSS Naked DayΓ’β€žΒ’

April 5th, 2006 is the first annual CSS Naked Day. If you are viewing this on April 5th then you will see no styling. Any other day it will look normal. A properly written web page should fail gracefully and still be useable by browsers that do not understand CSS. It is the web standards way. πŸ™‚

Welcome to the first annual CSS naked day which will be happening April 5th, 2006. The idea behind this event is to promote Web Standards. Plain and simple. This includes proper use of (x)html, semantic markup, a good hierarchy structure, and; well, a fun play on words. I mean, who doesn’t want to get naked?. Feel free to see the original reference article for more information.

Please visit my friends at:
Third World County
Diane’s Stuff

Humor Random Web design Web standards

A gift from Mom

Today day my Mom gave me a nice present. She let me upgrade her iMac from OS 9 (with IE/Mac as her default browser) to OS X (with Safari).

Mom and change do not go together very well but she took to OS X quite well. That 400MHz G3 was partying like it was 1999. Yeah, the old Lime Green is kinda old but it’s served her well (it served me well, too, before it was her’s).

Now that she’s using Safari everyone around the world can stop hacking their web pages to work for IE/Mac. I’m pretty sure she was the last person on earth using it.

If anyone out there is actually still using IE/Mac please read this.

Thanks Mom. I’m proud of you.

Web standards

Camino 1.0 Stable release

Camino is a Mac only browser (that’s the way to stick it to the man). After trying it out is seems much snappier than both Safari and Firefox. It comes with “Web Standards” links in the bookmarks (always a good sign). It handles javascript that Safari chokes on (such as the buttons in WordPress’ Write Post panel and the buttons in all the major forums post pages).

I do believe this is going to become my default browser.

Download it here.

Trackbacked to:
The Liberal Wrong Wing
Those Bastards!
History Mike’s Musings
Common Folk Using Common Sense
Right Wing Nation
The Conservative Cat
Diane’s Stuff

Web standards

Updated IKM Standards forums to simple machines

Like many I have grown weary of the constant updates and security holes in phpBB and having to constantly hack the templates to make them comply with W3 standards, I decided to give Simple Machines a try.

I like it.

I like it enough to replace the forum I have on this site. This forum is for the discussion of web standards. All are welcome to join.

Simple Machines uses valid markup and css right out of the box. I’m quite impressed by this as it seems to be a non-issue to the phpBB community.

I’m now working on figuring out the template system on Simple Machines so that I can make some adjustments.

More to follow.

Web standards

Internet Explorer 7: Beta 2 Preview available

Get your copy of Internet Explorer 7: Beta 2.

You can check out all the new bugsfeatures and then learn how to uninstall it. πŸ˜†

Make sure you leave Microsoft some feedback at their discussion group. Hopefully, we won’t need to design a new series of hacks and fixes for this new browser. Maybe M$ will come to terms with web standards. Maybe monkeys will fly out of my butt.

From the reports I’ve read so far it overwrites IE6 so if you need a reliable browser (well, I don’t know that you can consider IE6 reliable but I digress…) then IE7 beta should only be placed on a spare computer for testing and swearing at.

Trackbacked to:
The Land of Ozz
Those Bastards!
Right Wing Nation

Web design

I no longer support IE5 for Mac

Microsoft has finally released us from the torture that is IE/Mac.

In June 2003 the MS Mac Business Unit stopped development on Internet Explorer for Mac. MS ended support for the application on the last day of 2005 and will no longer offer it for download as of 31Jan06.


It is recommended that Macintosh users migrate to more recent web browsing technologies such as Apple’s Safari.

Hallelujah, says me.

I can now refuse to support IE/Mac to my customers that “need their pages to work on IE/Mac” or at least have good evidence to encourage them to finally upgrade. πŸ˜†

Hasta la vista, IE!

Linked to:
Samantha Burns
Dianne’s Stuff

Web design Web standards

A new guru

It seems today that I was given the distinct honor of being named one of the New Guru’s for css creator.

I am humbled and grateful and I suppose now I am actually going to have to learn what this CSS thing really is. πŸ˜†

Thanks to Tony for the finest learning forum online!

I’ve had enough. Too many jerks and not enough thanks or help. Four or five guys actually helping people that take the help and split, never to be seen again. Noobs calling out the long-timers. Braggarts that can’t accept that they may be doing something incorrectly. Insults and other childish reactions. I did receive a thank you once or twice but the overwhelming amount of abuse just sent me out. On top of all that I usually ended up helping some guy that fancied himself a web designer because he accidentally bought a copy of dreamweaver. It didn’t bother me until I saw the jobs these guys were getting paid to do. Big jobs. Given to someone that can’t do that job unless I help them. Help I was expected to give for free. Being a moderator I could delete users from the site. Today I exercised that right on myself. I know Tony and the moderators mean for it to be a site for helping but the takers and abuser ruin it. I wish you the best Tony. Good luck to you, along with Hugo, Gary, Tyssen, Chris, Deuce and Ed Seedhouse.

Web standards

Why web standards?

I could give you all the arguments on why you should code your pages according to the current standard. I could tell you that if you are not turning out valid and semantic code that you are unprofessional and that you shouldn’t quit your day job. I could explain the purpose of separating markup from layout over and over again, but I won’t do any of these things. All I can tell you is why I do it.

Why do I do all these things? I can sum up the reasons I adhere to web standards in one word:

I define integrity as “doing the right thing even when others aren’t looking” or “doing what you should even if no one would ever find out”.

I’m sure I could turn out sloppy code and make it look like an ice cream sundae to a starving kid if I were so inclined I just can’t seem to allow it to be seen. Integrity.

I couldn’t build a layout using tables and image slices and sell it to the next sucker to come along. I can’t even seem to sleep with a missing paragraph tag. Integrity.

I couldn’t turn out bloated, outdated and non-semantic code. I just can’t bring myself to do it. Integrity!

Yes, I’m the guy that actually returns the shopping cart to the “cart return station” instead of leaving it in the middle of the parking lot like every other baboon. I’m the guy that picks up a piece of trash that falls out of my truck when I get out even if it falls onto a pile of garbage that everyone else left in the parking lot, even if I have to chase my gum wrapper in a wind storm.

Now, I’m the guy that tries to code to standards in every web page I design for people even if I am surrounded by baboons that turn out outdated, tables based, non-semantic layouts and sell them for 20 times what I charge. Will anyone know? Probably not. Just try to run one of your favorite company’s sites through the W3 Validator and see if it passes. They got away with it. I probably could, too.

Again I ask, will anyone know? Yes, I would. I couldn’t do that. I won’t.

Am I accusing other web designers/coders? Run your sites through the validator and accuse yourself. Baboon! πŸ˜‰

Linked to:
Bloggin’ Outloud
Land of Ozz
Committees of Correspondence
The Business of America is Business
The Liberal Wrong Wing
Diane’s Stuff
The Crazy Rants of Samanta Burns
TMHÒ€ℒs Bacon Bits

Web design Web standards

Ow! My bandwidth is clogged.

Only one thing annoys me more than uncompressed images and that’s SPAM!

A decent digital camera is cheap these days. Just about everyone owns one. Unfortunately, not everyone understands that a 2 Megapixel jpeg weighs in at about half a megabyte. Don’t get me wrong, I like when people send me big files to work with but having 45 half-meg pics on a web page all shrunk down to size using height and width attributes is nothing but annoying, even with broadband. That’s not to mention those that use these gigantic files as an avatar on their favorite forums.

Speaking of forums, those that allow image uploads really get abused by these guys. Come on, people, let’s compress and resize those images and treat your favorite forums better. Bandwidth isn’t free, ya know?

OK, so let’s get down to business. I use Adobe Photoshop so I’ll show you how to get those images down to size the way I do it.

Step one – Crop and Resize

Don’t use height and width attributes in your image tags to resize your images. Make the picture the size you need it to be. This is the number one way to reduce image size and bandwidth use.

Here is my test image [edit – test image removed because some morons were hotlinking to it] weighing in at 796kb straight from my 2.2 Megapixel Kodak DX3500 (which exports jpegs at 230 pixels per inch). Computer monitors usually show information at 72 pixels per inch so that is how I set all of my images.

I am going to open it in Photoshop and crop out any parts I don’t want to show in the final product and then go to the Image menu to “Image size…” and change this:
Original image size
to this (notice the resolution):
New image size
resulting in this:
Resized image
which is a 288kb file. Much better but not good enough.

*Note – If, after resizing your image down to size, the image looks jagged and unnatural, then undo the resize (in the edit menu) and then apply a little bit of Gaussian Blur in the Filters menu and then resize it. Who knew blurring an image can make it look sharper when you shrink it down? πŸ™‚

Step two – Compress

Next I use the “Save for web…” item in the File menu.
Save for web menu item
and simply set it to “Medium” under the presets (for jpegs).
Medium setting

Now if you are going compressing a logo or similar graphic (not a photograph) with only a few colors or large spots of a single color then a gif will serve you much better. If you need color matching you don’t want to use jpegs because their compression is based on throwing out some information to get the files smaller. Some of that information is color information and a jpeg over a gif background will sometimes not match but the differences will only show on certain platforms using certain browsers.

After compressing my picture this is the result:
Compressed image
coming in at tidy 28kb. That’s about a 90% savings in file size from the resized and over 99% savings in file size from the original.

So, come on, people! Let’s compress those images and save the bandwidth!

Web standards

New web standards forums

Check out the new web standards discussion forums. Give it a try. Register and join in. πŸ™‚

Web standards

Flash with Standards

I hate Flash.

There, I said it. I’m glad I said it and I won’t take it back. Oh, there is nothing more loathsome than waiting ten hours for a web page to load only to have a Flash enabled splash page appear that says “Click here to enter the site”.

😑 Grrr! I just typed in the address up there and either clicked the “Go” button or hit “Return”! I don’t want to click there just to enter the site I thought I was already entering.

I also just LOVE when I get referred to this great hilarious web animation and I wait fifteen hours for it to load and then a “PLAY” button appears. Do you think I want to play the stupid show since I just waited twenty-two hours for it to load? Don’t make me click a button to do what I already want to do. By the way, here are some Flash monstrosities that are not funny (and never were):

  • End of the World
  • Anything from JibJab
  • Vulgar squirrel thing
  • Anything else you got in your email because I’ve already seen it from two hundred other people that thought they got it in their email first

Flash is evil! Flash is stinky! Flash’s mother is so stupid that she stared at a can of orange juice because it said “concentrate”. (Sorry Mr. T).

All that being said, I must admit my hatred of flash is mostly due to its misuse. A small and quickly loaded animation can make a nice header if it stops animating and lets me read the page and its powerful scripting can be useful (even though I’ve never had a use for it).

Here’s the trouble with it: The code that Flash outputs is not standards compliant and embed tags do not validate because they are not part of the XHTML standard.

Some standards compiant techniques have popped up including Flash Satay (which causes you to create a pre-loader flash file that loads the main Flash content or the user stares a an empty space until the Flash object loads completely), the Unobtrusive Flash Object (which relies on JavaScript being enabled) and Nested Objects with conditional comments to switch between IE and everyone else.

Nested objects is my favorite of the three and works like this:
<object classid="clsid:d27cdb6e–ae6d–11cf–96b8–444553540000" codebase=",0,0,0" width="150" height="150">
<param name="movie" value="examplea.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<!––[if !IE]> <––>
<object data="exampleb.swf" width="150" height="150" type="application/x–shockwave–flash">
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<param name="pluginurl" value="" />
This content is only available if both objects fail to load.
<!––> <![endif]––>

A chart with the results of all of the methods was posted by Andrew Kirkpatrick & Bob Regan here.