Show HN: CSS Grid Playground in Webflow
webflow.com
webflow.com
Some more specific feedback:
1. The initial example (the Theater flyer) is very busy visually, and looks nothing like a usable web page (sideways text?). Again, maybe this is me misunderstanding what webflow is for, but I think I would prefer a slightly less complex initial view of the grid.
2. I don't understand the second image, of the frowny computer icon. Again, looks nothing like a web page and I'm not sure of the relevance of the image to CSS grid. There's a hint says "turn that frown upside down" which I assume is a cute prompt that I should do something with the design... but... what? I looked for an affordance to indicate that I could rotate the grid, but there isn't one. I could find no way to rotate it. What am I supposed to be doing here?
3. The fourth one says "These shapes aren't in the right place". Aren't they? Where are they supposed to be? What am I supposed to do here? Is it just trying to show me that things can be moved around? I figured that out on the first page. Also (minor) the arrow is not actually pointing at shapes, it's pointing at a blank part of the layout.
4. By the time I get to the end of the examples / demo I haven't seen anything that looks like something that I would be dealing with as a web developer. So, I'm unclear whether this tool is something that is intended for me, or as a way to use grids to design print media?
As for providing affordance for what each example should look like, we have a button in the top left corner that you can hover over. Unfortunately we only point it out in the very first example, like we do with the CSS export button. It would be better to show the notes that draws attention to these buttons until you actually interact with them. Thanks again for the feedback. :)
All these colored boxes following my cursor around makes it hard to figure out what I'm even supposed to do.
And scroll doesn't work... I'm used to scrolling down to find out more about the product, but this doesn't give me anything to scroll to.
And then "try out the new grid playground -->" isn't even a link.
I'm sure a lot of thought went into this landing page, but it's so different from normal landing pages that I don't want to have to figure out how it even works in order to learn about the product.
Apologies for the criticism, but I assume I'm not the only one who feels frustrated by breaking so many web UX conventions.
Fortunately we didn't expend a tremendous amount of effort building the page. Here's the preview link to the actual landing page for those curious: https://preview.webflow.com/preview/g-r-i-d?utm_source=g-r-i...
> It looks like you’re using a browser we don’t support yet.
> To have a better experience in Webflow Designer we
> recommend using Google Chrome 62+ or Apple Safari 10.1+.
> You can still look around, but your changes will not be saved.
One of the biggest challenges with Firefox has been the inability to style native scrollbars to become dark with CSS – theres a decade+ long issue/conversation around making that happen: https://bugzilla.mozilla.org/show_bug.cgi?id=77790. Eventually, we gave up waiting on native support, and now working towards converting scrollbars to be JavaScript-driven to support Firefox (otherwise the white scrollbars stick out like a sore thumb in a dark UI).
The Webflow designer was built mostly in knockout.js in 2013/2014, but we finished a migration to React about a year ago. We’re still learning all the tricks needed to make a very large React app performant, but we haven’t looked back.
We'd love to hear your feedback!
The CSS Grid playground works in desktop Chrome/Safari/Brave/Vivaldi, as we're still working on Firefox and tablet support.
Have you thought about creating a Webflow UI library for React itself that would appeal to frontend devs as well?
It would be cool if you could use Webflow also as a tool to build React components or widgets, and then enhance a Webflow project with more dynamic app like features. This would appeal to many digital product designers I think.
Basically Webflow as a React UI framework for web apps of all sorts.
(I agree with Paul Irish's comment: https://twitter.com/paul_irish/status/315112620627730432 .)
I like the idea of more visual design tools, but I'm not sure the browser is the place for it. Just having the demo open destroys my laptop, and it's not exactly a weak machine.
I'm certain that the browser is the _perfect_ environment for a web design tool actually.
The performance issues you're experiencing are no fault of the browser per se; our codebase has grown very quickly in the last few years and we're just beginning to implement RUM to maintain a baseline of performance across the product. Live & learn
That said, we feel your pain! We've formed a feature team to take care of infrastructure-wide performance issues and we're working to maintain a higher standard for performance going forward.
Using some "grid-template-areas" + media queries is so cool... It gives you so much control over the layout!
Once IE dies or I have a job where I don't have to care about IE11 so much, then I'm all in.
https://www.youtube.com/watch?v=SPFDLHNm5KQ
It's definitely a bit of a challenge to 're-think' layouts for those used to floats / css positioning / flex (like myself)
There's a few examples I've run across. One is copy + pasting text, links, or images into the grid - maybe it's just the way I'm using it, but it doesn't let me paste an object into the exact grid box I want intuitively.
The next big release will include grids with contents that auto-flow vs having to always manually position them.
I actually just started using Webflow a few weeks ago, so I didn't even know that CSS grid was a relatively new feature.
Overall, I really like Webflow so far as it's made the design process so much more iterative for me. I actually export the code (code export was a game-changer) into my own Django project, which gives me more configurability. Kudos to you guys for making a great product!
What is webflow doing about that? Do you provide some measure of automated fallback to flex box?
Windows7 had 6.8% of all sessions but seems like most of them are using a modern browser.
All really good signs for web developers out there!
It's an interesting statistic, but it's not news, unfortunately, and doesn't really tell us anything about either the big picture, or help people whose audience does include a lot of IE 11 users.
Almost all my clients use IE11 by default...
It's a miracle that we can use flexbox as the bugs in IE11 have easy mitigations and most IT departments have at least upgraded to IE11 in recent years.
Cool site btw, I've bookmarked it for later.
Right now we have only implemented a _subset_ of the spec; we'll be doing a more thorough audit of IE11 support as we add support for more sophisticated grid features, as those are more likely going to need some kind of built-in fallback.
In the meantime I would encourage folks that need custom fallback behavior to harness site-wide custom code; Webflow outputs pretty straightforward HTML and CSS so it should be easy to manually create fallback styles.