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

Designing Client-Focused WordPress Sites

Avatar for Jeff Archibald Jeff Archibald
November 20, 2011

Designing Client-Focused WordPress Sites

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

Avatar for Jeff Archibald

Jeff Archibald

November 20, 2011
Tweet

More Decks by Jeff Archibald

Other Decks in Design

Transcript

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

    WordPress Developer ✦ paper-leaf.com ✦ @paper_leaf
  2. 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!
  3. 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
  4. 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
  5. 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.
  6. 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
  7. 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
  8. 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.
  9. 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.
  10. 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
  11. ✦ THE WORDPRESS DASHBOARD ✦ Easy ways to add value

    ✦ Dashboard Widgets! HOW/DASHBOARD
  12. HOW/DASHBOARD ✦ THE WORDPRESS DASHBOARD ✦ Click & drag to

    arrange the widgets into the most logical, user-friendly arrangement for your clients!
  13. 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
  14. 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
  15. 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....
  16. 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
  17. 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!
  18. 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
  19. HOW/POSTS & PAGES ✦ POSTS & PAGES ✦ Tailoring Post

    & Page editing pages ✦ Remove widgets the clients don’t need.
  20. 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
  21. 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
  22. HOW/VISUAL EDITOR ✦ CUSTOM VISUAL EDITOR CSS ✦ digwp.com has

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

    Page editing pages ✦ Make managing advanced page layouts easy
  24. 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()
  25. 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.
  26. 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.
  27. 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
  28. 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
  29. 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
  30. 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
  31. 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
  32. HOW/LOCK IT DOWN ✦ LOCK IT DOWN ✦ Make styles

    & classes as “automated” as possible ✦ E.g. Image styles
  33. 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
  34. 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.
  35. 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
  36. 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
  37. HOW/LOCK IT DOWN ✦ LOCK IT DOWN ✦ Use WordPress’

    built-in features to make your clients lives easier ✦ E.g. Post Thumbnail / Featured Image
  38. 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.
  39. 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
  40. 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.
  41. 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
  42. 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
  43. REVIEW/ ✦ HOW? ✦ Evaluate where your clients are interacting

    with WordPress (Dashboard, Pages & Posts) ✦ Reduce unneeded elements ✦ Simplify the content management experience
  44. 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
  45. 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