
Show HN: CSS Grid Playground in Webflow - brryant
https://webflow.com/grid
======
vosper
I enjoyed playing with the playground a bit, though as a developer I don't
think I'd find it more convenient to use Webflow vs just writing the CSS
myself, since Grid is pretty simple. However, maybe I am not your target
market, so that's fine.

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?

~~~
thesergie
Hey Craig thanks for the feedback! The examples are not representative of
actual website design/layouts, but we wanted to show off the roots of grid
design (which originated in print media) and demonstrate that you can build
equally expressive designs on the web. With CSS grid there is no limit!

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. :)

------
gmjoe
Sorry but I find this page extremely off-putting...

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.

~~~
brryant
Thanks for the useful feedback — we took a different approach to see if we
could redefine the border of what "UX conventions" are on the web. Sometimes
it hits, sometimes it's... different.

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...](https://preview.webflow.com/preview/g-r-
i-d?utm_source=g-r-i-d&preview=e739eb2c23364b6836c023d1cf0c4e36)

~~~
edvinbesic

      > 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.
    

I'm on firefox and the whole things seems to be working just fine so not sure
why you are giving me this message, but anyhow it doesn't speak well for your
product if the output only works in select browsers.

~~~
callmevlad
A quick clarification - the output of Webflow actually works across all modern
browsers, but the design tool itself has more limited browser support.

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](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).

~~~
MisterAV
Well, if the main problem is the style of the scrollbar and not the
functionality itself, I would not put a warning that it's not compatible IMHO.

------
brryant
Hello HN! 6 years ago we launched our very first playground on HN
([https://news.ycombinator.com/item?id=5407499](https://news.ycombinator.com/item?id=5407499)).
It barely worked, but a few months later we go into YC largely due to the
awesome feedback we received from it. We thought we'd take a page out of
history and show you guys how far we've come, with a version of the original
playground, but fully integrated with CSS Grid.

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.

~~~
deltron3030
>We’re still learning all the tricks needed to make a very large React app
performant, but we haven’t looked back.

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.

~~~
brryant
We've heard of quite a few Webflow users that have converted components built
in Webflow to React/Vue/Angular components. We've explored it a bit internally
but need to get more user feedback on how broadly this would appeal to product
designers and developers, and specifically what workflows they're looking to
augment or replace. Stay tuned!

------
cpr
Webflow is really the bee's knees! Thanks for making such a great product.

(I agree with Paul Irish's comment:
[https://twitter.com/paul_irish/status/315112620627730432](https://twitter.com/paul_irish/status/315112620627730432)
.)

~~~
thesergie
Rock on Chris! Glad you're liking the product!

------
madrox
I stumbled on webflow last week while looking for design tools and
boilerplates. I was put off from going farther down the funnel by the
mandatory account creation to try the demo. It's nice to see a there's now an
ungated part of the product.

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.

~~~
namuol
( Webflow frontend developer here)

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.

------
electrotype
CSS Grids are a game changer in my opinion.

Using some "grid-template-areas" \+ media queries is so cool... It gives you
so much control over the layout!

~~~
brryant
Yea, it's a pretty transformational layout paradigm for the web. The crazy
thing is less than 1% of websites use it:
[https://twitter.com/ebidel/status/1034874571747291136?s=19](https://twitter.com/ebidel/status/1034874571747291136?s=19)

~~~
a_humean
#1 reason I and likely most people don't use it: IE11's poor support.

Once IE dies or I have a job where I don't have to care about IE11 so much,
then I'm all in.

------
jihoon796
The CSS grid was much-needed in Webflow, but I found the implementation to be
pretty unintuitive.

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.

~~~
thesergie
Thanks for the feedback! The interesting thing about the CSS grid is that the
cells are not actual empty elements, but we want to represent the cells
visually somehow to help with affordance. We'll be adding some much needed
enhancements to the copy-paste interaction (I mean, it's so fundamental) soon,
like giving you the ability to select these non-existent cells so that you can
paste inside of them. Let us know if there's anything else that can be
improved.

The next big release will include grids with contents that auto-flow vs having
to always manually position them.

~~~
jihoon796
That's awesome. Improving the copy + paste interactions would definitely make
it a lot easier to use.

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!

------
xemoka
I love CSS Grid, but still can't use it because of support for IE11. There's
still just too many windows 7 users, hopefully not for too much longer.

What is webflow doing about that? Do you provide some measure of automated
fallback to flex box?

~~~
brryant
At least from what we see on webflow.com (> 1MM sessions a month) there have
only been 595 IE11 sessions according to GA, so that's less than 0.06%.

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!

~~~
vosper
Doesn't that just tell you that most (web) designers aren't using IE 11,
because that's the audience for webflow.com?

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.

------
Sir_Cmpwn
This is my favorite CSS grid sandbox:

[https://www.cssgridplayground.com/](https://www.cssgridplayground.com/)

