URLs are how we talk to the web and how we talk about the web. A user's first interaction with your site isn't viewing a page or reading your content, it's seeing your URL. This talk covers how we know that, what it means, and how to create good URLs. View the full version of this slide deck at http://blog.rnf.me/ux-of-urls

1. THE UX OF URLSTHE UX OF URLS
/Ryan Freebern @rfreebern
Union Street Media

2. WHAT IS A URL?WHAT IS A URL?
RFC 1738RFC 1738
“This document describes the syntax and semantics for a
compact string representation for a resource available via
the Internet. These strings are called ‘Uniform Resource
Locators’ (URLs).”
—Tim Berners-Lee et al, 1994

3. HTTP SPOKEN HEREHTTP SPOKEN HERE
“We are building clans around languages we speak to the
Machine.”
—Vyacheslav Egorov, 2013

4. WHY DESIGN URLS?WHY DESIGN URLS?
Because people care.1.
Because machines care.2.
Because we can.3.

5. PEOPLE CAREPEOPLE CARE

6. PEOPLE CAREPEOPLE CARE
“[P]eople spent 25% of their time looking at the URL in
navigational tasks vs. 22% in informational tasks.”
—Edward Cutrell & Zhiwei Guan, 2007

7. PEOPLE CAREPEOPLE CARE
“[S]earchers are particularly interested in the URL when
they are assessing the credibility of a destination. If the URL
looks like garbage, people are less likely to click on that
search hit. On the other hand, if the URL looks like the page
will address the user's question, they are more likely to click.”
—Jakob Nielsen, 2007

8. PEOPLE CAREPEOPLE CARE

9. MACHINES CAREMACHINES CARE

10. BECAUSE WE CANBECAUSE WE CAN

11. WHAT MAKES A URL?WHAT MAKES A URL?
http
https
ftp
data
file
mailto
tel
ws/wss
about

12. WHAT MAKES A URL?WHAT MAKES A URL?
example.com
gTLD: .com, .net, .org, .edu, .aero., .asia, .biz, .cat, .coop, .gov, .info, .in
.jobs, .mil, .mobi, .museum, .name, .post, .pro, .tel, .travel, .xxx
ccTLD: .us, .uk, .au, .ca, .mx, .cc, .cx, .ws, .io, .ly, .es, .fr …and hundreds
more.
Infrastructure TLDs: .arpa
Reserved TLDs: .test, .example, .invalid, .localhost, and .local
http://ws, http://uz
Internationalized domain names: http://xn--zkc6cc5bi7f6e.xn--
hlcj6aya9esc7a (http://உதாரண�.பரி�ைச)

13. WHAT MAKES A URL?WHAT MAKES A URL?
http://example.com/path/of/any/length/resource?query=data&
another=parameter#fragment

14. WHAT MAKES A URL?WHAT MAKES A URL?
http://127.0.0.1/path/of/any/length/resource?query=data&
another=parameter#fragment

15. WHAT MAKES A URL?WHAT MAKES A URL?
http://[ff:ff:ff:ff:uu:uu:uu:uu]/path/of/any/length
/resource?query=data&another=parameter#fragment

16. WHAT MAKES A URL?WHAT MAKES A URL?
http://www.example.com/path/of/any/length/resource?query=data&
another=parameter#fragment

17. WHAT MAKES A URL?WHAT MAKES A URL?
http://www.example.com:80/path/of/any/length
/resource?query=data&another=parameter#fragment

18. WHAT MAKES A URL?WHAT MAKES A URL?
http://username:password@www.example.com:80/path/of
/any/length/resource?query=data&another=parameter#fragment

19. WHAT MAKES A URL?WHAT MAKES A URL?
http://username:password@www.example.com:80/path/of
/any/length;param=123/resource?query=data&
another=parameter#fragment

20. WHAT MAKES A URL?WHAT MAKES A URL?
http://username:password@www.example.com:80/path/of
/any/length;param=123/resource?query=data&
another=parameter#fragment

21. WHAT MAKES A URL?WHAT MAKES A URL?
http://example.com/path/resource?query=data#fragment

22. WHAT MAKES A URLWHAT MAKES A URL
GOODGOOD??
Known knowns
Planned for from the start
Known unknowns
Auto-generated from user interaction
Unknown unknowns
Added in the future, after you get hit by a truck

23. A GOOD DOMAINA GOOD DOMAIN
Short
Memorable
Speakable
Readable

24. GOOD DOMAINS AREGOOD DOMAINS ARE
SPEAKABLESPEAKABLE
real-estate.com “Real hyphen estate dot com”
realestateonline.com “Real estate online dot com”

25. GOOD DOMAINS AREGOOD DOMAINS ARE
READABLEREADABLE
IllJIll.com
lovelymorn.com

26. A BAD DOMAINA BAD DOMAIN
HTTP://RIM.JOBSHTTP://RIM.JOBS
HTTP://ODDSEXTRACTOR.COMHTTP://ODDSEXTRACTOR.COM

27. HTTP://ODDSEXTRACTOR.COMHTTP://ODDSEXTRACTOR.COM
←←

28. A BAD DOMAINA BAD DOMAIN
HTTP://RRRRTHATS5RS.COMHTTP://RRRRTHATS5RS.COM
HTTP://WWW.LLANFAIRPWLLGWYNGYLLGOGERYCHWYRNDROBHTTP://WWW.LLANFAIRPWLLGWYNGYLLGOGERYCHWYRNDROB
WLLLLANTYSILIOGOGOGOCH.CO.UKWLLLLANTYSILIOGOGOGOCH.CO.UK

29. A GOOD PATHA GOOD PATH
Reflects information structure
Consistent
Predictable
Most general → most specific

30. CMSJUNKCMSJUNK
“[L]ong strings of characters that exist only to satisfy some
technical constraint, detracting from the effectiveness of our
URLs as communication tools.”
—Jesse James Garrett, 2002

31. A GOOD QUERYA GOOD QUERY
Query strings are intimidating
Keep 'em simple
http://www.google.com/#gs_rn=21&gs_ri=psy-ab&cp=10&
gs_id=29&xhr=t&q=search+term&es_nrs=true&
pf=p&output=search&sclient=psy-ab&oq=search+ter&gs_l=&
pbx=1&bav=on.2,or.r_qf.&bvm=bv.49478099,d.dmg&
fp=f0de797458b9bb2a&biw=1149&bih=660
http://www.google.com/search?q=search+term

32. UTF-H8UTF-H8
A BRIEF TANGENTA BRIEF TANGENT
http://example.com/path/resource?query=data#fragment
http://example.com/?emotion=(╯°□°)╯︵ ┻━┻
http://example.com/?emotion=%28%E2%95%AF%C2%B0%E2%96
%A1%C2%B0%29%E2%95%AF%EF%B8%B5%20%E2%94%BB
%E2%94%81%E2%94%BB

33. “%2B OR NOT %2B?”“%2B OR NOT %2B?”
Allowed unescaped in path segment: :@-._~!$&'()*+,;=
Allowed unescaped in query parameter: /?:@-._~!$'()* ,;
Allowed unescaped in query value: /?:@-._~!$'()* ,;=
Allowed unescaped in fragment: /?:@-._~!$&'()*+,;=
Valid URL:
URL spec:
http://example.com/:@-._~!$&'()*+,=?/?:@-._~!$'()*+,;=
/?:@-._~!$'()*+,;==#/?:@-._~!$&'()*+,;=
http://url.spec.whatwg.org

34. A GOOD FRAGMENTA GOOD FRAGMENT
Fragment = location in a document
That is all
Use history.pushState()

35. THE REST OF THE PUZZLETHE REST OF THE PUZZLE
Scheme
Domain
Path
Query
Fragment
Everything

36. A GOOD URL ISA GOOD URL IS
CREDIBLECREDIBLE

37. CREDIBILITY IS BASED ONCREDIBILITY IS BASED ON
REPUTATIONREPUTATION
http://en.wikipedia.org/wiki/Chinchilla
http://joebanana.tripod.com/mysite/chinchilla_page.htm

38. CREDIBILITY IS BASED ONCREDIBILITY IS BASED ON
ASSOCIATIONASSOCIATION
http://www.cmu.edu/staff/daviska/papers/2013/alg349a
http://www.securisite.com/articles/2013/08/new-algorithm

39. PROCESSING FLUENCYPROCESSING FLUENCY
The ease with which your brain can parse information.

40. GOOD URLS AREGOOD URLS ARE
HACKABLEHACKABLE
“A hackable URL is one that makes sense to a human reader,
and where the human reader can guess what to change to
get to another page.”
—Matt Wilcox, 2008

41. GOOD URLS AREGOOD URLS ARE
HACKABLEHACKABLE
Not hackable: http://www.amazon.com/Tovolo-KING-Cube-Trays-
Blue/dp/B00395FHRO/ref=sr_1_2
Hackable: https://github.com/mbourque/BostonConference

42. WHO CARES?WHO CARES?
Good interfaces are habitual.
HABITUALLY HACKABLEHABITUALLY HACKABLE
http://github.com/<username>
Twitter username: @rfreebern
http://github.com/rfreebern
NOT HACKABLE, NO HABITNOT HACKABLE, NO HABIT
http://example.com/6219867/rfreebern

43. SLUGSSLUGS

44. SLUGSSLUGS
Canonical URL: http://example.com/documents/12345/title-of-the-
document
Requested URL: http://example.com/documents/12345
Response:
HTTP/1.1 301 Moved Permanently
Location: /documents/12345/title-of-the-document

45. SLUG RULESSLUG RULES
Stick to alphanumerics and hyphen1.
Get rid of common words (conjunctions, articles, etc.)2.
Include something unique (an ID or a date)3.
(or store the slug with the document)4.

46. GOOD URLS AREGOOD URLS ARE
SHAREABLESHAREABLE

47. ROBUSTNESSROBUSTNESS
→ 301 Moved
Permanently
→ 301
Moved Permanently
→ 404
Not Found
http://example.com/2013/08/1298654-robust-urls-are-best
http://example.com/2013/08/1298654
http://example.com/2013/08/1298654-robust-urls-a
http://example.com/2013/08/1298654-ha-ha-you-suck

48. OLD-FASHIONEDOLD-FASHIONED
SHARINGSHARING

49. AVOID AMBIGUITYAVOID AMBIGUITY
O 0
G 6
1 I l
2 Z
http://0range.io
http://Orange.io

50. NEW-FANGLED SHARINGNEW-FANGLED SHARING

53. SHORTNESSSHORTNESS
http://example.com/article/august-2013/good-url-design
BIT.LY!BIT.LY!

54. NO.NO.

55. “URL shorteners may be one of the worst ideas, one of the
most backward ideas, to come out of the last five years. ...
[T]hese general-purpose URL shorteners, with their shady or
fragile setups and utter dependence upon them, well. If we
lose TinyURL or bit.ly, millions of weblogs, essays, and
non-archived tweets lose their meaning. Instantly. To
someone in the future, it’ll be like everyone from a certain
era of history […] started speaking in a one-time pad of
cryptographic pass phrases.”
—Jason Scott, 2011

56. I WANT SHORT URLS ANYI WANT SHORT URLS ANY
WAYWAY
Host your own: (and other packages).
<link rel=”shorturl” href=”...”>
Bonus points:
YOURLS
Douglas Crockford's Base32 algorithm
Ryan Freebern's Easier encoder

57. CANONICALCANONICAL
One URL for one document
301 any alternates
Rewrite trailing slashes

58. URLS ARE FOREVERURLS ARE FOREVER
“When someone follows a link and it breaks, they generally
lose confidence in the owner of the server. They also are
frustrated—emotionally and practically from accomplishing
their goal.”
—Tim Berners-Lee, 1998

59. KNOW YOUR REDIRECTSKNOW YOUR REDIRECTS
301 Moved Permanently
302 Found
303 See Other
307 Temporary Redirect
308 Permanent Redirect (Experimental)

60. DROP THE .PHPDROP THE .PHP
Bad: http://example.com/about.php
Good: http://example.com/about

61. PAY UPPAY UP
“Pretty much the only good reason for a document to
disappear from the Web is that the company which owned
the domain name went out of business or can no longer
afford to keep the server running.”
—Tim Berners-Lee, 1998

62. MAKING A PLANMAKING A PLAN
Good
Memorable
Readable
Speakable
Credible
Hackable
Shareable
Robust
… times a hundred thousand.

63. URI TEMPLATESURI TEMPLATES
RFC 6570RFC 6570
http://example.com/dictionary/c/cat
http://example.com/dictionary/d/dog
→ http://example.com/dictionary/{term:1}/{term}
uri_template PHP extension

64. LESS FORMALLESS FORMAL
“User profiles will be located at http://example.com
/<username>. We will reserve a number of usernames for
future usage, such as "about", "contact", "admin", "stats"…”

65. WHY SHOULD I CAREWHY SHOULD I CARE
ABOUT URLS?ABOUT URLS?
“We are building clans around languages we speak to the
Machine.”
—Vyacheslav Egorov, 2013

66. THANK YOU!THANK YOU!
Ryan Freebern / @rfreebern
Union Street Media

67. REFERENCESREFERENCES
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
http://www.ietf.org/rfc/rfc1738.txt
https://twitter.com/mraleph/status
/225587192427327488
http://www.ietf.org/rfc/rfc1738.txt
http://www.ietf.org/rfc/rfc1738.txt
http://en.wikipedia.org/wiki/URI_scheme
http://en.wikipedia.org/wiki/Top-level_domain
http://en.wikipedia.org
/wiki/Internationalized_domain_names
http://www.ietf.org/rfc/rfc2732.txt
http://www.w3.org/DesignIssues/MatrixURIs.html
http://www.andersramsay.com/2005/07
/30/selecting-user-friendly-domain-names/
http://www.adaptivepath.com/ideas/e000058
http://blog.lunatech.com/2009/02/03/what-every-
web-developer-must-know-about-url-encoding
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
http://url.spec.whatwg.org
http://en.wikipedia.org/wiki/Credibility
http://en.wikipedia.org/wiki/Processing_fluency
http://www.boston.com/bostonglobe/ideas/articles
/2010/01/31/easy__true/
http://2002-2012.mattwilcox.net/archive/entry
/id/990/
http://www.amazon.com/The-Humane-Interface-
Directions-Interactive/dp/0201379376
http://en.wikipedia.org/wiki/Slug_%28publishing%29
http://picturesofpeoplescanningqrcodes.tumblr.com/
http://ascii.textfiles.com/archives/3029
http://joshua.schachter.org/2009/04/on-url-
shorteners.html
http://www.w3.org/Provider/Style/URI.html
http://en.wikipedia.org
/wiki/List_of_HTTP_status_codes#3xx_Redirection
http://tools.ietf.org/html/rfc6570

68. IMAGE CREDITSIMAGE CREDITS
“ ”byTenSpeedPress,usedwithoutpermission.1.
“ ”from ,usedwithoutpermission.2.
“ ”basedonstillfrom“ ,fromWarnerBros.,via
,usedwithoutpermission.
3.
“ ”from“ ”fromPixar,usedwithoutpermission.4.
“ ”byMahatma4711onFlickr,CC-By-2.05.
“ ”by ,usedwithoutpermission.6.
“ ”byYiChenonFlickr,CC-By-2.07.
“ ”byShirtoid.com,usedwithoutpermission.8.
“ ”byGlennonFlickr,CC-By-SA-2.09.
“ ”byEricFlemingonFlickr,CC-By-2.010.
“ ”from ,usedwithoutpermission.11.
“ ”from12.
“ ”bymslavickonFlickr,CC-By-2.013.
WhyPaintCats2006Calendar
LoveURL TheIndependent
BoromirMeme TheLordoftheRings:TheFellowshipoftheRing
QuickMeme.com
Wall-EandEve Wall-E
ClimbersatKhumbuIcefall
FreudDrivingaTractor VonCrunchDesign
TheSkepticalChihuahua,Taipei
Mom'sFriendlyRobotCompany
Slug-50051
Sharingbirthdaycake.
LongURL benjaminraymondkelley.com
http://blog.rnf.me/ux-of-urlsQRCode KaywaQRCode
No!

69. SOFTWARE MENTIONSSOFTWARE MENTIONS
1.
2.
3.
4.
http://www.crockford.com/wrmg/base32.html
https://github.com/rfreebern/easier
http://yourls.org
http://pecl.php.net/package/uri_template

70. THANKSTHANKS
Anne van Kesteren
Vitorio Miliano
James Baicoianu