Kyle Aster wrote in 2010 why careful URL design is important :
URLs are universal, they work in Firefox, Chrome, Safari, Internet Explorer, cURL, wget, as well as iPhone, Android, and even Sticky Notes. They are the only universal syntax of the web, don’t take it for granted.
I like this reminder of the ubiquity of URLs. They don’t just work in your browser’s address bar, they can be used in a variety of ways:
- As a target for programmatic data retrieval such as scripts and crawlers.
- For reference, print out the footnotes and appendices in the physical book.
- As a way to trigger actions via physical media, such as scannable QR codes or IoT device buttons.
- and other!
When I look back at examples of great URL design that I’ve come across in the past [1] – ones that made me stop and think “Wow, that’s cool!” – the following ones come to mind.
Stack Overflow
Stack Overflow is the first URL I’ve come across that strikes an excellent balance between meeting the needs of computers and humans.
URLs follow the following pattern:
/questions/:id/:slug
:idIt is a unique identifier and does not reveal anything about the problem. :slugis a human-readable paraphrase of the question, allowing you to understand the question without visiting the website.
The beauty is that :slugis an optional parameter in the URL. for example:
stackoverflow.com/questions/16245767
No information is given about the question asked, but it is a valid URL that allows the server to easily find the page.
But Stack Overflow also supports parts in URLs :slug, which allows people to quickly understand the content of the page.
stackoverflow.com/questions/16245767/creating-a-blob-from-a-base64-string-in-javascript/
As mentioned, :slugis optional. The server doesn’t need it to find and serve relevant content. In fact, it can be easily changed over time without breaking the URL (so elegant!).
Of course, it can also be deceptive. For example, here is the same URL as above, but pointing to completely different content (the link is still good, but the content it points to does not match the slug):
stackoverflow.com/questions/16245767/how-to-bake-a-cake
Hehe, everything has trade-offs.
By the way, Bytebase’s URL also uses a similar method👇
Slack
I remember a marketing campaign from Slack where they used the campaign slogan “Slack is…” in the page copy and URL .
- slack.com/is
- slack.com/is/team-communication
- slack.com/is/everything-in-one-place
- slack.com/is/wherever-you-are
I’m fascinated by these storytelling-style marketing campaigns, even reflected in the URL.
Since then, I have always preferred URLs that attempt to form natural language sentences: slack.com/is/team-communication, rather than URLs that connect a series of hierarchical keywords: slack.com/product/team-communication.
Speaking of doing interesting sentence structures in URLs. . .
Jessica Hische
Jessica Hisch .ishas her own website under a domain name (apparently .isrepresenting Iceland).
She uses this interesting third person form of “I am” throughout the site. For example, click the About button in the main navigation and it will take you to:
jessicahische.is/anoversharer
So funny! Although mydomain.com/aboutit is also clear, I like to use sentence structure to describe the About Me page to make it more interesting.
All the nouns in her main navigation follow this pattern, and the same applies to her individual works. Like this introductory article about a holiday cooking packaging job she did, with the URL:
jessicahische.is/sofulloffancypopcorn
interesting!
URL as product
I’ve always liked the ability to match URLs to their domain semantics. For example, GitHub’s URLs map very well to the semantics of git ( https://www.quora.com/Which-sites-have-the-best-URL-design/an… ), such as diffing in git Compare:
/:owner/:project/compare/ref1...ref2
For example:
github.com/django/django/compare/4.2.7…main
For tech products, being able to browse a website without seeing the interface is a cool superpower.
NPM is somewhat similar. Want to check out react-router on NPM? You don’t have to click on the NPM home page or use the search box. Once you’re familiar with their website structure, you can look for a package like this:
/package/:package-name
For example:
npmjs.com/package/react-router
Looking for a specific version of a package?
/package/:package-name/v/:semver
For example:
npmjs.com/package/react-router/v/5.3.4
These shortcuts are very useful when you are using a specific product. Taking NPM as an example, when looking for package.jsondetails of a specific package in your fixed version, you can simply identify the required version and enter the details into the URL address bar to navigate to the package’s details page on NPM.
NPM CDNs like unpkg ( https://unpkg.com/ ) also follow these semantics. If you want to get a file from a published package, you can do this:
unpkg.com/:package@:version/:file
In this case, the URL can be the product itself, which makes its design even more important [2].
URL you like?
These are some great examples of URLs that I like to use and see over the years. I’m sure there are others and would love to know which one is your favorite? Welcome to leave a message and share!
[1] I didn’t find many good resources on “good URL design.” This article by Alex is quite good. I dream of a Dribbble that showcases great URLs. If you have an idea, the url-gallery.com domain is still available. . .
[2] Michael Jackson, the founder of unpkg, mentioned : “I’m surprised, considering that everyone writes the URL by hand when using unpkg, that it is so popular. Even without a search box.” This is indeed surprising! unpkg is extremely popular: reaching 50 billion requests per month between September and October 2020 .