Everything You Know About Website Builders is Wrong
Dreamweaver used to be the “in” site builder for those who didn’t have the know-how or time to code websites by hand. Since its inception, it has been the butt of many jokes. Rightfully so. Since then, most site builders have had serious usability and reliability issues that prevented them from being useful for power users, professionals, and design teams.
Notice that I said used to. Everything you think you currently know about website builders is probably outdated—they’ve come a long way in the past few years.
I’ll be going through the biggest gripes people have had with site builders over the years, and explaining how they’ve all been impressively addressed in the modern era by site builders like Webflow, Macaw, and Webydo.
Guest Author: Neal O’Grady (@NealOGrady) is an Irish-Canadian freelance web designer, developer, and writer. He’s written on design topics for the Webflow blog, and on random thoughts on his personal blog. He’s working on his sixth language, and is bouncing around the world—he’s currently in Europe.
What is a site builder? Why are they important?
First of all, to be clear, I’m not talking about those simple site builders your mom uses for her knitting club where you pick a template and change some basic styles. I’m talking about a modern site builder that consists of a visual interface that, on one hand, seemingly mimics the look and feel of Photoshop, but, more importantly, leverages the concepts of HTML and CSS to create fully functionable, responsive websites directly in the browser. You can drag and drop elements onto a page, style them with dropdowns and sliders, and host with a click of button. You get the full power of a coder.
Have you ever heard about a draftsman, animator, or 3D modeller learning the code required to render their work? Isn’t a little weird that designers need to learn how to code in order to build a website then? Site builders modernize the tools of web design and development. One day, we’ll probably find the idea of learning HTML & CSS to build a website almost as silly as learning to code to use Photoshop.
Let’s learn about modern site builders’ really interesting features by busting these outdated myths:
- They generate messy code that doesn’t work across browsers
- What You See Is Not What You Get
- The final product doesn’t always work
- They encourage people who don’t what they’re doing to use them
- They create ugly, generic sites
- They limit your abilities
- They suck for creating responsive websites
Before moving forward, I just want to stress how silly it can feel saying that site builders are better than manual coding. I’m a freelance web developer and engineer who normally creates everything from scratch. Just a few months ago, I would have scoffed at praising site builders.
But, let’s start bashing some myths to see my what my ultimate conclusion was:
MYTH: They generate messy code that doesn’t work across browsers
Outdated site builders are notorious for producing messy and barely functioning code. Modern site builders, however, generate fully W3C compliant (standards for clean and functioning code) HTML5 and CSS3 that is even tighter, cleaner, and more succinct than anything even the best of developers could write by hand—especially with constant design iterations and updates leading to redundancy and mess.
W3C compliant code also means your sites will work across all modern browsers. Build the site once, and be confident that it’s going to work just fine when someone pops it open in Firefox or Internet Explorer.
MYTH: What You See Is NOT What You Get (WYSINWYG)
This is tied in with the previous myth; site builders of the past generated code that didn’t always render properly when transferred to a browser—and would not look at all how you spent hours tirelessly designing them to. All this did was force you to go in and manually fix the code by hand anyway.
In contrast, modern site builders let you build sites directly in the browser—the same browser people will be viewing them in. Every action you take is directly modifying the underlying HTML and CSS of the page, and creating the website exactly how it will appear live.
Any HTML element you want to add to the page is a simple matter of drag and drop. You can’t get much more WYSIWYG than that. It’s a website creating a website. How inceptuous.
The Webflow interface
MYTH: The final product doesn’t always work
A page you design with a browser-based modern site builder will always work. Creating something in the same medium as the final product ensures it will be feasible in that medium. Using Photoshop or Dreamweaver to design a website is like designing a painting with charcoal and paper, and then wondering why it came out differently than planned when paint hits canvas. This is one of the reasons I stress to always choose prototypes over mockups.
MYTH: They encourage people who don’t know what they’re doing to use them
Many website builders are not for the beginner who knows nothing about HTML & CSS, or web design in general. You build sites in them using the concepts and principles of HTML & CSS—there’s just a graphical interface layered on top to make development faster and easier.
It isn’t like Photoshop where you can throw something together that isn’t feasible in HTML & CSS. You have to lay everything out exactly as you would using code, because each drag and drop modifies the underlying HTML, and every styling option is directly tied to a CSS property.
The Inspector sidebar in Macaw
MYTH: They create ugly, generic sites
With a modern site builder, you maintain the pixel-perfect control you know and love from coding and Photoshop, but have a much easier time going about it thanks to the visual interface optimized for web design.
You can either start with one of the responsive templates from a template marketplace, or you can start with a blank canvas and build your client’s one-off design from scratch. You aren’t locked into a few set designs, and the design possibilities are endless.
And because a visual design interface makes iterating through different design choices much faster, it allows you to tweak until everything is exactly as you want it. The more iterations, the more beautiful the final product.
MYTH: They limit your abilities
Practically everything that you can do with HTML and CSS in code can be done in a site builder. Just take a look at some of the these sites created by the web design community. Not only are there gorgeous examples of single and multi-page apps, there’s also a fair share of creative “concept” sites that truly show off the flexibility of the platform—including the solar system. These designers weren’t limited by their tools.
And for the rare CSS property that the platform doesn’t have a specific dropdown or slider for, you can inject the appropriate code directly into the HTML at any time (into the head for you developers out there). For most projects, however, you’ll never have to do that.
MYTH: They aren’t for serious projects
Would you consider HP, Groupon, MasterCard, IBM, Hitachi, and Intuit to be serious projects? Of course you would—they’re billion dollar companies with thousands of corporate and consumer clients worldwide. And they all use website builders.
Modern site builders do not restrict you to projects big or small. Doesn’t matter if you’re creating a site for your portfolio, your restaurant, your mega-corporation, or even your new app idea: Uber for Kittens.
MYTH: They don’t handle responsiveness and other best practices
Responsiveness (changing a site’s layout or content depending on the type of device viewing it) isn’t a “nice-to-have” anymore, it’s become an assumed feature. Mobile traffic is quickly becoming the dominant demographic on the web, and Google has even begun penalizing sites in their search rankings for not being responsive. You simply have to create responsive sites these days.
Modern website builders utilize a responsive grid system, so responsiveness comes right out of the box. You can quickly swap between four different device sizes (computer, tablet, phone landscape, and phone portrait) and set the unique styling and layout for each one.
You can also directly see and test your site at any screen size, just drag the mouse and resize the window to see how it responds. Tweak accordingly.
Site builders are not what you thought they were
Site builders have come a long way in the past several years. They are abstracting away a lot of the headaches associated with building websites, including the repetitive tasks of inserting elements such as navbars, dropdown menus, and lightboxes. They also let you design visually, in the exact medium that it’s going to be used in—ensuring it’s realistic for production.
Don’t worry, they’re not going to be replacing designers and developers such as yourself any time soon. Instead, site builders are abstracting away the low-level work and allowing these professionals to focus their efforts where it matters—making gorgeous and functional pages. Leave the busy work to the machine, and focus on the creative work.
Have you experimented with site builders for your projects lately? Tell us what you think in the comments below.
Neal O’Grady (@NealOGrady) is an Irish-Canadian freelance web developer, designer, and writer. He’s written on web design and development for Webflow, David Walsh, and Creative Bloq. He also writes his random thoughts on his personal blog. He’s working on his sixth language, and is bouncing around t…View More Posts