Site Builders and Webflow

HTML All The Things - Web Development, Web Design, Small Business

In this episode we discuss website builders in general, then do a deep dive into Webflow.

Segment 1 - Site Builders

• There are many reasons out there to use a site builder, they can range anywhere from convenience aspects, to pricing.
• I think it’s fairly important for a web developer to be at least familiar with these reasons and also the downfalls of site builders so that when it comes time for them to explain to their customer why they need a custom website, they will be coming at if from a place of knowledge and truth
• First thing to get out of the way, some customers will actually benefit from a site builder over a custom website.
  • People that can find a good template on a popular site builder that fits all* their needs right off the bat
  • People that like to tinker but don’t have the time to learn a whole new skill like web development
  • Someone just starting off with a bootstrap budget and a ton of time on their hands for their business
• If you ever run into these people and they ask for advice on what they should do in terms of hiring a web design firm or doing it themselves, and they meet any of the specific categories above, you should definitely not hesitate to offer advice on using a site builder. Being honest with potential customers is key to earning trust, and maybe now they won’t be paying for your service but they will remember your advice and honesty when it comes time to update their site in the future
• Now with that out of the way, with a lot of clients a site builder just won’t cut it.
  • If a client brings up a site builder and shows you a template they found and like but then immediately says they want to change x, y, and z. That is a red flag that a site builder just won’t work for them. Changing anything on a site builder can be a huge hassle (sometimes possible) but a lot of the time will require some knowledge in web development anyway.
  • If security is a huge concern some site builders should be avoided. We’ve had many issues with multiple clients getting hit at the same time with WordPress hacks. The disadvantage of using a large platform like some site builders is that if a hacker finds a way into one site, they find a way into all sites.
    • Shopify seems to be a fairly safe alternative for ecommerce as they treat security as a extremely high priority.
  • If the client doesn’t have the time to completely manage their entire website
  • If they need something very specific like integration into their customer database or their item database.
  • If your customer thinks their business will grow quickly. Site builders are usually not designed to take on a huge influx of visitors and can have serious performance issues when that happens.
• This leads us to something that can be seen a happy medium between a traditional site builder that usually a client would manage, and a custom website/cms that a developer manages. Webflow is kind of a site builder for the web developer. It does require knowledge in css and layouts but is also very visual. If you have a client that you think would like to sit down with you while doing some design changes, or A B testing, webflow allows for easy live manipulation of design and can be a good tool for something like that.

Segment 2 - Webflow Overview

Webflow Designer

• The Webflow designer is the tool that is used to create the website itself.
• It has the more advanced tools that allow a developer to “code visually” meaning that the majority of the controls they’re using are actual CSS properties that they would be typing in manually
• For example, if you want to use flexbox on a particular section of your website, and have those flex items centered horizontally. You would add a div for the flex container, add divs for your flex items then with the UI actually set the display property to “flex” and then set your alignment. Instead of typing in CSS properties you’d be toggling the identical options in the Webflow UI
• You have a lot of other standard CSS controls as well including things like:
  • Classes & “Combo Classes”
  • Width, max-width, min-width, height, max-height, min-height
  • Padding
  • Float and clear
  • Overflow
  • Position
  • Typography & Fonts: family, font-weight, color, size, text decorations
  • Borders
  • Transitions
  • etc.
• Because this is an editor there are a bunch of non-standard CSS elements that you can add to your pages as well such as Containers that keep your content within a centered not full-width container, or social media widgets that have you entering in your username, or profile URL to setup a “like” or “follow” button
• Symbols are a piece of a website that you use over and over on a website. Things like a navbar, footer, sidebar, or widget of some kind all make for great symbols
  • Symbols allow you to just add them to a page with a couple clicks without having to copy+paste, or remake them in any way
• Although I’m only now just starting to use this feature, a lot of the Webflow community seem to really enjoy what Webflow calls Interactions, which allows you to chain together events to create some pretty cool affects
  • For example, detect the user scrolling to make a certain element move around the page
  • Some triggers include: mouse events (click, move, & hover), scrolling (in various states like when an element is scrolled into view), page load, etc.
• Webflow can also be used to just make the UI and then moved to a different platform, or web server via the export code feature.
• In addition, Webflow now has an eCommerce beta for those of you looking to make an online store, however, I have yet to use this feature as it’s still in development and quite new to the general population of Webflow
• This means you could make your UI with the visual tools, export the code, then use the CMS and hosting solution of your choice

Hosting

• Webflow offers a range of hosting plans that range from simple sites that don’t need a CMS, through eCommerce, and full teams that run development agencies - check out which plan is right for you before you begin putting together projects to ensure you get all the features you need
• In general I find that the Webflow pricing for hosting and CMS are quite expensive, however, it’s more of a “luxury” hosting in my opinion
• Since the spring/summer of 2018 we’ve only seen 1 outage that affected anything for our customers and it was immediately reported by Webflow staff and quickly fixed
• It’s important to note that Webflow isn’t like a standard host with cpanel, it only deals with the website. It does not take over your nameserver, it doesn’t have webmail and other features that you’ll find on other services.

CMS

• The Webflow CMS is broken down into Collections which host content of a single type
• Within each Collection are the Collection Items
• A basic breakdown would be: Blog (Collection) contains posts (Collection Items) each post has a group of editable fields such as title, post body, cover image, etc. These editable fields are selected by the Designer.
• There are a bunch of different types of fields that you can add to a Webflow collection including things like: plain text, rich text, image, video link, link, email, phone, numbers, date/time, toggle switch, color, option dropdown, file upload, reference, multi-reference
• Specifically the reference CMS fields are used to reference other Collections
  • For example: You could have a Blog Post with all the standard fields like title, post body etc, and then have a reference field that points to an “Authors” Collection that contains all the authors names and social media links. When editing a blog post you would select the author in a drop-down menu, that drop-down menu would be automatically populated via the other referenced Collection.
• Keep in mind that the Webflow CMS does have limitations on how many reference and multi-reference fields you can add to a collection
• In general it limits how many fields you can add to a Collection depending on which plan you choose so make sure you look through all the options

Editor

• The Webflow editor is for the people that are editing the website, but don’t want access to the designer - Webflow refers to these accounts as “Collaborators”
• The Editor offers a trimmed down editing interface that allows those with access to use the CMS to add items to collections via a standard editor that you’d see on something like WordPress
• The Editor also allows users to edit some elements on the page, such as text and images, by hovering over elements and pressing an edit button - a more simple approach than that of the more advanced Designer

Limitations

• • As there are with all website builders, there are some limitations that get in the way when working with Webflow
  • Pagination wasn’t possible until recently, so large blogs would be limited in showing off all their posts, or there a workaround would have to be enacted. Note: Pagination is available now to all users.
  • Sliders are not fully editable. Users within the Editor can edit the individual photos that appear within a slider, but are unable to add or remove slides - that functionality is limited to the Designer - I found a workaround but it is limited
  • We were going to use Webflow for the HATT website, however, limitations in how Collections work limited our ability to do so. Specifically we were unable to have different post types (podcast, blog, etc.) and still be able to show them all in a mixed list on the front page. We’d be limited to displaying them in individual sections, per collection (blog, guide, podcast)
  • We had a customer that wanted to put ads in an Ad Collection, each item would contain a banner that would be displayed on the site in a random order on every refresh. However, we are unable to do that with Webflow’s system, their version of random order which is “Keep in mind that because we cache your site pages on a CDN (which is why they load so fast!), your random sorts on published sites will refresh once every 12 hours. The upside is that everyone viewing the site will see the same (random) order.”

• Pros: These limitations are either very specific to the customer, or they’ve been fixed with updates (with the exception of the slider editor). Webflow does update rather often so there’s a good chance more functionality will be added in the months to come - eCommerce is a new major feature that has been added since we started using Webflow which is a big step forward. You can also add your own scripts which can extend the functionality of your website if you understand Javascript

Conclusion

• The Designer offers a unique “visual coding” experience that anyone familiar to CSS can take full advantage of
• The CMS and Hosting are pricey, but sites load fast and are fixed quickly when there’s an issue (from our experience).
• The Editor offers a limited easy-to-use interface for staff members that may not be tech-savvy, but still need edit the site’s content
• The documentation and active community make it quick and easy to get help
• Exporting code allows you to take your design to another compatible platform easily - avoiding the hosting and CMS plan charges

Web News - The Cookie Law

• New May 2018 Reform of the EU GDPR law
• If a company operates at all in the EU they must abide by these rules which make them state all information they are collection and allow the user to opt out
• This is why now when visiting almost any website you get a popup somewhere that asks you “yes or no” to collecting cookies as well as a blurb about what they collect.
• On the one hand it’s great to have this transparency but on the other it seems that almost every time I visit a website this happens, even if it’s the same site and I was there a day before. This leads to a annoying user experience
• I think a “Accept All Cookies” button for all cookie websites would be a great idea for the informed user. Having it so someone has to find it and click it would be enough consent in my opinion.
• How do you feel about required transparency?
• Do you think the EU can be overbearing at times with these anti Corporate pro consumer type laws?
  • I.e. Hitting google with a 5 billion dollar fine over the fact that their android platform being too dominant
  • Sometimes these hits to large companies can be passed back onto the customer

You can find us on...

Facebook | Twitter | Instagram

RSS | Patreon | Spotify

Medium | YouTube | GitHub

Reddit