First things first: Lots of people already know what a responsive website is. If you’re one of these people, you don’t have to read this article. (Although you still may gain an insight or two.) 
 
But more often than not, here at Copel Communications, when we mention “responsive website” to clients or prospects, we’re answered with a blank stare. It’s not really a term you hear bandied about very much. Which is odd, because responsive websites are pretty much the norm nowadays. 
 
So what are they? What makes them different from, oh, say, non-responsive websites? Do you need one? And if so, how can you get one? 
 
Two steps back
 
Before we answer all of those questions, let’s step back and consider some basics about web design. 
 
Let’s start with the most basic question of all: Why does a website exist? 
 
Cue the Jeopardy! “think” music here... 
 
Correct: A website exists to serve up information in an easy-to-consume fashion.
 
There ya go. Think of it this way: After the advent of the internet, but before the advent of the World Wide Web, you could get information online. It was in things like bulletin boards and long scrolling pages of text with no images. Sounds horrendous, because it was. Although it was actually ground-breaking at the time—just being able to access that info from pretty much anywhere. 
 
The web, as we know it today, simply made that same information easier to consume... if the then-new technology was utilized properly. The same guideline applies today: If you use small, light gray text atop a white background, it will still be hard to read, and absolutely no service whatsoever to your audience. 
 
So. The web introduced HTML (hypertext markup language) coding, which allowed for the addition of pictures, and different fonts and colors and boxes. So no matter how you got yourself to the web, whether it was a PC or a Mac or it was the Netscape Navigator browser or Firefox or whatever, you’d see the same thing. It imposed order on everything, and democratized the viewing of content, much the same way that the PDF imposed order on what had been a Wild West of fonts, pixels, and vector art. 
 
Things move forward
 
The exciting advantages of basic HTML had their limits. You couldn’t select the exact font you wanted. You were limited to basic running text. Laying out for the web was more an exercise in geek-like coding than artistic page design. 
 
But the technology advanced. There were frames (remember those?), in which there would basically be a horizontal or vertical divider on a page, with each side supporting its own discrete content, which could scroll separately from what was beside or above it. Sounds liberating, but it was actually maddening for viewers, who were stuck trying to scroll inside little walled-off areas of a page. Not exactly “content served up in an easy-to-consume fashion.” 
 
Shortly after that came “Web 2.0,” which is basically the addition of functionality in which the viewer can also post information. Voilà: Facebook. That doesn’t affect our “responsive website” discussion very much. 
 
(You thought we’d lost the thread? Shame on you.) 
 
But the advent of new devices does. The iPhone is really what changed it all: A tiny portable device that could view web pages. This was followed by all other brands of smartphones, plus iPods, iPads, and other tablets, you name it. Lots of different screen sizes—on screens that automatically change their orientation from portrait to landscape when you physically pivot them—and, later, with ever-higher resolutions, too (think “Retina Display”). 
 
A new sheriff in town
 
From the minute the iPhone launched, every website on earth became outdated. Because it would look like junk on the iPhone. If the iPhone had never taken off, nothing would have changed. But it did, and the world was forced to adapt. 
 
In the early days, there would be the “mobile version” of any given website. Mind you, this needed to be created separately, and hosted and updated along with the “desktop” site. Clearly a huge pain. And sometimes you’d get the wrong site on the wrong device: Ever sit at your desktop machine and see a page with just three enormous buttons on it and not much else? That’s when you were served the wrong site, which often had an “m” in its URL, to signify “mobile version.” 
 
When tablets came along (again, Apple had the lead here with the iPad), this created more headaches for web designers: now there was a third version of any site to create and manage. 
 
It was time for someone to impose PDF-like order on the situation. 
 
Hence the “responsive website.” 
 
On the move
 
A responsive website, quite simply, is one that automatically adapts to whatever screen it’s being viewed on. Amazing! It “knows” whether it’s being displayed on a desktop, laptop, tablet in portrait mode, phone in landscape mode, and so on. 
 
End of discussion. Right? 
 
Of course not. 
 
If it sounds too good to be true... 
 
Overall, we like responsive websites. CopelCommunications.com is responsive. If you’re on a desktop or laptop, test it out: Simply resize your browser window, and watch everything re-size and auto-populate on its own. Pretty neat. 
 
But there are some shortfalls. As a designer, your hands are rather tied when you’re working on a responsive website. It’s based on a template which uses an algorithm to determine what kind of screen it’s on and thus what-goes-where. So if you’ve got a two-line headline with a certain line-break that you love, don’t think that it will show up that way for everyone. It could be one line; it could be four lines. And the line-breaks will show up... wherever.
 
Ditto for images, boxes, and buttons. They’ll move and wiggle and bounce and end up in usually a good position that affords readability... but not always. 
 
So what do you do? Two things: 1) Test, and 2) Compromise. It’s easy to test a responsive website you’re designing; all you need to do is re-size it onscreen. And of course you can view it on other devices. Look for visual issues you need to correct. 
 
And be prepared to compromise. It’s a basic trade-off of responsive websites. If you see an iteration that really looks awful, ask yourself 1) Can you live with that? 2) How many viewers from your target audience would likely see it that way? and 3) If you fix that configuration, how will it screw up all the others? 
 
Responsive websites are a great tool, but they can be tricky. Need help with yours? Contact us. We work on these kinds of projects all the time. 

Consider this: You’ve worked your tail off to create a new offering for clients and prospects, and can’t wait to show them an onscreen demo of how it all works, whether it’s a software application or a new business process or service offering. You click “Play,” and... 
 
Crickets. 
 
The thing sucks. 
 
Why is that? As we mentioned, you worked your tail off on this thing. We’ll trust you: this offering is really good, perhaps even breakthrough. Then why doesn’t any of that translate into your screen demo? Why is it, well, boring?
 
First: Don’t beat yourself up over this. It’s a common problem. Second: There’s nothing wrong with your new offering. What’s wrong is how you translated it to a screen demo.
 
This can be fixed. But it requires more effort than you probably imagined. However, it’s well worth it. 
 
“A” does not equal “B”
 
Let’s imagine you’ve got a way of getting something done for potential clients, and it all runs onscreen, like software, automatically. That’s quite a feat. If you can literally click “Start” and something just starts chugging along on its own—robotic process automation and advanced analytics come quickly to mind—then that’s amazing and paradigm-shattering. All of your development effort was well worth it. 
 
But here’s the problem: Your audience, and it doesn’t matter who they are, are inured to seeing slick video production, especially for whiz-bang demos. Just watching a process click through its motions is, viewed through this lens, a snoozer. 
 
Think about that. Your solution is brilliant. But the brilliance doesn’t come through simply by showing it in action. How bizarre is that? 
 
Yes, it’s weird. It’s also unsurprising, given our fast-pasted media world and atrophied attention-spans. Importantly, it’s a truth you need to accept and embrace if you want your offering to succeed. 
 
Borrow from the best
 
Let’s make a distinction here: “Live demo” vs. “recorded video.” You’ve seen lots of live demos; if you’ve ever been to a trade show, they’re on every big screen in every booth, with some presenter talking about what’s happening. (The trade shows have mostly gone virtual these days, but that hasn’t altered the reality.) Lots of times—think of when Apple unveils a new feature for one of their computers—there will be two people onstage: A presenter, and a hardcore geek who’s actually sitting at the computer, frantically making all the stuff happen. The presenter is slick, too: he or she knows how to fill time while images load and screens update (or don’t!), so things look faster than they are. 
 
You could try and emulate this approach. But why? It’s not worth it. It’s best left to those specialized performers. And, best of all, you can outdo it. Easily. 
 
The trick here is recording. Don’t fall into the “it must be presented live” trap. Even if you are going to be presenting live (e.g., if you’ve booked a Zoom call with a prospect), you can simply click “Play” on the video of the demo you created in advance. You’re clicking the “Play” button in real-time, so that’s live. But the rest isn’t. It’s pre-recorded. It’s canned. It’s ready to go. 
 
Why? Because going that route ensures that it’s slick, it’s quick, it’s exciting, and it’s flawless. 
 
Altering time
 
One of the biggest problems with actual live demos is the amount of time it takes for mundane things to happen: for stuff to load, for screens to populate, and so on. That’s why we’d mentioned the slick presenter you’ll see at trade shows, who knows what to talk about during these gaps, to try and hold your attention and distract you from the fact that there are gaps in the first place. 
 
But when you go to recorded video, the solution is a no-brainer: Simply edit out the gaps. You’ve seen this before. Think of any TV spot for a new smartphone or smart watch or whatever. You’ll hear exciting music, and see some gorgeous person tap their little screen, and all kinds of magical stuff happens instantly in their lives, and if you look closely at the bottom of your TV screen, you’ll invariably see the little disclaimer: “Sequences shortened.”
 
Ta-dah. There it is.
 
You know it’s been edited to appear more responsive. Do you care when you watch that TV spot? Not really. If they’d shown it in real-time, 1) the spot would be boring, and 2) they couldn’t even showcase their new features in the 30 seconds allotted. Hence the disclaimer. 
 
So that’s the first trick up your sleeve. Simply edit out what you don’t need. Your audience—in this case, your prospect or client—won’t blame you. To the contrary, they’ll thank you. 
 
But there’s one more thing that you could, and should, do. 
 
Setting the context
 
As we’d mentioned at the outset, whatever it is you want to demonstrate is solving an existing problem for your prospect.
 
Why, then, would you ever, ever dive into the solution without setting up the problem first?
 
That’s an essential bit of storytelling. And it’s crucial to the sale. 
 
So don’t open your demo with your demo! Open, instead, with a setup of the problem that your demo will solve. And make that problem sound as impossible as you can. The higher the bar, the more satisfying it is to clear it. 
 
You can phrase this as questions, or can-you-relate statements: “Ever try to [do something] when your only tool is [existing tool]?” Or: “Compiling a hundred reports from over a thousand sources can seem like an insurmountable challenge, especially with deadlines looming and regulators breathing down your neck.” That kind of stuff. 
 
And when we say “statements,” we’re talking “voice-over.” Spend the hundred bucks on Fivver and get a nice one. 
 
So in case you hadn’t inferred it yet, this requires the writing of a video script. Two columns. With images on one side, and audio on the other. 
 
Audio. So, of course, there’s music. The music alone will save your butt; it can make a rather leisurely demo seem like it’s flying by. It will add impact and drama to your voiceover. 
 
And take advantage of all your other video tools and options. When you describe the problem/set-up, show it. Use titles. Employ inexpensive stock footage. And when you segue from the setup to the payoff--i.e., when you finally get to the (edited-for-time) screen-demo itself—help the viewer along. Use call-outs, arrows, sound effects. Blur out extraneous info. Zoom in on the important stuff. Help the viewer to see the elements that you take for granted. Put it this way: Before you were old enough to drive, a car’s dashboard looked like a sea of dials and gauges. But today, when you’re actually driving, you now know exactly where to look, and when, to get the info you need. Think of your audience as “too young to drive,” in a good way, and help them along. 
 
Get help
 
We mentioned, earlier, that this isn’t exactly easy. But it is so worth the effort. We know: we help lots of clients with these kinds of challenges all the time. If you need help, we can provide it. Simply contact us today to get started.