Getting to “Yes” with Clients Using In-Browser Mockups

One of my recent WordPress clients was on the fence for months—months filled with constant requests for information, vague Excel roadmaps, and “Can WordPress do this?” discussions.

After all this, I finally settled on something that worked: I sent over an in-browser mockup. In other words, I found a theme I thought would be a beautiful choice for her site, mocked up a few options for how the homepage could look, and sent them to her as PNG screenshots. She was delighted, and the project’s been bounding forward ever sense.

People Need to See Things

In-browser mockups let your client see pieces of a site before you build it.

The project was stuck largely because my client couldn’t picture the solution I hoped to create for her. Because she didn’t want to pay a huge sum of money without first understanding this solution, the process bogged down in endless requests for information.

In-browser mockups are hugely helpful for this, because they let your client see pieces of a site before you build it. “A picture is worth a thousand words” (probably significantly more in web design discussions), and in-browser mockups help you create pictures quickly, easily, and with no start-up costs—not even a theme purchase.

Out of Nowhere, Let’s Talk About Subway

Since I can’t show you my client’s site, let’s pretend that my client is actually Subway. In this fantasy world, Subway are convinced (possibly wrongly in their case) that WordPress is the right solution for them, and they plan to build it (definitely wrongly) on top of an existing commercial theme.

Why did I pick Subway for this example? Only because their current site is horrible, and I don’t want to pick on a smaller business’s site that would actually be a good use case for a WordPress site plus a commercial theme.

Communicating Theme Choices with Clients

So Subway’s people are wondering: What WordPress theme should they use, and how do they know that I’ll do a good job for them?

For my part, I need to tell them which theme I’m excited about using for their site—in this case, a theme called Foodica—and get them excited enough both about the theme and about myself as a developer that they’re willing to move forward.

Let’s look at two options:

1. A Theme Demo Page Plus Reassurance

“Hey guys, I’ve found a theme that I think will be great for you. Once it’s customized it’ll be a great fit, and consistent with the Subway brand. Here’s the theme’s demo page:”

Not very compelling, right? Our second option:

2. An In-Browser Mockup

“Hey guys, I’ve found a theme that I think will be great for you, and done a bit of work to visualize how it would work with Subway’s branding and content. Here’s a screenshot:”

As the image’s URL shows, this is the same Foodica theme demo—but altered in-browser to have significantly different layout, and to use Subway’s branding and content.

To me, this makes it a lot easier for the client to feel how this process (this theme, and this developer) are going to lead to a good result. In not very much time, you’ve given them something they can actually see, understand, and get excited about.

How to Do In-Browser Mockups

Use Chrome’s Developer Tools (or a similar tool in another browser) to manipulate the page’s HTML DOM and CSS styles as needed.

Glad you asked! You do this by using Chrome’s Developer Tools, or a similar tool in Firefox or other browsers, to manipulate the page’s HTML DOM (document object model) and CSS styles as needed. To share the results with your clients, take screenshots of your progress, and save those as image files—or scroll around the page and save that as a screen-recorded video file.

Creating in-browser mockups is very quick if you know what you’re doing. The mockups I created for my client that got her off the fence took less than an hour of work—and only took that long because I got absorbed in the process and created lots of variants.

I’ve created a quick video tutorial using the Subway example. It’s got live examples of a lot of the most useful practices listed below. (The tech piece starts at 3:45):

If you’re confused about how to work in-browser in general, check out our earlier article, Why Chrome Developer Tools is Every WordPress Developer’s Best Friend. It covers most of the bases.

How to Approach the Process

If you understand your browser’s Developer Tools variant and know HTML and CSS, you’re set! Just keep the following in mind:

Quick-and-Dirty is Fine

Remember, you’re just trying to get to something that looks right in-browser. Feel free to use inline styles, display: none;, negative margin hacks, and what have you. When you build it for your client, you’ll do it right.

Careful Not to Reload!

When you reload your browser tab, you’ll lose all your changes. So take screenshots at regular intervals, and make sure not to fat-finger anything that would reload the page. In particular, be very careful not to left-click any links on the page, like in the nav.

Use Existing Elements

It’s likely that your client wants to preserve elements of her existing site design: logo, color scheme, or typography. Simply lift those elements from her existing site, and place them as needed—while getting rid of the pieces of the existing site that are musty or badly designed.

This is the single most important piece to make a foreign theme demo feel like “home.” Remember that clients typically have very little idea what is and isn’t customizable—so showing them which pieces can stay consistent with their existing brand is a great comfort.

Use Existing Content

If you reword the theme demo’s navigation so it has the same links as the client’s current site, she’ll understand a lot more about how the site will look and work. Similarly, if the homepage has actual content rather than Lorem Ipsum or whatever inane sample text the theme developer chooses,

In my recent work with my client, my use of a large, beautiful hero image of her product was a major factor that swayed her toward using the theme I was suggesting.

Send Lots of Variants

If you’re toying with a couple of color schemes, simply take, and send, screenshots of both. Sending a few options for multiple design elements helps your clients see customizability actually happening, and it gets them involved in and excited about the design process.

Go Forth and Hack!

You should now have a sense how to hack theme demos to communicate design ideas with potential clients. This can turn your browser into a tool that makes your clients excited to get started, rather than apprehensive and confused. Enjoy, and we’d love to hear questions or comments below!