Ask Subform users: Thoughts on HTML+CSS import?

#1

I’ve noticed that in a lot of my projects, the client may have a template they already have in mind, or I’m able to find pre-built static HTML+CSS that is a good starting point for me to build on top of in my design process. For the sole purpose of saving time. One compelling use case is being able to import pre-written static HTML+CSS (no JS!), have it interpreted by Subform, and then go on from there defining components, modifying appearance, and populating them with data, etc.

A lot of WYSIWYG editors have a big turnoff where you must begin your projects inside of them. It would save so much time to not have to start from scratch. Being able to, say, buy a static vanilla HTML+CSS app admin template from themeforest and import that into Subform would open up a lot more opportunities for me to use Subform. And some may say that, if you already have the pre-built HTML+CSS, why not just edit it in the browser? But what makes Subform compelling in this case is that I can modify the designs without using code, and even fill in real data and see how things look. This has nothing to do with how proficient someone is with code; sometimes working in code gets in the way of designing. Subform’s tools allow for better a design process than using a browser+text editor. And I don’t think there is any WYSIWYG editor that lets you define data and inject it into components, while at the same time fully accounting for the spacial relationship between elements (both sibling and parent-child) and window dimensions, etc, besides Subform.

To subform users: Would that be a use case you see yourself using?

To Kevin and Ryan: Would this be something you’d think is feasible to support?

#2

This is mostly what I was hoping for when I originally supported this project: a design tool that is more closely integrated with HTML and CSS in general. After a while it became clear that wasn’t the direction this project was intended for and that the features I liked most were placeholders for things to come. Perhaps it may yet evolve this way, I’ll wait and see.

#3

I wonder why more people who viewed this didn’t chime in. It’s a yay or nay thread, but no opinions on the matter from most viewers? What’s up?

#4

Can you be more specific about what you mean, Josh? Are you looking for a WYSIWYG editor for HTML/CSS, a la Dreamweaver or Webflow?

If not, what’s the difference between those solutions and what you were hoping for? And what’s missing from the latest release’s HTML/CSS export features for you?

#5

I haven’t had the chance to dive into the newest release features but it definitely looks like a step in the right direction. Webflow is closer to what I desired in the beginning though it does have its own shortcomings. Dreamweaver is a bit too heavy on code. I was referring to this discussion held early on: Container width not changing to accommodate text after editing in ‘Escape Hatch’.

When I originally came across this project I was hoping for something to bridge the gap between my team’s designers and programmers. As a long time Flash shop, all of the designers are accustomed to creating content with a fixed aspect ratio and since moving to the web they’ve struggled to grasp designing for a responsive app. What I liked most about Subform is that it appeared to focus solely on how one can design around the flow of a web document and the box model (probably why it was called BoxBox at the time). It looked like something that could act as a common language between the two halves of the team and truly enlighten the designers on the power of web layout.

I think the penultimate use case for me would be to create a template for our product (pure HTML, CSS) that could be ingested into a design tool, modified by the designers and spat back out in the same format. We’re working on something to achieve this internally now though.

That said, I still think if I got some of the designers to use this tool even just once they would come to a firmer understanding of the web even if it wasn’t what we needed to make it a daily use tool.

I understand that this tool is intended for a broader audience than designing for the web, but this was just my take on it.

#6

Thanks for the thoughtful breakdown.

Importing HTML/CSS back into a design tool is an extremely difficult technical challenge. You’d effectively have to support every single W3C spec and account for every property inside of the design tool’s GUI… or you’re going to end up with unusable/broken import.

Even Webflow—which is as close to a 1:1 WYSIWYG web design tool as can probably be made—is not touching it with a 10 foot pole.

It may be more achievable if scoped tightly, both in terms of process and spec support (and this is maybe what your team is working on internally). Things are so heavily variable from team-to-team / project-to-project, though, that it’s tough to prescribe a general solution.

This is still our goal, but it has to be something that’s reliable and useful across different workflows, tech stacks, etc. Kevin and I have been doing a lot of thinking and experimenting in this space and we’ll be releasing more ideas in the near term.

#7

Thanks for the insight here, I’m glad to have a real response to this rather than the dismissive talk happening very early on in this community. I totally agree here, building a full featured custom web renderer or parser inside your design tool would be prohibitively difficult and bug prone for sure. We just using a web container to render the template code as-is with editing features injected on top to get around this issue.

#8

This sounds cool, can you say a bit more about this workflow and the tool you and your team are building and using to support it?
It sounds like you have a collection of HTML templates, and then you are drawing some kind of overlay on them?

What sorts of things are designers editing? Are they editing the internal structure of the templates themselves? (Creating new tags, reordering existing ones, adding CSS properties, etc.) Or is it more of a “building blocks” approach where they can create new instances of templates and rearrange them, without editing their internals?

#9

Right now it is still a young project and I’m the only one assigned to it (and only when I have free time) until it gets a little further along. As it is, the app is built on Electron and written in TypeScript.

The main product we sell is sort of an interactive video/slideshow player with learning content. The designers build the content for the player and also create branding guidelines/comps for the player itself for the developers to implement.

The tool I’m building is meant to allow the designers to skin and alter the player and some of our other products without developer help. We have a couple dozen designers and only 3 full time developers so it will help take a lot off the dev team’s plate and give the designers some more creative freedom. Functionally, it takes the template and renders the HTML and CSS in a web container. There are a few different tools you can use to interact with the content which are currently: Create, Move, and Design with more to come. Create acts like your typical WSYWIG editor with a toolbox of controls to choose from with the freedom to insert your own custom HTML controls. Move allows you to select nodes in the editor and move them around. Design lets you change style properties of existing nodes and assign classes from the template.

TLDR; The designers need to be able to edit the entire structure themselves because the player skins can vary pretty wildly. Can’t share a whole lot more than that but hopefully you get the idea.

#10

@josh84089 Cool, thanks for sharing! Sounds like a web IDE that’s specifically customized to the code that you and the other devs have built. If you discover any techniques that work particularly well for bridging the visual design and the code, please let us know — sounds like we’re working on similar problems! = )

#11

@josh84089 what are your thoughts on Pinegrow? It can import basically any html site since it embeds a browser, and adds editing tools on top of it. But I’m not sure they’ve gone as far as they could when it comes to creating an intuitive UI for editing without code. It feels like you still need to have a strong understanding of HTML and work in a text editor to really get the most out of it.

#12

This looks pretty good, I fear it is a little too deep on the programmer side of the spectrum for my needs though. I do like that it supports other template options like ERB too, pretty handy.

#13

I second this request… it would be a huge clincher for me. Having to start from scratch in a new app is a big hurdle to get over. I recognise the challenges that this presents… but maybe there is a middle ground.

Best reference I have for this is Indesign ~1 which was able to import Quark documents. This was done with the caveat that not everything would come through that process. For me (and I suspect others) this made the switch very straightforward.