Friendly URL DESIGN

(Responsive) design begins with the URL
The Reading links at the end of my slides:
https://bit.ly/uuu_0001
https://bit.ly/uuu_0002
https://bit.ly/uuu_0003
https://bit.ly/uuu_0004

Transcript

1. THE LOVE FRIENDLY URL DESIGN FOR @tripleyou_io Brussels Wordpress Meetup - 20th May 2014 DOES MATTER Kristof Bernaert
2. URL DESIGN
3. URL DESIGN http://www.meetup.com/wp-bru/events/151970292/
4. URL DESIGN http://www.meetup.com/wp-bru/events/151970292/ 1 4 3 2
5. URL DESIGN 1 4 3 2 1. protocol 2. subdomain 3. domain name + extension = owner 4. path = context and/or variants http://www.meetup.com/wp-bru/events/151970292/
6. URL DESIGN WHY FRIENDLY DESIGN? Care about the people who access your info on the web
7. URL DESIGN WHY FRIENDLY DESIGN? Care about the people who access your info on the web The key to everything on the web is the URL
8. URL DESIGN WHY FRIENDLY DESIGN? Care about the people who access your info on the web The key to everything on the web is the URL Your website is your API
9. URL DESIGN WHY FRIENDLY DESIGN? Care about the people who access your info on the web The key to everything on the web is the URL Your website is your API It helps orient users in your architecture
10. URL DESIGN WHY FRIENDLY DESIGN? Care about the people who access your info on the web The key to everything on the web is the URL Your website is your API It helps orient users in your architecture Avoid exposing the mechanism of how you run your server
11. SIMPLICITY: easy to read, spell, type > keep everything lowercase > use the dash (-) for word separation eg: www.awwwards.com/websites/big-background-images/ URL DESIGN WHAT IS FRIENDLY DESIGN?
12. URL DESIGN WHAT IS FRIENDLY DESIGN? SIMPLICITY: easy to read, spell, type MEANINGFULNESS: reflects site structure + content > users look at URLs and try to understand them eg: http://warpspire.com/talks/chooseyouradventure /chooseyouradventure.pdf
13. SIMPLICITY: easy to read, spell, type MEANINGFULNESS: reflects site structure + content HACKABILITY: follows data hierarchy eg: https://twitter.com/wpbru/followers URL DESIGN WHAT IS FRIENDLY DESIGN?
14. SIMPLICITY: easy to read, spell, type MEANINGFULNESS: reflects site structure + content HACKABILITY: follows data hierarchy UNAMBIGUOUSNESS: each page must be unique > think about sharing, bookmark. eg: no frames, no flash URL DESIGN WHAT IS FRIENDLY DESIGN?
15. URL DESIGN WHAT IS FRIENDLY DESIGN? SIMPLICITY: easy to read, spell, type MEANINGFULNESS: reflects site structure + content HACKABILITY: follows data hierarchy UNAMBIGUOUSNESS: each page must be unique PERSISTENCE: URL’s should live forever > as long as the content is available
16. SIMPLICITY: easy to read, spell, type MEANINGFULNESS: reflects site structure + content HACKABILITY: follows data hierarchy UNAMBIGUOUSNESS: each page must be unique PERSISTENCE: URL’s should live forever CANONICALIZATION: only 1 URL per resource > don’t confuse the user > bad for SEO eg: http://www.yourwebsite.com = http://yourwebsite.com URL DESIGN WHAT IS FRIENDLY DESIGN?
17. URL DESIGN http://eur.burton.com
18. http://eur.burton.com /on URL DESIGN
19. URL DESIGN http://eur.burton.com /on /demandware.store
20. URL DESIGN http://eur.burton.com /on /demandware.store /Sites-Burton_EU-Site
21. URL DESIGN http://eur.burton.com /on /demandware.store /Sites-Burton_EU-Site /default
22. URL DESIGN http://eur.burton.com /on /demandware.store /Sites-Burton_EU-Site /default /Home-Show
23. URL DESIGN http://eur.burton.com /on /demandware.store /Sites-Burton_EU-Site /Team-Rider ?rid=shaun-white
24. URL DESIGN https://github.com/defunkt/resque/pull/175#issuecomment-619615 1 4 3 2 source: http://warpspire.com/posts/url-design/
25. URL DESIGN https://github.com/defunkt/resque/pull/175#issuecomment-619615 1 4 3 2 1. ASCII-only user generated URL parts 2. “pull” is short for “pull request”, single word, easily associated to the origin word 3. Pull request number is scoped to defunkt/resque 4. Anchor points to a scrolling position, not hidden content source: http://warpspire.com/posts/url-design/
26. URL DESIGN
27. URL DESIGN http://clearleft.com /does /front-end-development
28. URL DESIGN
29. URL DESIGN READINGS … - http://bit.ly/uuu_0001
 Smashing Magazine article
 - http://bit.ly/uuu_0002
 CSS-TRICKS article
 - http://bit.ly/uuu_0003
 FORRST community article
 - http://bit.ly/uuu_0004
 Warpspire article
30. URL DESIGN Thank you for your attention and comments ! @ssstofff