Designing For Developers

Hey all. First of all thanks to they guys at Webflow for this awesome tool. Been using it for just over a year now.

Question: What things do I have to keep in mind when designing for a developer. Say, a website will use a custom CMS system outside of webflow or will be integrated into a blogging system, CRM and so on. This is especially in relation to website structure, to use Flex Grid or Columns and so on.

Any help/pointers are highly welcome. Thanks.


Here is my public share link: LINK
(how to access public share link)

Hi @Alex_M welcome to the community! :smiley:

That is a good question. I would say, work with a dev CLOSELY during each phase. The kick-off, the wireframe and the design (in webflow of course :wink: ) phases.

Make sure you both know what is needed in the site. Make sure to ask the dev where dynamic content would go in the site design and leave empty DIVs for him/her to add their own code into.

Then export the site and give it to your dev.

Hope this helps :slightly_smiling:

1 Like
  1. Webflow sometimes exports code you don’t actually need, both js and css. Consider working with the dev to identify what can be removed without breaking your template.

  2. Webflow also sometimes exports the entire font family when you might only need a few fonts. Open Sans is a common example for me. If you can identify which ones you need and don’t need, development can get rid of those and help reduce page load time.

I know there are more things I pay attention to, but I can’t remember!

2 Likes

Oh. Also!

Adding anything to the Custom Code area adds it in the Head of your pages, but it should be moved by a developer into the exported stylesheet. You’ll want to point out that it’s there.

@PixelGeek Thanks very much for your input Nelson . I must say wire framing with the developer goes a long way in cutting lead times. Seen the ease of development on their side in just a week.

Side Note: Great work on Monday Motivation.

Thanks very much @sarahc for great your great pointers. The font export issue has been a real brain-drill. Also, my dev has been complaining of class replication in the w-slider;

Ex: I have four slides; This will be targeted by an external CMS for updating. Which class structure is better?
Option 1: slideone, slidetwo, slidethree, slidefour
— OR—
Option 2: slide (main class) two, three, four (combo classes)

How would you tackle this?

thanks for watching! :smiley:

This is probably debatable, but I’d go with option 2. This means that I won’t have to repeat the same styles over and over that each slide would have in common. It reduces the lines of code because you don’t have to repeat the same style over and over, and it’s easier to maintain because you can just change one line of code to affect all slides, instead of updating it in four places.

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.