×
Introducing Creative Market Pro: Download unlimited assets to elevate your work. LEARN MORE

Everything You Know About Website Builders is Wrong

By on May 2, 2016 in How To
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.

web screenshotPin It
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.

macaw-app-2Pin It
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.

web screenshotPin It

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.

web screenshotPin It

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.

Free lettering worksheets


Download now!

img

Download now!

Getting started with hand lettering?

Download these worksheets and start practicing with simple instructions and tracing exercises.

25 Comments

  1. "MYTH: They generate messy code that doesn’t work across browsers"

    Hate to be the bear of bad news here but they still generate messy and atrocious code. Perfect example is unbounce.

  2. This just looks like a great advertisement for webflow. If you really want to talk about side builder, you should be comparing it with others and list their pros and cons.

  3. They're much better than they were years ago but for the designer who knows how to code and code cleanly it will give you an edge above site builders, especially when something goes wrong (because 9 times out of 10 it will be in the code.) It's sort of like cars. A lot of people know how to put the keys in the ignition and drive but fewer know what makes a car work and how the parts underneath the hood all come together to make your vehicle take you from point A to B.

  4. interesting article, but I genuinely would like to read the article that the headline promises... not simply an advertisement for webflow.

  5. Good read - Thanks! I too would love to see a follow up comparing top site builders and the quality of the code produced.

  6. I have to admit, I was hoping, like many, that this article debunked these myths using a variety of website builders. I backed the Macaw Kickstarter, but wasn't too impressed with the final product, and since then have stayed away from builders. Would of loved a comparison or variety of examples.

    Thanks for sharing the other article @Josh Johnson!

  7. I think the idea behind builders is great — the CMS is often so user-friendly that anyone can handle it, which means that designers can do what they are best at, that is design.

    Yet, the problem is that many builders want to offer all-in-one solution and this makes them messy. In my opinion the key to success is to focus on the user experience. By that I mean that the builder should be as flexible as possible so that the designers could realise their craziest ideas. At the same time the CMS should be easy enough that even my mom could handle it without reaching out to the support team.

    @Josh Johnson wrote a few days ago an article about the web and how many sites become to look the same. To prevent that, I think it is essential that website builders understand that they don't have to offer all-in-one solutions. They should focus on what they do best (UX) and let the others do the rest.

  8. Here is one problem with web builders - They don't help you learn! Learning the fundamentals of front end code is... Well, fundamental. I feel that using any design tool (WYSIWYG builders, CSS frameworks, or JavaScript libraries) before you fully understand what it does and why it does it, is dangerous. I learnt dream weaver many years ago but when I started working, I quickly realised that there is no substitute for simply learning the code. Once one learns the fundamental principles of a coding language, these tools can become a great time saver and can speed up workflow.

    Blindly using a web builder is fine if you just need to get a site up quickly but if you actually want to become a web designer, there simply is no substitute for learning your code! I appreciate this can be intimidating, but it's really not that hard. You simply have to learn a little bit at a time, practice and be patient.

  9. Is there something that works just like Web Inspector? Most of the time I just want to click on an element and see the dependencies and get taken to the right place to start editing code.

  10. @Lawrence James - you have a good point, but I can't quite agree with it.
    If you are or want to become a web designer you still have to know the code. In most of the cases are the builders super flexible on the front-end. So, if you want to really design your page you have to customize a template or build it from the scratch. Indeed, in many cases you can't access the back-end but that is exactly what I mean when I say builders let designers do what they are best at. The builder takes care of the back-end and you can focus 100% on the front-end. Ofc depending on a builder you may love the back-end or hate it. But this is an other story.

    The second point I want to make is that the average user don't need to know the code. Yes, I think we'd live in an awesome world if everybody knew how to write the code. This is not the reality. The reality is that there are thousands if not millions of people who have a tight budget and no coding skills, yet they need a webpage. Reasonable fee per month and drag-drop is a perfect solution for them in order to grow their business or whatever interest.

    And finally if one thinks that builders are the shortcut to become a great designer she will sooner or later discover that this is not enough.

    @Simon Stratford - agreed!

  11. Honestly, I stopped reading about three paragraphs in. I don't think I could function day-to-day if I couldn't fix messy code. It's everywhere!

  12. I quite like and recommend Pinegrow (http://pinegrow.com). I think it greatly helps the newby to get a grip on coding and how a site's structure is built. And if you're savvy enough it's still a fine editor with a working preview (no need to constantly switch to the browser).

  13. In my personal opinion, if someone wants to build a website and not have to learn coding, then they should use WordPress with a responsive theme, both of which they can get and install for FREE and they are off to the races without paying monthly fees (typical) for a web builder.

  14. Great article! If you value saving time in your web design process, I encourage you to check out Shufllo, a brand new web productivity tool that helps you create WordPress themes and Bootstrap templates in minutes providing clean and usable code with responsive design: http://shufllo.com

  15. Webflow is the futur of webdesign. Adobe should create a similar (and even better tool) instead of Muse.

  16. grew up on dreamweaver and have come to hate it, the WYSIWYG is a joke and just keep it in the code view, I barely use any of the features anymore apart from the find/replace!

  17. Pinegrow is getting better with every update and the latest version has a much improved UI, plus you can quicky convert designs to WP, not only that but there are a number of plugins you can use to expand it with such as premade block kits here https://goo.gl/ftC6wA

You must be signed in to post a comment.

Made with Creative Market

Browse a gallery of inspiration made with design assets from Creative Market.

Explore the Gallery →

Meet the Creative Market Authors

Learn more about the talented writers behind the articles.

Meet the Authors →

Download Our FREE Branding eBook

Get a FREE, fun, and friendly guide to design your own brand.

Get your eBook →