How to make a landing site

My notes on making a landing page. The thing about making websites are that you have to pick between simple or easy.

  • The easy approach is to use low-code alternatives wix, webflow, wordpress etc. But as they are easy to manage content they are not simple to change after the fact. And are hard to make custom and iterate on later. One size fits all etc.
  • The simple approach is to use a low-level CMS like Jekyll. And then manually write HTML + CSS that match the required design. This is simple to change and iterate on, but not easy to setup the first time. More analysis and thought needs to be made upfront. As pivoting away from the initial architecture might require starting from scratch etc.

I think the way to solve this kind of problem is to solve it first for the most degenerate, simple case you can think of, and then add any desired refinements.

  1. Sketch the design in a notepad / Apple notes If you have apple pencil (Desktop and mobile)
  2. Make the design look good in Sketch or Figma
  3. Make the index.html and .css to match the design, start simple, write a lot of comments in the code with gotchas, tweak in more advance styling as you move forward. You can align layout with flex styling, use google to find alignment solutions as you go. Html and css is not that hard, it’s almost the same as using indesign or pages. You just have to manually write the values, instead of using dails and knobs and buttons
  4. Make desktop and mobile separate, combine after, it’s too complex to begin both in the same file.
  5. Jekyll can be used as static CMS, blog, subpages etc
  6. Get feedback as you go, and iterate on the feedback

Launch your landing site 🚀

(Other solutions like wordpress, webflow etc are more or less the same process)