HOW TO ENSUREA LONG LIFE SPANFOR A WEBSITE?WPHelsinki 02.11.2016 Teemu Suoranta

HI, I’M TEEMU

• Web developer at Aucor

• Organizer at WPTurku

• 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

• Frequent redesigns cost much

• Reputation of your company, our industry and WordPress

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 or redesigning

3. Solve everything with technology

1. FOUNDATION

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: often should – implementation & what is possible

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

NOT ALL CONTENT IS BORN EQUAL

• Disposable: Front page, archives, some pages…

• Temporary: Campaigns, events…

• “Forever”: Blog posts, articles, products…

3. DESIGN

CONTENT-DESIGN BALANCE

Design shapes the content

Content shapesthe design

Strictly consistent

Wildlyinconsistent

“Sweet spot”

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

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

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

SOFT & HARD CROP

Original2000 x 1333

Soft crop500 x 500

“Fit these bounds”

Hard crop500 x 500“Be this size”

“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

4. WORDPRESS

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)

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 etc

• 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 the future

• WP built-in meta fields

• Better UI with: ACF, CMB2,ButterBean…

• Don’t overdo it!

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 really need columns?

[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)

ADMIN UI MATTERS

• Why clients love WordPress?

• Bad UI → not used → content not updated

• Keep it clean, simple and informative!

5. NEVER READY

YOU NEED RESOURCES

• Client: budget, time, energy, interest…

• Designer: additional design / style guide

• Communication: changes, additions…

UPDATES

• You should do them.

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. Define purpose

2. Content first

3. Design for content

4. Implement content wisely

5. Keep things moving

THAT’S ALL, FOLKS!@teemusuoranta