One of these things are regarding how to format a URL.

This post isn’t really server-technically focused, as it is more a discussion of an idea. I’ll none the less assume that the reader has some familiarity with mime-types, basic webserver-settings (like handlers and URL-rewrite-techniques).

Why

As far as I’m concerned, any URL should give a hint of what you will find there, and by stripping the file-extension and just sitting left with something that’ll look like a directory, or using the scripting-language’s extension, I believe that we works against this. File-extensions gives an important hint regarding what the content is. What do you expect when you see “.jpg”, “.gif” or “.png”? Yes, images. Then what about “.html”, “.txt” and “.odf”? It’s most likely some kind of text, perhaps formatted. So what does “.php”, “.py” and “.aspx” tell us? Not much – it mostly a directive to the webserver, telling it to use some kind of parser to compile/process the contents before outputting it. And it might output html, xml or pdf as well as anything else.

A couple of years ago it had a “coolism” about it, saying that “I know how to develop fancy websites”, but nowadays people mostly expect some kind of interactivity anyway.

How

All relevant webservers today have to possibility to map any kind of extensions to any kind of (supported) language-parsers. I.e. with Apache you can use the AddType-directive like this:

addhandler php5-script html xml json

- to parse all .html-, .xml and .json-files in the given directory as PHP 5.

Now, let’s say you have an API which allows you (or perhaps other users), to query a service for information – and allows it to be delivered in xml, json and html. This is usually solved by adding some parameter like “of” (output-format) or something like that in the request to tell which format you’d like. I prefer to keep everything as logical and reducing the need to look up in manuals as far as reasonably possible, so instead of sending GET-requests like this:

http://example.com/gateway.php?id=15&key=11341&of=xml

http://example.com/gateway.php?id=15&key=11341&of=json

http://example.com/gateway.php?id=15&key=11341&of=html

I’d rather prefer:

http://example.com/gateway.xml?id=15&key=11341

http://example.com/gateway.json?id=15&key=11341

http://example.com/gateway.html?id=15&key=11341

This applies just as much for those sexy search-friendly URLs – just append .html to that pretty URL. Google says that it atleast won’t affect negatively on your ranking – so why not?

Possible problems

There are some obvious problem to this approach:

1: What if you want different parsers (let’s say php and python) for different files but which will serve the same kind of output? How do we tell the server which to use when?

- Possible solutions to this is to either separate them in different folders (the cleanest approach), or expand the extension to ie. .php.html and .py.html. Perhaps in combination with some mod_rewrite-kind of tricks.

2: What about the overhead for static files, which still is sent through an interpreter although nothing is changed?

- If you are running a service which is sensitive to these kind of margins, you should just use dedicated servers or CDN’s to deliver the static content no matter what.

3: How far shall we take it? Should we use extensions like .html5 and .xhtml etc?

-  I do believe that these differences are mostly relevant to the software parsing them, so in these cases it may suffice with keeping with i.e. .html, and use the MIME-type to send further details.

Summary

Although all my examples might not pinpoint all the benefits I do believe that there is an idea in keeping the file-extension, both to assist external users as well as might reduce some clutter.

What are the pros and cons of an approach like this? I’ve barely touched a few in this post, but I hope I was able to mention some of the most essential ones.

No related posts.

2009-06-06: Update

Now also as a jQuery-plugin. Blog-post.

This article is about my solution to an issue/request mentioned in my “Usability-tips for your application (Part I)” regarding highlighting corresponding table-rows when keys are pressed.

Take a look at the demo-page and play a little around.

Download the script.

Usage

<style type="text/css">
table tr.highlight td { background-color: yellow; }
</style>
<script type="text/javascript" src="table-row-highlighter_0.2.js"></script>
<script type="text/javascript"><!--
// Should be substituted with your own play-nice-by-adding-events-method
window.onload = function() {
	MIO.highlighter.init(
		document.getElementById("mytable"), // Reference to table-node
		0 // Which column to check against, defaults to 0.
	);
}
// --></script>

More details can be found on the demo-page as referenced above.

What do you think?

There are a couple of improvements just around the corner, but thought I’d just share the idea and an example. Feedback are welcome, and if you improve it, please send me the changes so I can update the code.

Related posts:

• table-row-highlighter.js – now as jQuery-plugin
• Usability-tips for your application (Part I)

What is Google Wave?

Google Wave is simply a way of communicating, with it’s own protocol, which aims to replace IM and e-mail and other means of some-to-some communication. They are trying to remove the limitations of the regular communication-apps to ease the flow (waves) of information. This means that every conversation is a tree of messages, which in turn can contain text-messages, video, documents, images etc, and with control of it’s own history as well as access-control – mainly by inviting users to the conversation, but it’s also possible to delegate access to any sub-trees.

The protocol is open, making it possible for anyone to build their own systems – a good decision, i think, by Google as it will have to reach widely to get the share and usage it will have to get to be a success.

Will it succeed?

It depends on what they think of as success. In some way or another – yes. It’s undoubtedly some good ideas, although little or nothing by itself is revolutionary. Similarly solutions exists already, but just as proprietary software as far as I know, so the idea of making it freely available, easily embeddable and with a good API is one I really like. Not to forget that it all is supposed to run inside a web-browser .

It is not likely that it will be of regular use anytime soon, as it relays heavily on HTML5-features as well as a proposed addition of their own – although it is these kind of “killer-apps” that possible could speed up the adaptment of the specification in the coming UA’s and the transition to these new UA’s for the end-users.

But it is yet to tell if it will replace the regular emails and IMs as they are deeply rooted in ways of communication the regular users really can associate with – sending letters, and talking – but I personally would love to see it happen!

What do you think? Is it anything new, does it have potential, or is it just old ideas in a new suite?

Related resources

• Project page
• Google Wave API
• Google IO Presentation
• Google Wave Protocol
• Google Wave: A Complete Guide

No related posts.

Keep in mind that, as I’m kind of an web-guy, I’ll mostly keep things related to the web, but much of what I’m going to write about is easy transferable to the desktop-applications. And I will also encourage you to mention issues you’ve encountered as a comment and help me finish my list.

In this post I’ll go through:

• Make tables sortable
• Make sure “Skip-intro”-links are visible at once, even before the flash is loaded.
• When working with tables, make sure a key-press highlights the first, closest matching row.

Making tables sortable

In short – what is the use of organizing tabular data in tables, when you don’t/won’t enjoy the full power of it? When coming to using tables on the web, it should really be up to the UA’s to implement such features, but until then you’ll have to do it yourself. There are mainly two solutions to this case (on the web, that is):

Backend processing

Your table-headers are links, with parameters to be sent to the web-server, where your script than sorts the listenings (assuming you have your data in a database-table or an array/hash-table), and then output the correct result. The query-string sent to the server will probably look something like this: “field=name&dir=desc”. The script will then sort the results while taking the parameters into account, and then return a nice dataset ready to be rendered in html. The downside of this approach is the extra requests to the server and the loading time, which in turn will make the user have to wait. We all know that that’s not good you bad boy!

Frontend processing

This is easily done, if you have used correct markup for your table (thead and th’s for defining the header-area, and tbody td etc to define the content-part. Check out this for more info). There are a great amount of javascript-scripts dealing with this issue, although they have their shortcomings. The main functionality of these are to attach javascript-events to the text in the table-headers, and make them sort the table on the corresponding column – pretty straight-forward and as expected.

The problem, though, is best imagined through an example: Let us say you have a search-form, which search through an database of articles. The result is in return displayed in a table, with columns for title and creation-date. The searchresults are also grouped in pages of 20 rows each, so to view the next 20 results you’ll have to click on the neat little “page 2″-link. Let us now stay on page one, and click on the “creation-date”-header to sort the results after date of creation. The problem here is that your javascript will (usually) only sort the current page, because – of course – it doesn’t know about the remaining pages. This issue is avoided using backend-processing. It is obviously also possible to work around this, but as a default behaviour – this is usually the result.

“Skip-intro”-links

While this is an issue I come across quite often, this is also the the situation with one of the easiest solutions. The situation: There is this super-fancy site, with an even more super-fancy intro (usually in Flash), to really show off how cool this site really is. And – as this super-fancy-site-intro-flash is quite heavy with regards to loading images, animations and sound-effects – they also have to have a status bar to indicate the progress of loading the intro. All in all fair enough, and the solution for those of use who doesn’t feel like watching this intro and really just want to get on with the real content, is to give us an “Skip intro”-link which in turn will send us (hopefully) directly to the main-site.

So the followup-question is “Where do I place this link?“, which basically has two answers (and only one of them are actually good): Inside the flash-animation (usually with s a getURL-call), or as an HTML-link located somewhere around the intro (above, underneath, left, right, or even diretly onto it (behold the the magic of CSS) ). The good solution here is to locate it in the HTML as an anchor. This is for several reasons: It’s fetchable for search-engines (allthough some SE’s by now know how to read swf’s), and it’s in reach already before the flash is loaded. On the other side, the worst solution was by someone who had the link inside the flash, and only visible after the progress bar was finished. Great!

In short: place the “skip intro”-link in the HTML-code, and keep it visible as long as the intro is running.

Highlight corresponding cell/row on key press

This is another tip related to tabular data, and are often directly related to the sortable-part. When working with tabular data, and selecting/sorting a certain column, and pressing a key, ie. the letter “B”, please jump directly to the closest matching row.

In short: If the user presses a key, make sure to highlight the corresponding row, depending on which column is highlighted/sorted on. If the user presses “B” and the table is sorted on surname, jump to the first row with a surname which starts on “B”. If there are no rows with matching surname, then highlight the closest matching one. I.e. the first starting with “C” etc.

Perhaps not exceptionally relevant for websites yet, but I do think that as more and more content-heavy applications are being developed for the web, it is something to look into. I’m working on a JavaScript-solution to this and will post about it a little later. Keep following

Related links

• Sorttable.js – Making HTML-tables sortable via JavaScript
• tablesorter – a jQuery plugin
• table-row-highlighter.js – My prototype of abovementioned functionality

More to come

I’ve got plenty more to come in upcoming posts,  and would also very much like your input on especially the discussed issues as well as proporsitions for coming cases.

• Does entry-highlightning on tables after key-press have anything to do with the web?
• How can this be implemented in a good fashion?
• What other magic is reasonably to accomplish with neatly marked up tables?

Related posts:

• The whys, hows and whens of pagination
• table-row-highlighter.js

In the most basic form, pagination is best illustrated by books: there’s a lot of content, and just expanding the sheet would too cumbersome. And then we discovered that by dividing the content into pages, and stacking them we’d get a lot of content in a handy way, and also making it pretty easy to navigate. Especially by prepending or appending a table-of-contents (ToC).

Web-pagination came, I believe, in the days of modems as a solution to keep the amount of data to download smaller, and then letting it up to the user to decide which parts of the paginated content (s)he’d check – although that’s a pretty basic assumption – anyhow, that’s not of the scope of this post.

The problem

What I see all too often is something like this:

Example of common pagination

The problem with this approach, even though it’s the most common one, is that the links to the different pages gives no indication of what you’ll find there. Yes, if you’ve performed a search, then you’ll know that you’ll find even more results, and as it probably is sorted by relevance you know that the entries will be less and less relevant (probably) the further you go. But what then if the decrease of relevance between each entry isn’t linear? Then entries in page 10 won’t no longer be half as relevant as those in page 5, etc.

Another example of common pagination - guess from where!

In books, pagination is practical mainly in cooperation with the ToC, and also for keeping track of relevant pages – like which page something specific is written, or the current position of your progress. On the web we usually just throw in pages – and skipping the ToC – leaving it up to the user to manually search.

This is again no problem for those who are reading the entries from start to end – but rather for those who are looking for something specific.

Alternatives – and when and how to use pagination

Dynamic filters

Screenshot from Amazon.com's filters - click for full image

Filters are a great way to allowing the user to skip those entries he assumes is unrelevant to the current search. Webshops, catalogs and similar sites are now becoming pretty good at using this approach – just take a look at Amazon.com’s approach (image). Here I’ve searched for blues-DVD’s, and is presented with relevant filters depending on the current result. I can ie choose to just see entries from 1960 – 1969, and skip out all those who aren’t english as well. This reduces it down to sub-13 from 914 – great! Now I won’t need to browse among 76 pages anymore.

To integrate a good implementation of this you’ll have to find out what attributes of the entries are reasonably to filter by (remember to take into account the demgraphics of the users going to use this), and make sure your solution present this in a good way.

It will usually be reasonable to allow multiple filters (I want english entries from the 1960′s), but in some situations singe-filter-support will suffice.

Other sites using this technique: finn.no (no), ebay.com, telefonkatalogen.no (no)

Table of contents

This is probably mostly relevant for web-books, but elements of this can also be integrated into other solutions and situations. It will usually be used instead of dynamic filters where the content is linearly continuated in a given order – instead of some arbitrary sorting.

Web-books, online documentation etc is natural places where this is applicable.

Informative links

Screenshot from my framework which takes care of descriptive links depending field and sort-ordering - with norwegian i18n. The arrow (not included in screenshot) is pointing at "3" and the UA is accordingly displaying the information.

Screenshot from my framework which takes care of descriptive links depending field and sort-ordering – with Norwegian i18n.There will probably always be some situations where you have to use pagination, and often will dynamic-filtering be a little overkill. The solution here can be to add information to the title-attribute of the link which says something about what you’ll find there. For example, if I have a result-set sorted by dates ascending, then a link to page might have the following pattern for it’s title-attribute: “Articles from <fromdate> to <todate>”. This way you’ll give the user an indication of what to find at that page, without having to check first.

Related reading

• Wikipedia – Pagination
• Wikipedia – Table of contents
• Design VS Art Blog – A guide to perfect pagination

Feedback

This is how I feel about the issue of organising larger amounts of data, and making it easy for users to find whatever is relevant. I’m sure there is situations I havent’ covered here, and would like your comments on how this can be improved to give our users a best possible user-experience – and with that giving our clients a more valuable website.

• Is the title-attribute of anchors the best / right way to display information for informative links?
• Are there other ways then filters, ToC’a and informative links that can solve the problems?
• What other places can ToC’s be a good alternative?

Your feedback is very much appreciated.

Related posts:

• Usability-tips for your application (Part I)