Building and selling websites without code

Updated: Dec 13, 2019

With so many drag and drop builders now on the market, there is a world of opportunities for non-coders to build and sell websites to their clients. Each platform has it's own limitations and benefits, ranging from nice grab and go templates to fully customisable builds from scratch. So how do you know if a builder is advanced enough or if you need to use custom code to do a project justice? We will have a look at benefits and downsides of drag and drop builders, help you pick the right platform and show you some inspiration you can use to get your next project started!


  • Benefits of drag and drop builders

  • Limitations to drag and drop builders

  • Webflow

  • Squarespace

  • Wix

  • Elementor

  • Inspiration from drag and drop projects



Benefits of drag and drop builders


As your instincts might already tell you, drag and drop builders are often very easy to learn and you can quickly set up a new site. This can be a great opportunity for clients with smaller budgets who need a simple site to start their business. Because the back end is set up in a clear and easy way, it can also be a much easier hand-off to your client.


Another great selling point for many is the visual aspect. As someone who learns and understands through visuals, drag and drop can feel like a more intuitive way to build.


Since each section on your website is it's own unit, moving things around and exchanging images and text is easy. This means you can even use the drag and drop platform as a mockup tool rather than starting in a different program.


A last benefit I like to bring up is that drag and drop platforms are built by one company while many websites built using code uses third party plugins for different functions. While this offers more options that are suited to more complex builds, it can be a hurdle to keep updated if you are just starting out or if your clients don't have the budget for you to manage the site. If plugin updates don't work together, you can reach out to the individual creators while any problems with a drag and drop site can be managed from the one customer service.


Do check the level of customer service that the builder offers before you start, some only offer written support while some have chats, help videos and allow you to speak to a person directly. You will be happy you checked when you feel stuck and need a helping hand.


A pro tip regardless of how you decide to build the site is to join a Facebook or Reddit community for the platform. Many groups have hundreds of thousands of members that can answer your questions in minutes!


Limitations to drag and drop builders


We have already touched on plugins and third party services. Drag and drop builders will each have their own way to integrate new services like analytics, email lists and payment services. In some cases, a custom website using for example Wordpress will have many more options for integrations and you can find a plugin for pretty much anything - Wordpress for example even has a full course plugin allowing you to add a course with enrolled students to your site!


Of course, if you are going the custom code route, you could in theory build anything the project requires.


A few examples of builds that might be better created using code are larger e-commerce stores, sites that need a high level of extra security and sites that have high demand on custom features that are not commonly used on other sites.


Another consideration is what you don't see under the hood with drag and drop sites. Even if you never see it, these sites are still built using code - and sometimes it can be messy. In the short term, this is not something that will greatly affect your site but if you are building a fairly extensive site using a drag and drop builder, the risk is that search engine optimisation (SEO) is negatively affected and your website traffic can suffer. In my experience, this is something you only need to worry about if the site has a lot of pages and more complex features like scroll activated animations that can greatly slow down a page. If you want to use a drag and drop builder and is worried about loading speed and messy code, there are a lot of guidelines you can follow to avoid problems in the future. This is especially important for builders like Webflow that give you more freedom - if you are interested, start by watching their courses on how to build a clean and effective site.



Webflow


Webflow was started in 2013 and graduated from the startup incubator Y combinator. In 2019, the company raised a $72 million series A round and report to have 45.000 customers on their platform.


Webflow is one of the most flexible drag and drop builders and those familiar with code will recognise much of the terminology and structure used.


Unlike some builders, the builder can create any layout by customising blocks and sections with margins and padding. Another big argument for Webflow is the ability to create classes and reusable icons which allows you to save formatting as a template and reuse it on other parts of your site by typing the class name.



Many choose Webflow for the CMS and this is an aspect Webflow have made sure to highlight. If you are building a site with many items that need the same presentation, for example a site for kids toys where each toy needs to have a product page, you can set up a content management system where your client just needs to click "add item" and it automatically follows your designed formatting. This is a great win for usability for your client (and your future self for that matter).


Another win for Webflow is the customisation for different screen sizes. In the builder, you can quickly switch between screen sizes and alter the content without affecting the other formats. You can easily change the order of information, sizes and behaviour as you use the site.



Key selling points of Webflow:

  • Very flexible layout options; use sections, blocks, columns and grids

  • CMS system allows you to quickly add more products with custom formatting

  • Make anything an icon and reuse it, even a page can be an icon

  • Easily add simple or complex animations

  • Build sites for your clients and charge them for hosting

  • Very extensive courses and Youtube videos for building a site

  • Responsive options are very flexible


Squarespace


If you love templates, Squarespace is the platform for you. It is really easy to use, has been around for a long time and works with many of the key integrations like Mailchimp and Google Analytics. The company was started in 2003 and is at the time of writing valued at $1.7 billion.


Since the start, the builder has evolved from providing a simple drag and drop to now also offering domain names, integrations with Getty images and online store features. If you want to hear the story of how Squarespace was started, listen to the How I built this episode with the founder Anthony Casalena for the full origin story.



Most website builders offer some form of templates and this is one of Sqaurespace's strong sides. Filter by the type of business and preview the theme before you start. You can easily change theme if you change your mind later on.


Themes come with a set of rules for how the site is set up. You can either embrace this stricter structure, knowing you will get consistency in your design or start customising the rules in your design editor. Keep in mind that any changes to the settings like link colour or navigation layout will apply to all pages while you can change this for each item in more complex builders like Webflow.



Key selling points of Squarespace:

  • Very simple to use

  • Easy to on-board clients

  • Integrations for email lists, analytics and much more

  • Buy your domain and images through the site

  • Good customer support pages with video and text explanations


Wix


Wix was started in 2006 and is similar in complexity to Sqaurespace. A key difference is the way you structure a page and how you use the drag and drop builder. In Squarespace, you add a section above or below previous sections. In Wix, you simply place an elements where you want it on the canvas, allowing for more flexible layouts.


As someone who is familiar with the Adobe suite, you might find that Wix feels a little bit like using Adobe Illustrator. Even the shortcuts are similar. This flexibility means that many creatives prefer Wix while someone who might want more structure and less of a blank screen to start with might prefer Sqaurespace.



Wix offers an easy way to customise your site to a laptop and mobile screen. You can quickly switch between the two interfaces and make changes to the layout, size of items and even hide items on mobile.


Another great function is the ability to run email campaigns right from your Wix dashboard. While you have the option to add Mailchimp forms to your site, you can also add pop-ups or email newsletter signups and send out and track campaigns right from your site backend.


Key selling points of Wix:

  • Simple drag and drop but with unlimited layout options

  • Feels familiar to Adobe products you are already comfortable with

  • Easy to on-board clients

  • Schedule blogposts and email send outs

  • Send proposals to people who have shown interest on your site


Elementor


Elementor is like an in-between of drag and drop builders and using custom code. If you are building a site with Wordpress, you can install Elementor as a plugin and it essentially adds a front end editor option to your site. You can use it for all the pages on your site or only ones that need to be edited by the client for example.


The free version of Elementor offers almost all the functions you typically use but some more advanced ones like contact forms or navigation are part of the paid plan. You can easily get around this if you use other plugins like Gravity forms for contact forms and create a navigation using linked text but the paid option also offers more pre-made templates if this is something you are interested in.



Elementor works with your overall Wordpress settings so you can set fonts, colours and navigation options once and have them appear consistently on your site. You can choose to either build an Elementor page using the settings from a selected theme or you can start with a blank canvas.


Key selling points of Elementor:

  • Build your site in Wordpress and combine with plugins and code where needed

  • Easy to customise

  • Easier on-boarding for clients than typical Wordpress backend

  • Pre-made templates and sections you can customise

  • Add simple animations to your site


Inspiration from drag and drop projects


If any of these builders sound interesting and you are looking for some great examples of what people have done with them, have a look at some of our favourites!


Webflow


Moon - creative use of animations


Cronicled - A clear and appealing site


Squarespace


St. Roch Market - focus on photography


Lumio - Building out a shop in Squarespace


Wix


Maapilin - Showcasing your products


Karlie Kloss - Simple and bold


Elementor


Shake Design - using big banner blocks for navigation


Steelbox - Clear features and layout


Do you have a great builder we missed? Join the Facebook community and share your ideas and questions with other creatives.




GET IN TOUCH
SPREAD THE CREATIVE EXCITEMENT
  • Facebook - Black Circle
Creative hold is sponsored by: