Importing sites into Webflow, custom media queries, fallback assets, and more

Community resources Product feedback
1

We’ve built a number of sites in webflow, some big and some small. We’re more than thrilled with the experience thus far and have loved every second of it. Webflow is awesome and I can’t wait to see what new features are up your sleeve.

Off the top of my head, I’ve put together a list of some things I can think of that would help an organization use webflow more efficiently. Even without these features, we’ve been able to integrate webflow into many of our processes and will continue to do so. Admittedly, I didn’t research each of these topics, this has just been our experience thus far.

1) Ability to upload a site that was exported out of webflow back into webflow
We have some designers who are now able to work on pieces of sites, but they can only take it so far and the sites have to eventually wind up in a developers hands before launching. Once that happens, the site is forever locked out of the webflow environment. Or, simply a live CSS/HTML viewer would be helpful while working in design mode. “Markup Mode, Code Mode, Skeleton Mode, whatever” Include a warning that altering code may break stuff… You guys have version control and sites can be reverted if someone messes up.

2) Customizable media query’s
I’ve seen this mentioned before, and sometimes it can be an issue. Desktop/Tablet/Phone view is helpful and works 90% of the time, but I have seen the responsive layouts change between media query’s, and if you’re not manually scaling the browser, that can really bite you when you eventually do check it.
See this article: Life Beyond 960px: Designing for Large Screens

3) UI customizations
For example- maybe nested elements could have customizable thicknesses or alternative colors of borders: Sections are light blue and thin, containers are dark blue and thick, columns are orange and dashed, text is red and if it has span make it thick. I’m not saying it would be pretty, but it takes it a step beyond x-ray mode.

3) Folders
I think we’ve got 30+ websites that have been published/started/abandoned, with no organization in the main menu. It can get a little confusing.

4) Styling backwards/mobile first
This would be incredible useful, especially if you’re working on the mobile view and figure out a solution that would also translate to the desktop view.

5) Copying elements/styles between projects
We have a client where we do a lot of little sites for them with different layouts and designs, but it would be great to have some shared styles/elements as it’s still the same company, where it’s not appropriate to use a template. I could see this being an issue with paid templates as people could exploit that somehow, but you can figure out how to prevent that I’m sure! Another cool feature here would be team level color palates/custom font selections or saved/shared image libraries for logos, etc.

Longshots:
Many of these relate to compatibility with old browsers

6) Browser warnings/will it work integration?
A lot of awesome features simply won’t work in IE8, and I can only imagine how many sleepless nights have been spent by designers using webflow when their awesome site doesn’t work in the clients IE8 browser and they don’t care if Chrome is better. Unfortunately this is still an issue for many, but on the other hand, as Microsoft’s support ends next year, I think many large corporations will abandon use.

7) Built in image compression prior to publish or upon upload
Jpegs, PNG’s, etc.

8) Fallbacks
SVG > PNG via javascript, etc. One click/auto implementation.

9) CMS
'nuff said!

Bonus
Fontello/Fontawesome
Commenting in design mode (the way a developer comments code)

Test Mode/Fix it: I’ve seen some designers who don’t quite understand how CSS works get into some major jams when designing something and they just end up “breaking” the layout. Elements extend beyond the body’s width, background images zoom into the person in a photo’s nostril when scaling down, things stop being responsive or not cascading down properly, etc… What if webflow knew what was going on and with the touch of a button, you could see what’s causing your layout to “break the rules”? In a production environment when there are deadlines and we’re waiting to export code, someone without a background in development may not know how to fix something and someone might not be available to help them. This sounds bad, but it happens and the greatest benefit of webflow (in my opinion) is empowering those with major skills to expand into development.

@jeremydirect

5 Likes
2

Sorry to respond late to this thread. But my 2 backend developers are simply telling me that webflow exported code is too difficult to sync the code once we start integrating the webflow developed theme into any CMS or custom programming sites. Have you experienced similar problems? And how have you found solutions to these problems? I want to continue using webflow for front end UI etc but I can’t unless there is a way of better integration after code export. Is there anyone on this community that has found a viable way of better integration when working on large website projects.

3

Hi again, this is what one of my backend developers wrote after spending many hours trying to use the webflow exported code: (can anyone shed some light on what we are doing wrong, or what we can do to make things more viable when working on large sites after creating the front end in webflow and after export:

MY BACKEND DEVELOPER WROTE: For future reference, I don’t think WebFlow is a useful tool for producing front-ends that are going to be integrated into a large project, despite the claims made on the front pages of their website. In fact, some of their claims are plain wrong and contradicted by what is written in the support pages of the same website.
A couple of examples:
• Their CSS files are large (to accommodate mobile first handling) and custom written around their own naming scheme. So any integration will have to be written around this code
• Webflow.js checks forms syntax and throws errors if the schema does not conform to its layout. This is presumably in preparation for posting form data back to the server in the native WebFlow environment. The only clean way out of this is to modify webflow.js, which I have now done but would not normally want to touch.
• In nearly all of the areas in which I work (finance and genetics science) input validation is a non-trivial component. For example:
o I have always needed to be able to write additional modules to handle specific tests or extend existing tests (eg. when checking DOB dates I need to be sure they are within a target range and that they are consistent with the ages of their parents and children). So the validation scheme either needs to be extendible or removable. An embedded weak scheme just gets in the way.
o I need to integrate client side validation with server side checks to deal with those naughty people who hand-craft the HTTP post to bypass browser checks to inject malicious code.

My conclusion is that WebFlow can be compared with WordPress in intent – a useful tool to create sites that stay within the narrow-ish parameters they lay down but an awkward starting point for any project that goes beyond