Respectful UX

Something that isn’t often discussed in conversations about UX is an implied respect for the user.

Do you ever land on a web page that contains information you need, only to leave out of frustration with the experience?

Maybe the ads were overwhelming. Maybe they shoved a bunch of opt-in offers down your throat. Maybe the author rambled for ten paragraphs instead of getting to the damn point.

All of these things show a lack of respect for the user. It’s a way of saying, Our performance metrics are more important to us than you or your time.

It’s okay to have ads. It’s okay to sell stuff. But when those things compromise the user experience, they also compromise your brand image and longevity.

Here are some ideas to provide a more respectful user experience:

  • Keep advertising tasteful and minimal.
  • Don’t autoplay audio or video—especially in third-party ads.
  • Cool it with the aggressive popups. If you’re going to use popups, time them in such a way that they don’t interrupt me while I’m consuming your content. Exit-intent popups are fine.
  • I don’t want your stupid push notifications. The only scenario where these prompts are okay is if I explicitly ask you to send me notifications. Here’s an easy fix: add a “Get Notifications” button to your site to trigger the request. Those who actually want them will click.
  • Don’t divide your content into pages just to increase page views and ad impressions. You’re wasting my life just to make a few extra pennies.
  • Don’t ramble for multiple paragraphs just to inflate your word count or keyword density. It’s okay to provide background, but please get to the point and solve the reader’s problem ASAP.
  • Keep your promises. Don’t lure people in with clickbait titles and then underdeliver with shitty content.
  • Give your users more than one way to contact you. A contact form can be convenient, but you should also have an email address and maybe even a phone number.

Every great relationship is built on a foundation of respect.

Do you respect your users?

How To Fix WordPress Image Alignment & Text Wrap Problems On Mobile

Left- and right-aligned images look beautiful on desktop browsers, but sometimes with responsive WordPress themes you end up with something like this:

Yuck. Because of the skinny portrait-style image, the text is wrapping improperly on mobile, and it looks like a mess. Very frustrating, but with a couple of lines of CSS, we can clear this right up.

The approach I’ve found most effective is to automatically center your left- and right-aligned images on smaller screens. To do this, open up the stylesheet for your child theme, or the Custom CSS section of the theme Customizer, and drop in the following code:

@media only screen and (max-width: 600px) {
	figure.alignleft, img.alignleft, figure.alignright, img.alignright {

The logic here is simple: on screens with a width less than 600 pixels, images aligned to the right or left (via WordPress’s default style classes) will be centered via float:none, margin-left:auto, and margin-right:auto. (Feel free to modify the max width to suit your needs.)

The result? The image in the example above now appears centered on smartphones, but still perfectly right-aligned on larger screens:

Much better!

Making Website Intros Great Again

Long-time web users will likely remember the Flash website intro craze of the early 2000s. That era came to an end for a variety of reasons, including security risks, browser compatibility, and the sheer impracticality of a long intro sequence in a world of growing impatience. These days I would never advise the use of Flash in any capacity—much less as the backbone of a website.

However, I actually went with a similar concept in my design choice for the Merrill X website. The intro/teaser is built on HTML5 rather than Flash, but it’s certainly reminiscent of that old technology.

I mainly just wanted to get something up and running quickly, and for the few people who visit the site directly, I think it provides a solid rundown of what we do and how to get in touch.