David Coffey's bloG

Map the transparent layer of your PNG to a color

Mon, 18 Apr 2011 17:03:00 -0600

For those of us who still have to support IE6, one of the frustrating facts of life is that IE6 does not support full PNG-24 alpha transparency. Workarounds often include slow Javascript plugins, IE6 conditional CSS, or modifications to the visual design itself. All of these techniques are well and good, but there is one more trick you should have up your sleeve.

PNGs allow you to set a fallback background color for its alpha layer. This means that the transparent layer of the PNG will remain transparent for browsers that support it, but IE6 will display the color that you specify. In order to do this, fire up your IE6 VM and grab yourself a free copy of TweakPNG here http://entropymine.com/jason/tweakpng/

Open up your PNG image in TweakPNG. Go to Insert > bKGD. Double click on the row that appears below it. The standard Windows color dialogue appears. Select a color or enter your custom color in the HSL or RGB fields. File > Save and you are done.

As you can see in the image below, we have a semi-transparent circle with a drop shadow displayed over a standard checkered body background. The first frame shows how the PNG transparency works in modern browsers, Firefox in this case. The second frame shows how that same image is displayed in IE6 by default. The third frame shows how the same image appears in IE6 after I applied a nice easter-green background color using TweakPNG.

FAD ALERT: 'Birth of a Hero' font

Mon, 21 Jun 2010 21:11:00 -0600

Have you seen this font recently? I have, over a dozen times within the last month.

This font has slithered it's way onto countless advertisements, album covers, magazine covers, and has infected a significant percentage of the pedophile-ridden degenerate social network known as MySpace.

It's the font that says: "I am clean-cut and successful, but I have a dark side too."

Consider the images below. You'll see it is the official font for two local bands, and I found most of the other examples within a half-hour of surfing MySpace.

You may think, "This is a nice looking font! It must be expensive. Where did all these people get it?"

You can get it here. (It's free, what a shocker!)

This font has become so overused so quickly that it has become the first font that I am going to declare ILLEGAL. I swear I will never use this font for the betterment of typography everywhere! If you use this font you are a soul-less puppet of the music industry!

Don't be a loser! Avoid "Birth of a Hero" like the plague!

Rounded corners with CSS

Wed, 03 Mar 2010 19:32:00 -0700

Rounded corners are very commonplace in web design today. It is so common that the authors of the CSS 3 spec have decided to include it in the upcoming standard. Most browsers aren't supporting CSS 3 yet, but both the Gecko and Webkit rendering engines have had their own version of rounded corners CSS rules for a while now. It is a lot less work to simply apply a CSS rule to an element than to do it with images, so often recently I have been taking this approach. It doesn't work for IE. Internet Explorer users won't get the rounded corners. The corners are just a little added bonus to my users with the better browsers.

To round the corners on an element you need the following CSS:

For Gecko (Firefox):

-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
-moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:10px;

For Webkit (Safari, Chrome):

-webkit-border-top-left-radius:10px;
-webkit-border-top-right-radius:10px;
-webkit-border-bottom-left-radius:10px;
-webkit-border-bottom-right-radius:10px;

The CSS 3 version (for future browsers that will support it)

border-top-left-radius:10px;
border-top-right-radius:10px;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;

Shorthand

Above are each of the corners spelled out. You can use shorthand if you want all the corners to have the same radius.

-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;

Putting it all together

This is the code for all the browsers combined. Copy this code into your own CSS and change or remove the corners you don't want rounded.

-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
-moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:10px;
-webkit-border-top-left-radius:10px;
-webkit-border-top-right-radius:10px;
-webkit-border-bottom-left-radius:10px;
-webkit-border-bottom-right-radius:10px;
border-top-left-radius:10px;
border-top-right-radius:10px;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;

Thoughts on the use of Flash for the new decade

Mon, 01 Feb 2010 19:46:00 -0700

Flash reached the height of its popularity in the late 90s and early 2000s. Flash intros into websites were common, as were Flash games. In 2002 most people would have probably commented that the "awesomest" websites out there on the web were Flash based. But somewhere towards the mid 2000s two things happened:

1. People realized that Flash was more annoying that it was cool.
2. JavaScript matured into a significant programming force on the web.

Today, Flash website intros are a rare sight. People got tired of waiting for them to load. There are a couple other few critical problems with Flash that can make it a bad idea to use for a client.

Accessibility problems

It is difficult to achieve 508 compliance with Flash. It's not impossible, but it is a big hassle. Your application needs to be usable without a mouse, and a screen reader needs to be able to read its text, among other things. All this stuff works already without any extra effort from you with good old-fashioned HTML.

It won't work on the iPhone

Apple sold record numbers of these things last year, (one of them was to me). Developing any of your websites' functionality with Flash excludes a growing portion of your audience. To cater to iPhone users of your site, you are going to need a non-Flash version anyway.

But don't count it out entirely...

Having said this, Flash can still do some things that are impossible or impractical for other web tools. Flash is still the best way to control audio and video on the web, at least until HTML 5 comes along. It is also still the best way to do any complex animation on your site. Animation can be done with JavaScript, but it is much more tedious and less compatible across browsers.

If you do choose to use Flash, here are my guidelines for the its use in the new decade:

1. Don't use Flash for anything that can be accomplished with JavaScript

Many basic interactions that used to be done with Flash can now easily be done with JavaScript libraries and plug-ins for them. Slide shows, drop-down menus, lightboxes, autocompleters, simple animations & interactions can all be built using JavaScript within minutes.

2. Don't use Flash for any critical functionality of your website

This means navigation, viewing content, or anything that is a core feature of your website (unless your core features are playing audio, video, or games). Just use HTML, CSS, and JavaScript.

3. Keep your Flash usage subtle

If you use Flash, integrate it into your HTML pages. Use it only as a part of your page that enhances the content on the page. Or, use it behind the scenes to control your audio or video.

4. Don't make users wait for your Flash content to load

Unless I am going to play a complex Flash game, I don't have time to wait for Flash content to load. Keep your SWFs small enough so they load right away.

A couple examples of Flash used well:

Google Analytics uses Flash excellently. It uses it for its bar graphs, maps, and charts where the variables that drive its content are fed in from the back end. The charts and displays are alongside HTML content and you can control the Flash objects with HTML links.

Soundmanager2, which is my favorite choice for audio and video control on my websites uses Flash, but you never see it. JavaScript passes variables and commands to Flash to control the audio or video. It also degrades gracefully for people who don't have Flash, like iPhone users. The files will try to open on an OS native media player.

Technical tips for logo design

Tue, 19 Jan 2010 19:39:00 -0700

There are lots of articles out there that discuss the artistic aspects of logo design (this one is good, this one is too). I want to talk about the technical side of logo design and how flexible your logo needs to be. It helps to be aware of how your logo will be applied in the real world, and what problems you might encounter after you've finished drawing it. Here is my advice for when you sit down to draw your next logo, based on my own experience.

1. Use vector images

This is NOT NEGOTIABLE! Your logo may be 100 pixels square on the top of your website, or it might be 100 feet tall on a billboard on the side of the highway. Your logo represents your company everywhere, and it needs to be able to scale to any size in order to accommodate that. Raster images simply cannot accomplish this, I don't care how big they are. Adobe Illustrator is the industry standard program (and my personal choice) for creating vector drawings. If you are poor and can't afford to buy it, head over and download yourself a free copy of Inkscape.

2. Avoid gradients & shadows

Why? Because sign makers often cannot accommodate these things. When you are getting your logo printed on physical things other than paper, like a sign on the side of a building, or knitted into a piece of clothing, gradients are often difficult, if not impossible to reproduce. It's best to stick to solid colors.

3. Limit your colors, and don't rely on them for effect

I would recommend limiting the total number of colors in your logo to not more than four. Getting signs made with more colors is more expensive, not only will it save you money, it will make it easier to apply your logo to different situations. You should consider what the colors will be if your logo is on a dark background, a light background, or if it is applied in only black & white. I would recommend creating separate versions of the logo for each of these situations with the colors adjusted appropriately.

4. Convert text to vectors

When you send your Illustrator or EPS file along to your sign maker, client, or anyone else, chances are they don't have the particular font that you used installed on their computer. The solution is to convert the text to direct vectors so that this isn't an issue. In Illustrator, this is really simple. Just right-click on your text and select "Create Outlines".

5. Know your colors

Sign makers and printers may need to know the exact values of your colors in a variety of color spaces. You should be able to tell them the values of each of your colors in RGB, CMYK, and Pantone.

IE 8 is great for development

Thu, 03 Dec 2009 21:21:00 -0700

If you are still using IE 7 to test your websites in, stop. Do yourself a favor and upgrade to IE 8.

IE 8 comes with developer tools built right in that let you debug CSS and JavaScript in the style of Firebug. It has a menu to let you switch rendering modes from IE 7 to IE 8, and also includes several other useful features including a ruler, the ability to disable styles, scripts, and images, outline DOM elements, set breakpoints in scripts and much more.

To access the developer tools in IE 8 go to the tools drop-down menu and select Developer Tools, or just hit F12 like with Firebug.

Several people have blogged about this already, but I have been surprised that more than one of my web design colleagues was not aware of this.

Google Wave and IE: enter Chrome Frame

Fri, 20 Nov 2009 20:55:00 -0700

I was curious to see what Google Wave's support for IE would be like being that they claim Wave is an HTML 5 application. When I fired it up in IE 6, 7, and 8 I got this lovely screen (see image). This was a shocker! Apparently Google has developed a plug-in for IE called Chrome Frame that actually runs Google Chrome inside of IE. There had been some effort a couple years ago towards implementing something similar to this with Mozilla/Gecko (http://www.iol.ie/~locka/mozilla/mozilla.htm), but the work apparently got dropped.

The implications this will have on web developers is bigger thank you might think. If Google Wave is a hit, all the IE users will be forced to use Google Chrome within their instance of IE. As the install base of Chrome Frame becomes more widespread, other web developers can start to take advantage of it and call it from their websites, circumventing all of IE's crappy CSS support and their slow and ancient Javascript engine. IE's market share will start to fall—that is the number of hits actually coming from IE's Trident engine will fall. How easy would it be then for web developers to just stop supporting IE? They could just force you to use this plug-in like Google Wave does. Who knows, maybe we'll finally see the death of IE6. I, for one, would jump at the chance of forcing all my IE 6 users to install this.

I guess this is Google's way of telling M$ to suck it.

Google Wave: initial reaction

Fri, 20 Nov 2009 19:18:00 -0700

Last weekend I was excited to get an invite to try the early preview of Google's new and highly anticipated product: Google Wave.
My initial reaction: "meh".

If google Wave is to be the game changer that its creators are hoping it will be, they are going to need to overcome a few big hurdles in the usability department.

First off: It's slow.
The click response time is pretty bad, especially when I was using the Playback feature. I don't know if this is a back-end problem or a front-end Javascript related issue, but it is bad. I can't go as far to say that it makes it unusable, but it would get really irritating if I was using this thing all day. It makes the application feel really clunky and unfriendly. I was using it on Firefox 3.5.3, it was slightly faster in Google Chrome, but not up to a satisfactory level. The Wave team seriously needs to figure out what's going on here and find a solution, because this issue alone in my opinion would be a huge barrier to adoption.

Second: the user interface design could be more intuitive.
I felt like I was 10 years old again exploring my Dad's Macintosh Performa 600 for the first time, randomly clicking stuff and seeing what it does. The user interface is unlike any other web application I have used. I didn't even know where to start. This is probably due to the nature of this application, being that it is unlike anything ever created. That being said, I think the team could do a better job giving clues as to what to do next, and little hints here and there about new and different features. No doubt this could be overcome with more time using the application, but I think they could make the learning curve a little less steep.
One little improvement they could make would be to have the inbox show the latest activity from the wave rather than the beginning of it, like Gmail shows you a snippit of your message, Wave does this also, but the text should update when there is new activity on the wave.

I could see myself using Google Wave as a replacement to email, but instant chat is another story. Trying to have a conversation with someone in the style of IM is really awkward. Obviously they want this to be your one-stop-shop for all your communication needs, which is why they went to great lengths to develop the letter-by letter messaging. The problem is they have their messages split up into little boxes, when you are done with a thought or message, you click "Done". To start a new thought you click below any of the previous messages to create a new message box. This is fine for longer thoughts when you aren't looking for an instant response, but when you are chatting with someone, you are either constantly clicking "Done" then clicking to open a new box, or both of you are amassing all their chats into their own respective box, but then you can't tell who said what when.

That being said, it does look promising. I LOOOVE the letter-by-letter transmission. Re-inventing email was something that needed to happen sooner or later, but I think the Wave folks need to do some creative problem solving, or this thing is going to be a huge flop.

The coolest HTML tags you’re not using

Mon, 16 Nov 2009 21:16:00 -0700

There’s been a lot of talk lately about "Semantic HTML", or in other words, trying to use descriptive code to markup your content with. Semantic HTML is crucial for search engine optimization since it helps web crawling bots to understand your content.

There are a few HTML tags still in the W3C recommendation status that are pretty useless and should probably be depreciated, but there are others that you probably haven’t heard of that could actually be quite useful.

So the next time you’re building a webpage and you go to type <div> or , stop and consider using one of these!

<base>

This tag might be the most powerful tag in this list. What it does is defines a base URL for all the links on your page. This would be useful if you could not use relative URLs for some reason. You could define your base URL as http://www.example.com/ and then make the rest of your URLs relative off of that. Then if you ever moved domains all you would need to do is change this <base> tag.

Another thing you can do with the <base> tag is specify a default target for all the links on your page. For example in your head you can say <base target="_blank" /> which would make all the links on your page open in a new window unless specified otherwise.

<bdo>

“The <bdo> tag allows you to specify the text direction and override the bidirectional algorithm.” –W3C

In other words, it writes your text backwards.
Turn this: “My name is David!”
Into this: “!divaD si eman yM”

Apparently this is useful in the middle east for languages that read from right to left, but here in America it’s completely useless. However, this could be great for mischief around the office.

<acronym> and <abbr>

This one would be especially great to see in use around where I work here in the DC area, where acronyms and abbreviations are like the plague (more on that in another blog post).

But you can define the real meaning of an acronym or an abbreviation in these tags while still using it for your body text. This will allow search engines and screen readers to be able to read the full meaning of your acronym. Also when you hover on it the little hover hint will appear with the full meaning.

<acronym title="as soon as possible">ASAP</acronym>
becomes:
ASAP

<label>

This is a great one for your forms. You use this to define a label for a form element (checkbox, dropdown, etc.) It provides a little usability improvement for mouse users, because if the user clicks on the text within the label element, it toggles the control.

<del> and <ins>

These maybe aren't the most useful tags on the list, but you can use these to make edits apparent in your page. Browsers will strikethrough deleted text and underline inserted text.

My favorite color is <del>blue</del> <ins>red</ins>!
becomes:
My favorite color is ~~blue~~ red!

and

Use these to define _subscript and ^superscript text.

<address>

Wrap your mailing or physical address in this tag.

Wrapping up, here are a bunch more, I'm not sure what exactly all of them are useful for, but you should know about them anyway.

 Renders as emphasized text
 Renders as strong emphasized text
<dfn> Defines a definition term
<code> Defines computer code text
<samp> Defines sample computer code
<kbd> Defines keyboard text
<var> Defines a variable part of a text
<cite> Defines a citation
<q> Defines a short quotation
<blockquote> Defines a long quotation
<caption> Defines a table caption
<dir> Used to list directory titles
<pre> Defines preformatted text
<big> Renders as bigger text
 Renders as smaller text

Read more about all these for yourself at W3C's reference here: http://www.w3schools.com/TAGS/default.asp

Welcome To My Blog!

Mon, 16 Nov 2009 20:24:00 -0700

Hello world! I have decided to join the blog universe. I have never really considered myself a writer, but lately I have found myself with things I want to say to the world, and sometimes to myself, because I can't always remember experiences I have had, and sometimes they are useful to share. My website was in need of a refresh so I thought I would take the opportunity to add a blog to it.

Speaking of my website, I decided to take this opportunity to really dig into learning to use a CMS. I spent a lot of time researching different CMSes (there are a bazillion out there), I even started writing my own for a little while because I wasn't happy with any of the ones I was finding. I have had bad experiences with Movable Type and Joomla in the past, and wanted something simpler. I finally settled on SilverStripe, and I have to say, I am very pleased with my decision. Setting this thing up was a breeze, and once I had finalized my design in Photoshop, implementing the HTML and CSS was probably the quickest CSS job I have ever done. They make it super easy with their template system and do a great job separating the back-end PHP logic from the presentational code. Not to mention it is FREE! They offer a bunch more functionality than what I needed for this project, but I hope to get a chance to try out some of the other modules they offer, like e-commerce.

Anyway, I digress.
Going forward this blog will be about anything I am interested in, from web technologies, to music, to current events, or whatever I feel like. I hope you find it entertaining and informative!