Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

How to ensure a long life span for a website (WPHelsinki 2.11.2016)

1,672 views

Published on

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.

Published in: Internet
  • If you want to download or read this book, copy link or url below in the New tab ......................................................................................................................... DOWNLOAD FULL PDF EBOOK here { http://bit.ly/2m6jJ5M } .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • If you want to download or read this book, Copy link or url below in the New tab ......................................................................................................................... DOWNLOAD FULL PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

How to ensure a long life span for a website (WPHelsinki 2.11.2016)

  1. 1. HOW TO ENSURE
 A LONG 
 LIFE SPAN
 FOR A 
 WEBSITE? WPHelsinki 02.11.2016 Teemu Suoranta
  2. 2. HI, I’M TEEMU • Web developer at Aucor • Organizer at WPTurku • Twitter: @teemusuoranta
 WPFI Slack: @teemusuoranta
  3. 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. 4. GOALS 1. Design will change, content will remain 2. Technology will change, content will remain 3. Needs will change, content must adapt
  5. 5. NOT OUR GOALS 1. No changes needed: “perfect website” 2. Never rebuilding or redesigning 3. Solve everything with technology
  6. 6. 1. FOUNDATION
  7. 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. 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. 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. 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. 11. 2. CONTENT & STRUCTURE
  12. 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. 13. WHO DEFINES? • Client: always • Project manager & Designer: should • Developer: often should – implementation & 
 what is possible
  14. 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. 15. NOT ALL CONTENT IS BORN EQUAL • Disposable: Front page, archives, some pages… • Temporary: Campaigns, events… • “Forever”: Blog posts, articles, products…
  16. 16. 3. DESIGN
  17. 17. CONTENT-DESIGN BALANCE Design shapes 
 the content Content shapes
 the design Strictly
 consistent Wildly
 inconsistent “Sweet spot”

  18. 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. 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. 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. 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. 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. 23. 4. WORDPRESS
  24. 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. 25. DON’T MESS THIS UP!
  26. 26. CONTENT EDITOR IS FOR CONTENT!
  27. 27. KEEP THESE OUT OF CONTENT • Meta: author, published, excerpt… • Categories, tags and similar • Layouts: columns, grids… • Styling: colors, font sizes…
  28. 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. 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. 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. 31. LAYOUTS & STYLES • Theme should handle these • Exceptions with different page layouts, text styles, shortcodes… • Do you really need columns?
  32. 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. 33. ADMIN UI MATTERS • Why clients love WordPress? • Bad UI → not used → content not updated • Keep it clean, simple and informative!
  34. 34. 5. NEVER READY
  35. 35. YOU NEED RESOURCES • Client: budget, time, energy, interest… • Designer: additional design / style guide • Communication: changes, additions…
  36. 36. UPDATES • You should do them.
  37. 37. CLIENT CAN 
 MESS IT UP, SORRY • Nobody updates content • New purpose for website • No budget for development • No communication?
  38. 38. CONCLUSION
  39. 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. 40. THAT’S ALL, FOLKS! @teemusuoranta

×