Given that you’re reading an article on AppStorm, I think it’s safe to assume that you’re a savvy, astute kind of reader. So, I won’t need to tell you that the first rule of the internet is that you must have a website. Nor will I need to explain that code, in the case of most basic websites, is nowadays completely unnecessary. And I definitely don’t need to inform you that the selection of services now available to help with building an online presence is enormous.
You might be interested to hear about Webflow, though. Whereas most of the site builders already on the market are aimed purely at non-coders, this new kid on the web design block seems to be letting the technical folks get some respite from keyboard-based design.
Is this kind of hybrid the way forward? Or will it just annoy web designers wedded to the manual way of doing things?
Like the article? You should subscribe and follow us on twitter.
Setting Up
Creating a website is pretty much pain free with Webflow.
Well, I can safely say that the setting up of a Webflow site will avoid causing irritation. The refreshingly quick and simple process involves choosing a site name, a Webflow sub-domain and a template from the eight on offer, or seven if you discount the blank canvas option. These nicely constructed templates are not really designed to be used as-is. Instead, you’re meant to build your own, unique creations on top of them.
And with that, you find yourself editing your newly created website — the simplicity here is a joy to behold.
The Design Suite
As a platform clearly aimed at those who know their way around CSS syntax, Webflow’s design environment doesn’t feel or look like Weebly or Moonfruit.
The interface is, as you might expect, dominated by a preview of the website you’re working on. The thin bar of controls on the left contains access to previews in every common screen size, along with visual design aids such as grids and columns. Also, handily, there are undo and redo buttons here.
The design environment is uncluttered, and easy to navigate.
One point of interest is X-Ray mode which displays the outline of each HTML box you’ve created. This Webflow feature would have helped greatly the last time I had to wrestle with a mess of floating and static divs during the construction of my last hand-coded website.
Looking over to the right, your eyes meet with the main tool palette, which is where most of the action happens, with the controls split between five tabs.
The first is as consumer friendly as Webflow ever gets. The Add tab provides the basic building blocks of any website — text elements, images, video and three types of div, etc. — which can be selected and added to the website canvas area. But this isn’t a place-it-where-you-want affair, as styling is controlled, entirely, by the next tab.
The elements on offer can be added easily, but it isn’t a large selection.
CSS…But Not As We Know It
The Style tab really is a CSS playground, and a remarkably intuitive one at that. Virtually every commonly used style attribute is available and can be adjusted with a click, a drag, or an entry into a text box.
Paddings and margins (which, of course, are only available for box elements) can be adjusted by click-dragging inwards and outwards from the representative boxes in Webflow’s tool palette. Positioning is dealt with by a menu of three one-click options, and adding a background is much the same as adding a layer in Photoshop, with solid colour, a gradient and an image being the available div-fillers.
The styling tools in Webflow are intuitive, and provide excellent control.
The border controls also provide a brilliantly simple way of controlling the form, colour and radius of your element’s perimeter, with each corner selectable, and editable, individually.
Fonts are one of the most important elements in any design, so the comprehensive nature of Webflow’s typographic settings comes as a pleasant surprise. Fonts can be manually typed in, or you can use one of the pre-installed options, of which there is a decent selection. Text colour, weight, size, style and alignment are all simply edited, and the same goes for line-height and letter-spacing.
Typography is a point of particular styling strength.
Several varieties of box- and text-shadow are on offer, with full, slider-based control over the distance, radius, blur, angle and colour of each.
The final flourish of Webflow’s styling engine is the effects menu. I must admit, I wasn’t expecting a CSS-by-numbers web-app to provide transformations and transitions as standard, but Webflow does, and beautifully so. Any of the above forms of styling can be eased in, at a speed of your choosing, and elements can be rotated, moved and scaled via the transitions panel.
Unlike with some mouse-controlled CSS editors I’ve tried, finding a chink in Webflow’s styling armoury is a relatively hard task.
Content
All this visual pleasantry is impressive, but what about the most important part of a website — its content?
As mentioned above, all the basic stuff is on offer, including divs, columns, headings, text, links, images, videos and buttons, but Webflow (currently, at least) excludes anything more complicated, such as HTML embeds and forms.
As a result, Webflow is best suited to simplistic, visually impactful sites, not least because the design suite makes beautiful design relatively easy. If you want anything more complicated, you need to look elsewhere.
Class Management
Webflow shows its true, techy colours in the last three tabs of the main control palette.
The whole Webflow styling system is based on classes, and, as a result, under the Settings tab you can choose which HTML5 tag should be used for each class. Equally, there’s the opportunity here to assign a specific id to an element for intra-page linking.
The final two tabs, Navigator and Style Manager, allow easy access to the hierarchy of your site, and the classes in use, respectively.
The Navigator tab makes hierarchy organization a breeze.
Export and Extensions
Masterpiece created, there are two methods offered by Webflow as routes to publishing.
The first is to export your Webflow creation. You can either download the HTML, CSS and images used on your site as a zip file, or copy the code by hand. Note, however, that free accounts have their number of exports limited.
Alternatively, you can host your sites with Webflow. Up to three sites can be published on a Webflow sub-domain with a free account. Upgrade to the $29/month Personal plan, and you’ll receive the option to build ten sites (one of which may have a custom domain), along with unlimited bandwidth and storage, plus the use of Webflow’s content delivery network. The $49/month Professional package provides unlimited sites and up to three sites with custom domains. Both of these paid-for account levels come with unrestricted exporting.
I should also note a few useful settings to be found under Webflow’s hood. Both Typekit and Google fonts can be installed from your site’s Dashboard, and there are also some basic SEO and analytics tools on offer.
Conclusion
Speaking as a keen CSS hand-coder, I have mixed feelings about Webflow. On the one hand, I can appreciate the ease of use of its (mostly) mouse-based styling. On the other hand, I wonder how many CSS wizards will actually prefer this system over traditional code typing, a method of working with which they are familiar, and with which they feel in control.
Putting to one side the issue of who might use the service, however, Webflow is beautifully made. Sure, the hosting is pricey, and the sparseness of content options is a problem that needs to be resolved with future updates.
For the creation of a simple, cleanly-coded website, though, Webflow provides a fine platform.
     |