Webflow

Webflow Visual CMS experimentation.

I have been toying with the whole "how to find good content on TV" issue for a number of years whilst at Gourmet Pixel, which has evolved into the app: Screen. This planted another idea - just highlight 6 shows a month, using Webflow CMS!

The site can be viewed here: http://screen-monthly.webflow.io/

Webflow CMS

When Webflow introduced their Visual CMS, I was very excited and couldn't wait to try it out. However, the opportunity didn't arise via client work, so I decided to create a small site to do some learning.

I've been a designer for many years, and coding just isn't something that I can do well - I have a good understanding of HTML and CSS, but coding a website is just not something I find enjoyable.

Webflow completely changed that however, and it has changed my workflow and abilities beyond what I ever thought possible before.

Now they have enabled a similar change, yet this time it is with an area of coding that I would never even considered trying - Content Management Systems! It just sounds daunting, I wouldn't know where to get started.

Not any longer!

Webflow's CMS is built with designers in mind, and is a visual content platform. It allows me to build collections of data (images, text, links, colours and more), then apply that data to my designs! Not only that, it then allows my clients to edit existing content on their websites and create new content, all within the browser!

Screen Monthly website on a 2017 Macbook Pro
6 Great TV shows or Movies highlighted each month!
My aim is to link each recommendation to a nice review.
Using Dynamic Embeds

Something that I discovered and found really useful was dynamic embeds, it really opens the CMS to a wider range of uses.
Within Webflow you can insert an HTML embed component anywhere within your design, these are really handy things when it comes to embedding 3rd party content (John Moore Williams covers it here with a nice couple of videos).

The way I used them in this project can be seen below, for each 'card' the content displayed was pulled from the CMS. I then used a dynamic embed to give the appropriate video player logo the specific URL associated with the TV or Movie being displayed. Within the CMS, each show has a specified source (ie: BBC iPlayer or Netflix). It also has a "slug" associated with it. This is the string of text after a certain point within the URL on the video player webpage.

Instead of just inserting an image, I inserted a Dynamic Embed component that contained the html code for the image. Then at the end of the Href link I inserted field (click the little +field link) from the CMS - the field being the "slug".

I then created duplicates for each movie source (changing the appropriate fields etc) and set a condition on each so that the correct logo displayed on the right content card.

Dynamic embeds were also used in a similar way for the play button on each content card to display the correct trailer for each.

I have circled these items on the screenshot to hopefully help visualise what I did.