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.

Content First in Action

299 views

Published on

We know that a content-first approach to design is a best practice, but knowing is only half the battle. We're accustomed to our legacy workflows--and so are our clients. For years, we've trained clients to expect designs first, prototypes later, and writing last of all.

Win clients over to your new workflow by showing them what's in it for them: not just a better user experience for their readers, but a better authoring experience for the content editors.

With a CMS that lets you modify the admin interface, you can make not only the design but the CMS itself fit the content. When coupled with a responsive design workflow, setting up the model first helps clients think more concretely about:

* modular content
* prioritizing chunks for mobile, search, and archived contexts
* user roles and access
* editorial UX

This content-first approach lets you design the CMS to fit the organization's content model and workflow. You can:

* dogfood throughout the prototyping and design processes
* spot areas of confusion early
* change the admin interface
* add inline help
* plan documentation to be a backup or a last resort

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Content First in Action

  1. 1. C O N T E N T F I R S T I N A C T I O N Stephanie Leary stephanieleary.com @sleary
  2. 2. O L D W O R K F L O W • Discovery and Planning • Design • Build • Write • Test
  3. 3. R E S P O N S I V E D E S I G N + C O N T E N T S T R A T E G Y
  4. 4. H T M L W I R E F R A M E S
  5. 5. N E W W O R K F L O W Discovery and Planning Structure Write Design Build Test iterate
  6. 6. D E S I G N A N D P L A N N I N G • Requirements • User research • Content audit • Content model
  7. 7. C M S U S E R SE N D U S E R S +
  8. 8. If content authors can’t or won’t use the CMS, it’s game over.
  9. 9. K N O W T H E T O O L S E T • Post types • Taxonomies • Fields
  10. 10. Requirements often describe structure: “separate” “search by…” “sort” “filter”
  11. 11. “We need a way to separate events bios products courses etc. from our posts and pages.” POST TYPE
  12. 12. “We want to display _____ alongside the description.” FIELD OR TAXONOMY
  13. 13. “We want to sort by X and Y as well as by title and date.” FIELD*
  14. 14. “This text input should be a controlled list.” TAXONOMY… PROBABLY
  15. 15. R E Q U I R E M E N T S
  16. 16. A C F F I E L D T Y P E S
  17. 17. A S K Q U E S T I O N S • What things are you writing about? How are they related? How are they grouped? • How detailed can we get and keep the editing process sustainable? • Should different groups of people have permission to edit different things?
  18. 18. F I E L D Q U E S T I O N S • What are the parts that make up each thing? • Which of those fit the fields the CMS provides, and which do we need to create? • What should the editing experience be for each part?
  19. 19. T A X O N O M Y Q U E S T I O N S • Do we have any groups in which several kinds of categories are mixed? Can these be separated into more clearly delineated groups? • Do our authors understand the differences between each group? • Should items in different groups have completely different sets of fields? (Maybe a post type is better.)
  20. 20. F I E L D O R T A X O N O M Y ? What is the format of this data? Should the input be a controlled list? Should duplicates be avoided? FIELDTAXONOMY NoYes Text Anything Else
  21. 21. A D V A N C E D C U S T O M F I E L D S G E N E R A T E W P O R C P T U I + R A P I D P R O T O T Y P E S
  22. 22. P O S T T Y P E S A N D T A X O N O M I E S
  23. 23. D E S I G N C O N T E N T I N C O N T E X T • Single page views • Date-based archives • Taxonomy-based archives • Site search results • Specialized search results • Home page features
  24. 24. I T E R A T E .
  25. 25. C O U R S E C O R R E C T I O N I S E A S Y • Post Type Switcher • Term Management Tools • WP All Export / WP All Import
  26. 26. P O S T T Y P E S W I T C H E R
  27. 27. T E R M M G M T T O O L S : M E R G E
  28. 28. T E R M M G M T T O O L S : C H A N G E
  29. 29. F I E L D T O T A X O N O M Y W P A L L E X P O R T
  30. 30. L I S T E N .
  31. 31. C H A N G E T H E A D M I N U I • Hide unneeded features • Make everything on the screen relevant • Change placeholders and labels • Add toolbar options for pattern library elements • Add inline help • Document in the CMS
  32. 32. H I D E U N N E E D E D F E A T U R E S
  33. 33. T U R N O F F S C R E E N O P T I O N S <?php add_filter( 'default_hidden_meta_boxes', 'my_default_hidden_screen_options', 10, 2 ); function my_default_hidden_screen_options( $hidden, $screen ) { $hide_these = array( 'dashboard_primary', 'postcustom', 'trackbacksdiv', ); return array_merge( $hidden, $hide_these ); }
  34. 34. M A K E E V E R Y T H I N G R E L E V A N T
  35. 35. M A K E E V E R Y T H I N G R E L E V A N T A D M I N C O L U M N S
  36. 36. M A K E E V E R Y T H I N G R E L E V A N T A D M I N C O L U M N S
  37. 37. C H A N G E P L A C E H O L D E R S
  38. 38. C H A N G E P L A C E H O L D E R S <?php add_filter( 'enter_title_here', 'my_title_placeholders' ); function my_title_placeholders( $placeholder ){ $screen = get_current_screen(); switch ( $screen->post_type ) { case 'people': $placeholder = 'Enter full name'; break; case 'course': $placeholder = 'Enter course title'; break; case 'facility': $placeholder = 'Enter building name and number'; break; default: break; } return $placeholder; }
  39. 39. C H A N G E P L A C E H O L D E R S
  40. 40. C H A N G E L A B E L S F E A T U R E D I M A G E S
  41. 41. C H A N G E L A B E L S F E A T U R E D I M A G E S
  42. 42. C H A N G E L A B E L S <?php remove_meta_box( 'postexcerpt', 'post', 'side' ); add_meta_box('postexcerpt', __( 'Plain Text Summary' ), 'post_excerpt_meta_box', 'post', 'normal', 'high');
  43. 43. N E W E X C E R P T L A B E L
  44. 44. A D D I N L I N E H E L P
  45. 45. A D D I N L I N E H E L P
  46. 46. C H A N G E I N L I N E H E L P
  47. 47. C H A N G E I N L I N E H E L P <?php remove_meta_box( 'postexcerpt', 'post', 'side' ); add_meta_box( 'postexcerpt', __( 'Plain Text Summary' ), 'custom_post_excerpt_meta_box', 'post', 'normal', ‘high’ ); function custom_post_excerpt_meta_box( $post ) { ?> <label class="screen-reader-text" for="excerpt"><?php _e( 'Plain Text Summary' ) ?></label> <textarea rows="1" cols="40" name="excerpt" id="excerpt"> <?php echo $post->post_excerpt; // textarea_escaped ?> </textarea> <p><?php __( 'The plain text summary will appear on archive pages (e.g. lists of posts by category) and in search results.' ); ?></p> <?php }
  48. 48. N E W E X C E R P T B O X
  49. 49. A D D T O O L B A R S T Y L E S & B U T T O N S A D V A N C E D T I N Y M C E
  50. 50. A D D T O O L B A R S T Y L E S & B U T T O N S
  51. 51. A D D T O O L B A R S T Y L E S & B U T T O N S
  52. 52. A D D T O O L B A R S T Y L E S & B U T T O N S
  53. 53. A D D T O O L B A R S T Y L E S & B U T T O N S S H O R T C A K E U I
  54. 54. A D D T O O L B A R S T Y L E S & B U T T O N S S H O R T C A K E U I
  55. 55. A D D T O O L B A R S T Y L E S & B U T T O N S S H O R T C A K E U I
  56. 56. A D D T O O L B A R S T Y L E S & B U T T O N S S H O R T C A K E U I
  57. 57. A D D H E L P L I B R A R Y I N T H E C M S W P H E L P
  58. 58. To sum up…
  59. 59. “Well, that’s how the CMS does it.”
  60. 60. “Well, that’s how the CMS does it.”
  61. 61. “Well, that’s how we made the CMS do it.”
  62. 62. C O N T E N T E D I T O R S F E E L … • empowered • included • appreciated • pampered?! • INVESTED
  63. 63. M O R E C O N T E N T S T R A T E G Y S T U F F • More code • A content inventory plugin • Videos • A book • http://stephanieleary.com/tag/content-strategy/

×