Obtrusive Advertising

Image from Engague Blog

I’ve been around the web long enough to remember a time before pop-up blockers. You’d go to a website and BAM! a bunch of windows would pop-up (or under) with advertisements for anything and everything. Sure, pop-up’s are still around but not nearly as prevalent as they were in 1997 thanks to the aforementioned blockers. I for one was happy to see them go. Nothing is more annoying to me than wanting to read a site and having something get in the way.

Of course, you and I both knew those crafty marketers would find a way to make their ads even more annoying. Case in point:

I love sports. I check ESPN.com multiple times a day. On one such occasion I was reading a story about the latest star whining about something or about someone changing their last name to a Spanish number. I don’t really remember. That’s not the point. Anyway, while reading the column the entire page shifts down causing me the lose my place and question why ESPN didn’t want me reading their quality content. Turns out ESPN had to make room for an iPod Touch ad at the top of the page WHILE I was reading. Not only that, the flash ad had to be all crazy and move around and do hip things that iPod ads do.

Don’t get me wrong it’s a cool effect, but even the coolest things can be extremely annoying.

The sad thing is, this form of advertising isn’t going to go away. Just head over to AskMen.com and read a column. Eventually you’ll be asked to click to go to the “next page.” However, between page #1 and page #2 you’ll get stopped and asked to look at an ad. Go head, go try it. It’s annoying as hell and I’ve seen this technique used at a number of websites. It’s like reading a book and between chapters someone punches you in the face.

Even when someone develops an “Annoying iPod Ad Blocker” someone else will develop another craptastic method to cram hip products down our throats. It’s an never ending struggle.  As a designer you want to do away with this crap, but you’re not the one writing the check so what can you do? You cash the check and go buy an iPod. It’s not hard.

I love a free tool. Especially one that is useful and creative. I recently came across a great idea from the good people at Rain Creative Lab. They have a concept under testing called the Paper Browser that allows you to wireframe your website using a sheet of paper. This isn’t just any old piece of paper. I’ll let them explain.

The Concept is simple.
A sheet of paper used for creating a website wireframe. However, not the same kind of grid that you might have used before. I’ve taken into consideration the actual viewing resolution of your potential user.

Instead of looking at your site inside the browser, why not look at it on what the user sees.

There are many advantages: you can gauge the viewing perspective of your user. Thus, maximizing your possible design estate.
I’ve provided guides for design that uses a 960px, or design screen at 800px.

The whole paper is proportionally scaled at 1024×768 screen resolution.

Your design canvas is 1024 resolution minus the height of the browser toolbar and status bar.  The size has been properly measured to simulate the actual design estate you can work on.

Each grid is 32×32px in dimension. You can use this data to map out directly into Photoshop during production.

So that is that. They want a lot of feedback, so leave some comments or visit their site and tell them what you think. Huge thanks again to Rain Creative Lab for allowing me to share this resource with you guys. Download the files below.

August 27, 2001. For web developers, that is a date that will live in infamy. On that unassuming August day, Internet Explorer 6 was officially released. No one could have foreseen the headaches IE6 would cause for developers. Who could have known that in late 2009 Internet Explorer 6 would still have 12.1% market share, forcing us to make sure our sites play nice with it. There have been many attempts to bring down our foe (here’s one, here’s another), but alas, IE6 won’t go down quietly.

IE6’s problems are well documented, but luckily for us a lot of smart people have found ways fix (or side step) those problems. Here is a huge list of hacks, fixes, and resources to make IE6 a little less painful.

IE6 Box Model Bug

More than likely if you’ve heard of only one IE6 bug, the box model bug is the one. In short, IE6 incorrectly calculates the width of a given box causing all sorts of layout problems. Here are some ways around this annoying bug.

• Box Model Hack
• Internet Explorer and the CSS Box Model
• About.com Box Model Hack
• The IE Box Model and Doctype Modes

IE6 PNG Transparency Bug

I touched on this briefly in my Quick Guide to PNGs post. There is a lack of support of the PNG alpha channel in IE6 causing transparent PNGs to render incorrectly. There’s a bunch of fixes for this using a lot of different techniques.

• IE PNG Fix 2.0
• PNG Alpha Transparency with MSIE
• Transparent PNGs in Internet Explorer 6
• Cross Browser PNG Transparency: Part 2
• DD_belatedPNG
• The PNG Problem in Windows IE
• PNG Behavior
• Degradable PNG Transparency for IE6
• PNG Image Fix for IE

IE6 Min-Height/Min-Width Bug

In another move that completely makes sense, IE6 ignores the min-height/min-width property. Don’t ask me why, I honestly haven’t a clue.

• Min-Height Fast Hack
• Maximum and Minimum Height/Width in IE
• Min-Height for IE

IE6 Double Margin Bug

This bug does exactly what you think it does. IE6 doubles your margins on a floated element. So, for instance, if you want a 10px margin IE6 makes it a 20px. It makes perfect sense, huh? Here’s how to fix it.

• Prevent Double Margin in IE6
• Bug Fix: IE Double Margin Float Bug

IE6 No Hover State Bug

IE6 only supports the hover pseudo-class on anchor (<a>) tags. Unlike modern browsers that support the hover pseudo class on any element. This bug especially becomes a problem when using lists (<li>) for navigation. Here’s a few work-a-rounds.

• CSS selector:hover Hack for IE6
• Whatever:hover
• An IE6 Compatible Solution for :hover

Other IE6 Bugs

Here are some fixes for a few other IE6 bugs.

• IE6 Italics Bug
• IE6 Step Down Bug
• IE6 Border Bug

General IE6 Hacks, Fixes, & Resoucres

• IE CSS Bugs That Will Get You Every Time
• Explorer Exposed!
• Ultimate IE6 Cheat Sheet
• 10 Fixes That Solve IE6 Problems
• 119 Bugs in IE6 For Windows

Conclusion

I hope this list helps you. Almost every single fix/hack I’ve listed has come in handy to me at some point. Please let me know if I’ve forgotten anything or left something out. I can’t say thanks enough to all the people who have taken time to develop solutions all of us can use.

Welcome to my tutorial on How To Turn Yourself Into A Zombie.

Have fun turning yourself into the living dead. Please leave a comment if you have any additional questions or need any help. I’d be glad to assist! I’ve included the pictures I used for my profile picture in this tutorial.

Sample Images

Thanks to Cailyn Huston for supplying my profile picture, and Matt Sparks for allowing me to share this tutorial on his amazing blog.

Enjoy!

PNGs have been around since the mid-1990’s and as the web has evolved, the popularity of this image format has increased. Here is a quick guide to the humble PNG.

A Brief History

The PNG was developed for two  reasons. The first being that in 1995, Unisys patented the LZW data compression algorithm. This algorithm was used in the GIF file format. Any program used to create GIF images would now have to pay for the right to do so. Understandably, this wasn’t well received. [Here's a great account of the controversy]

As for the second reason,  the GIF file format was simply outdated and needed a replacement.  GIFs could (and can) only display 256 colors and have limited transparency options. PNGs were developed to improve upon GIF’s limitations.

Version 1.0 of the PNG specification was released on October 1, 1996.

The Rundown

Name: Portable Network Graphics
Unofficial Name: PNG’s not GIF
Pronounced: “Ping,” “P-N-G”
Extension: .png
MIME Type: image/png
Color Types: RGB, Greyscale, Indexed, RGB & Alpha, Greyscale & Alpha

Benefits of PNG’s

There are many benefits to using PNG’s in your work. Here are just a few.

• PNGs are a lossless image format. That means when a PNG is compressed it doesn’t lose any of its quality. This results in great looking images with a small file size.
• PNGs can have up to a 30% smaller file size as compared to an equivalent GIF.
• PNGs can contain custom meta data that can be searched.
• PNGs do not suffer from generation loss.
• PNGs support variable transparency.

IE 6 and PNG Transparency (How to Fix It)

Doesn’t it seem like IE 6 always spoils the party? If you’ve used a transparent PNG in IE 6 you may have noticed it didn’t look the way you intended. This is due to a lack of support of the PNG alpha channel. There are many fixes for this, below I’ve listed some.

• IE PNG Fix ( has worked great for me)
• Degradable PNG Transparency for IE 6
• Transparent PNGs in Internet Explorer 6

Random PNG Related Info

• PNG is Adobe Fireworks’ native file format.
• PNG has a close cousin that supports animation (like GIF) called MNG (Multiple-image Network Graphics), although it’s not widely supported. There’s also APNG.
• There is a lossless JPEG format known as JPEG-LS.

Resources & Further Reading

• PNG Homepage
• Dr. Dobb’s PNG: Portable Network Graphic Format
• PNG Fact Sheet
• GIF or PNG?
• PNG Specification and Extensions
• PNG: The Definitive Guide (e-book)
• Clever PNG Optimization Techniques
• PNG Optimization: More Clever Techniques

Michelle’s Movie Reviews (Angelfire)

First up is a classic. White background, bright text, animated GIFs, you simply can’t beat it. Michelle claims to have seen a lot of movies, but only offers four reviews  (only one of which is viewable). Also offered is a reminder of what to bring with you to the movies. Don’t forget your sweater!

Fu-Kwun Hwang’s Personal Homepage (Geocities)

Here is the personal homepage of Fu-Kwun Hwang. He was (I’m not sure if he still is) a professor in the physics department of National Taiwan Normal University. The site was last updated on 1/28/99, so I’m sure this once glorious website is all but forgotten. By the way here is the current website for the NTNU Physics Department.

The Patrin Web Journal (Geocities)

Here is a perfect example to compare and contrast blogs today and what wanted to be blogs then. The Patrin web Journal is a website dedicate to Romani (Gypsy) culture. The website is actually designed well from a 90’s standpoint.

Jeff Miller Web Pages (Tripod)

Want a rousing way to spend your Friday night? Head over to Jeff Miller’s website. Once there you will find images of “mathematicians on postage stamps”, and other gems like the “earliest known usage of some of the words of mathematics.” We didn’t expect them all, Jeff, don’t worry.

201 Stories by Anton Chekhov (Tripod)

Jeff Miller’s Web Pages not doing it for you? Here are 201 Stories by Anton Chekhov for your enjoyment. I personally enjoy “The Teacher of Literature.”

Weight Watchers Recipes (Angelfire)

The holiday season is upon us. Instead of turducken on Thanksgiving, why not try the Diabetic, Low-Fat Thai Turkey with Brown Rice. This site has reminded me of many dead (or dying) website features: the guestbook, the green hit-counter, etc. Now I have to find a site with a web ring.

Conclusion

There you have it. A few examples of what the web once was. I poke fun at these sites now, but I honestly wouldn’t be doing what I do if services like Geocities weren’t around when I was 13. Geocities is simply the latest casualty in the evolution of the web. Who’s next? We can’t be sure (probably MySpace), but I do know Geocities won’t be the last. If you guys know any great sites like those above, let me know. We need to start a collection.

I’m sure you’ve heard the talk about CSS3. If you’re on Twitter and follow the industry heavy-weights, I know you have. The topic is seemingly everywhere. Gone are the days of using images for rounded corners! Not only that we can use any font we want on our pages! Right?!?

Not so fast, Usain Bolt.

Here are five things you should know before diving into the CSS3 deep end.

1. CSS3 isn’t ready yet. Our good friends over at the W3C are still working on it. CSS3 is modularized. That means the CSS3 specification is broken down into smaller pieces to allow for easier updating. This allows for a more timely evolution of CSS3. The bottom line is, CSS3 will progress slowly (but efficiently).  Learn more about CSS3’s moduals.
2. Browser support is lacking. Don’t get me wrong. There is browser support out there for CSS3, albeit in a limited sense. Support isn’t to the point where you’d feel comfortable using CSS3 on a daily basis. Firefox 3.5, Safari 4, Chrome 3, and Opera 10 have the best support thus far. Of course Internet Explorer is lagging behind (especially with CSS Selectors). Shocking, I know. Learn more about CSS3 browser support.
3. Not every font can be used with @font-face. The font you’re wanting to use has to be licensed for embedding. While that sounds like a road block, have no fear! There’s a growing list of fonts available for embedding. On a related note, Internet Explorer supports the @font-face rule however you have to use the Embedded Open Type (.eot) format. Learn more about @font-face.
4. To use CSS3 today, you’ll have to use browser-specific rules. For example to get rounded corners in Firefox you must use “-moz-border-radius: 10px;” rather than simply “border-radius: 10px;” (which you will be able to once CSS3 is finished).  Learn more about rounded corners in CSS.
5. Since CSS3 hasn’t been officially released, using CSS3 may (and probably will) invalidate your CSS.  If you’re fine with that, use CSS3 to your heart’s content. Learn more about CSS3 validation.

So there you go, 5 things you should know about CSS3. I hope you learned something that will come in handy. Look below for some great CSS3 resources.

Resources

• Introduction to CSS3
• CSS: Current Work
• Conversation with CSS3 Team
• CSS3.Info
• Push Your Web Design Into The Future With CSS3

The Decemberists

I’m a huge fan of the minimalistic approach to this design. The design is clean and easy to navigate. The illustration on the left puts it over the top

Pearl Jam

Colorful, easy, and has an awesome music player. I’m pretty sure they have an album coming out soon, as well. Viva la 90’s!

Death Cab For Cutie

Great mix of traditional design and Flash.

The Raconteurs

This one falls under the unique category. I love the command-line interface. Maybe not a flashy design, but I’m giving it points for trying something different.

The Black Keys

Great band, cool site. Really enjoy the color scheme.

Dirty Pretty Things

Very modern design, great use of textures and backgrounds.

The Fratellis

This is a good example of having quite a bit of content, without cramming things together.

Taking Back Sunday

This is probably my favorite design of the bunch. Color, textures, backgrounds. Good stuff.

Blink 182

Cool background image, another great mix of Flash and traditional techniques.

Mastodon

Simply a great band site. Love the Flash header.

Related Links

• Design an Awesome Band Website Template
• Five Mistakes Band & Label Sites Make
• Outstanding Myspace Music Profile Designs + CSS Cheat Sheet

1) Tutorial 9 – Building Fasters Websites with CSS Sprites

2) A List Apart – CSS Sprites: Image Slicing’s Kiss of Death

3) CSS Tricks – CSS Sprites: What They Are, Why They’re Cool, and How To Use Them

4) Smashing Magazine – The Mystery of CSS Sprites

5) David Walsh – Creating & Using CSS Sprites

6) CSS Globe – Creating Easy & Useful CSS Sprites

7) Peachpit – What are CSS Sprites?

8 ) Nettuts – Exactly How to Use CSS Sprites (Video)

9) From The Couch – How to use CSS Sprites (Video)

10) Line 25 – How to Create a CSS Menu Using Image Sprites

Somewhere around 1990, Tim Berners-Lee developed a hypertext language known as HTML to work in collaboration with the World Wide Web. Early web pages had a very basic text structure with very few (if any) images. Inevitably web developers wanted more control over how their pages were presented and HTML grew to accommodate that. Many tags and attributes were added to HTML to do everything from changing a font size to tabulating data to aligning content. Needless to say, HTML became complicated and hard to maintain. Something was needed to separate the markup (HTML) from the presentation of the web page. A style sheet was the answer.

Style sheets had been around for awhile (see SGML and DSSSL), but one tailored specifically for web documents had yet to be developed. Two proposals were selected (out of 9) from the W3C’s www-style mailing list to be the foundation for what we now know as Cascading Style Sheets. That’s where the timeline begins.

• October 10, 1994 – Håkon Wium Lie proposes Cascading HTML Style Sheets (CHSS). Soon thereafter, Lie and Bert Bos, who proposed Stream-based Style Sheet Proposal, combine forces to develop CSS.
• October 1994 – Håkon Wium Lie presents his proposal at the WWW2 “Mosaic and the Web” conference in Chicago, IL. Also in October of that year, the World Wide Web Consortium (W3C) is founded by Tim Berners-Lee.
• November 6, 1995 – CSS is added to the HTML Editorial Review Board (which then became responsible for the development of HTML, DOM, and CSS) in Paris, France.
• August 13, 1996 – Microsoft’s Internet Explorer 3 is released and becomes the first major browser to support CSS, albeit in a limited sense.
• December 17, 1996 – CSS Level 1 Recommendation (CSS1) is published.
• February 1997 – The HTML Editorial Review Board (ERB) splits into three groups: HTML Working Group, DOM Working Group, and CSS Working Group.
• November 4, 1997 – The first public working draft of CSS level 2 (CSS2) is made available.
• March 30, 1998 – The WC3 announces the first beta release of its CSS Validator.
• May 12, 1998 – The WC3 publishes the CSS level 2 Recommendation.
• January 11, 1999 – The WC3 revises the CSS level 1 Recommendation.
• January 29, 1999 – The WC3 announces the CSS1 Test Suite.
• June 22, 1999 – Drafts of the first three CSS3 modules are made public: Color profiles, multi-column layout, and Paged Media Properties.
• August 2, 2002 – The first draft of CSS level 2 revision 1 (CSS2.1) is released.
• June 15, 2005 – CSS2.1 reverts back to a working draft after being a Candidate Recommendation for several months.
• July 19, 2007 – CSS2.1 once again becomes a Candidate Recommendation.

CSS is a life saver for those of us who remember a time when it wasn’t widely used. When I started messing around with HTML, all styling was implemented in the HTML document itself. You didn’t use DIVs and CSS for your layout.  You mocked-up a site in Photoshop, cut it up, and used tables to put the pieces back together. With CSS now widely used, everything has changed for the better. Most modern web browsers fully support CSS2.1 without any quirks (you know the exceptions). Those same web browsers are well on their way to CSS3 support. In fact, CSS3 is currently supported well enough to see some of what it can do.

So there you have it – a short, compact history of our good friend CSS. I hope you enjoyed it.

Sources

• Håkon Wium Lie’s PhD Thesis on CSS
• W3C Cascading Style Sheets
• 10 Years of CSS
• www-style Mail Achives
• Cascading Style Sheets, designing for the Web, by Håkon Wium Lie and Bert Bos (Chapter 20)
• Bert Bos’ Stream-based Style Sheet Proposal
• Cascading HTML Style Sheets – A Proposal