Let Them Die

This month’s edition of A List Apart covers how to manage multiple browser vendors and their varying support for html5 and css3 1. We’re all aware of the different uses of border-radius in both FireFox and Webkit. And being able to not fork the code in making rounded corners by simply writing standard css3 is tempting. In fact, it’s ideal. Having it managed with javascript is actually very clever, and… cool!

But I would propose something different entirely. Instead of using a js library to help browsers properly render a soundly constructed html5/css5 webpage, short of making sure it doesn’t look like “total ass” on IE, just let the page render as it lay.

By now, web designers are largely aware of the rendering quirks of various browsers. Little things like not adding margins to floating divs for IE’s sake, or not applying -webkit gradients to divs that contain text fields, are a part of mental mine field map that goes into our work.

Using a javascript library to get around this isn’t the answer. Remember that script that lets IE6 properly render PNG transparency? It might have been relevant to a couple of years ago when there were still a vast majority of users that used IE6, but most web designers have abandoned even trying to support the browser, much less trying to make every pixel line up properly or make every image look decent. At some point (if our bosses let us), we move on.

Sadly, we moved onto other scripts that do what html5 is supposed to do already.

Here’s my advice. Write your site to work just fine without any javascript (or css for that matter) needed. If you can still use the site, you’re good to go. Using ajax history to browse back and forth with the browser chrome? Make sure it works without javascript and move on. If you’ve got some killer CSS mojo for your site, just write it. Write that widget that does that thing with the stuff, but to say that we have to cover every contingency is unreasonable.

When did we go from saying “to hell with bad browsers” to using libraries to keep these browsers on “the same page?”

Older browsers won’t go away (I still see Netscape occasionally show up on Google Analytics), but the support we give them can.

I like to look at these barbaric browsers like the Klingons in Star Trek XI. Their survival was in jeopardy and Kirk was having none of it. Eventually, he came around and now we’re stuck with the Klingons and their foreheads forever.

Don’t let this happen to bad browsers. Let them die.

1. Links

Posted in Design | Tagged , , , , , | Leave a comment

For hobronto

You’re welcome.

Bookmarklet

Someone on twitter asked how to find and replace certain words on a web page. This is a bookmarklet on that replaces the word ‘god’ with ‘sky cake.’

Test it out!

Posted in Code, Misc | Tagged | Leave a comment

Introducing thevariants.com

thevariants-thumb

The Variants is a new web series sitcom about the crew of a local comic shop. So far, four promos have been produced and released in time for SDCC 2009 and Episode one is scheduled for release. Each episode (or is it webisode) runs about ten minutes.

Putting this together was a lot of fun. With internet video content rising well beyond YouTube, I had many examples of what people expect from a media web site. Plus, I got to work in a little bit of html5 semantics.

Go watch The Variants promos and laugh, laugh and laugh.

Posted in Design | Tagged , , , , , | Leave a comment

Introducing scribbr.com

Thanks, Lisa!

Scribbr is a tiny web app for drawing and posting to twitter. With jQuery, the user can control the color, size, opacity of the cursor to draw on the canvas element 320 x 320 in size.

Last summer, I had the opportunity to work with Eisner Award winning cartoonist Scott Kurtz of PVP. During one conversation we had, he came up with a punch-line to what we were talking about. I don’t remember what the subject was, but the punch-line involved a mock editorial cartoon. He grabbed a 2″ x 2″ sticky note pad and drew the cartoon. We had a laugh.

This would never happen online. At least, not in any convenient, simple, method that I was aware of.

Right now, it’s very crude. The controls are, admittedly, non-intuitive. There is no ‘Undo’ other than clearing the canvas and starting over. It doesn’t support older browsers either.

I’m actually quite okay with that last part. This site was immensely fun to build. Getting it to work on IE6 would have taken away from that. Right now, I know that it works on FireFox 3.0, Safari 4.0b (or WebKit nightly build), and Google Chrome 2.0.

Posted in Code, Design | Tagged , , , , , | Leave a comment

Zeus Comics redesign

Zeus Comics

Zeus Comics new design went live Thursday

If for no other reason than finally consolidating the past five years of css style changes into some semblance of organization, this redesign was a long time coming.

Zeus Comics and Collectibles is an award-winning comic book retail store in Dallas, Texas. For almost nine years, Zeus has been serving the needs of the comic book reading community in the DFW area in the only manner one can expect from a locally gay-owned business – fabulously!
Continue reading

Posted in Design | Tagged , , , , | Leave a comment

YouTube’s H.264 turnaround time is the new dial up

Twitterific -> YouTube -> Fail

Twitterific -> YouTube -> Fail

Just how long does it take for a YouTube video to become available on the YouTube iPhone app?

Seriously, if YouTube accepts .wmv, .avi, .mkv, .mov, .mpeg, .mp4, .flv, .ogg, 3gp and outputs to multiple .flv, mp4, 3gp… OMG, why then is the link I just tapped not available?

I understand that once uploaded, videos take time to convert for display. Having uploaded some from my own iMovie library, waiting for YouTube to do its magic without a progress bar is torture. But once it’s done and properly playing on the website, the video still has to become available for HD (if available), mobile, etc.

As we become more connected on more networks on new devices, our content experience should become more homogeneous. Websites should get closer to looking the same on our desktop computers as they do our mobile devices. Instead, because of mobile phones and netbooks (more specifically, their wireless connectivity) web designers, who once enjoyed building for higher display resolutions and bigger bandwidth, find themselves thrown back into building sites that are “dial-up” friendly. It’s a whole new browser war sans Netscape Navigator.

Which brings me back to YouTube on the iPhone. Video codec H.264, briefly put, is designed for both high-def and small bandwidth playback. Since YouTube offers multiple versions of the same video, it has to take the original video upload and convert it several times. And since the only way to view YouTube on Apple TV or the iPhone is with h.264, YouTube needs to make additional conversions/transcodings.

In the end, content for the web isn’t just for the browser. It includes phones, game consoles, dvr (TiVo), and any future devices we don’t yet know we need. And all of them need the same content in their own specific formats.

All of this means that the next time I see something along the lines of “@amboy00: too funny! http://tinyurl.com/pqhugm,” I’ll probably have to wait until I get back to my desk to see the funny.

Posted in Design | Tagged , , , , | Leave a comment

Fun with WebKit css gradients

Queen Album Cover

Killer WebKit

As a follow up to yesterday’s woeful tale of using WebKit’s proprietary css properties, I wanted to follow up with a couple examples of how one can use these features without getting all “bevel-ly”

The only benefit of text-shadow is not downloading graphics for what can be expressed in css. The same goes for -webkit-border-image, -webkit-gradient, -moz-border-radius, anything that keeps a web designer from having to launch Photoshop is a boon to bandwidth.

Here are two examples of using some WebKit css gradients.*

Update: You must have the Chrome 2.0 or Safari 4.b for these to work.

Example 1. is brought to you by “Killer Queen”

This similar looking display to that of the iPhone album display uses a radial gradient (opposed to a linear) as the background for the track names. The overall effect is a dim light. The odd numbered tracks also use a gradient to take advantage of -webkit-gradient’s support of alpha values.

Example 2. is a css calendar.

This one combines linear gradients and javascript arrays. Because -webkit-gradient can use rbga formatting in place of the usual hexadecimal value, calculating the values from color to another was much easier.

The drawback to these browser specific properties are, well, browser specific. While adding a gradient value to your div id=wrapper might give it a groovy drop shadow effect on Safari, nothing is happening on either Firefox, and much less for IE.

The workaround at this point is to browser detect.

if(jQuery.browser.safari) {
$('#wrapper').addClass('problem-solved');
}
else {
	$('#wrapper').addClass('wah-wah-wah');
}

Or whatever.

Posted in Code | Tagged , , , | 4 Comments

-webkit-background-clip Problems

Specimen 7

Specimen 7

Someday, all the nifty Photoshop Blending options will be available as CSS properties. Mark my words! In the mean time, we’re kind of stuck with drop shadows, and now gradients (and text strokes) for WebKit browsers. Too bad you can’t use them together.

In order to take advantage of the background clipping, the color needs to be transparent. First off, that pretty much ruins any other browser from displaying text. So this is only useful to Safari users (not even the iPhone currently supports it). In Photoshop, you can get around having a transparent color and still having a drop shadow by setting that layers Fill Opacity to 0% while the layers opacity at 100%.

Also, using this technique has some odd behavior with padding. In my example, I couldn’t set padding to the parent div without the effect inheriting that padding. Restating the padding didn’t affect it either.

Here is the example: webkit-background-clip.html

Now, you can add the -webkit-text-stroke and that will work with text-shadow, but only on the stroke and not the text. I’ve yet to find an example that uses all three without looking like one of Superjail’s Doctor’s genetic experiments.

Perhaps it is for the best, getting these to work together might have been the next blink.

Posted in Code | Tagged , | 1 Comment

Twitshirt = Me all over your chest

twitter tee shirt caption
Some of the things best left unsaid, yet said anyway, have ways of coming back to haunt you. But at least you get a $1 commision from it.

Twitshirts by Amboy00 (that’s me!)

Posted in Misc | Tagged , , | Leave a comment

Tackling Safari’s slow gif “feature” with jQuery

Safari’s WebKit has a funny behavior of displaying animated gif files at a lower frame rate than Firefox. From what I can tell, WebKit (including Google Chrome) caps the animated gif frame rates at 10fps. While it may be faster than some IE6 browsers, it’s not exactly helpful for those files with higher frame rates.

For example, the popular ajax loader file that hails from Apple’s own asynchronous progress indicator, has 12 points and loops around once a second. Well, for one thing, 12fps is really choppy (so I’ve made the fading spokes a little more smoother at 24pfs), but it already plays slower on Apple’s nifty browser.

jQuery to the rescue

Did you know that jQuery can control css background positions? Are you thinking what I’m thinking?
Continue reading

Posted in Code, Design | Tagged , , , , , , , , | 1 Comment