Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Designing Client-Focused WordPress Sites

Jeff Archibald
November 20, 2011

Designing Client-Focused WordPress Sites

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

Jeff Archibald

November 20, 2011
Tweet

More Decks by Jeff Archibald

Other Decks in Design

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?