Concept your design on paper is the single most important step to begin with. Draw it out. Scratch what you don’t like. Redraw it. Think ahead about the models and controls while you do this too.

This page is a good example. Even something simple like creating a tool to reconcile records across to tables needs a plan of action.

Step 1

Step 2

Step 3

Profit!

On the left-hand side of Google’s search results page. There are two hidden search option sections. When you click “More” it slides down and the options fade in at the same time. Just below it, when you click on “Show more tools” it slides down first, then its related options fade in.

Likewise, when you toggle them back to their original states, “More” will slide up while the options fade out, but “Show search tools” doesn’t slide up until after its related options fade out.

What’s up with that?

#nobodycares

Zeus’ flagship feature was its checklist. The checklist was an itemized form of everything that was shipping that week. Customers could fill out the form and notify the store which items they wanted to pick up on Wednesday (when comics book typically arrive). And as far as I could tell, Zeus was the first store to offer this feature. I’ve seen some crop up here that there, but they were largely static, cumbersome to use, and were constructed out of tables.

Three things: customers noted that it wasn’t the greatest for mobile devices, and a digital comic publisher had a mobile app that customers were using in lieu of our checklist, and most importantly customers couldn’t tell which comic book they wanted by name alone. Often they would have to go to the store and pick up other titles they missed.

We’ll do it live!

While I’m already building a long list of bugs (bandwidth being a whopper), I certainly like the results so far. It’s already in my opinion a better solution than a the iPhone app offered (which wasn’t even usable on iOS4 for several weeks) and future updated to the web app will hopefully offer customers an optimal process in shopping with Zeus Comics.

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

• Stop Forking With CSS3
• Taking Advantage of HTML5 and CSS3 with Modernizr

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.

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.

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!

Since its last redesign, when Zeus won the Will Eisner Spirit of Comics Retailing Award in 2006, design trends evolved, and how we organize and display our code has matured. Zeus went through many attempts at integrating its point-of-sale system with an ecommerce solution. I’m embarrassed to admit, its first version, not having any experience in ecommerce (how hard could it be?) used FileMaker Pro and Lasso. Looking back, I’m stunned by some on my coding and design decisions. Some of which locked the site into arcane structures from which are not easily broken. And some still exist.

The old method for adding something to the site was simple—make a new folder and add some new tables and call it good. Want a forum? Install Aterr. Want a checklist? Add a new CodeIgniter folder. After all, what’s one more, right? After a while, we ended up with many little systems and no way to support them all.

The site’s design needed consistency from its previous version as well. Too dramatic a departure and it loses its branding. We weren’t looking for a fresh start, just a face lift (with enough skin for more adjusting later).

Our approach to ecommerce was simple: always be closing. One of the lessons learned from out previous cart solution was the more steps a customer has to take to complete an order, the more likely we’d lose the sale. When you go into a retail store to buy a comic, you don’t expect to be a member of that shop. When was the last time you walked up to a counter to pay for your goods to have the clerk ask for you username and password. I don’t have a user name. I just want to buy this book.

This was how our previous cart worked. And I’ll say this first, after trying out X-cart, Zen Cart, Squirrel Cart and later Magento Commerce, Shop Script was the only solution with the simplest way for us to control data from our point-of-sale source. After adding all the items to the cart, the user would have to create an account, add records to the address book for both shipping and billing, choose those records and add them to the order, and then they could finalize their purchase.

In the current system, we’ve taken out the need for membership. We don’t need it. We don’t really want it. We certainly don’t want to support it, if a customer forgets their password. Instead, customers get a tracking key upon return from Paypal. We don’t want your credit card info either.

In the next few weeks, I hope to have a downloadable version of the ecommerce solution, so stay tuned.

Is zeuscomics.com all done now? Hardly. Out of the gate, I’m already tracking new errors plus some old ones that will be address by the next release. Fortunately, one of the design/coding goals was to be able to change and grow the site as needed. Stay tuned for that too.

http://www.zeuscomics.com

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.

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, 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?

But first, back to drawing board

So the first part was to break up the animated gif frames and spread them out across a very long canvas. Since Photoshop no longer opens animated gif files (unless you own ImageReady somewhere), Fireworks can open the file. Use Fireworks to export the frames to individual files and THEN Photoshop can import all the files as a stack.

File <Scripts> Load Files into Stack…

For our ajax loader, expand all the layers next to each other and then save it out to its own gif. The file size won’t be that difference in fact.

Now let’s get back to jQuery

In our html, just set the div with a width and height to match your gif to prevent clipping and let the script do the rest.

$(document).ready(function(){
	var bgimage = 'url(images/ajax-loader-long.gif)';
	var frames = 24;
	var mpf = parseInt(1000/frames)  // how many miliseconds in each frame
	var currentFrame = 0;
	var offset = 0;

	$('.animate').css('background-image', bgimage);

	function animate() {
		offset = currentFrame * 64;
		$('.animate').css('background-position', '-' + offset + 'px 0px');
		currentFrame = (currentFrame == frames) ? 1 : currentFrame + 1;
	}

	setInterval(animate, mpf);
});

Now we have a script that will snap the position of the background over each “frame” at the correct frame rate. Actually, the frame rate is not divisible by 1000, but it’s close and it’s not like you could tell.

The only problem with this script is that it’s constantly running. If you look at the page in Firebug, your going to see the code whipping around with new values all the time. Annoying! Also, chances are your page isn’t going to need some animation playing constantly. Ajax loaders are intermittently called when a simple action is called as a… asynchronous progress indicator! Who knew.

So we’re going to put in a cancel command to this script: clearTimeout.

$(document).ready(function(){
	var bgimage = 'url(images/ajax-loader-long.gif)';
	var frames = 24;
	var mpf = parseInt(1000/frames)  // how many miliseconds in each frame
	var currentFrame = 0;
	var offset = 0;
	var runAnimate = 0;

	$('.animate').css('background-image', bgimage);

	function animate() {
		offset = currentFrame * 64;
		$('.animate').css('background-position', '-' + offset + 'px 0px');
		currentFrame = (currentFrame == frames) ? 1 : currentFrame + 1;
	}

	runAnimate = setInterval(animate, mpf);

	$('.animate').toggle(
		function () {
			clearTimeout(runAnimate);
		},
		function () {
			runAnimate = setInterval(animate, mpf);
		}
	);
});

Add in a toggle so show how to turn on and off the animation and were done.

It even works on ie6!

I was able to replicate this function using Scriptaculous on our beloved comic shop website. But after a few years of constantly adding duct tape to the site, it was time to move everything to a single framework. And that mean making this triptych banner script run on jQuery. Hopefully without a lot of html recoding.

Make your list

For the html, set your divs with a ‘slide’ class and a position class. I guess you can do this in an unordered list, but whatever.

<div class="slide pos1"><a href="link1"><img src=""></a></div>
<div class="slide pos2"><a href="link2"><img src=""></a></div>
<div class="slide pos3"><a href="link3"><img src=""></a></div>

<div class="slide pos1"><a href="link4"><img src=""></a></div>
<div class="slide pos2"><a href="link5"><img src=""></a></div>
<div class="slide pos3"><a href="link6"><img src=""></a></div>

Set your positions

The easiest solution is to make the position classes absolute.

.pos1 {
    position: absolute;
    left: 0px;
    top: 0px;
}

.pos2 {
    position: absolute;
    left: 210px;
    top: 0px;
}

.pos3 {
    position: absolute;
    left: 420px;
    top: 0px;
}

Good news, everyone! This script doesn’t need a plug-in.

I always start my script codes with an apology, so why stop now. I’m sorry.

The first part makes sure that the banners appear in the order that their written in html. Because of the absolute positioning, however, they stack on top of each other and the last will be on top.

Also, I didn’t like how i in jQuery’s each() function started at 1 and not 0, but that’s just me.

$(document).ready(function(){
    var slideCount = $('.slide').size() - 1;
    $('.slide').each(function(i) {
        $(this).css('z-index', slideCount - i);
    });

    var currentSlide = slideCount;
    var zIndex = 0;

    function imgRotate() {
        $('.slide').each(function(i) {
            if($(this).css('z-index') == currentSlide)
            {
                $(this).fadeOut('slow', function() {
                    $(this).css('z-index', (0));
                    $(this).show();
                });
            }
            else
            {
                zIndex = $(this).css('z-index');
                zIndex = parseInt(zIndex) + parseInt(1);
                $(this).css('z-index', (zIndex));
            }
        });
    }

    setInterval(imgRotate, 4000);

});

This script should be able to make with any number of banners and any number of sets. This example just used a set of three, but your can make it a set of two, or four, or ten! Just make the list divisible by the set and fix your positions of course.