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.

[Donald Miller of Storybrand: How to Strategically Lay Out an Effective Home Page] (https://buildingastorybrand.com/lay-out-an-effective-home-page/)

Great advice on how to lay out a home page, but so many people get hung up on the design details.

In about 30 minutes, I built out a template based on his description in his article: [https://storybrand.softr.io/] (https://storybrand.softr.io/)

And it’s a breeze to jump in and make changes with Softr, even if you don’t know the software.

This is an example of transferrance, one of the largest challenges in teaching technology. Miller wrote an amazing article with text descriptions of what the website should include. Softr has a great tool that reflects all of those descriptions. But putting these two things together is a bit more difficult for many people. By providing an example like this, the concepts become more tangible to learners.

Sidebar Preamble

My [current website] (https://www.jenkramer.org) is a total embarrassment.

I’ve needed to change it for years. In fact, it’s been on my whiteboard “things to do” for five years.

As I move into the world of no-code, I’m redesigning my site with many different no-code platforms. I’ll be trying out different platforms and putting together some kind of website over the next several weeks.

[Read more about the project] (https://learnnocode.dev/2020/12/23/redesigning-jenkramerorg-an.html)

Today’s Lovely Contestants

I’ve started with [Softr.io] (https://www.softr.io) and [Airtable] (https://www.airtable.com/) because I’ve heard a lot of buzz about Softr lately. As for Airtable, I already had a base available that I need to integrate into my site better.

Airtable base

Earlier this year, I created a [single video on Airtable for LinkedIn Learning] (https://www.linkedin.com/learning/no-code-solutions-for-websites-and-apps/organize-data-with-airtable). It’s a base of currently active video courses I’ve created for different publishers.

Base: Airtable’s word for “database.” I guess database is too scary.

The base, as it currently exists, is [public and available for viewing] (https://airtable.com/shrE6tr0nt0tPVhLi).

I have this integrated on my current website via iframe. Again, easy, low maintenance, but there’s more that can be done with Airtable.

Softr

Feels very much like Squarespace, but with fewer design features, less heavy lifting, and more integration with other tools.

There are a few templates to choose from, but these are just assemblages of blocks with a certain theme. These templates seem to drive content in the no-code space. Probably another topic for another rant sometime… this is not exclusively a Softr thing.

Choose from a series of “blocks” with fixed layouts to assemble the page. Populate with data. Limited ability for changes to colors, fonts, layouts.

The Big Reveal

[My Softr/Airtable website] (https://jen4web.softr.io)

Money spent: $0 (free version of Airtable, free version of Softr)

*Ones I know well: *

🔹 Squarespace

🔹 Wix (wizard version)

🔹 WordPress (.org, .com) (also debatable if this is no-code)

🔹 Webflow

Learning:

🔹 EditorX

Need to look into:

🔹 [Carrd] (https://carrd.co/)

🔹 [Softr] (https://www.softr.io/)

🔹 [Pory] (https://pory.io/)

🔹 [Dorik] (https://dorik.com/)

Several of these are Airtable integrators for web apps. Others are for single page sites.