Webydo Review: A Code Free Website Builder Suitable For Pros?

The debate about whether a web designer should be able to code has been debated passionately for many years but I think even the most ardent supporters of having technically skilled web designers must concede that it would be great to have a viable code free web design option.

I don’t think we are totally there yet but Webydo is currently the closest thing we have to a code free web design solution for professionals. Sure, there have been decent website builders available for some time (i.e. Wix, Weebly) but they have tended to be somewhat limited in their features, overly reliant on editing existing templates and only really suitable for amateur designers who want a relatively simple site made for their own use. Their limited flexibility and functionality meant professional designers had to do what they had always done – learn to code websites themselves or outsource it to a developer.

I understand this it is a bit of a generalization but people with strong creative talents tend to be less motivated or skilled in coding HTML, PHP or javascript. The result is that many creative web designers loose a lot of their design fee paying for others to code their beautiful designs created in photoshop. As much as 70% of a web designer’s client fee could be allocated to paying for the site to be coded manually whilst the designer themselves, the person who often wins the business in the first place and designed the site, is left with only 30% to pay for their time and talent.

So, can professional web designers really expect to deliver high end bespoke websites using Webydo without touching a line of code or losing most of their fee outsourcing to their preferred freelance coder?

Well, as you would expect it depends on the site required. I don’t think Webydo  is not suitable for complex enterprise web projects or ecommerce sites which require sophisticated search features and backend functionality.  HTML, PHP and javascripts gurus are also unlikely to be tempted and will prefer to stick with sublime text, dreamweaver, bootstrap, wordpress etc.

However, it is a step above the normal website builders and does provide enough flexibility and functionality to create some very attractive, unique and feature packed sites that will meet many client briefs. As such, it could be a viable option to use for web designers who can not code but want to create complete websites from beginning to end.

Overview

Webydo has been designed for progressional web designers in mind who are familiar using Photoshop and InDesign. This web design/development tool allows you to start with a blank page and create a pixel perfect design within the browser that includes all the necessary elements that would normally have to be coded in later such as forms, menus, image galleries etc. Layouts are very easy to set up and responsive cross platform design columns are simple to set up and preview.

The intuitive drag and drop interface can be mastered very quickly and any elements added to the canvas are automatically converted into clean HTML code. On the back end, there is a powerful CMS system which is a big plus due to the increasing number of clients who want a site a developed with the ability to add text and media content when they wish. You can see a full list of its features here.

Ease Of Use

When you open an account with webydo you are given 3 options to start with – start with a template, structure or blank page. The template and structure options allow you all the various editing options available in the blank page options.

webydo-1-start

The templates they had were pretty good but I think they would benefit from adding more. That being said, this is been pitched as a website builder for creating unique sites so I guess it is fair enough that they only have 24 at the time of writing.

Screen Shot 2014-05-16 at 10.37.45

Only 4 layouts are currently available which is a little on the light side. They would certainly benefit from adding more layout designs or opening up the layout section to their large design community.

Screen Shot 2014-05-16 at 10.37.55

The navigation tool bar is intuitive to learn and their drag and drop elements make it easy to create or adapt layouts easily. Those familiar with Photoshop, Illustrator or InDesign will feel at home amongst the default tool layout which includes fill, shadow, stroke, smart guides with snapping, a grid generator, layers window, and set corner radiuses.

Screen Shot 2014-05-16 at 10.40.47

Images and video are automatically optimised when uploaded to improve site performance and free open source web fonts are available which is a real bonus. However, I think the speed could be improved as moving between templates or saving changes did take a few seconds and could get frustrating.

Design Modes

You will normally start in design mode where you will determine the main elements you would expect in a traditional CSS file such as overall page width, responsive layout, colour scheme and typography whilst adding in any adding functionality such as forms, flash, frames or raw HTML code. It is also the place to add in fixed text, videos and images that you do not want your clients to have editing privileges for.

webydo-2-design-bar

If you click the ‘Content’ mode in the top nav bar you will be able to see how the site will look for your client in the integrated CMS. As all the design elements are fixed in this content mode, content can be added without fear that the design will be compromised. This is very useful to see which areas clients can add text and media to from within the CMS area.

Once you are happy with the overall layout you can switch to preview mode. As you are editing it all in a browser you get an instant view of the actual look and functionality of the website. This is great for showing off to clients during the design process and ideal for prototyping websites.

You also have the ability to preview the site in a tablet or mobile layout which is a great feature although the screen sizes are not clear. It is currently in beta mode so I am not sure if there are plans for more default screen sizes or dimension editing in the future.

Screen Shot 2014-05-16 at 11.15.11

Ecommerce

Webydo includes an ecommerce widget with stock control, various payment options, product description fields and meta rich categories all built in. You need to get a Ecwid Store ID to set it up but this was not done for this review. At the time of writing, I have seen no examples of online stores set up with Webydo so it may not be the best platform to use if you are creating an ecommerce website.

 CMS

The content management system that drives the backend of the site is pretty well thought through. If you are going to handover the site to a client you have various site management and client permission options. This will allow you to set which elements you want locked and those you leave open to be edited by your clients.

With the CMS, there is a WYSIWYG design area for adding text and media which will be easy to use even for the most technically nervous clients.

Pricing

Webydo hosts all their sites on its own Akami backend network and their free account allows you set up as many free sites as you wish. This is ideal for creating a preview site for a client and only upgrading to a premium account once you have been paid for it. You can then charge your client a monthly fee with your margin on top of Webydo’s fees or just hand over the whole account to them and take all of your fees upfront.

The free trial account allows gives you access to features but you will be unable to add HTML code to the site. You will also be limited to only 5 pages, have a Webydo sub domain and a webydo logo in the footer. The pro version prices and added features are below:

Screen Shot 2014-05-16 at 10.41.46

 

Conclusion

There is little doubt Webydo has made the job of creating great looking websites without touching any code much easier and quicker. It’s design community of over 35,000 designers who influence future features through a democratic voting system and provide advice also make it a great option for designers who want to create prototypes or live sites.

I think it could be improved by speeding up the load times when moving between design modes and opening certain elements. I am also yet to be convinced by its suitability for ecommerce sites – as I had no ID for the ecomm widget I could not test this feature and I have seen no examples of good online stores using it.

However, overall I think it is a good code free option for professionals who want to create attractive and unique informational and lead capture websites for clients.

Tags