eFrog Digital Design |

Hello tadpoles…

Time for another fun-filled episode of… The Whacky World of WordPress, with George, your favorite frog! Tada!

OK, ok, just kidding. Kind of …

So. There’s a new kid in town, and everyone’s talking about her. She’s called “Responsive Design”. And of course, all the boys are saying they know her, and what she’s all about. And, like boys ARE, y’know, they’re all opinionated, and “I know her better than you!” and stuff.

But really, who is she? What’s her angle? What’s her story? Where does she come from? Should we get to know her? Well, it’ll take a while, but it’ll be fun, so pull up a chair, and Let’s take a dive into the history of web-design a little. Maybe there are clues there…

Back in the day, websites were pretty static, both in content and layout. THIS big and THESE words. Done. They were like this, because we were just learning what was possible, and honestly? The markup language (HTML) wasn’t very “jazz-hands”, at all. It allowed you to put stuff up there on the web, but that was about all.
Sidebar: This caused a really ugly time, where, in an effort to get some movement going, folks started adding flashing things, and scrolling things. That could never end well, and didn’t.

Pretty soon, we started to get restless (and quite freaked out with the flashy/scrolly things, if we’re honest…), and wanted more from our websites. And around that time, we started seeing dynamic websites, where instead of just serving up the requested static pages with their boring staid words and pictures, the web-server would run a program, which would create the page to be served, on the fly. That meant that a web-page could give you the time, or weather…Stuff that changed, depending on when you asked for it, see?

It. Was. Awesome. And the web changed completely because of it.

ASP, JSP, PHP and other programming languages were born and flourished, and we started to get used to websites that interacted with us and gave us data back, but they were all still pretty much static, in their design layout.

Around this time, the code was getting pretty messy, and a couple of smart folks decided to separate the styling stuff, out from the content stuff. In a fit of grandiose, they called the technology Cascading Style Sheets. Web developers around the world took one look at that mouthful, and promptly shortened it to CSS. CSS took all the font, size, colour and such-like coding, and moved it into a separate *.css file, which the HTML page linked to. At the same time, and as a huge bonus, CSS removed the need to repeat all that stuff, for each element on the page. You simply styled the tag, and everywhere you used that tag, the styling applied. Genius.

It. Was. Also. Awesome. And once again, the web changed completely because of it.

Now, at THIS time, a very bad thing (much worse than the flashy/scrolly thing) began to creep into web design. Folks wanted that bit THERE and that bit THERE on the page, and the basic markup language just wasn’t up to it. But there was a hack. See, HTML has a table tag. You could use a table. And if you were imaginative enough, and unprincipled enough, you could even nest tables within tables, and merge cells, and on and on… And pretty soon, even Steven Hawking himself could not read your code. It was a mess.

Quick as a flash, some more smart folks saw this, and pretty much like Gandalph vs. the Balrog, they intoned “You SHALL not pass.” and they added positioning alchemy to CSS. Sorted. A virtual Tsunami of young web designers embraced this new idea, and pretty soon, it was trés uncool to use tables. Of course, you also now need a degree in middle-earth sorcery to understand why that do-hickey floats, pads and visibles where it does, but still, it’s all good. We don’t use tables anymore.

Phew. We. Dodged. That. Bullet. And once again, the web changed completely because of it.

For a while all was quiet. The only sound was that of industrious designers and devs, crafting gorgeous sites…But, the wheel turns, and just as we were getting comfortable with our design-centered, gorgeous, dynamic, semantic web, something earth-shattering happened. Again.

Mobile.
Millions of teeny-tiny little computers, disguised as cellphones.
PITIFUL bandwidth. TINY screens. HUGE effect.

Such a huge effect, in fact, that they spawned a whole .MOBI domain movement, complete with zealots folks, who actually thought we should change the way we create websites, to suit mobile devices. Little teeny-tiny websites (that just look silly when you visit them with a desktop browser). Um, no. Let’s not.

And here’s where Responsive Design arrived (to save the day). And what she said was: “Let’s create websites, that intelligently respond to the device which is visiting them, and morph themselves into a smart design, no matter what the size of the screen. That’s… responsive!”

Again, quick as a flash, the smart folks who “make” CSS added Media Queries (which ask the visiting browser how wide it is), to the list of features, and presto! Take a look, for example, at Simon Collison’s website:

Now, resize your browser window, from wide to narrow, and note how the layout responds to the width. That’s Responsive Design, and we think it’s one of the smartest ideas to ever come along! We like this new girl. We’re going to get to know her. We think you should, too

Till next time tadpoles!