This live workshop focuses on the importance of organizing website content through effective site and content structure to ensure a good user experience. Participants are encouraged to interact and ask questions while learning to create clear hierarchies and sitemaps to enhance accessibility and search engine results. The session emphasizes iterative testing and improvement for optimal website design and functionality.

1. Site & Content
Structure
Live Workshop

2. Before We
Begin
● This workshop is being recorded for the
membership archive.
● Live captions are available, but are not recorded
with this meeting. A transcript will be available.
● Pause me anytime to slow down or speed up!
● Have a question? Ask it in the chat!
● Participation is encouraged! We will have time at
the end for one or two folks to get assistance in
mapping out a page or sitemap

3. What is Site
Structure?
It’s how you organize your
website’s content: all the
things your audience
needs to access.
Pages, posts, files, etc.

4. Then what the
fuck is Content
Structure?
The meaningful organization and
breakdown of content into sections and
subsections to give the information a
clear hierarchy.
What is site structure?
Site & Content
Structure
Something that looks a bit like this:
sections and hierarchy of the
information on the page itself.
CTA

5. Why You
Should Care
● Clear Goals = Clean User Experience
● Accessibility
● Results: Search Engine & Sales
● Examine & Review

6. You’re My Only H.O.P.E.
● Hierarchy
● Order
● Purpose
● Ease

7. Hierarchy

8. Sitemaps:
How it feels
How it feels to create a sitemap.

9. Sitemaps:
How it looks
How search engines and site visitors
want your site mapped out.

10. You have to figure out
the visual structure &
menus of your website
on your own.
Before, and during, your
site creation.
Bad News
Good News
WordPress &
Squarespace do the
search engine sitemap
for you when your site
is created and as pages
& posts are published.

11. Two Methods
Tell your story & find the
natural breaks in your
copy to determine your
pages & content together.
Main points become
pages, become menu
items.
Storyteller
Old School
● Draw It Out
● List it Out
● Post It Notes
● Mind Map Software
Lorem Ipsum
Lorem Ipsum Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum

12. Menus are sitemaps but
sitemaps are not menus.

13. Order

14. Header
● On Every Page
● Your Name & Logo
● Main Menu
● No External Links (No Social)

15. Body Content
● User Goals & Business Goals Meet
● Break Up Content Into Clear Sections
● Use Headings, Lists, Paragraphs
● Clear Calls to Action

16. H1: Tarot
H2: Major Arcana
H3: The Fool
H3: The Magician
H2: Minor Arcana
H3: Wands
H4: Ace of Wands
H4: Two of Wands
H4: Three of Wands
H3: Cups
H3: Coins
H3: Swords

17. Sidebars
● Can Have One, Two, Three
● Not Always Visible on Mobile
● Salad Bar of Information
● Relevant to Page Content or Website Itself

18. Footer
● On Every Page
● Often Overlooked
● External Links Okay & Expected (Social)
● Relevant to Page Content or Website Itself

19. Purpose

20. Example from “Don’t
Make Me Think” by Steve
Krug
Comic from XKCD:
https://xkcd.com/773/

21. Business Goals Visitor Goals
CTA/
CTV

22. Moving On
Where do they want to go
next?
Coming From
Where can they come from?
Why are they coming from
there?
Goals Once Here
What can they do once here?
What answers do I have for
their questions?

23. Call
to
Action
What is the next step?
How does the conversation continue?
Priority
What is critical? What is “above the fold”?
Information
What is the supporting information?
What points need to be made?

24. Ease

25. Questions & Tests
1. The Blur Test
2. The “Trunk Test”
3. The Click Test
4. Spot the Call to Action

26. How We
Build It &
How It’s
Actually Used

27. So What the Fuck Do We Do
We test.
We iterate.
We have patience.
We do it all over again.

28. Let’s Do Some Together.