Designing Client-Focused WordPress Sites

Be47c213d584412f2dc86e47887a88a6?s=47 Jeff Archibald
November 20, 2011

Designing Client-Focused WordPress Sites

A talk about how to improve the admin user experience for WordPress users.

Be47c213d584412f2dc86e47887a88a6?s=128

Jeff Archibald

November 20, 2011
Tweet

Transcript

  1. Jeff Archibald // @paper_leaf // Wordcamp Edmonton 2011

  2. HELLO/ ✦ Jeff Archibald ✦ Graphic & Web Designer ✦

    WordPress Developer ✦ paper-leaf.com ✦ @paper_leaf
  3. HELLO/ ✦ TOPICS ✦ We will cover: ✦ What a

    “client-focused” site means ✦ Why we should care about making them ✦ How to apply principles to specific areas of WordPress ✦ basic tips, tutorials, code snippets & more!
  4. HELLO/ ✦ OBJECTIVES ✦ You will leave with: ✦ an

    understanding of what “client-focused” means ✦ a new appreciation for your clients point-of-view ✦ at least 3 practical tips to apply to your own builds
  5. WHAT.

  6. RAISE YOUR HAND IF YOU’RE A WEBSITE DESIGNER OR DEVELOPER.

  7. WHAT/ ✦ STATIC SITES ✦ focus on end users &

    perhaps future developers ✦ CMS/WORDPRESS SITES ✦ focus on end users & perhaps future developers ✦ also have to focus on the content managers ✦ need to make sites that are friendly for them, too
  8. WHAT/ ✦ WHAT IS A CLIENT-FOCUSED SITE? ✦ one that

    is easy as possible for the client to: ✦ manage content in ✦ keep up-to-date ✦ maintain design integrity & longevity ✦ find help for/have peace of mind with.
  9. OK, WHY?

  10. WHY/ ✦ WHY SHOULD WE CARE/BOTHER? ✦ I mean, it

    does take more time, right? ✦ Yes, but you will: ✦ become a better designer/developer ✦ make your boss/client happy ✦ spend less time playing tech support
  11. HOW.

  12. HOW/ ✦ ASK YOURSELF THIS QUESTION: ✦ “What areas of

    a WordPress site does the client interact with, and how can we make these interactions as pleasant as possible?” ✦ Dashboard ✦ Posts & Pages
  13. HOW/ Apply the following principle everywhere you can:

  14. REDUCE & SIMPLIFY.

  15. HOW/DASHBOARD ✦ THE WORDPRESS DASHBOARD

  16. HOW/DASHBOARD ✦ THE WORDPRESS DASHBOARD ✦ Using User Roles to

    your advantage ✦ Administrator, Editor, Author, Contributor, Subscriber ✦ Clients see/use varying elements of WordPress based on their user role ✦ E.g. Editors can create & manage site content, but they cannot edit themes, widgets, users and more.
  17. HOW/DASHBOARD ✦ THE WORDPRESS DASHBOARD ✦ Using User Roles to

    your advantage ✦ Ask yourself what your client needs access to, and if default User Roles will answer that need. ✦ Where possible, use User Roles to limit WordPress to what your clients need.
  18. HOW/DASHBOARD ✦ THE WORDPRESS DASHBOARD ✦ Using User Roles to

    your advantage ✦ Sometimes you need to provide Admin-level access to your client. ✦ E.g. Gravity Forms plugin, others ✦ If so, look into reducing & simplifying the user experience for the client using code, functions, plugins and other solutions ✦ Tip: Adminimize or Members plugins
  19. ✦ THE WORDPRESS DASHBOARD ✦ Easy ways to add value

    ✦ Dashboard Widgets! HOW/DASHBOARD
  20. ✦ THE WORDPRESS DASHBOARD ✦ Customize Dashboard prior to client’s

    first log-in. HOW/DASHBOARD
  21. HOW/DASHBOARD ✦ THE WORDPRESS DASHBOARD ✦ Click & drag to

    arrange the widgets into the most logical, user-friendly arrangement for your clients!
  22. WHAT ABOUT THE ADMIN MENU?

  23. HOW/DASHBOARD

  24. HOW/DASHBOARD ✦ THE WORDPRESS DASHBOARD ✦ If your clients don’t

    need certain Admin menu items or sub-menu items, hide them. Reduce & simplify. ✦ Common perpetrators: ✦ Links ✦ Comments (if no blog) ✦ Themes ✦ Editor
  25. HOW/DASHBOARD ✦ THE WORDPRESS DASHBOARD ✦ Hiding Admin menu items

    just takes a little bit of code in your functions.php page: ✦ add_action( 'admin_menu', 'devpress_remove_menus', 999 ); function devpress_remove_menus() { remove_menu_page ( 'link-manager.php' ); } ✦ Code courtesy of DevPress; grab it here: tinyurl.com/admin-menu
  26. HOW/DASHBOARD ✦ THE WORDPRESS DASHBOARD ✦ Reducing & simplifying the

    Dashboard content makes for a more client-focused/friendly experience. ✦ We can also add content to make the client experience better too....
  27. HOW/DASHBOARD ✦ THE WORDPRESS DASHBOARD ✦ Creating a custom “site

    publishing guidelines” dashboard widget ✦ Handy place for items like: ✦ frequent image sizes used on the site ✦ links to tools (pixlr.com) or email addresses ✦ where to find/edit certain site content
  28. HOW/DASHBOARD

  29. HOW/DASHBOARD ✦ THE WORDPRESS DASHBOARD ✦ Creating a custom “site

    publishing guidelines” dashboard widget ✦ grab the code & instructions from the Paper Leaf blog at tinyurl.com/dash-widget ✦ basic example; use your imagination!
  30. POSTS & PAGES.

  31. HOW/POSTS & PAGES ✦ POSTS & PAGES ✦ Tailoring Post

    & Page editing pages ✦ Cleaning it up ✦ Changing the Visual Editor CSS ✦ Using plugins and/or code for a better authoring experience ✦ Locking down the site style ✦ Automated styles for images, text etc
  32. HOW/POSTS & PAGES ✦ POSTS & PAGES ✦ Tailoring Post

    & Page editing pages ✦ Remove widgets the clients don’t need.
  33. HOW/POSTS & PAGES

  34. HOW/POSTS & PAGES

  35. TALKIN’ ‘BOUT THE TINYMCE EDITOR

  36. HOW/TINYMCE EDITOR

  37. HOW/TINYMCE EDITOR ✦ CUSTOMIZING TINYMCE EDITOR ✦ If you want

    to get hardcore about it, you can add or remove buttons without relying on a plugin. ✦ Check out sumtips.com’s tutorial, viewable at tinyurl.com/custom-mce
  38. TALKIN’ ‘BOUT THE VISUAL EDITOR

  39. HOW/VISUAL EDITOR ✦ POSTS & PAGES ✦ Tailoring Post &

    Page editing pages ✦ Change the CSS for the Visual Editor ✦ Why? Because what the author sees when authoring a page or post - in the “admin-side”- does not match what is seen when published - on the “client-side” by default
  40. HOW/VISUAL EDITOR

  41. HOW/VISUAL EDITOR images from digwp.com

  42. HOW/VISUAL EDITOR ✦ CUSTOM VISUAL EDITOR CSS ✦ digwp.com has

    a great tutorial on this ✦ Viewable at tinyurl.com/editor-css
  43. HOW/VISUAL EDITOR ✦ POSTS & PAGES ✦ Tailoring Post &

    Page editing pages ✦ Make managing advanced page layouts easy
  44. HOW/VISUAL EDITOR LOGO NAVIGATION IMAGE INTRO TEXT COLUMN COLUMN COLUMN

  45. HOW/VISUAL EDITOR ✦ ADVANCED PAGE LAYOUTS ✦ Options: ✦ Pull

    in columns with a Custom Post Type ✦ Use a plugin like Multiple Content Blocks ✦ Customize the Visual Editor to match page layout ✦ New function coming in WP 3.3 - wp_editor()
  46. HOW/VISUAL EDITOR ✦ ADVANCED PAGE LAYOUTS ✦ Custom Post Type

    option: ✦ An area - e.g. Home Columns - separate from Posts & Pages where client handles the home columns. ✦ Check out the WordPress Codex ✓ Easy for client to grasp - Still outside of where it “should” be: the Home Page.
  47. HOW/VISUAL EDITOR ✦ ADVANCED PAGE LAYOUTS ✦ Multiple Content Blocks

    plugin: ✦ Adds another Visual Editor Window to Page & Post authoring pages ✓ Easy to use: <?php the_block(‘header’); ?> ✓ Easy for client to grasp - It’s a plugin: not perfect, may clash.
  48. HOW/VISUAL EDITOR ✦ ADVANCED PAGE LAYOUTS ✦ Multiple Content Blocks

    plugin:
  49. HOW/VISUAL EDITOR ✦ ADVANCED PAGE LAYOUTS ✦ Customize the Visual

    Editor to match page layout: ✦ Manage all content from Visual Editor with no plugins used ✓ Easy solution for client to manage content - More complex for the developer
  50. HOW/VISUAL EDITOR images from smashingmagazine.com

  51. HOW/VISUAL EDITOR ✦ ADVANCED PAGE LAYOUTS ✦ Customize the Visual

    Editor to match page layout: ✦ Great tutorial on Smashing Magazine ✦ View it at tinyurl.com/wp-editor-advanced
  52. HOW/VISUAL EDITOR ✦ ADVANCED PAGE LAYOUTS ✦ wp_editor() function in

    WP 3.3: ✦ Re-use the built-in, native WordPress editor ✦ Create multiple WordPress editors on one Page editing screen ✓ Easy solution for client to manage content ✓ Native to WordPress (3.3) - A bit more complex for the developer
  53. HOW/VISUAL EDITOR images from presscoders.com O M G

  54. HOW/VISUAL EDITOR ✦ ADVANCED PAGE LAYOUTS ✦ wp_editor() function in

    WP 3.3: ✦ tutorial on PressCoders viewable at tinyurl.com/wp-post-editor ✦ WordPress 3.3 slated for Nov 29, 2011 release
  55. LOCK IT DOWN

  56. HOW/LOCK IT DOWN ✦ LOCK IT DOWN ✦ Make styles

    & classes as “automated” as possible ✦ Don’t rely on client to dive into HTML ✦ Use WordPress’ built-in features wherever possible ✦ Why? For ease-of-use and long-term design integrity
  57. HOW/LOCK IT DOWN ✦ LOCK IT DOWN ✦ Make styles

    & classes as “automated” as possible ✦ E.g. Image styles
  58. HOW/LOCK IT DOWN Gangsta ...not so Gangsta

  59. HOW/LOCK IT DOWN ✦ LOCK IT DOWN ✦ Make styles

    & classes as “automated” as possible ✦ If a client has to add classes to links or images on a per-item basis... ✦ we can go back to customizing the tinyMCE editor and add those classes to the drop-down class selector
  60. HOW/LOCK IT DOWN ✦ LOCK IT DOWN ✦ Make styles

    & classes as “automated” as possible ✦ e.g. adding a class of “css-button” to an anchor link to change a regular link to “button-style” link. ✦ instead of the client switching to HTML view and having to type class=“css-button” in the right spot... ✦ they can just select the CSS-Button class from the new “Styles” drop-down class selector.
  61. HOW/LOCK IT DOWN ✦ LOCK IT DOWN ✦ Make styles

    & classes as “automated” as possible ✦ check out a tutorial on that at alisothegeek.com: tinyurl.com/adding-classes
  62. HOW/LOCK IT DOWN ✦ LOCK IT DOWN ✦ Make styles

    & classes as “automated” as possible ✦ This concept can be applied all over the place ✦ E.g. text-transform: uppercase; instead of physically writing headings in all-caps ✦ Look for any & every opportunity to reduce & simplify the content management process for your client
  63. HOW/LOCK IT DOWN ✦ LOCK IT DOWN ✦ Use WordPress’

    built-in features to make your clients lives easier ✦ E.g. Post Thumbnail / Featured Image
  64. HOW/LOCK IT DOWN

  65. HOW/LOCK IT DOWN ✦ LOCK IT DOWN ✦ Potential (unhappy)

    client workflow: ✦ Crop/Resize image ✦ Place cursor at approximate location in article (in Post editor) where image is desired ✦ Upload image through tinyMCE ✦ Float image left; ensure proper size is selected ✦ Cross fingers... and likely try again.
  66. HOW/LOCK IT DOWN

  67. HOW/LOCK IT DOWN ✦ LOCK IT DOWN ✦ Why is

    this so bad? ✦ Unnecessary & extra steps ✦ Higher probability of error ✦ Higher probability of a frustrated client ✦ Higher probability of a compromised site design
  68. HOW/LOCK IT DOWN ✦ LOCK IT DOWN ✦ Better (happy)

    client workflow: ✦ Developer utilizes built-in Wordpress Featured Image function ✦ Client uploads their image through the Featured Image widget ✦ Image is placed in proper spot; proper styles are automatically applied.
  69. HOW/LOCK IT DOWN

  70. HOW/LOCK IT DOWN ✦ LOCK IT DOWN: REVIEW ✦ Make

    styles & classes as “automated” as possible ✦ Don’t rely on client to dive into HTML ✦ Use WordPress’ built-in features wherever possible ✦ Why? For ease-of-use and long-term design integrity
  71. WHEW. AKA A REVIEW

  72. REVIEW/ ✦ WHAT? ✦ A WordPress site should empower the

    client using it & make it easy & enjoyable for them. ✦ WHY? ✦ Become better at your job; make your boss/client happier; less time playing tech support
  73. REVIEW/ ✦ HOW? ✦ Evaluate where your clients are interacting

    with WordPress (Dashboard, Pages & Posts) ✦ Reduce unneeded elements ✦ Simplify the content management experience
  74. REVIEW/ ✦ RESOURCES ✦ tinyurl.com/admin-menu ✦ hide Admin Menu items

    ✦ tinyurl.com/dash-widget ✦ add custom site guidelines widget ✦ tinyurl.com/custom-mce ✦ add/remove buttons from TinyMCE editor
  75. REVIEW/ ✦ RESOURCES ✦ tinyurl.com/editor-css ✦ customize the Visual Editor

    CSS ✦ tinyurl.com/wp-editor-advanced ✦ customize the Visual Editor layout ✦ tinyurl.com/wp-post-editor ✦ WP 3.3 multiple post editors function
  76. THANKS. ANY QUESTIONS?