Designing Client-Focused WordPress Sites

Slide 1

Slide 1 text

Jeff Archibald // @paper_leaf // Wordcamp Edmonton 2011

Slide 2

Slide 2 text

HELLO/ ✦ Jeff Archibald ✦ Graphic & Web Designer ✦ WordPress Developer ✦ paper-leaf.com ✦ @paper_leaf

Slide 3

Slide 3 text

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!

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

WHAT.

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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 ✦ ﬁnd help for/have peace of mind with.

Slide 9

Slide 9 text

OK, WHY?

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

HOW.

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

HOW/ Apply the following principle everywhere you can:

Slide 14

Slide 14 text

REDUCE & SIMPLIFY.

Slide 15

Slide 15 text

HOW/DASHBOARD ✦ THE WORDPRESS DASHBOARD

Slide 16

Slide 16 text

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.

Slide 17

Slide 17 text

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.

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

✦ THE WORDPRESS DASHBOARD ✦ Easy ways to add value ✦ Dashboard Widgets! HOW/DASHBOARD

Slide 20

Slide 20 text

✦ THE WORDPRESS DASHBOARD ✦ Customize Dashboard prior to client’s first log-in. HOW/DASHBOARD

Slide 21

Slide 21 text

HOW/DASHBOARD ✦ THE WORDPRESS DASHBOARD ✦ Click & drag to arrange the widgets into the most logical, user-friendly arrangement for your clients!

Slide 22

Slide 22 text

WHAT ABOUT THE ADMIN MENU?

Slide 23

Slide 23 text

HOW/DASHBOARD

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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....

Slide 27

Slide 27 text

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 ﬁnd/edit certain site content

Slide 28

Slide 28 text

HOW/DASHBOARD

Slide 29

Slide 29 text

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!

Slide 30

Slide 30 text

POSTS & PAGES.

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

HOW/POSTS & PAGES

Slide 34

Slide 34 text

HOW/POSTS & PAGES

Slide 35

Slide 35 text

TALKIN’ ‘BOUT THE TINYMCE EDITOR

Slide 36

Slide 36 text

HOW/TINYMCE EDITOR

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

TALKIN’ ‘BOUT THE VISUAL EDITOR

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

HOW/VISUAL EDITOR

Slide 41

Slide 41 text

HOW/VISUAL EDITOR images from digwp.com

Slide 42

Slide 42 text

HOW/VISUAL EDITOR ✦ CUSTOM VISUAL EDITOR CSS ✦ digwp.com has a great tutorial on this ✦ Viewable at tinyurl.com/editor-css

Slide 43

Slide 43 text

HOW/VISUAL EDITOR ✦ POSTS & PAGES ✦ Tailoring Post & Page editing pages ✦ Make managing advanced page layouts easy

Slide 44

Slide 44 text

HOW/VISUAL EDITOR LOGO NAVIGATION IMAGE INTRO TEXT COLUMN COLUMN COLUMN

Slide 45

Slide 45 text

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()

Slide 46

Slide 46 text

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.

Slide 47

Slide 47 text

HOW/VISUAL EDITOR ✦ ADVANCED PAGE LAYOUTS ✦ Multiple Content Blocks plugin: ✦ Adds another Visual Editor Window to Page & Post authoring pages ✓ Easy to use: ✓ Easy for client to grasp - It’s a plugin: not perfect, may clash.

Slide 48

Slide 48 text

HOW/VISUAL EDITOR ✦ ADVANCED PAGE LAYOUTS ✦ Multiple Content Blocks plugin:

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

HOW/VISUAL EDITOR images from smashingmagazine.com

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

HOW/VISUAL EDITOR images from presscoders.com O M G

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

LOCK IT DOWN

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

HOW/LOCK IT DOWN ✦ LOCK IT DOWN ✦ Make styles & classes as “automated” as possible ✦ E.g. Image styles

Slide 58

Slide 58 text

HOW/LOCK IT DOWN Gangsta ...not so Gangsta

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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.

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

HOW/LOCK IT DOWN

Slide 65

Slide 65 text

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.

Slide 66

Slide 66 text

HOW/LOCK IT DOWN

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

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.

Slide 69

Slide 69 text

HOW/LOCK IT DOWN

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

WHEW. AKA A REVIEW

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

REVIEW/ ✦ HOW? ✦ Evaluate where your clients are interacting with WordPress (Dashboard, Pages & Posts) ✦ Reduce unneeded elements ✦ Simplify the content management experience

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

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

Slide 76

Slide 76 text

THANKS. ANY QUESTIONS?