After building my first website in Webflow, I want to share my findings, good, bad or ugly. In general it’s a big GOOD but there are some things that I think could be implemented better.
The site has already been built (hand coded) for Wordpress, I wanted to check to see if I could build the site in Webflow and if so, how Webflow could help me speed up my process, and the good new is… yes. Enough said!
It’s not finished yet, but I pretty much got 90% of the (27 page) site done within a day or so! It’s a multilingual site so will see how long it will take me to add the other languages.
There are bugs / issues & waiting for content (& client approval) then I can share the site with you all & create a YouTube video of the breakdown and my workflow but for now…
Hope it helps some people
Requests
To be able to not publish certain pages
I have setup a Global Styles and Templates Page but these should not be published
Nested Symbols, this is self explanatory
Better / More breakpoints
Sometimes using just the standard ones are not enough
Need more than 100 pages limit on Pro accounts
This is a no brainer, My first site is already 30 pages, so if the client wants to expand on this we’re screwed! Or we’ll just have to move over to host the site away from Webflow.
The issue with this is that Webflow has created a fantastic product that has, what I feel, silly limits that should just not exist for such a product
Please can we have a mood-board / style pages
See below for my explanation, but this would help immensely for an overview of the site, rather than checking the classes
Better URL structure for the CMS
What I mean by this is: So I created a Blog page but now every Post has a URL of /posts/post-page we need the ability to remove the /posts from the URL so it’s just domain.com/post-page
Bugs
Flex-box just doesn’t seem to work on iOS
I have tried all sorts of things, maybe I’m doing it wrong, but even checking the forums and watching videos that @PixelGeek has created I just can not get it doing what it should, hence in the Bugs section, but I will investigate more.
I can’t figure out why is I place any interaction on an element the whole page disappears
Granted this might be just me, but I can’t find out what I’m doing wrong, hence it’s in the Bugs section
Elements with padding often expand past the parent
Ok, so I have created a custom navigation, the links are all within a DIV with padding and a Link Block is associated this them. This isn’t really an issues with desktop but on iOS when you click the link the element looks like it’s bleeding outside of the parent element. So it’s not pixel perfect and my OCD / perfectionism is giving me a headache!
Created a Global Styles page so I can setup all my headings, buttons that do not require them to be a symbol
Created a Templates page for easy page building
Instead of Flex-box I have created DIVs with paddings and called the Blocks 3, Blocks 4 etc. then their Sub Classes as Block 3-1, Block 3-2 etc then they can be styles to show up in the right places
I’m not a designer, just a developer that was asked by a friend to be part of a new design studio collective called The Odd Bunch (http://theoddbunch.nl/)
If Webflow works out for a few of my / our clients, I can se me moving all my Dev. to the platform, but right now I have to learn more…
Some images
My Global Pages
The way I’ve setup my blocks instead of using Flex-box
Blocks setup with it’s sub class, it’s all in the padding
When I see some of the things that webflow still doesn’t do, that are quite normal on other platforms it’s hard to believe they still think 15 bucks a month for basic hosting is ok.
I plan to make a video after the site is finish/live as to how I build the site, the shortcomings (not many) and why I choose it to develop my site form now on.
It’s a great tool, and that’s the point, it’s a tool and not all tools fit everyone. But I’m really loving the simplicity of Webflow right now!
I just hope some of the issues I’ve found and some more feature will be added soon.
I really like your idea of creating a global styles page especially when you’re dealing with a large site. I’m curious to find out about any work around regarding the publishing issue, will check back.
Great example, bro! As a designer, I always try to get developer’s thinking. It’s much more constructive then designers “playfulness”. With Webflow both worlds become integrated, yet there is so much to learn… Thank you for you sharing! Waiting for the video to come…
Thanks for all the awesome feedback! Most of it is stuff I constantly run into myself.
Flex-box just doesn’t seem to work on iOS
Yeah Safari’s flexbox implementation is old and one of the main ways it breaks is if you set the stacking direction to be vertical (technically direction column). If I want my flexbox layouts to stack vertically, on mobile especially, I just set it to display: block.
Ok. Newbie here. Seems like I keep reading that Flexbox is the way to go over columns. Now it seems you are nonchalantly stating that Flexbox doesn’t work for iOS. Did I miss this somewhere in the tutorials? What you described is exactly what I need to do with mobile. You answer might be easy for you, but I don’t know what you mean concerning your solution to the problem.
then click on the Known Bugs tab at the bottom, you’ll see that there is a small bug with Safari which can be fixed with using display:block and setting a height.
If you want a shop then Webflow is not the answer, Shopify does the job much better, but then we all know that, so no biggy. You can link products from Shopify to a Webflow site - a pretty cool alternative if you don’t like the Shopify templates.
Not sure what you mean ‘upload my order’. You can embed any form from anywhere - JotForm, Google forms, Typeform etc - or use the built-in form. Can’t help you there.
Search? Yes, it does, look it up.
