HOW TO ENSUREA LONG LIFE SPANFOR A WEBSITE? WordPress Meetup

Teemu Suoranta

HI, I’M TEEMU

• Web developer at Aucor

• Organizer at Turku WordPress Meetup

• Twitter: @teemusuorantaWPFI Slack: @teemusuoranta

WHY CARE ABOUTLIFE SPAN?

• It’s your job to create quality websites

• Bad design and implementation locks content to current design and technology

• “You gonna carry that weight a long time”

• Frequent redesigns cost much

GOALS

1. Design will change, content will remain

2. Technology will change, content will remain

3. Needs will change, content must adapt

NOT OUR GOALS

1. No changes needed: “perfect website”

2. Never rebuilding the whole site

3. Solve everything with technology

1. FOUNDATION

(NOT THE CSS FRAMEWORK)

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!

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…

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…

HARSH REALITY

• Purpose: we need a website

• Evaluation: ???

• Content: “this company was founded in 1996…”

• Design: copy from competitor

• Development: here’s a PSD

2. CONTENT & STRUCTURE

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!

WHO DEFINES?

• Client: always

• Project manager / Designer: should

• Developer: decides implementation (content types, taxonomies…), may attend

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

3. CONTENT & WORDPRESS

DON’T MESS THIS UP!

CONTENT EDITOR IS FOR CONTENT!

KEEP THESE OUT OF CONTENT

• Meta: author, published, excerpt…

• Categories, tags and similar

• Layouts: columns, grids…

• Styling: colors, font sizes…

PAGE BUILDERSARE BAD, M’KAY?

• You are now married with that page builder forever

• Content is locked: tons of shortcodes

• No separation of design and content

• Also: complex, badly optimised, often hard to use

• (Some may still find them useful in some occasions)

META SHOULD BE META

• Can be styled, positioned and used any way now and in future

• WP built-in meta fields

• Better UI with: ACF, CMB2,ButterBean…

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?

LAYOUTS & STYLES

• Theme should handle these

• Exceptions with different page layouts, text styles, shortcodes…

• Do you need columns?

[SHORTCODES]

• Good:

• Great power: [gallery ids=“1,2”], [recent-posts tag=“WordPress”]

• Style, logic and markup can be changed

• Bad:

• Overuse (page builders)

• You have to keep supporting or remove them!

• UI? (Shortcake)

ADMIN UI MATTERS

• Why clients love WordPress?

• Bad UI → not used → content not updated

• Keep it clean, simple and informative!

4. IMAGES &WORDPRESS

IMAGE SIZES• By default WordPress creates multiple versions of uploaded images

• You can add as many image sizes as you want

• You can modify the default sizes

• Sizes are generated when uploaded

• If you add image sizes later on, you have to regenerate old images

• WP-CLI or Force Regenerate Thumbnails

SOFT & HARD CROP

Original2000 x 1333

Soft crop500 x 500

“Fit these bounds”

Hard crop500 x 500“Be this size”

HARD CROPS: DESIGN FIRST, CONTENT SECOND

• Affects what kind of images are chosen

• Art direction can break when changing this image size later

• Avoid if possible!Image locked to design

HARD CROP THAT DOESN’T SUCK

• “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

A WAY AROUND HARD CROPS

• 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

SHOULD YOU BE ABLE TO ADJUST THE CROP?

• Full control of art direction :)

• Problems with size regeneration: stuck with current sizes :(

5. KEEP THINGS MOVING

WORDPRESS AGES WELL

• Backwards compability: updates won’t force rebuilding (Drupal)

• Extendability: can adapt to different needs

• GPL license: if plugin developer quits, you can continue the development (or in any case)

UPDATES

• You should do them.

(KEEPING THINGS MOVING)NEEDS RESOURCES

• Client: budget, time, energy, interest…

• Designer: additional design / style guide

• Communication: changes, additions…

CLIENT CAN MESS IT UP, SORRY

• Nobody updates content

• New purpose for website

• No budget for development

• No communication?

CONCLUSION

HOW TO ENSURE A LONG LIFE SPAN FOR A WEBSITE?

1. Purpose

2. Content first

3. Implement content wisely

4. Keep things moving

THAT’S ALL, FOLKS!@teemusuoranta