Upgrade to Pro — share decks privately, control downloads, hide ads and more …

The Cult of Friendly URLs

Andy Hume
October 07, 2011

The Cult of Friendly URLs

URL design is really important. Important enough that we mustn't let a cult of 'friendly URL' despots screw it up for everybody.

During this discussion I'll sound off about the fundamentals of URL design. Why it should be included upfront as part of the high-level design of the site IA and UX design, and how getting it right helps web-based products successfully fit into the wider ecosystem of the web. How can you optimise URLs for different requirements, such as readability (by humans and machines), shareability, hackability, navigability, etc...?

Andy Hume

October 07, 2011
Tweet

More Decks by Andy Hume

Other Decks in Technology

Transcript

  1. @andyhume
    UX Camp Brighton •
    1st October 2011
    FRIENDLY URLS
    THE CULT
    OF

    View full-size slide

  2. WHAT IS FRIENDLY?
    readable/clean
    reflect structure and hierarchy of data
    hackable
    shareable

    View full-size slide

  3. They help orient users in your
    architecture.
    [avoid] exposing the mechanism of how
    you run your server.


    Jesse James Garrett
    Tim Berners-Lee

    View full-size slide

  4. WHAT IS FRIENDLY?
    /cgibin/post.pl?id=13213
    /post?id=13213
    /posts/?year=2008&month=feb&day=23
    /posts/2008/feb/23/
    /post?id=13213
    /post/my-blog-post
    /posts/2008/feb/23/
    /posts/2008/jan/23/

    View full-size slide

  5. Clean URLs, RESTful URLs or user-
    friendly URLs are purely structural
    URLs that do not contain a query string

    Wikipedia

    View full-size slide

  6. Clean URLs, RESTful URLs or user-
    friendly URLs are purely structural
    URLs that do not contain a query string

    Wikipedia

    View full-size slide

  7. STILL FRIENDLY?
    /place/lat/50.81754/lon/-0.03124/category/banks/poi/cashpoint
    YOUR WEBSITE IS YOUR API

    View full-size slide

  8. REST... ANYONE?
    Um... Friendly URLs
    Er... Not SOAP
    Hm... Flickr API

    View full-size slide

  9. ROY FIELDING
    Why is the web successful?

    View full-size slide

  10. UNIFORM INTERFACE
    GET POST DELETE
    RESOURCE ORIENTED
    /photos/12345
    DOING THINGS TO OBJECTS

    View full-size slide

  11. AN HTTP REQUEST
    GET /photos/12345
    Host: www.flickr.com
    GET /my-bucket/pdf/12345.pdf
    Host: aws.amazon.com

    View full-size slide

  12. QUERY STRINGS
    ...contain data to be passed to web applications.

    Wikipedia
    the knobs of URLs

    Kyle Neath, Github

    View full-size slide

  13. RESOURCE OR SEARCH?
    /UK/Sussex/Brighton/North+Laine
    THIS IS A SEARCH BASED ON A STRING
    /maps/?q=North+Laine, Brighton, Sussex, UK
    THIS IS A REQUEST FOR A DISTINCT RESOURCE

    View full-size slide

  14. WARNING SIGNS
    /typefaces/slabserif/clarendonbracketed/tags/rubbish
    INTERCHANGEBLE DIRECTORIES
    /nuts/salted/toasted/kosher
    /nuts/salted/kosher/toasted
    RETURNS EMPTY LIST NOT 404

    View full-size slide

  15. AMAZON
    http://www.amazon.co.uk/Sharp-LC40LE811E-40-inch-Freeview-
    Technology/dp/B003IC4F58/ref=sr_1_1?
    ie=UTF8&qid=1317461997&sr=8-1

    View full-size slide

  16. THE INDEPENDENT
    http://www.independent.co.uk/life-style/food-and-drink/kate-
    middleton-jelly-bean-expected-to-fetch-500-2269573.html
    http://www.independent.co.uk/life-style/food-and-drink/utter-PR-
    fiction-but-people-love-this-shit-so-fuck-it-lets-just-print-
    it-2269573.html

    View full-size slide

  17. TWITTER
    http://twitter.com/#!/andyhume

    View full-size slide

  18. FACETED SEARCH
    /cars?brand=ford&model=escort&year=1980
    FULL HIERARCHY
    /cars/ford/escort/1980
    FULL QUERY STRING
    /cars/ford/escort?year=1980
    RANDOM SEPARATOR
    /cars/ford,escort,1980
    HIERARCHY/QUERYSTRING HYBRID

    View full-size slide

  19. APPLICATION STATE
    /maps/Sussex/Brighton/North+Laine
    THIS IS APPLICATION STATE
    /maps?
    f=q&source=s_q&hl=en&geocode=&q=clearleft&aq=&sll=50.819522,
    -0.13642&sspn=0.197161,0.313454&g=brighton&ie=UTF8&z=12&iwl
    THIS IS A RESOURCE

    View full-size slide

  20. WHAT’S THE POINT?
    ...of making application state data friendly/clean?
    ...of exposing application state to users?
    ...of address bars?
    BIG POINT GOES HERE

    View full-size slide

  21. WATCH OUT
    ...for people trying to ‘friendlyerise’ application state
    ...for people trying to ‘friendlyerise’ search queries
    BIG POINT GOES HERE

    View full-size slide