Blog

Opening a new tab or window: usability considerations

Have you ever asked your web developer to open a link in a new tab or window? Generally, this is accomplished by adding a target="_blank" attribute to a link. Let’s consider the usability implications.

The rationale is almost always founded in a desire to keep the audience engaged with your content longer, or a concern about usability (for example, keeping the reader losing his or her bearings). The overwhelming finding from user experience researchers*, however, is that new windows/tabs should be avoided when simply opening new web pages. However, there are some appropriate use cases: opening a non-HTML document (web page) like a large image, video, audio, or other media, or to avoid interrupting an important linear process like a checkout. Even with these exceptions, however, there are  friendlier alternatives like tool-tips and lightboxes.

In fact, the target="" attribute was actually deprecated (being phased out) from the HTML specifications until HTML5. As of HTML5, the W3C guidelines stipulate that it is no longer deprecated because it is deemed “useful in Web applications, e.g. in conjunction with iframe.”

Read More on Opening a new tab or window: usability considerations

Editing WordPress’s Visual Editor

These are the slides from a talk I gave at the 2011 WordCamps (WordPress conferences) in Chicago, Philly, and Orlando. I consider this a “sequel” to a broader talk on editing the WordPress administrative experience that I like to think I pioneered in 2010 at a few WordCamps, including Chicago and Mid-Alantic, which several new speakers now seem to be running with.

WordPress’s visual content editor (TinyMCE) is, in many ways, at the heart of WordPress’s content management experience. It’s where editors spend most of their time, and where content is crafted to appear on the front end of your site. Like most of WordPress, the editor can be customized to be both more powerful and more specific to the needs of an individual site or client. This presentation covers topics including custom editor stylesheets based on post type, modifying and removing buttons from the editor, and even creating your own custom buttons for the TinyMCE toolbar. It even covers brand new WordPress 3.3 techniques introduced with the new wp_editor function.

Read More on Editing WordPress’s Visual Editor

Introducing WordPress as a CMS

A week and a half later, here are the slides from my WordCamp Boston 2011 talk, “Introducing WordPress as a CMS”. Unfortunately, the slides don’t include my live demo of some CMS-centric implementations, which I think was eye opening to a few participants.

None-the-less, if you’re looking for an overview of content management concepts applied to WordPress, you can find them here. I’ve uploaded the slideshow as a video to YouTube (to preserve its feel); the video moves quickly, so you might have to be quick on the pause button!

Wrapping up WordCamp Boston 2011

WordCamp Boston 2011 was every bit as informative, fun, and inspiring as we expected.

Like most great WordCamps, Boston wasn’t just a venue for some great sessions; it was an opportunity to chat it up with a diverse crowd that ranged from lead WordPress contributors to new users just discovering the ways they can use the booming content management system. On Saturday morning – the first day of the event – I finally found the time and inspiration to send in a short sponsorship blog post. Recalling memories of WordCamp Boston 2010, I was excited for the event, and it didn’t disappoint.

Read More on Wrapping up WordCamp Boston 2011

A little freebie: WordPress folder icon

WordPress folder icon previewAt 10up, are freebies usually come in the form of WordPress code: tips, themes, and plug-ins. While a bit atypical, I wanted to share this folder icon we designed from scratch. It incorporates the WordPress logo, which is available here in vector format.

Designed with the gray WordPress color palette in  mind, this icon can add some flair to your WordPress folder(s) on your computer. There’s a full sized, beautiful 256px version, along with a small version fine tuned for the common 16px icon size.

We’re providing them for free with a GPL license, in original vector (Adobe Illustrator CS5 and SVG) formats as well as 256px PNG format and Windows ICO format. As always, we do politely request that if you use these for a client or commercial project, please give us attribution. Donations are welcome!

Download now.

Upcoming WordCamp Sessions

I’m excited to announce that I’ll be speaking again at both WordCamp Boston and WordCamp Chicago in July.

In Boston, I’ll be introducing newer users to approaching WordPress as a full fledged content management system. We’ll explore what a “full fledged CMS” actually means, and how to approach defining your requirements and thinking about your content. We’ll take a look at the administrative section of some complex CMS implementations to show what’s really possible. Then we’ll put ideas and strategy aside and review some configuration options and plug-ins that even the most basic users can latch onto to get started. My session is on Sunday, July 24th at 1:30 pm in the “How To” track. I’ll be attending all weekend, so be sure to find me and say hi!

Read More on Upcoming WordCamp Sessions

Secondary HTML Content 3.0 preview

As much as we like giving back to the community, it’s often hard to find time to keep some of the more sophisticated plug-ins up to date. One plug-in that hasn’t been updated in some time that I am frequently asked about is Secondary HTML Content.

I’ve had a number of ambitious goals for 3.0 for some time:

  • Enable a more complete editor experience (notably, Visual / HTML tabs)
  • Allow users to customize the labels for each content block
  • Add support for custom post types (not just posts and pages)
  • Remove arbitrary limit of 5 editor blocks
  • Integrate the settings with the “Writing” settings page (a logical place for them; I’m make a conscious effort with my themes and plug-ins to not “clutter” the settings panel)
  • On top of all this, provide a seamless upgrade path for 2.0 users

The first bullet has been by far the most challenging. While WordPress has a number of core functions that simplify adding a visual editor, they simply weren’t built with multiple editors on one page in mind. For the technically savvy, there are many hardcoded ID attributes, interacting with both CSS and JavaScript that rely on those IDs. As we know, the DOM is not intended to have multiple elements with identical IDs (particularly when we’re hooking events with JavaScript).

Nonetheless, I’m excited to say that the biggest hurdles have been tackled. Since we can’t work on hobby projects full time, the release is probably at least a couple of weeks out, mostly having to do with the upgrade path code.

New Smashing Magazine Power Tips for WordPress

My latest WordPress-focused article for the web’s leading online / digital media publication, Smashing Magazine, was published last Tuesday. New WordPress Power Tips For Template Developers And Consultants features a few tips exposed in my Custom WordPress Admin theme and talk, and adds a handful of new tips like:

  • Creating pagination links using WordPress’s built in paginate_links function
  • Adding body classes based on your own conditions
  • Redirecting failed logins
  • Adding warning messages to specific admin screens

My favorite tip is the leading one: applying WordPress’s highly underutilized, built in pagination function. I frequently see even high end, WordPress.com VIP themes relying on plug-ins like WP-PageNavi to do what WordPress can actually handle pretty well natively. The paginate_links function is a flexible little gem that should be used far more often than it is.

In the 5 days since the article was published, it was tweeted over 1,100 times and like on Facebook nearly 200 times. This website also saw a surge of traffic, which it handled gracefully thanks to some smart object caching and a highly reliable, distributed host.

Check out the article over at Smashing Magazine.

Customizing WordPress Admin – updated for 3.1 with new tips!

Back in June of 2010 I debuted a talk at WordCamp Chicago which I updated and shared in September at WordCamp Mid-Atlantic. Aimed at developers, Customizing WordPress Administration offered killer tips for consultants looking to tailor the other end of WordPress for their clients.

At the heart of the talk was a simple  Twenty-Ten child theme, with the focal point being a functions.php file loaded to the gills with hooks and functions that customize the branding and administrative experience (available for download here).

I’ve updated the child theme to 1.5; in addition to incorporating some suggestions, I’ve updated some small bits (like removing menu items) to take advantage of new WordPress 3.1 API calls and some other best practices (it now requires WordPress 3.1).

Read More on Customizing WordPress Admin – updated for 3.1 with new tips!