Navigate back to the homepage

Building a Mobile App Landing Page

July 2nd, 2013 · 2 min read

Over the last year I’ve been working on a mobile app called Flock. To get ready for our launch, I created a new landing page to allow people to easily download the app. On a desktop browser, it allows people to input their phone number and receive a text on their phone with a link to download the app. On a mobile device, it allows people to download the app directly.

Orginal Flock Landing Page

The Ingredients

Twilio: An API to make and receive phone calls and send and receive text messages. I used this service to send a text message to desktop users containing a link to download the app.

fancyBox: Tool for displaying images, html content and multi-media in a Mac-style “lightbox” that floats overtop of web page

Creative Buttons: Button inspirations from Codrops

SASS: A CSS extension that adds nested rules, variables, mixins, and selector inheritance

Bourbon: A mixin library for SASS

Neat: A grid framework for SASS with Bourbon

Sending a Text

My first step was to get the text message part of the landing page working. High level I wanted to be able to send users a text message with a link to download Flock on their iPhone. To do this, I created a form to collect a user’s phone number, and then utilized a Twilio gem to send a message to the collected number.

Using the ‘twilio-ruby’ gem I was able to get a text message up and running relatively quickly by creating a form and adding the Twilio logic in the route associated with that form.

1def send_text
2 number = params[:number] # grab user's number from form and assign to 'number' variable
3 account_sid = '**********************************' # received after creating an account with Twilio
4 auth_token = '********************************' # same as above
5 @client = Twilio::REST::Client.new account_sid, auth_token # create a Twilio client (used to send messages)
6 @client.account.sms.messages.create( # method on client to create an sms message
7 :from => '+15555555555', # my Twilio number in actual code
8 :to => number, # user's number
9 :body => 'Download Flock and do more together: flockwithme.com/app' # text message content
10 )
11 redirect_to root_path

Making it Look Pretty Part 1: Adding a fancyBox

I wanted to use javascript on the “SEND ME A LINK” button so that the website didn’t have to load a new page to display the number form. Not wanting to re-invent the wheel, I looked around for js plugins and ended up choosing fancyBox, a library to easily implement “lightbox” popups.

To implement this plugin, there were a couple main steps:

  1. Create a hidden div containing the number form
  2. Link a button to the hidden div
  3. Add the necessary js from fancyBox
1# STEP 1: Add hidden div containing form
2# Note: id = "number_form"
4<div style="display:none" class="text" id="number_form">
5 <%= form_tag(send_text_path, :method => :post) do %>
6 <%= text_field_tag(:number, nil, :placeholder => '555-555-5555')%><br>
7 <%= submit_tag("Submit") %>
8 <% end %>
12# STEP 2: Creata a button that links to the hidden div
13# Note: class = "fancybox" and href = "#number_form" (id of div from STEP 1)
15<a href="#number_form" class="fancybox"><div>SEND ME A LINK</div></a>
17# STEP 3: Add the fancyBox js to show the div when the button is clicked
18# Note: I am calling the function "fancybox" on all links
19# that have a class named "fancybox" (from STEP 2)
21<script type="text/javascript">
22 $(document).ready(function() {
23 $("a.fancybox").fancybox({
24 maxWidth: 900,
25 helpers : {
26 overlay : {
27 css : {
28 'background' : 'rgba(0, 0, 0, 0.8)'
29 }
30 },
31 }
32 });
33 });

Making it Look Pretty Part 2: A Fancy Button

Fancy Button Example

Once I got the fancyBox working, I wanted to customize the styling of the form. Earlier in the week I stumbled across an awesome link from Codrops that had examples of many different buttons using CSS. I chose my favorite and added the appropriate CSS.

The button I chose gives a 3D effect by creating a shadow and making the shadow smaller / shifting down the button while hovering over the button, and removing the shadow all together when clicked.

1// Note I am using SASS, which allows me to nest my css
3input[type=submit] {
4 border: none;
5 cursor: pointer;
6 width: 100%;
7 padding: 15px 0px;
8 margin: 15px 0px;
9 text-transform: uppercase;
10 position: relative;
11 background: $green;
12 box-shadow: 0 6px #527a52;
13 font-family: "proxima-nova", "sans-serif";
14 font-style: italic;
15 font-weight: 800;
16 font-size: 1.2em;
17 color: white;
18 border-radius: 0 0 5px 5px;
20 &:hover{
21 box-shadow: 0 4px #527a52;
22 top: 2px;
23 }
25 &:active{
26 box-shadow: 0 0 #527a52;
27 top: 6px;
28 }

Making it Look Pretty Part 3: Responsive Design

Once I got the button looking sharp on a desktop browser, I then wanted to make the page responsive for mobile users. Not only did I want to change the styling so it looked good on a phone, but I also wanted to change the main button so that when a user opens the site on their iPhone the “SEND ME A LINK” button turns into a “DOWNLOAD THE APP” button that takes him or her directly to the App Store.

I made the button (and rest of the website) responsive using Bourbon and Neat. Bourbon is a mixin library for SASS, and Neat is a grid framework for SASS with Bourbon.

1// STEP 1: Define a mobile breakpoint (Neat version of CSS media query)
2$break_four: new-breakpoint(max-width 585px);
5// STEP 2: Define style to hide elements where class = "mobile"
7.mobile {
8 display: none;
11// STEP 3: Hide items where class = "desktop" and show
12// items where class = "mobile" at breakpoint
14@include media($break_four) {
15 .desktop {
16 display: none;
17 }
18 .mobile {
19 display: block;
20 }
1// STEP 4: Add classes where appropriate
3<div id="button">
4 <a href="#number_form" class="desktop fancybox"><div>SEND ME A LINK</div></a>
5 <a href="http://bit.ly/11LgLAn" class="mobile"><div>DOWNLOAD THE APP</div></a>

And that’s how to create a simple landing page for a mobile app!

Adam Waxman

Product Design at SeatGeek

@ajwaxman  ·  awaxman.com

You may also like

Using the Twitter API to Find People

June 17th, 2013 · 3 min read

Ready. Set. Code. - Resources for Learning to Program

June 12th, 2013 · 5 min read