New! Create headers, footers, blog layouts, and more with Beaver Themer. See how it works.

Why Page Builders are Taking the World by Storm

Hey everyone! We have a really fun guest post on tap today. Our buddy Oliver Nielsen from WebMatros wrote up a time machine experience here walking through page builders of the past. Oliver's written some awesome performance audits of several WordPress page builders. Be sure to visit his blog linked below the post!

You may see page builders as a fresh, welcome addition to the world of WordPress.

Or, you may see them as troublesome tools for cheaters and lazy wanna-be web designers.

Or, you may even see them as a downright pest.

However, the debate about the pros and cons of page builders goes way back, throughout the history of web design.

All the way back to the beginning of time… Almost. Dinosaurs were recently extinct; we're all the way back in the previous millennium.

The year 1999.

Back then, there were no page builders. Yet, the debate was the same, disguised under a different buzzword.

In 1999, the buzzword wasn't “drag and drop” – it was “WYSIWYG” – short for “what you see is what you get”.

You see, Adobe had acquired an HTML-editor called GoLive CyberStudio.

Adobe being a company of the 80s, they quickly rebranded it Adobe GoLive, Bateman style.

 

And just like Patrick Bateman had a competitor in Paul Allen, Adobe GoLive had a rival: Macromedia Dreamweaver.

Dreamweaver was powerful, but more traditional in its approach to building websites. GoLive on the other hand: was innovative!

Among its many cool features, GoLive had a layout grid.

Adobe GoLive's drag'n'drop layout grid

Adobe GoLive's drag'n'drop layout grid [image source]

This is long before “responsive web design” entered the stage. Back then, it was considered cool when a website was the exact opposite of responsive: it should be pixel-perfect – and as static as a printed brochure.

In fact, the more a website resembled a printed brochure the better. The same was true for Flash-based websites. Only difference being: on Flash-sites the elements were animated.

If you weren't a cool cat down with GoLive, Dynamic HTML, Dreamweaver, Flash, et al, the alternative was a GeoCities'ish page, typically made in Microsoft Frontpage or Netscape Composer, with few formatting options other than aligning each element left, center, or right. Except if you were using tables for layout. More on that in a minute.

Indeed: horrendously hideous times. Replete with tacky animated-GIF buttons for email links:

Back then people WANTED email. No talk about “inbox zero” nor declarations of “email bankruptcy”… Nah, rather, it was like:

“Please, PLEASE will someone please email me?! I have an “animated pigeon” email-button! How can you resist??”

… And an “Under Construction” animation was a procrastinator's dream come true: it could solve all cases of design and development stress:)

What happened to GoLive?

Riding the wave of Flash's success, Macromedia's Dreamweaver won the popularity-contest.

Thinking “if you can't beat them, join them” Adobe acquired Macromedia in late 2005, letting GoLive die a slow but certain death by neglect, until early 2008 when Adobe finally announced admitted that sales and development of GoLive would stop – in favor of Dreamweaver.

Sadly so.

I enjoyed GoLive far more than Dreamweaver. It was a visionary, modern web design tool – its Layout Grid just a small part of its appeal.

Curiously, Adobe also chose to kill Fireworks, a Sketch-like app tailor-made for creating web graphics, in favor of good ol' Photoshop. Fireworks was a brilliant app, yet Adobe always treated it like an unwanted stepchild from their Macromedia-acquisition.

Adobe does as Adobe does I guess…

Stupid is as stupid does

Anyway… Back to “WYSIWYG” and “drag & drop” web design:

I remember vividly how GoLive was criticized for the bloated code that came as a result of using its Layout Grid editor (it did better than Microsoft Frontpage, though). Lean, fast-loading code was as important back then as it is today.

The proposed alternative back then? Manual labor, aka hand-coding.

Today's proposed alternative? Avoid page builders, code your layouts by hand. Or be satisfied with WordPress' single content area. Viable? Maybe… Or (Maybe) Not.

Table-based web design (those were the days…)

As web designers we then began slicing our graphics into pieces, to place them inside table cells. That was the “table-based layout” era of web design.

Ahh, those were the days, huh? Papa Bob forgot to hide the table borders, but doing so could yield a design as spiffy as this:

See how that image of Leo is left-aligned? Cool eh?

If you're too young to have experienced table-based web design: don't worry. It really wasn't all it's cracked up to be. More like… a book-chapter you'd skip;)

Oh! And not to forget:

Frame-based web design

Oh the endless joys of frames and iframes… From the times when Michael Jackson was black, Mom was still a little boy, coke was clean and white as snow, and… well, you get the idea:)

Ahh, those frames. They're really somethin'… they could walk around like they're bigger than Prince, right?

Oh, and Java Applets! Remember those? Not to confuse with JavaScript, they where tiny executables, that could twist an image. Or put a live ripple reflection effect below an image. Horrible stuff, really. But remember: we didn't have page builders back then. We were starving for ways to make our websites interesting and beautiful.

Not that a Java Applet would help with any of those two, but… times were different… back then… ahem…

I won't subject you to a real Java Applet. They could make browsers unstable. But this lil' GIF-anim is quite Java Applet'ish:

Parallax beats Java Applets anytime, anyplace. Agree?

Enter a lustrous Zen Garden blooming with beautiful CSS

The ugliness came to an end, with CSS Zen Garden.

CSS Zen Garden sparked a wildfire of “semantic” web design. At first, only purists adopted “XHTML” and strict separation of content (XHTML) and presentation (CSS) but it soon became widely accepted as the standard way to develop websites (until HTML5).

With the semantic separation of content and presentation, came a subtle, welcome reformation of web design aesthetics. Why? Difficult to pinpoint the exact cause, but (IMO) websites generally got simpler, and a whole lot nicer to look at, in the following years.

“Believe it or not, there was a time when CSS was not taken that seriously as an aesthetic function of a website. Dave Shea went about to change that perception with the CSS Zen Garden, a site showing off different CSS designs that could be wildly beautiful, fun, functional, or all of the above. A fertile ground to demonstrate new concepts, this site has become a massive source of inspiration for designers who are looking for new ways to use CSS.”
Alec Rojas, 20 Years of CSS

Dave Shea’s plan worked: encountering and perusing the CSS Zen Garden examples changed my outlook on web design. I was in awe. Decided to learn CSS, and quickly did so, with a great CSS tutorial that's still online to this day.

Alas, while CSS Zen Garden helped popularize “semantic” web design – and reform web design aesthetically with a focus on simplicity and elegance: non-techies still couldn’t design their own page layouts without writing HMTL and CSS, i.e. more coding.

So while web designers basked in the glory of pure CSS designs, non-techies were still out of luck.

What I’m getting at with the above history lesson, is this:

Ever since the World Wide Web went mainstream in the late 90s, web designers, their clients, and average “Janes” and “Joes” alike, have craved well-designed, graphically interesting websites – done easily and quickly.

Page Builders – the Second Coming of WYSIWYG

Cue soundtrack: “Joy to the World” with Three Dog Night.

FFWD a few years, and along came powerful WordPress theme frameworks and flexible super-themes like Headway, PageLines (incl. its incarnation “DMS” – Design Management System), Divi, among many others.

And, of course: WordPress page builders – most notably Visual Composer.

Its monumental market-adoption made the need for page builders crystal-clear, as it took off, in 2013.

Since then, quite a few other (and better, IMO) page builders have entered the stage. Beaver Builder being one of the most popular, and for good reason.

Drag & Drop Web Design – Finally for Real

In light of the above history: page builders are a blessing – one of the seven wonders of modern web design.

We’re fortunate to finally have the “WYSIWYG” / drag & drop tools we’ve been waiting for, since the last millennium!

Finally, the future has caught up with our expectations:)

How about you? Are you on the page builder fanwagon – or still on the fence? Share your comment below!

About Oliver Nielsen · WebMatros.com

Oliver Nielsen runs WebMatros.com to help heartful, heroic solopreneurs spread their wings online. A true content creation polymath: he's a skilled writer, photographer, video editor, and audio producer. He's also quite a thinker and tinkerer, taking stuff apart to test and review it fully and completely - with surprisingly elegant insights as a result. When not working, he has fun taunting his dog Muffin (almost) as much as it taunts him - when he is working 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *

18 Comments