“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!
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
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
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.
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
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.
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.
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
need certain Admin menu items or sub-menu items, hide them. Reduce & simplify. ✦ Common perpetrators: ✦ Links ✦ Comments (if no blog) ✦ Themes ✦ Editor
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
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
publishing guidelines” dashboard widget ✦ grab the code & instructions from the Paper Leaf blog at tinyurl.com/dash-widget ✦ basic example; use your imagination!
& 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
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
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
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()
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.
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.
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
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
& 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
& 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
& 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.
& 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
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.
this so bad? ✦ Unnecessary & extra steps ✦ Higher probability of error ✦ Higher probability of a frustrated client ✦ Higher probability of a compromised site design
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.
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
jeffreyarchibald
haruka_capeo
sachi337
tiagoporto
licux
kkaru
norinity1103
hilokifigma
ataxi1003
5kaichi
fumiko
spring_aki
hjmkth
smashingmag
ufuk
keavy
sergeychernyshev
eileencodes
erikaheidi
bkeepers
afnizarnur
tammyeverts
moore
speakerdeck
