Search Flex Components Free

Custom Search

December 10, 2007

URL Matters

I view the URL/URI to be one of the most essential but often overlooked aspect of a website. I wanted to look at the good/bad uses of URLs within web pages and web applications. Let's take a look at a few:

Readable - I really like it when a URL is readable and easy to understand. When I read a URL I want to be able to guess at what the page will contain. .

CNET: Does a great job organizing content into directories.
http://reviews.cnet.com/
http://reviews.cnet.com/camcorders/
http://reviews.cnet.com/laptops/

News/Blogs: These sites have clean URLs with hints about the content
http://www.techcrunch.com/2007/11/28/google-earth-heading-towards-extinction/
http://machinist.salon.com/feature/2007/11/28/kindle_review/
http://blogs.moneycentral.msn.com/topstocks/archive/2007/11/26/how-a-little-laptop-is-changing-an-industry.aspx
http://www.businessweek.com/the_thread/techbeat/archives/2007/11/roll_over_beeth.html

I would also bet that SEO crawlers leverage keywords within the URL itself. If I were a robot, I would rank the words within the URLs above higher in my search listings than those below.

These URLs leave a bit to be desired.
http://www.news.com/2300-1041_3-6220161.html
http://www.abcnews.go.com/Technology/story?id=3922038&page=1
http://www.tgdaily.com/content/view/35022/118/
http://www.nytimes.com/2007/11/28/us/28hoax.html?em&ex=1196398800&en=b1408a7356b77eef&ei=5087%0A

State - I like it when the URL stays in sync with the state of the page/application. I think Picnik.com does a great job of this. The site is an RIA and the URL is in constant sync with the application. It leverages the anchor # symbol yet provides clean URL paths. You can bookmark any part of the site and return to the state of the application/site at any time. Although this looks easy, it is really hard to do well.

http://www.picnik.com/app#/home/welcome
http://www.picnik.com/app#/edit
http://www.picnik.com/app#/create/effects
http://www.picnik.com/app#/in/flickrsearch
http://www.picnik.com/app#/out/facebook

Programmatic - I really like it when the developer takes the time to make the URL programatic. It is very subtle but I often return when I can go directly to things via the URL.

http://www.flickr.com/photos/{FlickrID}
http://www.flickr.com/photos/diverted

http://del.icio.us/tag/{tag}
http://del.icio.us/tag/flex

http://del.icio.us/{del.icio.us ID}
http://del.icio.us/sfegette

http://{LANGUAGE}.wikipedia.org/wiki/{WikiName}
http://fr.wikipedia.org/wiki/Ted_Williams

I really dislike query string variables in a URL. In many ways it provides a poor interface to a website and adds a ton of gunk to what could be a clean programmatic URL.

Here are a few URLs that could be improved:

BEFORE - http://www.google.com/search?q=Adobe%20Flex
AFTER - http://www.google.com/search/Adobe%20Flex

BEFORE - http://www.amazon.com/s/ref=nb_ss_gw/104-0679262-3347908?url=search-alias%3Daps&field-keywords=wii&x=0&y=0
AFTER - http://www.amazon.com/search/wii

//Grip - I look up stocks all the time. Yahoo and Google make the URL easy to change directly.
BEFORE - http://finance.google.com/finance?q=adbe
AFTER - http://finance.google.com/adbe
AFTER - http://finance.google.com/nasdaq/adbe

BEFORE - http://finance.yahoo.com/q?s=ADBE
AFTER - http://finance.yahoo.com/adbe
AFTER - http://finance.yahoo.com/nasdaq/adbe

I am also a fan of organizing APIs using method+arguments syntax. It makes it easy to see what you are calling as a developer and to allow others to integrate against the API by discovery. Here is an example:

http://ifbin.onflex.org/api/3/search/resultByKeyword/Flex/Adobe/AMF

Essentially this would call a method like so: (the 3 is the API version#)
search.resultByKeyword( 'Flex' , 'Adobe' , 'AMF' );

Short - The shorter the URL the better in my book. I am always amazed at how long URLs can get. I view shorter URLs are just plain better. It almost makes sense for every site to have a tinyurl service within them so that each complex URL can be made simple. At Adobe the go URLs have been very popular as they allow a short programmatic URLs to various parts of the Adobe.com site.

http://adobe.com/go/flex/
http://adobe.com/go/flash/
http://adobe.com/go/amp
http://adobe.com/go/tryconnect
http://adobe.com/go/max

Technology Neutral - I prefer when developers hide the technology in use. Long term this provides the ability to switch between technologies on the server-side. The end user doesn't care what technology you use, so why let anyone know? In this case I think less is more. If the URL is free of technology, I think it elevates the service in my eyes. Hide the technology you use, it will make you look smart and provide you greater range of options long term. Also once you get into search engines, the URLs are there to stay and you will need to support the URLs presented to your servers.

Outside of Apache/mod_rewrite and Tomcat, there are very few options for simplifying the URL's a server presents. I have standardized on using Apache/mod_rewrite because it works well and is simple to implement. I would encourage you to take a look at mode_rewrite to simplify the URLs within your application. I need to make better use of this on my site and eliminate the php from my URLs site wide.

Related Flex Tutorials