How to create a WordPress site that will last and how to avoid mistakes that will come to haunt you later. This was my presentation in the WPHelsinki on 2.11.2016.

1. HOW TO
ENSURE
A LONG
LIFE SPAN
FOR A
WEBSITE?
WPHelsinki 02.11.2016
Teemu Suoranta

2. HI, I’M TEEMU
• Web developer at Aucor
• Organizer at WPTurku
• Twitter: @teemusuoranta
WPFI Slack: @teemusuoranta

3. WHY CARE ABOUT
LIFE SPAN?
• It’s your job to create quality websites
• Bad design and implementation locks content
to current design and technology
• Frequent redesigns cost much
• Reputation of your company, our industry and
WordPress

4. GOALS
1. Design will change, content will remain
2. Technology will change, content will remain
3. Needs will change, content must adapt

5. NOT OUR GOALS
1. No changes needed: “perfect website”
2. Never rebuilding or redesigning
3. Solve everything with technology

6. 1. FOUNDATION

7. THE PURPOSE
• Why does this website exist? / What is the goal
of this website?
• Who is the target audience?
• How do we know that website is doing it’s job?
• Let everybody in the project know these
answers!

8. PURPOSE GUIDES
• Content: what is important, what needs to be told
• Design: what is important, how to encourage
users to act…
• Development: where to focus, what to implement
now, where things will go from here…

9. EXAMPLE
• Purpose: generate sales leads
• Evaluation: number of relevant contacts
• Content: give enough information about products, target
message to certain audience, encourage users to contact…
• Design: encourage users to contact, create clear calls to
action
• Development: Track conversions, focus on purpose…

10. HARSH REALITY
• Purpose: we need a website
• Evaluation: ???
• Content: “this company was founded in 1996…”
• Design: copy from competitor
• Development: here’s a PSD

11. 2. CONTENT &
STRUCTURE

12. WHAT TO DEFINE?
• Kinds of content: articles, products, blog posts…
• How content is grouped and linked: archives,
categories, tags, related posts…
• Main menu items, sitemap
• No need of technical knowledge!

13. WHO DEFINES?
• Client: always
• Project manager & Designer: should
• Developer: often should – implementation &
what is possible

14. IF YOU SKIP THIS…
• Designer will guess the structure
• Developer builds it based on developer’s guesses
• Site won’t be flexible enough / has
functionality client doesn’t need

15. NOT ALL CONTENT IS
BORN EQUAL
• Disposable: Front page, archives, some pages…
• Temporary: Campaigns, events…
• “Forever”: Blog posts, articles, products…

16. 3. DESIGN

17. CONTENT-DESIGN
BALANCE
Design shapes
the content
Content shapes
the design
Strictly
consistent
Wildly
inconsistent
“Sweet spot”

18. CONTENT IS
THE KING
• Content first – no guessing!
• You should create stylistic rules for content
• You shouldn't force all content to fit the design

19. DON’T MAKE UP
THE IMAGE SIZES
• Size affects the kinds of
images that get chosen
• Hard to change later:
art direction, scaling up
• Consult a developer!
Image locked to design

20. ASPECT RATIOS ARE AWESOME
• “419 x 274” doesn’t mean anything and it’s copied
straight from lazy designer’s PSD file
• Make sizes based on commonly used aspect
ratios: 1:1, 16:9, 4:3…
• If you later need to make it bigger or smaller,
scaling looks good and the art direction won’t
change

21. SOFT & HARD CROP
Original
2000 x 1333
Soft crop
500 x 500
“Fit these bounds”
Hard crop
500 x 500
“Be this size”

22. “MIXED CROP”
• Designs often need images to be
certain width or height
• You can make a soft cropping size
like “300 x 2000”
• Result: image will be 300 pixels
wide and as tall as it is scaled

23. 4. WORDPRESS

24. WORDPRESS AGES WELL
• Backwards compability: updates won’t force
rebuilding (Drupal)
• Extendability: can adapt to different needs
• GPL license: you can continue the development
if original developer quits (or in any case)

25. DON’T MESS THIS UP!

26. CONTENT EDITOR IS FOR CONTENT!

27. KEEP THESE OUT OF CONTENT
• Meta: author, published, excerpt…
• Categories, tags and similar
• Layouts: columns, grids…
• Styling: colors, font sizes…

28. PAGE BUILDERS
ARE BAD, M’KAY?
• You are now married with that page builder forever
• Content is locked: tons of shortcodes etc
• No separation of design and content
• Also: complex, badly optimised, often hard to use
• (Some may still find them useful in some occasions)

29. META SHOULD BE META
• Can be styled, positioned and used any way now
and in the future
• WP built-in meta fields
• Better UI with: ACF, CMB2,
ButterBean…
• Don’t overdo it!

30. TAXONOMIES FOR
FILTERING AND GROUPING
• Taxonomies: categories, tags, city, department…
• The most powerful way to group and filter posts
• Numeric taxonomies are hard :(
• Meta or taxonomy?

31. LAYOUTS & STYLES
• Theme should handle these
• Exceptions with different page layouts, text styles,
shortcodes…
• Do you really need columns?

32. [SHORTCODES]
• Good:
• Great power: [gallery ids=“1,2”], [recent-posts tag=“WordPress”]
• Style, logic and markup can be changed later
• Bad:
• Overuse (page builders)
• You have to keep supporting or remove them!
• UI? (Shortcake)

33. ADMIN UI MATTERS
• Why clients love WordPress?
• Bad UI → not used → content not updated
• Keep it clean, simple and informative!

34. 5. NEVER READY

35. YOU NEED RESOURCES
• Client: budget, time, energy, interest…
• Designer: additional design / style guide
• Communication: changes, additions…

36. UPDATES
• You should do them.

37. CLIENT CAN
MESS IT UP, SORRY
• Nobody updates content
• New purpose for website
• No budget for development
• No communication?

38. CONCLUSION

39. HOW TO ENSURE A LONG LIFE
SPAN FOR A WEBSITE?
1. Define purpose
2. Content first
3. Design for content
4. Implement content wisely
5. Keep things moving

40. THAT’S ALL,
FOLKS!
@teemusuoranta