I made the commitment to finish a rough-cut of a landing page for Scyberia in the span of a day. The reason I'm putting one together in the first place is because I'm going through the experimentation of setting up a two-sided marketplace. I was thinking about how I could make it more a unique project that I care about and this was how the idea was born.

It took me a few hours (with some breaks in-between).

I tweeted as I built it.

How it went

Skeleton

I had a skeleton from another project I had messed around with years ago, so I revived a bunch of the html/css and began stripping out the content.

Metadata

I had to start off with a bunch of the metadata for a few of the pages. Metadata, as in, the title tag and meta name=description fields so that the pages can get indexed properly by search engines. These two elements are quick to add but slow to edit. It's easy to name the page (e.g. "Home", "About"), but thinking about what the 1-2 sentence summary is going to be that appears on the search engines takes a little bit more time.

Favicons

From there I had to spend some time creating favicons that would appear in association with the site. These are the icons that appear in your browser tab or on your handheld/tablet homescreen when you create a shortcut to a web page.

I jumped back over to the site itself and began working from the bottom up. I had already put an "above-the-fold" call to action graphic at the top of the page when I was prototyping the idea for Scyberia the day before, so I wanted to get back up to that to finish things off and go live. I set up four sections in the footer  - About, More Info (other pages), Blog (just a link to my initial aforementioned post for now), and a sign-up to Join Waitlist.

I then used Font Awesome to put a banner above the footer summarizing how the internet can help us do more in this challenging state of affairs in the world; I was thinking about how the challenges of 2020 has been inhibiting so many people and forcing us to do less.

Waitlist

I still have to build out the entire Rails app that is going to power Scyberia, so I've set up a waitlist that's tied to Mailchimp on the frontend in the interim. Since I'm going to write blog posts and tweet as I build, I decided to set up this landing page in case anyone is interested in following along and using it, if it gets to that point (as opposed to starting from scratch at the end).

About

From there I put together an About page. This took a bit of time since you really need to think about the content and why the site's being done. It forces you to articulate things without being too wordy. Hopefully I didn't fail. 😅

Privacy Policy / Terms and Conditions

This takes a significant amount of time. Thankfully there's a lot of resources on the internet and solutions to help you generate a basic and initial set of policies for a standard landing page w/ an email subscription and no e-commerce. That said, if things get to the point where they're going to go fully live (the fully-fleshed product) all of this is going to get redone.

Additional banner above waiting list on home page

After the policy pages I went back to the home page to make the final push to finish setting this up. I added another banner section above the waiting list, to further summarize the vision behind my idea for Scyberia.

Integrating with MailChimp

At this point all of the pages were up and running, but the waiting list sign-up feature didn't work. I added the JavaScript for MailChimp so that people could easily request to be notified when things go live and it's possible to try things out. Waiting list done!

Open graph metadata

Starting to think about final touches, I added open graph metadata to all of the landing pages, so that they look decent when shared on the web.

Finishing up with Google Analytics and Google Search Console

I added Google Analytics and Google Search Console as the last thing before going live. Since this is a side project I'm selling my soul here in exchange for the free data firehose from Google. But as things get closer and if this becomes more serious, I'm going to use Simple Analytics instead.

F it, we'll do it live!

The landing page wasn't perfect, and it definitely still has some leaks but she works well enough to be sea worthy - so I went live, /roll Bill O'Reilly (NSFW): 😂

There's a bunch of things I need to fix, but that's another post. If you have any ideas about things I could have done better, please let me know!

It was fun building the landing page.