Five Steps to Plan Your No-Code Website or App

How often do you get distracted by the latest no-code tool? Do you start with technology first, solving problems later? Or do you start with a problem but give up quickly, because you just can’t figure out the “perfect” solution with so many choices out there?

Jen Kramer presents five steps to effective planning for your next no-code website or app. Based on her Harvard course and book, Jen will walk you through defining goals, audience, features and functionality, data flow, and brand to create an executable outline of work for your next project. Stay on task and reach success with a clear outline of process and worksheets to walk you through each step. Gain confidence in creating your next project and build more effectively with a plan.

[Interesting Substack feature] (https://medium.com/linda-caroll/how-substacks-new-gold-stars-will-help-writers-get-results-9fc6fdc6342a): your readers are given star ratings visible only to the newsletter owner.

As the article points out, you can give special offers to people who are actively reading your newsletter and weed out those who just wanted the freebies.

I’m also thinking about this for educational purposes. You know exactly which students are engaged enough to open the emails.

It’s in Squarespace, Wix, Microblog, WordPress, Drupal, Joomla, Softr, Gumroad, Teachable, Thinkific, and countless others.

It’s usually located under Design, Theme, or Advanced.

It looks like this:

It’s The Box.

Into this box, one pastes CSS.

This implies that the website owner:

• knows enough CSS to know what to do with this box

• can form a CSS selector that “works” (i.e. specific enough to the problem but not overly specific)

• knows enough CSS properties to spell out the styling that they want

• understand the cascade enough to know how to make their style work when it doesn’t

Wow. So why is there so much code in no-code site builders?

True, you don’t have to use the box. But if you use no-code tools long enough, you’ll eventually find something that you’d like to tweak just a little bit relative to what you’re able to customize with the tools.

Where does one go to learn this CSS? The professional courses are all focused on layers of command-line tools, over-powered code editors, and Git repositories. None of these things help with The Box.

Furthermore, the browser’s devtools are pretty inpenetrable to those who don’t know HTML and CSS already.

In the short term, we must teach CSS to navigate The Box. (And let’s face it, many of today’s “full stack” coders aren’t able to navigate it, either.)

In the long term, we need to improve our interfaces in some way so The Box isn’t needed.

This is a big problem to solve that no one is talking about.

As a longtime musician, I’ve been fascinated watching sea shanties take over the internet this past week.

Playing or singing music with others is always a great joy. It is one of the hardest parts of this pandemic, missing my fellow musicians for weekly practice.

This music taking over TikTok at this moment in time has several interesting threads.

a. Sea shanties aren’t difficult to sing. They have pleasant, simple melodies. They’re easily harmonized.

b. Thre are fantastic stories behind the songs. Some compare isolation on board ships with isolation in pandemic times. These stories are also very different than the usual run-of-the-mill pop song lyrics (seriously, how much can we sing about love and loss anyway?).

c. No music training or instruments are required to participate. (Although in the latest versions, we have instruments added, including a beat track!)

d. And this is critical – TikTok made it happen, because they allow EASY layering of your video on top of others. No Garage Band, no special software, just a free app with amazing usability.

Now someone with no music training and few technical skills can join in the fun, creating something bigger than themselves with people they don’t know in a time of isolation. What could possibly be more appropriate to this moment in history?

[Jakob Nielsen] (https://www.nngroup.com/articles/mental-models/) defines mental models from a UX perspective: “A mental model is what the user believes about the system at hand."

[James Clear] (https://jamesclear.com/feynman-mental-models), in a fantastic story about mental models, brings it back to its essence: “If all you have is a hammer, everything looks like a nail… When a certain worldview dominates your thinking, you’ll try to explain every problem you face through that worldview."

When we look at web technologies, they are dominated by all kinds of mental models.

The new JavaScript programmers, those who came to the web in the last 5 years or so, believe that the web is JavaScript-first, with HTML and CSS as annoyances that never “work” correctly. Those who have been in the web field for over 10 years know you start with semantic HTML, layer on the CSS for styling, and use JavaScript sparingly. However, when we’ve taught the JavaScript-first model, we wind up with the modern day messes we see dominating the world of custom development.

One of the big advantages I bring to the technology space is a breadth of knowledge in many areas. I started with Dreamweaver and HTML, later bolting on CSS. I moved on to pushing content management systems to their limits. I learned in a time when we didn’t have a zillion command-line tools for managing files. I started working with CSS when there were no browser developer tools. All I had was the HTML and CSS from “view source.” I had to figure out what was broken on my own.

Now as I make the switch from teaching code to teaching no-code, there is so much I bring to this new world.

• I can ground the problems that no-code tools solve in coding language. Or not.
• I can frame the problems no-coders encounter in the words of a model that speaks to them.
• Someone needs to teach HTML and CSS to those who will not use it professionally. Our current courses assume you have 27 different command line-based tools and make it look so difficult. But yet, we provide the “CSS editing box” for those who want to dump in their custom CSS. If you’re going to put CSS in that box, you have to know how to write it. And in some ways, this problem is more difficult than what the professionals face. Have you SEEN the crap that passes for HTML these days? Have you tried to override it?

Tools mentioned in a December 3 networking event…

www.glideapps.com

www.adalo.com

www.metaranx.com

webflow.com

carrd.co

bubble.io

airtable.com

coda.io

www.notion.so

zapier.com

www.softr.io + airtable

www.notion.so/Notion-Advent-Calendar-e159dcd0e70c4e919e278a2f95ec125d

www.mightynetworks.com

circle.so

Some products built with no-code (bubble mostly) www.getcuppa.io

beta.shoutout.so

nutriso.so

Gumroad for selling products gumroad.com

A look into how products are built sideprojectstack.com

www.sheet2site.com

pory.io

badunicorn.vc