 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.
0 Comments
Leave a Reply. |