Life in Lake Vostok on Webflow

Creating responsive news stories with Webflow

NOTE: This service has since been retired and the partially completed website has been removed, as Wordpress sites in general have improved. When I have time I'll rebuild the project here.

This browser-based application which allows you to visually design responsive websites came out of Beta in August this year. Instead of having to know HTML or rely on a desktop based webdesign software such as Dreamweaver, Webflow allows you to drag and drop the main elements of a website into a canvas area and then preview the website in different formats, such as tablet and smartphone or portrait and landscapes. This means that no matter what device you're viewing on you can customize the appearance quickly and easily.

In practice

I made two websites to test how easy this application was to use. Firstly, I very quickly knocked together a website ahead of an editorial meeting for a fanzine I'm working on. I based this site on a pre-designed template which already had a clear structure and just customized the text within the containers. Secondly I started to reproduce a web story from scratch, which I had previously created using Scrollkit, the Webflow version can be found here. The latter required more adaption and an understanding of how Webflow worked and although support videos exist on how to quickly put together storefront style websites, there's no guidance on how to create scrolling news stories. Having said this once I'd got my head round the various web containers, margins and padding it achieved a much clearer and legible mobile site.
Life in Lake Vostok on Webflow

How it helps you

The key really here is speed, to be able to bring together some visual ideas and even put together a microsite quickly is really exciting. And for that to be readable across devices without having to constantly test the website is brilliant. Particularly when designing scrolling news stories, it's all too easy to get the measurements wrong and lose half your audience. Also whilst you still need to understand the principles of webdesign, you no longer have to write badly formed HTML. Once you've published the website, it can be outputted as easy to install zip folders with perfect HTML and CSS.

Drawbacks

As with Scrollkit (which I also wrote about on a previous Tech Tuesday), this application comes unstuck when you start embedding multimedia into it. Compared to Scrollkit the embed is much easier, although you can't preview an embed that isn't iframe based without publishing. The hardest thing to embed was YouTube video, using the video embed it created it within a small window on the canvas. As an iframe embed it previewed fine then in the final viewing shot into the middle of the page. I could probably work out how to stop this with more time but it is frustrating. Also there's no CMS (content management system) powering these websites, so creating something that can be easily added to is problematic.

Summary

Another incredibly flexible web-based application which gives desktop software a run for its money, but needs a bit more time to mature.

Rating