Beautification Revisited

Beauty comes in many forms. For normal people, maybe it’s Ashley Judd in a bedsheet on a Sunday morning. For web dorks, however, it can be something as mundane as extensionless URLs or intelligent error pages. Sad as that may be, most of us don’t have the Ashley Judd option available anyway, so we shouldn’t feel too bad about deifying code.

Last week’s post on dirified URLs was supposed to bring about some sort of consensus opinion on smart URL-naming conventions. Thanks to everyone who posted their very helpful and enlightening comments, but in the end, we only discovered more options and came to no mutual conclusions. It appears that people just look for different things in their URLs and what you do with yours is up to you.

Having said that, I have completely redone my URL structure and 404 strategy at Mike Industries based on the comments received and some additional research.

URLs

I’ve reached the conclusion that URLs should neither be automatically generated from post titles nor should they use an automatically incrementing number system. The inability to change a post title after publishing makes the former method too limiting. Combine that with the fact that auto-generated dirified URLs can get needlessly long or truncated awkwardly and you have a recipe for headaches.

On the other hand, the latter method, which uses an incrementing numbering system, is not the least bit useful to humans who will inevitably need to interact with the raw URLs. URLs are not like ISBN numbers or database keyfields after all. Why? Because ISBN numbers and database keyfields are almost always dealt with by computers and not humans. The raw URL (besides as a simple domain name) was ideally supposed to be hidden from users, but the reality of our world is that it is not. It’s in the location bar, it’s on web pages, it’s in your history, it’s on TV, it’s everywhere. To not include at least some human-readable content in your URLs is to ignore how prevalent the raw URL has become in our visual routines.

The other hot issue with URLs was whether or not (and how) to hide file extensions. There did seem to be a consensus that hiding extensions was necessary to properly future-proof URLs, but people disagreed on the best way to do it. Some people create directories based on the title of the post and throw an index.php file in the directory like so:


Structure: "/of-mice-and-men/index.php"
Via the web: "/of-mice-and-men/" or "/of-mice-and-men"

Others remove the file extensions completely from the files themselves like so:


Structure: "/of-mice-and-men"
Via the web: "/of-mice-and-men"

And still others keep the file extensions on the files themselves and use an htaccess file or other server filter to serve the correct file like so:


Structure: "/of-mice-and-men.php"
Via the web: "/of-mice-and-men"

The first example seems like the most popular, but it is also the most wrong. First, creating new directories for every entry is extraneous, and it introduces a convention whereby one should then encase all other site files in their own directories as well. Hassle. Pain. Not good.

Secondly, and much more importantly, it creates two URLs and not one. “/of-mice-and-men/” and “/of-mice-and-men” are not technically the same location. One points to where a file should be and one points to a directory. Deploy a system like this and you’ll have people pointing to both locations, depending on if they use the trailing slash when linking to you.

The second example seems the most extreme, and I like it, but it’s really URL-permanence we’re seeking here and not necessarily local filename permanence. If I switch publishing systems, like PhotoMatt keeps telling me I should, I will of course be re-exporting all of my pages from a database, so the files themselves don’t matter so much. Additionally, removing file extensions from the files themselves introduces other minor problems like FTP mode negotiation, local file editing, and other non-crucial, but annoying side-effects.

The third example is what I settled on. It provides the future-proof URLs I was looking for, without introducing other issues into my life. I’m not going to give a full tutorial on making this conversion here, since not all of the info is mine, but here’s an overview of what needs to be done:

Take care of .htaccess

Add this to the .htaccess file on the root of your server:


RewriteEngine on
RewriteBase /
RewriteCond %{REQUEST_FILENAME}.php -f
RewriteCond %{REQUEST_URI} !/$
RewriteRule (.*) $1\.php [L]
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.+)/$ /$1 [R=301,L]

This instructs all requests for the file “http://yoursite/whatever” to resolve to “http://yoursite/whatever.php”. Keep in mind this is not a redirect and the user will never see the .php extension. The page will simply be served and the URL will remain clean. Obviously you can use this method with non-PHP pages as well… just change the file extension in the code above.

Turn Movable Type on to your extension-hatin’ ways

First, head on over to Már Örlygsson’s site and read through his excellent tutorial. Már is a believer in pure numeric URLs (based on date/time) so I didn’t follow his steps verbatim, but I was able to achieve what I wanted by merely substituting these values in during Step 1 of his process:


Individual: <MTEntryDate format="%Y">/<MTEntryDate format="%m">/<MTEntryKeywords>.php
Monthly: <MTEntryDate format="%Y">/<MTEntryDate format="%m">/index.php
Category: <MTCategoryLabel dirifyplus="pld">/index.php

… and then changing the RegEx line in Step 2 to this:


<MTAddRegex name="stripFile">s/index\.php|\.php//g</MTAddRegex>

So what’s the <MTEntryKeywords> tag doing in there? Ah, that is the key to solving the auto-dirification issue! Movable Type has a field called “Keywords” which is hidden by default in the “Create an Entry” screen. Click the customize button on your “Create an Entry” screen, check the “Keywords” box and boom… you’ve got another field to play with. Using the above steps, whatever you enter into the Keywords field will become the filename of your post. For instance, “a-walk-in-the-park” or “motorhead”.

We now have complete control over our filenames, human-readable unique URLs, and no reliance on entry title permanence. Life is good.

404s

With clean URLs taken care of, I wanted to follow through on some code that would thoroughly smarten-up my 404s. The idea, as spelled out in my previous post, would be to create a system whereby:

http://www.mikeindustries.com/vegemite sandwich

… would automatically query all blog entries on my site, and if only one entry matched the words “vegemite sandwich”, it would instantly redirect the user to that entry. If more than one entry matched, it would take the user to a page listing all matching pages.

Using Erik Barzeski’s code as a starting point, I put together a smart 404 page which does exactly that. For some reason, Erik’s code wasn’t working for me, so I turned to my favorite PHP function “file_get_contents()” and all was well.

Here’s what’s necessary to get the job done:

Take care of .htaccess

Add this to the .htaccess file on the root of your server:

ErrorDocument 404 /404.php

Create your PHP-based 404 page (404.php)

Here is the full-text of the 404.php page I created:

The only things which require customizing are the following:

  1. Replace my search URL with your own search URL.
  2. The parameter smart404=1 tells your search output form that the search came from a 404, so if you’d like, you can add code into your search output page to write out different text depending on this condition. I write out “Were you looking for something?” instead of “Search Results”, for instance.
  3. The line with class="searchresult" in it is used to identify how many pages contain the search term(s). In order for it to work, you’ll have to modify the anchor links in your search output page so they have class="searchresult" in them.

*For further information on turning your Movable Type search results page into a PHP page in the first place, please see my previous article on the subject.

That’s it! Say hello to your new friend: the smarter 404. Not quite Ashley Judd in a bedsheet, but quite useful nonetheless. Here it is in action:

Multiple hits:
http://www.mikeindustries.com/espn

One hit with “I’m Feeling Lucky” redirect:

As always, I’m open to posting improvements on the above methods. Please feel free to comment.

UPDATE: I’ve updated the smart 404 routine to place a location bar at the top of the page when a user is redirected intelligently. It appears on the Search Results page when there are multiple matches and the individual entry page when “I’m Feeling Lucky” kicks in. Here are the two quick steps to implement it:

1. Paste this into the top of your 404.php file:

This captures the URL the user typed in and stores it in a cookie called “origurl”.

2. Paste this into the top of your Individual Entry Template and your Search Results template (before any of the HTML):

This checks for the ‘origurl’ cookie, stores the cookie value as a PHP variable, and deletes the cookie.

3. Paste this right after the open <body> tag on both your Individual Entry Template and your Search Results template:

This checks for the origurl variable and then writes out the div with the location bar if necessary.

Like this entry? You can follow me on Twitter here, subscribe via email here, or get the RSS feed if that's how you roll.

53 Responses:

  1. Good evening!

    I desperately need help with using my .htaccess file to detect mobile devices and redirect them to a wap version of a site.

    I’ve set up a subdomain that pulls from a subdirectory containing xhtml mp files.

    I’m looking for code that will detect and redirect mobile devices from the domain to the subdomain (i.e. http://domainname.com/index.html to http://wap.domainname.com

    Any help is greatly appreciated!
    -Dan

  2. Friday is for freading

    Here’s some stuff I’m reading today: Benoit Mandelbrot, who discovered the famous Mandelbrot Set of fractal geometry, as interviewed in New Scientist magazine Q: Your work has covered many areas. Would you describe yourself as a pure or an …

  3. Nokrev says:

    Zapping Ugliness

    Alright, I just published the redesign. I feel this one doesn’t have as many bugs, and the layout is much less size-dependant. There are several things I considered when doing this redesign that I hadn’t thought about before. I went…

Shared
The Ocean in 185 Lines of Javascript:

Mesmerizing. Try tweaking some of the variables in the “sea” section of the code.

“"Design had been a vertical stripe in the chain of events in a product’s delivery; at Apple, it became a long horizontal stripe, where design is part of every conversation.””
Why I Just Asked My Students To Put Their Laptops Away:

A great essay about how toxic everyday distractions can be.

Humanity's deep future:

A group of researchers at the Future of Humanity Institute talk about where our race may be going and how artificial intelligence could save or kill us all.

Steve Jobs speaks about the future at the International Design Conference in 1983:

31 years later, it’s safe to say this is one of the most prescient speeches about technology ever delivered. Jobs covers wireless networking, tablets, Google StreetView, Siri, and the App Store (among other things) many years before their proliferation. A fantastic listen.

How to travel around the world for a year:

Great advice for when you finally find the time.

LiveSurface:

A fantastic app for prototyping your design work onto real world objects like billboards, book covers, and coffee cups. This seems like just as great of a tool for people learning design as it does for experts.

50 problems in 50 days:

One man’s attempt to solve 50 problems in 50 days using only great design. Some good startup ideas in here…

How to Do Philosophy:

If you’ve ever suspected that most classical philosophy is a colossal waste of time, Paul Graham tells you why you’re probably right.

TIME: Why Medical Bills Are Killing Us:

Stephen Brill follows the money to uncover the pinnacle of corruption that is the U.S. Health Care system. A must-read article if there ever was one.

DIY Dot Org:

A beautifully designed site full of fun and challenging DIY projects. I could spend months on here.

The Steve Jobs Video Archive:

A collection of over 250 Steve Jobs videos in biographical order

Self-portraits from an artist under the influence of 48 different psychoactive drug combos.

Water Wigs are pretty amazing.

David Pogue proposes to his girlfriend by creating a fake movie trailer about them and then getting a theater to play it before a real movie. Beautiful and totally awesome.