Something old. Something new.

They’re finally here! Yesterday afternoon, I went over to Girlie Press, an awesome local print shop in my neighborhood, to pick up my new business cards. Designed by my friend Kat Marshello, I think they’re a big step up my from old ones that has taken on a Zero Dark Thirty “redaction chic” look after I retired my old Michigan-area-code phone number.

Lessons Learned

While it looks rather straight forward and “professional,” a lot of thought went into it. In particular, I changed a lot of small things from the first card:

• Flatter feeling paper. It feels so good!
• New motto that better summarized the clients I work with. They’re not all nonprofits, but all driven by something more than just profit.
• The right phone number! I’ve been surprised, but, despite never meeting some clients, they still want that 206 phone number. Thank you Google Voice.
• Capitalized “MRW” in “MRWweb.com” and “info@MRWweb.com.” There’s a double-W in the middle of my domain that a lot of people miss and read “Mr. Web.”¹ I think this will fix that.

Generally, I really enjoyed having someone else take the lead on this design. Thanks, Kat! I think this greatly compliments my online presence and it feels fresh. It’ll represent me well for the coming years.

In Defense of the Business Card

A lot of people think the business card is dead. The thick stack of other people’s cards in my filing cabinet says otherwise.

The business card may be dead or declining in some industries, including parts of the “web design industry,” but I don’t plan on giving them up any time soon. Particularly when you’re on the smaller side—in my case, one person—I’ve found that there’s a baseline of “legitimacy” that I must display to get clients. Having a website is certainly #1, but a business card is probably in top 5 for one set of potential clients.

I’m headed to two meetups today, so it’s a perfect day for new business cards! The next time you see me, make sure you get one if you want.

---------------------
You just read New Business Cards [image] by MRW Web Design.

Experts Only

The article that started things was “Leave Accessibility to the Experts Please:”

There’s a fine line between inducing conversation and creating havoc. In the field of web accessibility (which is very complex and fragile already), it seems that this line has been crossed at least a couple times lately.

The author argues that non-accessibility-expert web design bloggers were raising questions about accessibility that had already been settled. By doing so, the argument went, these articles slow the spread of good accessibility practices that are already established.

Less Fear. More Cheer!

But this argument rubs me the wrong way and I found my thoughts being put into words in the cryptically titled, “We have to stop FUD accessibility.” What this weird title refers to is a certain style of  accessibility advice-giving—which I think the previous article almost advocates—that focuses on what not to do.¹ In particular, the author notes these frequently-heard criticisms:

• Fear: “You will be sued if your site isn’t accessible.”
• Uncertainty: “You will have missed something in the process anyway, see my totally different example here!”
• Doubt: “You don’t have enough knowledge anyway.”

I’ve recently come to believe that I’ve done this too much, and I’m working on focusing more on explaining how to do it right.

Something is Better Than Nothing

In a perfect world, every website would receive attention from an accessibility expert. I would also like a world-class chef to cook me dinner every night. Neither is going to happen.

That means that we need everyone who builds websites to do their best to understand accessibility. And the only way that can ever happen is for people to share their knowledge of best practices. Whether it’s via tweets, blog posts, or in-person conversations, the word has to get out somehow and I don’t think there are enough accessibility experts to do this on their own.

WordPress is Figuring This Out Too

Since I’m so involved with it, I want to take a small WordPress detour.

I think WordPress’s core development team is dealing with these same issues but in reverse. At present, there is a separate team for Accessibility. What this implies to me—and at least some of the people on the accessibility team—is that the other teams aren’t on the hook for making their features accessible unless a member of the accessibility team takes the initiative to get involved.

Like accessibility on the web in general, there are just too many new WordPress changes for accessibility experts to track each one. If WordPress is to take accessibility seriously, then everyone building anything must consider accessibility. The experts only have enough time to help on the more complicated issues.

Positive Thinking

People respond better to criticism when it’s sandwiched between compliments. People respond better to “No” when it’s phrased as “Yes, but…” Accessibility is important, and getting it right requires the efforts of everyone on the web. So I hope every web worker can become an accessibility-conscious web worker and let the accessibility experts focus on the hard stuff.

---------------------
You just read Making Accessibility Accessible by MRW Web Design.

What Are Post Formats?

Most simply, the post format describes the primary piece of content in a blog post.

With each format, you can store extra information for that post—”metadata”—and display it in ways tailored to a that type of content.

There are 10 formats to choose from:

• Standard (default)
• Aside
• Gallery
• Link
• Image
• Quote
• Status
• Audio
• Chat
• Video

The Post Format interface from WordPress 3.1 to 3.5.

So when posting, ask yourself, “What am I posting?” If it’s a link or video or gallery, you should select that format.

I’ll give some real-world examples of these formats in a bit, but let’s quickly cover the history and future of the feature first.

History of Post Formats

The post formats feature initially came with Version 3.1 of WordPress. Most people saw it (and still do) as an attempt to add the core feature of Tumblr to WordPress. Seen at right, the post formats were an optional feature enabled by certain WordPress themes. Selecting one of the options didn’t do anything unless your site was configured specifically to handle them.

Unfortunately, the first attempt at this feature was pathetic. The feature’s intent was opaque and the interface didn’t encourage use. Most casual users never had a chance of understanding it or using it successfully.

The Almost-Here Future of Post Formats

Now, post formats are looking really different. Every time you make a post, the possible formats are across the top of the editing page:

And there’s more! Instead of working on just a smattering of sites, formats are now available to ALL WordPress 3.6+ websites. If you don’t see it after upgrading to WordPress 3.6, you’ll need to enable it in the “Screen Options” tab of the Post editing page:

Enable or Disable the post formats feature in WordPress 3.6 with Screen Options.

The biggest improvement, though, is that most post formats now come with special fields for handling metadata associated with each format. If you use the Link format, there’s a field for a URL. If you use the Video format, there’s a place for a video file or embed code. See for yourself in this gallery:

Displaying Post Formats

Once you’ve entered posts in multiple formats, they’re displayed in different ways and incorporate those extra special fields for each format. Here’s a screenshot of a site using WordPress’s new Twenty Thirteen theme with four posts using different formats on it:²

In the new WordPress default theme, different post formats each get a special background color. From top to bottom, you see a Quote, Status, Image, and Gallery.

As another example, my site appends the format of the post (when it’s not “Standard”) to the end of the title like this: “A beautiful picture [Image].”

Most themes won’t display post formats as “aggressively” as Twenty Thirteen,³ but every theme will show the extra information like the Video⁴ or Link.

Why Should I Use Post Formats?

So that’s the “what” of post formats. But when I talked about this exciting upcoming feature at last month’s Seattle WordPress Meetup the very first question I received about them was “So what?”

Answer #1

Most blogs already post content in different formats but do so clumsily or unknowingly. This feature puts the choice of formats front and center. To make it abundantly clear how the formats should be used, here are some examples of the most commonly used formats.

Remember, the format you choose should describe the primary content of the post—primary in importance, not necessarily length. WordPress itself includes a short post prompt depending on the format you select. I include that prompt at the beginning of each example.

Standard

Use the editor below to compose your post.

“Standard” is the default format. If this is the first you’ve heard of post formats, then you’ve written blog posts using the Standard format. This post uses the Standard format because it includes lots of links, images, a gallery, and quotes! Just because post formats will be easier to use and more powerful doesn’t mean you have to use them all the time.

Link

Add a link URL below.

More and more, my favorite blogs these days share brief posts that direct you to a longer article or website by another author. The Link format is perfect for that, and I use it more  than any format besides “Standard.” One recent Link post on this blog is “The Alt Text Decision Tree.”

A lot of my clients use the Link format to highlight mentions of their organization in other media outlets.

Image

Select or upload an image for your post.

Two recent posts on this blog have used the Image format: “Just this once, Dogbert’s got it right” and “The Worst Practice Cycle.” In the first post, I wrote about and posted a comic, and in the second, I made a graphic which the post described.

Video

Select or upload a video, or paste a video embed code into the box.

Just like images. In “WordPress WYSIWYG Tips from WordCamp Seattle 2012,” I posted the video of my presentation from WordCamp Seattle 2012.

Quote

Add a source and URL if you have them. Use the editor to compose the quote.

I’ve never posted a Quote format post on my site, but here are a few scenarios where I think I might:

• At a conference, posting a particularly inspiring point from a presentation.
• Sharing an interesting comment from someone on Twitter, Facebook, Google+, or even the comments section of this site.
• Documenting a thought-provoking passage of a book.

Status

Use the editor to compose a status update. What’s new?

Statuses are like tweets—though they can exceed 140 characters. They’re short and ephemeral. I don’t use them often, but here’s one: “Quick Note to Email Subscribers (re: Growing Pains).”

Aside

Use the editor to share a quick thought or side topic.

My friend Grant looked up “aside” on Wikipedia as we struggled to understand that format’s intended use. It’s not WordPress-specific—or even technology-specific—but I think it’s just about perfect. Replace “character” with “author” or “blogger” and you’ll understand the aside format:

An aside is a dramatic device in which a character speaks to the audience. By convention the audience is to realize that the character’s speech is unheard by the other characters on stage. It may…represent an unspoken thought. An aside is usually a brief comment, rather than a speech.

I’ve started using asides for my three-to-five paragraph observational blog posts—frequently without a single link or image. Asides are short thoughts worth sharing even if not directly related to the normal topics of a blog. My most recent aside post is “My Devolution as an Email Author.”

Why I’m Excited about Post Formats

So far, my answer to “So What?” mostly regards the technical management and display of post formats, but I’m most excited about the overall effect of this feature on blogging.

Answer #2

I think this can help WordPress blog authors embrace the idea that blogging is a multimedia art form.

Many bloggers have a hard-and-fast definition for a blog post like “400-700 words accompanied by one large horizontal photograph.” I suspect that works for some, but for many others, there’s no reason to limit oneself to a particular format of blogging. Some images warrant a post of their own and may not need much or any accompanying commentary.

About 20% of all new websites run WordPress, so it’s not unfair to wonder what effect this feature addition⁵ could have on blogging as a whole. I don’t expect it to transform blogging overnight—for one, other services like Tumblr already offer similar features—but I expect this feature to become popular over time, and I’m excited to see the results.

Try it Out!

Many of us following the development of this feature worry that casual WordPress users will be startled by the new post formats interface and shrink away from it. Please don’t. The feature didn’t “click” for me at first either, but I’ve come to embrace it.

I’d encourage you to do the same, and if nothing else, don’t dismiss it right away; live with it for a month or two. In the end, I think it could greatly strengthen and diversify the contents of your blog and the blogs you read.

Talk Back

Still confused? Got a question about a specific format? Let me hear it in the comments!

---------------------
You just read Post Formats Are Coming! by MRW Web Design.

Here in Seattle we had some April showers but more sun than I remember from this time last year. Throughout the month, I did some great coworking, presented at the Seattle WordPress Meetup, and, of course, did some tweeting. It was such a busy month that I just couldn’t whittle it down to ten tweets, so you get two bonus tweets. Don’t miss the “catalyze” pun!

It’s never a bad time for more coffee.

— Mark Root-Wiley (@mrwweb) April 4, 2013

Just sent off a first round of design mockups to a big client. This is always one of the most nervous moments of a project for me.

— Mark Root-Wiley (@mrwweb) April 4, 2013

Accessibility isn’t about building web sites for assistive technologies, but about building for people that may use assistive technologies.

— Derek Featherstone (@feather) April 4, 2013

Presentation tip: “Here’s what my org did” is cool, but remember to add “Here’s how your org can apply what I learned” #mnnptech #13ntc

— Yesenia Sotelo (@silverbell) April 10, 2013

Thanks to all who came to the #wpseattle WordPress 3.6 presentation last night. Here’s the feature list with links: bit.ly/wpsea36

— Mark Root-Wiley (@mrwweb) April 12, 2013

Paul Krugman’s take on bitcoin: Adam Smith would think this is a horrible idea. nyti.ms/1549ONy

— Mark Root-Wiley (@mrwweb) April 12, 2013

“You want an accessible, usable website?…don’t remove the underline on text links” bit.ly/YV6eSn HT @webaxe #ux #design #webdev

— Jennison Asuncion (@Jennison) April 14, 2013

CTRL + SHIFT + V for Paste as Plain Text in Chrome. Beautiful.

— Mark Root-Wiley (@mrwweb) April 22, 2013

Props to the guy one table over with a dual monitor setup…in a coffeeshop. That takes commitment.

— Mark Root-Wiley (@mrwweb) April 24, 2013

I will stop hating the word catalyze only if we all agree it means “the way cats make decisions.”

— Scott Berkun (@berkun) April 24, 2013

There’s a toddler outside the window spinning an upside-down bike’s pedal and sticking his fingers in the spokes. This won’t end well…

— Mark Root-Wiley (@mrwweb) April 24, 2013

Nothing quite like the triple-take you do when running into a client at a middle school science fair nowhere near where either of you work.

— Mark Root-Wiley (@mrwweb) April 26, 2013

---------------------
You just read Fake Follow: April 2013 by MRW Web Design.

1. I have strong feelings about using the word and popular concept of “intuitive-ness” in web design.
2. I like Dilbert.

It seems that Scott Adams, author of Dilbert, isn’t too far behind. In this April 24th, 2013 comic, Dogbert calls Dilbert out for wanting to use his intuition.

Panel 1: Dilbert: “I wonder if I should rely more on my intuition to make decisions.” Dogbert: “You mean guessing?”
Panel 2: Dilbert: “No. Guessing is totally different from intuition because of the… um…”
Panel 3: Dilbert: “These things make sense in my head!” Dogbert: “Is there room in there with all of the intuition?”

Even more than the use of “intuitive,” I think this gets to a point I tried to make in discussing the book Wait. There are moments when we can use our “intuition” safely, but what we’re really doing is applying expertise on some subject developed over thousands of hours of experience.

Without any background knowledge and experience, Dogbert’s right: you’re just guessing.

---------------------
You just read Just this once, Dogbert’s got it right [image] by MRW Web Design.

But I think I have a good reason for doing this. Email is a terribly unsubtle means of communication. A one-liner email like “Good job.”has no contextual clues like tone of voice and facial expression to judge the intended meaning.¹ Does the person think I did a good job or are they unimpressed but not motivated enough to give real feedback?

However crude, these “tacky” writing techniques embed additional information about how the author intends the recipient to interpret their message. “Good job!” is much less ambiguous. So is, “Hooray for tax season… :(”

Now of course, emoticons can go wrong and you still have to consider your audience, but emotion is such a critical piece of communication that gets stripped out of an email unless you work hard to include it. It may seem odd, but I think these techniques get my emotional information across.

Another person’s partial solution to this issue has been “VSRE.” Standing for “very short response expected,” this could be something you throw into a subject line so the recipient knows they can just reply with a short “Yes,” “No,” or “Maybe next week” without hurting your feelings.

I strive to engage with my clients. That requires building a relationship with them that email isn’t all that great for, but it’s a necessary tool of the trade. I’m doing my best to make it work.

---------------------
You just read My Devolution as an Email Author [aside] by MRW Web Design.

There are certainly meaningful differences in quality between certain tools, but it dawned on me during this discussion that the tool wasn’t completely at fault when things don’t work out.

We often search for online tools that work the way we want them to work in the abstract, but there are reasons to follow a tool’s lead and learn a new way of doing things. In a simple example, we don’t complain about light switches because they’re not buttons, we learn how to use them the way the designer thought was best.

In helping people use my second plugin, Feature a Page Widget, I’ve found that some users don’t understand the way that the widget stores the information it displays. I’ve spent a lot of effort to show how it works more clearly, but I haven’t considered changing the fundamental way the widget works. I designed it to solve a particular problem in the way I think is best.

In the case of project management tools, each developer probably had an abstract workflow in mind and built a tool that best facilitates it. If a piece of software uses a calendar-driven interface and that’s not your style, then it isn’t for you.¹ But if you start using it and get stuck on how to do a particular task, the problem may not be with the software but rather with your assumptions about how it will—or should—work.

So at your first moment of frustration, try trusting the developer and figuring out the intended use of whatever you’re using. You might just learn a better way to do something.

Photo Credit: Martin Crathae via Flickr.

---------------------
You just read Let Your Software Be Your Guide [aside] by MRW Web Design.

Here’s the “code” to embed a YouTube video in WordPress:

http://www.youtube.com/watch?v=KIePsbJSS04

Yup. That’s it. Copy the URL, paste it on its own line, and voilà! Video.

Is it just for YouTube?

Nope! WordPress supports lots of services and keeps adding more. They do this by supporting an independent standard called “oEmbed” that lets you easily embed media from one site on another.

Here’s the full list of embeddable websites on the WordPress Codex. It includes other popular services like Vimeo, Twitter, Hulu, Scribd,¹ Instagram, and more!

Why Isn’t It Working?

Unfortunately, there are a few small but tricky caveats. As I mentioned, the URL to embed must be on its own line. This means that:

• The URL must NOT be a link. It should just be plain, unclickable text.
• You can’t align the URL. (If you do, then there’s additional formatting added to the URL and it’s no longer “on its own line.” This is a pretty irritating technical caveat.)
  • If you do this, you must use the “Remove Formatting” button to fix it or just delete the link and start over.
• It won’t work for all URLs. For instance, if you try to use the URL from YouTube’s embed code (e.g. http://www.youtube.com/embed/KIePsbJSS04), it won’t work. Make sure you’re using the most “vanilla” version of a URL if you’re having trouble.

Advanced Embedding & Work-Arounds

If you do need to align your embedded media or change its width or height, you can use the embed “shortcode” (remove the extra spaces in both of these examples!):

[ embed ]https://www.youtube.com/watch?v=KIePsbJSS04[ /embed ]

That will embed a shortcode for sure, no separate-line needed.

To set a specific size, use:

[ embed width="100" ]https://www.youtube.com/watch?v=KIePsbJSS04[ /embed ]

Now, your cat videos will be kitten videos. You can use “height” just like “width” in the example above.

UPDATE, April 9, 2013 3:01pm PST: My good friend Mike alerted me to the fact that the above examples weren’t working. That was a bummer and the should be fixed. However, it also reminded me the popular Jetpack plugin interferes with the embed shortcode used above. This means you have to use their special shortcodes ([youtube], [vimeo], etc.) instead of [ embed ] if you need to change the video’s size.

Why Shouldn’t I use the Website’s Embed Code?

Why would you want to deal with this?

Good question! Many websites offer their own HTML embed code that you can copy and paste into your post. This will work, but I don’t recommend it for a few reasons:

• The WordPress was is shorter and faster. Pull up what you want to embed, copy, and paste.
• It’s easy to accidentally break HTML code that you put in the WordPress post editor.
• If a service changes their embed code (which happens all the time), a new version of WordPress will take care of using the newer and improved embed code.

Cat Video

Yeah. That example video. It’s a cat video. Of course. You’ve suffered enough with words, so just sit back and enjoy the fruits of WordPress and YouTube synchronicity:

https://www.youtube.com/watch?v=KIePsbJSS04

Coming Soon! Easy Hosted Audio & Video Embedding

WordPress 3.6 is currently scheduled for release on April 29. One of the exciting new features it brings is the ability to insert audio and video files straight from your WordPress media library into the WordPress editor. Previously, doing this would only insert a link to the file. You needed a plugin to make them playable directly on your site. I still think there are some great reasons to host your video and audio files on third-party sites like YouTube—where you get free really fast hosting and access to their huge audience—but this will open up another easy option for people who want to show videos on their site.

If you’re in Seattle and liked this feature preview, come here me talk this Thursday at 6:30pm with Bob Dunn at the WordPress Seattle Meetup about the other upcoming features in WordPress 3.6.

---------------------
You just read Embeds in WordPress: The Easy Way to Include Media by MRW Web Design.

And that’s what excites me about this article. It’s not about web design, but it is about client work. Particularly, it’s about getting started with a new project and identifying what the project’s goals really are. They aren’t always what the client says, and sometimes the client doesn’t even know!

Odds are, your clients hired you to solve one problem or another…[P]erhaps you ought to start your process a step back and find the right problem. It might be best to find the issues your clients’ client dealing with.

Read “Start Projects With Phase Zero” on 99u.com.

---------------------
You just read Phase Zero [link] by MRW Web Design.

This month featured some clients flirting with fame and some though-provoking links on tech & sexism. I live-tweeted all day from the Digital Inclusion Summit and included one of those tweets here. As always, email subscribers have to come to the site. Sorry!

It’s not everyday you have a client on ESPN.com :) es.pn/YJD2sF Nice job, @oarnorthwest!

— Mark Root-Wiley (@mrwweb) March 4, 2013

Ever wondered why we call stuff “boilerplate?” bit.ly/WEiwdw

— Mark Root-Wiley (@mrwweb) March 4, 2013

How have I never heard of Plain Language before today? 1.usa.gov/WHWjAu

— Mark Root-Wiley (@mrwweb) March 13, 2013

This just happened… Client: How do I fix this? Me: Let me send you the limerick I wrote about that. bit.ly/ZTNmjg #codeispoetry

— Mark Root-Wiley (@mrwweb) March 13, 2013

GOOGLE READER WHAT ARE YOU DOING WHY ARE YOU GOING AWAY OMG PANIC AAAAAAAGGGGGGGGGGHHHHHHHHHHHHH

— Mark Root-Wiley (@mrwweb) March 14, 2013

Great point! With technology’s rapid rate of change, the #digitaldivide is a moving target. Digital literacy must be maintained. #disummit13

— Mark Root-Wiley (@mrwweb) March 14, 2013

WordPress plugin developers who release their code for free, then defer donations to non-profits helping the world… I heart WordPress.

— Grant Landram (@GrantLandram) March 18, 2013

Are You Making These Common Website Navigation Mistakes? kiss.ly/YvuCeo

— KISSmetrics.com (@KISSmetrics) March 25, 2013

_Excellent_ post on sexism in tech. “Death by 1000 papercuts.” bit.ly/10LgDA2

— Mark Root-Wiley (@mrwweb) March 26, 2013

Went to coffee shop and forgot mouse. Seriously experiencing phantom mouse syndrome. I keep grabbing my glasses case and moving it around.

— Mark Root-Wiley (@mrwweb) March 26, 2013

---------------------
You just read Fake Follow: March 2013 by MRW Web Design.