Webflow Rocks!

I hate coding. I have a good grounding in the fundamentals of HTML and CSS but I always struggled with manhandling the code into something that resembled my designs. They never ended up pixel perfect, which really bugged me. 

For a number of years I did a lot of work in Flash (yuck, I know) and then Dreamweaver (Yuck again) making websites.
Then Steve Jobs walked onto the stage and announced the iPhone. Eagerly watching the event on the day, I had no idea that within a year it would change the direction of my career completely.

The advent of the iPhone did two things:
First, it opened up the next 10 years of my career into something that would never have been before. I co-founded Gourmet Pixel with a guy I have known since I was 12, making apps for this amazing new platform.
Second, it brought about the mobile internet - eventually meaning that I would have to code websites to work on a variety of screen sizes. This made my brain melt.

The result was that I threw my toys out of the pram and abandoned making websites. Fortunately, the aforementioned iPhone provided another avenue for my creative output in the form of designing apps. I have been doing this for the past 10 years now (!!!!), and along the way I have all but abandoned favourites from Adobe, for newer and better software (I have written a post on these guys here). Web design was never really a big part of what I did anymore, until Webflow.

Suddenly I had the ability to create fully responsive sites, in a visual way that made sense to me. My grounding in HTML and CSS many years ago allowed me to quickly pick it up and have an understanding of how things were positioned, and why - but I no longer had to remember all the HTML tags and codey things that made my brain melt in a previous life.

My simple version of CSS:

Cascading Style Sheets basically means that you design for the largest screen first (Desktop), then the styles created "cascade" down to each smaller screen size. So if you make a change on the desktop, this change reflects down to tablet, then mobile layouts. If you make a change at mobile, this does not affect the tablet or desktop layouts/designs.

So, with this basic understanding, using Webflow is a cinch! You start in the desktop layout, add your elements - sections, containers, navbars, sliders, images, headers etc. Then when you are happy with the styling and design, you click on tablet layout. Check for anything broken and fix, then on to mobile landscape, then mobile portrait. Publish. Simple.

What I love about Webflow is the active community, people are always there to help and you feel you want to help others too. The Webflow team are also very active within this community, keeping us informed of new features, even giving us a wish list to gauge the direction Webflow should take in the future. Actually asking users their opinion and moulding the product around the users!! This is something Adobe never did.

There is a wealth of learning material available, along with loads of great videos to help people learn and develop on this amazing platform.

In October 2015 Webflow launched their CMS, but this was like no other CMS I had ever seen. CMS was something out of my realm, it was a code thing that a developer would create. I wouldn't have even thought about it. But now, I can create a fully responsive website that pulls images, text, videos and more from a content management system - that I have designed!! Without coding a single bloody thing! I think that is pretty amazing. You might not if you are a developer, or perhaps one of those magical design unicorns that can also use your brain to do code and development (I swear it must use a different side of the brain, or I am missing the part that makes code make sense) - BUT, as a designer I think it is amazing.

My first experiment with the Webflow CMS was the Monthly TV picks, which allows me to add new TV and movie recommendations each month via the CMS. I can also choose an image and youtube video for the trailer.

With some fancy (at least I thought so) use of dynamic HTML embeds, I was able to make a video lightbox that populates with the appropriate movie trailer based on the url entered within the CMS.

The same for the logo that displays, based upon the source of the movie or TV show. If the movie is on Netflix, then the Netflix logo appears. You can also click or tap on the logo to be taken directly to the movie and watch form there. This works really well on iPhone if you have the right apps, it will open the Netflix app for instance so you can just tap to play. I managed to get the basics of this put together in about 4 or 5 hours.


Webflow also provide super fast hosting, and client billing is build right into the platform! I can literally make a website for a client that is fully responsive, with a Content Management System and set them up as an editor, and bill them by monthly direct debit - all within Webflow. All I need the client to do is point their Domain Name Servers at Webflow.

I could write a whole lot more about Webflow, the way you can easily optimise your website for SEO, Interactions (I cannot wait for Interactions 2.0!!) and more - but the post will end up being super long. Maybe I will write some short posts on separate topics within Webflow.

I am really excited by Webflow and cannot wait to see what features evolve for designers. One thing! I think it would be really great if the same approach could be taken with app design and development. Imagine as a designer having as much control over that process? I thought that Pixate was going to head in that direction, but then Google bought them and bang goes that idea. Maybe another great startup will accept the challenge! I hope so.