How to build a clean and simple signup page using Strikingly

Up and running in less than 1 hour

When it comes to quickly having online a one-pager quickly, Strikingly is one of the best services there is on the market. Compared to creating your own page from scratch, it really simplifies things a lot.

I recommend Strikingly quite often to people who lacks the technicals skills involved in creating a nice and clean one-pager. And although, Strikingly simplifies everything a lot, I’ve seen people struggle quite a lot to get it right.

This step-by-step article will guide you through all the steps needed to build a very clean and simple signup page. If you’ve got any question, you can leave a comment.

We’ll use an example to guide you through each step: a weekly newsletter providing technical tips for non-technical people. Here’s what we’ll be building, you can see it live there http://teeps.strikingly.com/


Let’s get started ☺
Head over to https://www.strikingly.com/, signup for an account and pick the “App showcase” template.

Design

Let’s trim (almost) everything down:

  • Open the menu on the left, and remove all the sections
  • Remove the title (top-left) and the iPhone picture

Add a new section

In the left menu bar, select “Add a new section”. Scroll down and choose “Signup” at the bottom of the list.

Here is what you should have by now:

Hover over the iPhone and remove it.

Logo

Hover over the current logo (little heart, top-left on the page), edit, and upload your own logo: make it a transparent png with a height of 108px, drag and drop the file and save.

Heading and sub-heading

Ok, that’s where strikingly comes in very handy: you can make changes to your copy and have them go live within seconds. Make it short and clear. Don’t aim for perfection, you can change it later.

For our example, we’ll go with “Weekly technical tips for non-technicals” for the heading and “Simple and effective technical tips in your inbox every week: design, programming..” for the sub-heading.

Form

  • Uncheck name
  • Change the email placeholder if you wish
  • Change the call-to-action
  • Change the thank you message

Background

Click the “+ background button” at the top-right corner.

Your goal here, is too make your page compelling while keeping it easy to read without making it slow to load.

We will be using a picture provided by Strikingly for our background but you can upload yours (make sure it’s not to heavy though, regular strikingly images are less than 250kb).

Choose “more” and pick a category. Blurred background and pastel solids are the easiest one to work with: your copy will be readable, no matter what. Displaying text properly on a background image can be very tricky and your customization options are limited without technical knowledges.

In our example, we’ll choose one in the blurred background category.


Ok, we have the basics for our design. Let’s twitch the details a little bit. In the left menu, select “Styles”. We could use one provided by Strikingly, but we will make our own: it won’t take long.

Header

Light or dark. Light is usually easier to work with. Try both and pick the one that goes better with your logo.

Text highlight

This control the color of both the call-to-action button and the title.

In our project, we left the title empty, which means we can pick a color that will make our call-to-action button really stand out: let’s go with green.

Fonts

Title was left blank, we only need to focus about 2 fonts: one for the heading and another for everything else in the page. If you don’t know, just pick the same for both (Open Sans is a safe choice).

Test different size and change the font-color to black, if needed, in the “+ background” menu. Use the “preview” option in the left menu to get instant feedback on your design for mobile, tablet and desktop sizes.

For our project, let’s pick Raleway for headings and Open Sans for regular text. Align left and slightly increase font-size for the sub-heading.


Header and footer

Go to “settings > advanced setting”:

  • Check “Display navigation bar”
  • Uncheck “Display navigation bar on mobile phones”
  • Uncheck “Display navigation buttons”
  • Unchecl “Display footer at the bottom of the page”

Settings

Congrats, your design is ready. Keep reading, we’ve still got a few things to do: click on “Settings” in the left menu.

Title & URL

Title: Make it short and descriptive of your project. Use this tool (by Moz) to preview your title in Google search results. As a good rule of thumb, aim for 40 character or less (use this tool if you need: “File > Make a copy”).

We will go with this: “Teeps: technical tips for non-technicals”.

URL: As a free user, you can use a strikingly sub-domain for free.
For our project, teeps.strikingly.com is available: perfect.

Descriptions

Site description: This can be used by Google when displaying your page in the search results and also when your page is shared on Facebook. Make it so that it complement your title: specific and action-oriented. Make it less than 150 characters (use this tool if you need: “File > Make a copy”).

We will go with: “Progamming and design tips for non-technical people. Get them for free.”

Site keywords: useless, don’t lose a single second with that.

Facebook og:image: Facebook will compress it anyway, follow Strikingly’s advices and go for a 200x200 jpg. Seems like Strikingly doesn’t support the new ratio for og:image (1.91:1)

Favicon: don’t follow strikingly guidelines, you can get retina support with a few simple steps (details matters).

  • Use a 32x32 png file with transparency
  • open this page in your browser: http://iconverticons.com/online/
  • drag and drop your file
  • click on the “ICO” button
  • save the 32x32 .ico file on your hard drive
  • go back in the strikingly editor, drag and drop the .ico file you just created, you’re done.

Advanced settings

These should already be configured properly, just check it is.

  • Privacy: uncheck “Hide search from search engines”
  • Services: check “Enable Twitter cards”
  • Plugins: uncheck “Image sharing widget”

Ok, we’re done.

Let’s check everything in the preview mode (left menu). If you’re satisfied with the results, go back to the editor and hit publish. Don’t share your project right now, let’s run some quick tests first.

Run some tests

Before you promote your page, let’s make sure everything works properly:

  • Check for typos in the copy (both on and off-page)
  • Test your page on multiple real devices if you can (mobiles, tablets, PCs)
  • Test the Facebook share option: Press publish, and select “share on Facebook”, check everything is right (og:image and copy), in the bottom-left of your screen, change the sharing property so it will only share to you. Hit share. See the result on your Facebook wall, make sure everything is fine, in particular, that the link redirect properly to your page.

Everything is fine? Congrats, you’re good to go ☺


Florent Piétot is the founder of Tribe, a mobile development studio in Paris. You can follow him on Twitter @fpietot.

Show your support

Clapping shows how much you appreciated Florent Piétot’s story.