Websites that use well-defined URL structures are easier for me to navigate. When I use a site enough, I can remember specific paths, infer the structure of a site so I can find the page to which I want to go, and more.
Some affordances of clean URL design, such as ease of navigation, can be implemented directly on the page – for example, breadcrumbs can help users skip to different parts in a heirarchy, and links to archive pages can help people find pages by date. With that said, well-designed URLs can accompany any on-page features to collectively create a better user experience.
In a sense, URLs are user experience. I use them to navigate through websites. As a site creator, clearly defining URLs helps me know what is where. This is important to me. I want the experience of searching for a page – either for reference, or as I develop my site – to be as intuitive as possible.
I wanted to take some time to document how I have designed URLs on this website.
There are five types of URLs:
- Blog posts (
/YYYY/MM/DD/slug/) - Category archive pages (
/category-name/) - Year, month, and day archive pages (
/YYYY/,/YYYY/MM/, and/YYYY/MM/DD/) - Pages (
/wander/,/create/, etc.) - Assets (i.e.
/assets/coffeeshop.jpeg)
I like to keep my URLs flat, but I use heirarchies where appropriate.
For example, blog posts all fall within the /YYYY/MM/DD/ folder. Because each part in the path resolves to a page (i.e. /2024/01/01 is a page), power users can navigate through archive pages by removing parts of the URL.
Some blog posts have named permalinks. These are flat, like /blogroll/. With that said, this has been confusing for me in the past when I wanted to make edits to such pages. Thus, I rarely allocate named permalinks. With a few blog posts as exceptions, most of my pages live in the templates directory of my static site. This means that I know to go to that folder to edit static pages, and to add new ones.
My assets are split out into a few sub-folders:
/assets/fontsfor fonts./assets/stylesfor stylesheets./assets/jsfor JavaScript assets.
The root /assets/ folder stores all images and multimedia. In hindsight, I should have put these in a folder. Every day is a learning day! I may move the image assets to their own folder at some point.
If you have a website, how do you design your URLs? What factors went into your decision making?
