For our Orders, Jobs and Documents pages we switched from using tables to using lists (ul/li) with left floating div’s. This is nice in terms of modern CSS driven HTML and is easier to adopt to the iPhone. But it does bring a few issues with it. For example that the div’s tend to drop below the one on their left if the content is too large and they have no size attribute.

I’ve built a page where I tried out different ways to prevent this with example code.

Float Drop Examples

What we used at Supertext is to have the 2nd column with a fixed position. But this is only possible if you have only 2 columns and if the width of the first column is fixed too.

<div>
    <div>Test</div>
    <div style="position: absolute; left: 40px;">
        <b>Long Text and very long Text. Long Text and very long Text. Long Text and very long Text.</b><br />
    </div>
</div>

Let me know if you have a better solution!

According to webdesignpractices, about 45% all all major websites use Breadcrumbs in some way. Either to help navigation or to indicate some type of progress.

At Supertext we didn’t do anything like this so far. During the ordering process, we just had a title to tell the user at which step he was and some info about the order on the right column.

So we tried a simple approach by just adding some text breadcrumbs into the title bar this like this:

But this example is bad for multiple reasons:

1. No indication where the user is at the moment. Address should be highlighted or in a different color.
2. No information about the following steps
3. Look and feel is poor

We’ve now decided on something like this:

Just look at the new part below the title. There some other changes on this mockup too. Just ignore them. They will go online later this year. What do you think? It covers pretty much all issues that I mentioned above. No?

We modeled it after the example from swiss airlines:

Here are some other examples we looked at:

Doodle with their KISS approach. Not really breadcrumbs, but gives a progress indication too. Just not much more.

Did you find them? On the upper right corner. Yeah, I had to search for them too. But it’s all there. Where I am, next step, last step. But it does have some potential for improvments

Another nice example is Amazon with the cart indicating where I am. Maybe we could use a pencil for Supertext?

Not very surprising, Apple also delivers with a simple yet elegant solution.

Another article that covers some of these topics is 12 Tips For Designing an Excellent Checkout Process on Smashing Magazin.

On a lot of pages you see a Print link, which then opens the print window. This can be achieved very easy:

window.print()

Or built into a Link:

<a href="javascript:window.print()">
Click to print this page
</a>

If you put the print() command into the onload event of the body tag, the print command will fire automatically. This is handy if you want to format your page differently for print than for the browser.

I’ve built a little live example here.

For all non-english speaking developers that are constantly fighting with umlauts and other funny language specific characters, here is a tool that might help:

HTML Entity Character Lookup

You type in one Character and it spills out all versions that are somewhat similar to it with the appropriate HTML entity.

E.g. for a, you get â ã ã and more. Including the entity code like for example &auml.

Pretty helpful.