Categories
Technology

Weekend No Code Challenge

In college we learned the different types of software development styles: custom, turn-key, and out of the box. Once I started consulting we implemented software that was already developed. For the most part we had to configure it to meet our client’s needs. Occasionally, we would have to develop custom screens or reports. For the most part, what we needed was already there. It was just a matter of putting it together.

So when I came across this No Code challenge I was all in. It’s been a while since I made something and this was a fun way to spend a couple of hours.

The challenge is to create a landing page that promotes yourself using a no coding tool like Mailchimp, Wix, Instapage, or Landen. Someone in the comments mentioned Fliplet so I thought I would give that a try since I’ve used Mailchimp and Wix before.

Fliplet lets you configure an app based of their components and pre-made screens. I made one from scratch so I could get a feel for how their tool works. I think the hardest part of making a landing page from scratch is figuring out what to put on it!

Key Elements to a Landing Page for Mobile

After a bit of research I found the key elements to include on a mobile landing page (you can view the app from your desktop browser but it’s designed to be an app).

  • Key elements above the fold (before you have to scroll)
  • Catchy header
  • Striking image or video (if using video, 30 seconds or less and make sure it doesn’t slow the app)
  • Concise, catchy copy explaining what the page is about
  • A Call to Action (button, form, etc.)
Preview of my landing page on Fliplet

While testing, I did notice a bug in Fliplet. I uploaded the image of the pens on a pink background as the background for the header container. I notice, when you view the app in Fliplet’s App Viewer or in a mobile browser, that image is replaced with something else.

So, please don’t be concerned if you see an old woman’s face on mobile. I didn’t age 50 years overnight. 😂

*Fliplet fixed this bug so you should no longer see this nice, old lady*

Header image bug in Fliplet App

If you use one of Fliplet’s pre-loaded stock photos as the background for the container, that image displays correctly across desktop, the app viewer and mobile.

WordPress as a No Code Builder

I noticed WordPress is rolling out changes with it’s TwentyTwenty theme. You can pre-select pages as templates instead of building each one from scratch. I think this is a good update since they moved to the Gutenberg Blocks and it can take some time to get everything configured just right.

WordPress page templates

Are you participating in the No Code Challenge? Let me know on Twitter @lilyotron so I can see what you built!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.