This document discusses principles for responsible no-code development to ensure projects remain usable for clients after handoff. It outlines six principles: 1) Use simplicity by declaring global styles and minimizing unique styles. 2) Make builds self-evident by avoiding complexity and shorthand. 3) Think modularly by creating reusable components and decoupling styles from interactions. 4) Use intuitiveness through pseudo-classes. 5) Prioritize design systems over outlier content. 6) Polish by simplifying and renaming after building complex components. The goal is empowering clients through maintainable no-code projects rather than just quick builds.

1. No Code Stewardship

2. No Code
Uses a visual development
environment. Relies on UX
to build websites.
(Webflow.)
Yes Code
Uses a syntactic markup
environment. Requires
typing code to build
websites. (Traditional.)

3. Avoiding The Yes
Code Marriage

4. Avoiding The Yes
Code Marriage
Not gonna end well
:(

5. • We need a new landing page for a marketing campaign but
just with a slightly different headline.
• Can we move the CTA higher up on the home page?
• Suzy was downsized… can we remove all traces of Suzy?
• And since we’re already making changes, can we…
Customer Requests

6. Now
:)
:(
The joy of accommodating small changes
LaterEnd of honeymoon

7. Empowering the client!
Enter: No Code Software

8. You can
probably just
do that
yourself,
Jerald in
Marketing.

9. Not so fast!
No Code can actually be just
as obtuse as Yes Code, bro.

10. Not so fast!
No Code can actually be just
as obtuse as Yes Code, bro.

11. Wait. What?
• Div 134, Div 199, Div 226, Div 394
• Cat Photo Wrapper div contains photo of dog
• Divs nested 10^156 deep
• No sections?>???

12. “With Great
power comes great
responsibility.”
—Stan Lee

13. Webflow makes it simple to build &
to hand off a project.
But as designers, we’re responsible
for the project’s long-term usability.

14. A good steward of No Code is
always thinking backward
from the client hand-off.

15. 6 Principles
of No Code
Stewardship

16. 1. Simplicity
• Think broad-to-specific. Cascade styles wherever possible,
beginning with global elements & using classes to define
exceptions.
• Strive to achieve your look & feel by declaring as few styles as
possible.

17. Simplicity Example
Declaring a base font at Body (All Pages)
means you won’t have to declare that same
style over & over across the project.

18. 2. Self-Evidence
• Strive to make your build as self-evident as possible, which
might mean avoiding unnecessarily complex nestings or
obscure, shorthand naming conventions.
• The simplest way to solve a problem is nearly always the best
way, even if that requires a little more thought or effort.

19. 3. Modularity
• So much time can be saved and simplicity achieved by thinking
modularly. This may mean stringing together Utility Classes to
create commonly used looks or behaviors, or decoupling
interaction classes from style classes.
• Always use sections.

20. Modularity Example A
A class like “Sales Page Intro Copy Wrapper,” which might only
serve to center the copy, could simply be named “Center” and
reused across the site.

21. Modularity Example B
An interaction, such as a Parallax effect, can be applied to
unstyled classes like “Parallax - Layer 1” and “Parallax - Layer 2”,
which can be appended over and over to any element that needs
the effect.

22. 4. Intuition
Where possible, use pseudo-classes in HTML Embeds to
automatically style elements like CTAs or bulleted lists, making
them behave as intuitively as possible.

23. Intuition Example
An arrow could be manually added
to a CTA with a span, but a pseudo
element will apply the style
automatically.

24. 5. Systems
Try to solve display issues with content. The integrity of the
design system should supersede a specific piece of outlying
content.

25. Systems Example
If a headline style works across 9 pages, but wraps funny in 1
instance, it might make more sense to edit the headline copy
than to create a new headline style as an exception.

26. 6. Polish
In the heat of the moment, the best way to figure out how to
build a complex component might be to experiment with a bunch
of unnamed divs in order to find the best approach. But after the
component is built, it’s important to simplify and rename. The
effort it takes to refactor in the near term will be earned back
over time.

27. No Code has to mean more
than simply allowing designers
to create quick and dirty builds.
The moral pt 1

28. Thinking past quick / easy can
mean empower our clients to
control their own destiny.
The moral pt 2
(Leaving you more time to read comic books.)

29. Fin