Video: how to quickly mock up changes on a live website
You may have come across the “Inspect Element” feature in Chrome… and if you’re like most people, said, “Whoops!” and closed it.
Believe it or not, this feature is incredibly useful when you’re making small changes—especially when you want to show a series of options to a client.
Using this tool along with a screen capture tool, you can quickly test and show tweaks.
- As I’ve alluded to above, this approach is fast. No waiting for your graphic design app to open, no detailed export workflow… you just make the change and go.
- Once you’re at the stage of working with a live or near-launch website, accuracy is a big deal. While the differences between Photoshop and browser font display were fine when doing initial mockups, it’s much more helpful to see what it will actually look like on the live site.
- When experimenting, it’s nice to know that you’ll always have the original intact. This is especially important on a live site. Working within the browser lets you get it just right, without having to make a full clone of the site, and without inadvertently introducing new bugs with your changes.
What you’ll need*
- Screen Capture (by Google)
- Basic CSS skills
* Safari, Firefox, and other browsers also have similar tools, so you don’t need these exact ones if you have others you prefer.
Watch and learn, Grasshopper
Keep notes as you code
I mentioned this in the video, but keep track of the changes you’re making. Not only will it keep you from losing them, but if you’re showing the client three variations, you’ll want to remember exactly what it was you did for each of them!
I usually just keep a document open in my code editor where I copy/paste fragments. I’d be a little more formal about labeling them there if I was working on a long-term project, but most of the time, I’ll know the winner a day or two later, so I keep it casual (but effective).