5 tips for building websites with Webflow, when you’re not a designer…
Tips for those of us that aren’t Adobe masterminds
Full disclosure: I’m a huge Webflow fan. Huge. When I started using Webflow last year to design sites, I was like
“This is the best, I feel like I’m coding!”
The best bit, you get to download the code! Yes, thanks to Webflow, I actually learnt front-end code, and now, if I want to make a web application in Flask with a pretty front-end, I just whip something up in Webflow, download the code, add to my project and Voila! I have made an awesome looking site with code :) (Yep, you can then be very proud of having built the whole thing).
But, before this becomes just a piece on how much I like Webflow, let’s talk about what working in Webflow is like if you are not a designer. Which is exactly my case.
Webflow is a tool for designers to code
Above all, Webflow is a tool made for designers looking to share their code with engineers. This probably explains its Adobe photoshop design. I mean check it out yourself:
This is good and bad news. Good news because if you know Adobe, Webflow is easy, bad news because if you kind of know adobe but not fully, things can get pretty overwhelming very quickly (Im one of those people that battled with layers forever!). So in this article, I want to go through how you can use Webflow if you aren’t a designer, and don’t know everything about Adobe.
Step 1: Ignore most of the options in the right hand panel
You see that panel on the side? The one with all the options. The one with interactions, with setting with effects, with layouts, I mean really what are all those options?
Well, take a deep breath because you don’t need them and that’s fine. I have made 4 websites in Webflow, and I have only used these options in the right-hand panel: Typography, Layout, Borders and Effects.
Let’s talk about Layouts. Mostly because I deleted 2 websites because I messed the layout up so badly I couldn’t get out of it. There are 5 options. Forget about the last 2 and focus on the first 3:
Inline: Use this for content inside a div. Because that way, it will always stretch to full width. Elements, so pictures, should have this format
Columns(Flex): Use this for the div itself. So you want all the contents to neatly stack up as you change device width? in that case, put the layout of the div in this mode.
Recap: The content itself, like the image is inline, the div its put in has the flex layout
Step 2: Love the div
There are section, and columns, and containers. But the most reliable and flexible of them all is the div. You can do anything with the div. I have found the most flexible element to be the div. Need to put tons of things into a space, set the height and width. Use the div. The containers sometimes look janky on different screen formats, the columns sometimes fail to adjust in size, and section don’t really get those either (other than when you need to put a div inside them). The div is beautiful and flexible. Use the div.
Step 3: Check what things really look like on Android
OMG, she’s an Android fan. Yes, sadly I am one of those people that owns an Android. Every single time I have made a website, I have learnt to make sure I check out what it looks like on mobile. 90% of time it looks like junk! Just check out this website, in the preview it looks fantastic on Android, in reality:
Step 4: Check your site live as well as on preview
You know what front-end code can be like. It’s happened to me so many times, I build something by the book, I put the div in the section I give it the right layout, I put all the contents in it. It should be beautiful , it should look like….
Blah! What is that, it looks gross:
VS.
Then I try to fix it, I bury my head in the sand, I try every. single. option, and nothing. I publish my site and what?!!! All those updates where happening. I just didn’t see them. Now my site looks like real trash…
Moral of the story. If you think you have made changes that do work that don’t propagate then:
- Publish the changes and see it live
- Delete browser history or
- Wait for a couple of hours and check back on preview mode
Ok — why would I bother with Webflow if I can do this in Squarespace?
The complexity of Webflow is also what makes it so powerful. Squarespace is a phenomenal platform for building landing pages, but, if you want to customize, and do more than have a contact form/signup on a webpage, Webflow is the tool for you.
Personally, I think that as the company grows it would be great to offer different packages for different customers. Given I don’t use all the options, I would feel a lot less overwhelmed if I didn’t have to click on every single option and not know what’s happening to it. I love the Webflow tutorials, but equally, as somebody that considers themself a loyal user, it’s not good that I have to rewatch the layout video every single time I start the site right?
What do you think? What no-code tools have you tried, and how has that worked for you?
