Based on a tweet I was prompted to make a video on a problem that seems to be arising in the industry.
Original Tweet: https://twitter.com/juliankreth/status/1624549167337992192
You’re Doing Headings Wrong: https://www.youtube.com/watch?v=nGwd2XAmplk
Stop Using Div’s: https://www.youtube.com/watch?v=SSnwSGtB0c4
You’re Doing Cookies Wrong: https://www.youtube.com/watch?v=MvmT9EBt7CM
Transcript
This could be one of the most important videos you ever watch, I recently saw this tweet which said are Webflow websites having a quality problem I’m getting more and more clients that are looking for someone to clean up the mess the last agency slash freelancer created and I have to say I’ve actually encountered a lot of these problems a number of times and I’ve mentioned this in snippets on on a few of my videos actually but I thought it’d be best to kind of encapsulate everything into a single video and give you actual steps that you can then do to implement and create better websites.
Unfortunately Webflow is amazingly simple as it is creates this illusion that building websites is easy but in fact website development contains a lot of best practices that a lot of you guys just don’t know quite frankly and it’s understandable you’re not a developer you’re a designer you’re much more focused on the visual aspects of website but now that you’re venturing into the world of building websites there’s probably a few things that you need to understand.
Truthfully, the problem isn’t really specific to Webflow designers the the problem is rampant in the developer Community too and really boils down to you don’t know what you don’t know so don’t take any of this personally at all and luckily given Webflow limited capability we can actually collect all of this and give you actual advice on what to actually do and I’ve said this before but the first one is what you see on the screen the design is only half the story there’s so much going on under the hood.
But lucky for you that’s exactly what this channel is about its understanding the code that’s being written by Webflow as you use it so what is the impact of building quote-unquote bad websites where you can break it down into four categories you’ve got performance accessibility SEO and the last one which people don’t really think about is maintainability and that is other people coming onto the project and understanding and figuring out what’s going on.
[Music] When you train an element and begin styling it Webflow gives it a default class name you’ve all seen it div block 22 text block 67 regardless of if you’re going to style it at all. I suggest just right off the bat giving it a class name this doesn’t do anything under the hood it just makes the project much more easier to reason about now you can use any class name convention that you…ou like bem component level staff so hero and hero hyphen button, but what I prefer is actually naming them in plain English so it’s like Capital H hero or hero space button because that makes the dom tree just much cleaner to look at but if you’re going to add custom CSS to some of these elements then do remember that it does actually hyphenate them under the hood but once you kind of go over that you’re winning then.
[Music] When thinking about performance it’s too easy to create an element and just begin styling it again what this is doing is just bloating the CSS file but if you take a step back particularly at the beginning of the website try and identify kind of components and reusable styles and spacings and then you can start to build out reusable classes that you can use throughout the website.
A really good way to do this is by developing a style guide page this way the eventual CSS is much smaller similarly if you are using a theme it might include a lot of styles that you don’t end up using.
Webflow handles this wonderfully and by going into the clean-up panel you can see all of the unused styles and you can just clean them out instantly I try and do this every few days because it means I can stay on top of what’s being removed and why?
In website development file size is everything to the performance of the website even though Webflow caches those images you should still be optimizing them before you upload them and that is making them the exact size that you need them to be plus the the double density versions of those images but also the file size and the size of these images should be kilobytes not megabytes there are plenty of online resources that you can do so.
[Music] Font files slow down your website tremendously so if you’re going to project settings and then fonts you might actually see a bunch of Google fonts that have been loaded that you’re not actually using and it’s also worth looking at the weights as well on top of that it’s worth looking into kind of any custom code areas where fonts are being loaded you want to make sure you remove all traces of any fonts that you don’t use.
Thinking more about SEO and accessibility I actually made a video which I’ll link to below which kind of summarizes this don’t think of headings in terms of the the kind of how they look and the sizes of them we need to think about when it comes to headings is actually structuring the content for a start there should only be one H1 on the page and then you’ll break the content up into H2S and if those need further headings you might add some h3s into the mix but once again I’ll leave a link to my video that you can watch a bit more of an in-depth explanation of that.
[Music] Following on from this HTML is a semantic language and what that means is that whilst you’ve got your content the HTML around it describes to computers and various other technologies what that information actually means and this is one of the First videos I ever made called stop using divs.
Hello and welcome to today’s episode of Webflow of code but the long story short is whenever you create div blocks inside of Webflow go into the properties panel actually select what element that is, is it a main? is it a header? is it a nav? this will help with your SEO and accessibility and just overall structure of the website.
[Music] Everyone’s favourite topic is animations and while I’m a sucker for animations and interactions chill out a bit it’s becoming a bit of a meme in the developer community where Webflow designers are just animating all of the things while it looks good and it’s quite easy to do we still need to think about the usability of the website I already have my beef with Webflow and their interactions I don’t need to reiterate myself here I’ll leave a link to that below but have a bit of Jamul when it comes to adding interactions, really reserve them for special moments in the website.
Look at how you can Tastefully add them to really make an impact and similarly to CSS clean-up you can actually clean up unused animations and you can do that from the animations panel there’s a clean-up button there because unused interactions are still adding HTML to the page.
And finally there’s one area that no one’s really talking about right now and I’m going completely off script at the moment but it’s JavaScript libraries and the the overuse and dependency on JavaScript libraries now a lot of people compare Webflow and WordPress and sort of say WordPress is bulky and slow and various things like that and part the reason is…is because developers got trigger happy with plugins and those plugins download JavaScript files which sometimes they need them sometimes you don’t and I’m seeing the problem extend onto Webflow now because even though it doesn’t have a a kind of plug-in ecosystem you’re still able to add your own JavaScript and there’s some great fantastic libraries out there that do some amazing things.
But if you watch my cookies video you it’s very easy to implement a cookie policy manager similarly you know some of the JavaScript libraries are doing very very simple things or you’re only using a really tiny portion of that JavaScript library so you’re adding all of this extra bulk that you don’t necessarily need and you’re doing you’re not learning and you don’t you’re not understanding what you’re doing.
So, while I don’t disagree with using JavaScript libraries just pick and choose what it is that you’re using and re-understand do you really really need it try and learn a bit of JavaScript again this is what this whole channel is all about and start piecing together so you can start doing this stuff yourself.
So there you go those are the most common problems that I see coming into a Webflow project having it be built by someone who seemingly doesn’t have any prior knowledge for building websites. So, I hope this helps you now go out there and build out some amazing websites you Beast turkey you and if you did find this video helpful hit the like button and if you want to hear more about this sort of stuff then subscribe of course and you can join my Discord as well where we talk about everything no code and websites and technology and stuff I’ll leave a link to that below as well so until the next one…GO.