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

Subway altered

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:”
Subway raw theme demo

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:”
Subway altered

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!


4 Responses

Comments

  • I used to use the Inspector to do mockups on ThemeForest templates. Now I just use Beaver Builder (a WordPress plugin for drag and drop layouts) to play with layouts and draft. Since the changes are actually on the page, I’m half-way home to finishing the site.

    I think it also helps that I don’t sell websites or redesigns anymore. Instead, I solely focus on outcomes like “getting more leads”. That way, I get the client out of the business of telling me how to make their site look. You know, like this: http://theoatmeal.com/comics/design_hell

    http://s3.amazonaws.com/theoatmeal-img/comics/design_hell/4.png

    Everybody gets Beaver Builder and nobody gets to complain about aesthetics because that’s simply not part of the deliverables.

    • fredclaymeyer says:

      Ha, love that comic…

      Definitely agree on the focus on outcomes! That’s really the way to go—ties in with value-based pricing, too. Only thing I think I’d add is that clients often do make purchase decisions based on how things look—so having a quick way to create on-target-looking things is a great tool to have available.

  • Piet says:

    next time you record a video, you might want to think to
    a. script it first
    b. make a plan so you actually know what you’re going to do

    idea is nice, but the execution is so poor and reflects on wphout as a whole

Pingbacks