Bright Newt

The Best Source Codes on the Web, Period.

You’re Only as Good as Your Website

Published February 11, 2014

This post was guest written by Sean Nam. Sean has purchased and reskinned some of our source code, and done so quite well. We invited him to share some of his thoughts.

 

“An ugly website can make you look amateurish,” says Austin Church in Appiness, the app marketing guide he released in January 2014. “With this in mind, you should create a dedicated page for each of your apps on your website, or better yet, a website for every app.”

So how do you make an attractive website? I decided to dig deeper and do a little research.

Today I’ll go over the three general types of websites you can build for your apps: an individual app page, a simple landing page, and full website for multiple apps.

An individual app page is what most developers with one or two apps have. These type of websites allow you to showcase the app’s beautiful user interface, unique features and selling points, and, of course, a link to download said app. Many include support for video or slideshows of screenshots. There’s also links to social media sites like Facebook and Twitter and press coverage or a blog. Essentially, it’s the sales page for your app.

Some good examples:

Flightcard – http://www.sylion.com/flightcard/

Mosaic – http://heymosaic.com/

Cocktail – http://thecocktailapp.com/

Pocket – http://getpocket.com/

P.O.P. – https://popapp.in/

A landing page is also very popular and a simpler version of the individual app page. Often minimalistic in design, this page will have just a screenshot or video of the app, a short description, and the call to action.

Instagram, the app that Facebook purchased for a cool billion dollars, still does this, as do others including:

Loudie – http://www.loudie.com/

Languages – http://languagesapp.com/

Just Landed – http://www.getjustlanded.com/

Now the last type, a full website, is mostly used by companies that specifically build mobile apps or by developers with more than one app wanting to brand the company as well as the individual apps. Each app still gets its own page, but all the apps are on the company domain name, such as tapbots.com, instead of instagram.com. This allows the visitor to view all the company’s apps in one place.

Tapbots is a great example. They have several apps for the iOS platform, and since all of them follow the company’s motto Robots for your iPhone, iPod, & iPad, the site works extremely well. You can see the apps they highlight as well as browse by platform and visit the company blog.

Tapbots – http://tapbots.com/

Now that we know the different types of websites to feature your apps, let’s look at some things these sites do that make them great.

1. Show It Off
No matter what type of website you have, you need to show off the product, so the site had better at least look nice. Whether by using a slideshow embedded in an iPhone or just screenshots of the app, showing off your app’s visuals is crucial because people don’t want ugly apps. Screenshots are also a great way to highlight features and ease of use while keeping words to a minimum.

2. Explain Everything in Your Headline
You only have a few seconds to explain to your visitors what your app does. They need to know what they want. You can think of the headlines as the “title” for your description.

Take Languages for example: “Instant offline translations.”

It’s so simple it doesn’t even need a description.

3. A Short Description
If your readers have decided they’re interested, they’re going to want more. The description is one of the places to give it to them. Keep it short and simple. The description is also a good place to educate your potential users. Tell them what they want and how to use it in one place.

Instagram is a great example of this. After the headline, the description tells you what you can do and how you can do it.

4. Show Your App in Action
Sometimes the best way to explain your app is by showing it. Videos are a great and effective way to do this. You get to show off the beautiful visuals, what the app does, and how to use it all in one place.

The Just Landed video is a great example. It shows off the visuals, specific features, and how to use it while displaying itself in an iPhone to implicitly make clear that it’s an iPhone app.

Sometimes a full video is unnecessary or too much hassle to produce. A simple animation or interactive buttons can work just as well.

Taasky has a great animation showing off the app’s visual elements as well as how to use it (http://taasky.com/).

StatNut offers a good example of interactive elements (http://www.statnutapp.com/).

5. Emphasize the Price (If You Can)
Everybody loves free. If site visitors can download the app right now with nothing to lose, then make sure they know that. If your app isn’t free, there are other things you can do instead—keep reading.

6. Use Good Design Principles
Don’t overwhelm the visitor. Be minimalistic. Put the focus on one thing at a time. Most people won’t spend time reading a long description or watching a ten-minute video. Keep everything short and simple. Remember, less is more. On this note, keep the unnecessary stuff out of the way. Social media icons and miscellaneous links should not detract from the main attraction: your app.

You’ll also want to keep up with the latest design trends. These days everyone wants retina-ready (high definition for high-res screens) websites with a responsive design so the site looks good on any device. Parallax scrolling is also a popular feature.

7. Reflect the App or Its Theme
This is a great way to way to add context to your app’s screenshots as well as make your app more memorable. It’s also helpful in choosing a background image.

For example, if your app is a translator app like Languages, use famous landmarks from different countries. If your app is air-travel related, add some clouds and go with a blue theme like Just Landed.

If your app is a bit more abstract or there isn’t a clear theme, use your app’s color scheme on your site.

In this way, your website can become an extension of your app. The Instagram site uses the same blue as its app. Cocktail does a combination by using its app’s green as the site’s background color with a simple image of a cocktail.

8. Call to Action
The call to action for app websites is the download and purchase. Because the purpose of the website is to get your app more downloads, it’s not hard to see why the call to action is so important. But going a step beyond the traditional download button, there are two great options: email or text the link and scan the QR code. Although both are rare, they give the user a more convenient, quicker way to download the app. And that’s exactly what you want if you’ve successfully sold them on the app.

9. Use Testimonials
If you managed to get positive reviews on the App Store or earned some press coverage, put it on your website! Don’t let it take over the website, but word-of-mouth is very powerful. Use it to your advantage by quoting App Store reviews or press coverage with the source’s logo. The right people can easily recognize the logos of TechCrunch, Inc., and other startup, design, and tech-related blogs, and everyone can recognize news outlets like the New York Times. Also, if you were featured by Apple or won an award, definitely put that on there. No one can resist a free award-winning app reviewed by TechCrunch and the New York Times.

By no means do you have to (or even, should you) do all of these things. But they are some things to keep in mind as you design and build your website. Now let’s get to the fun part: building the site itself!

When it comes to building a website for your app these days, there are a ton of options—so many that it can get overwhelming at times. Keeping the above principles in mind, let’s look at some options.

WordPress

WordPress is a powerful yet free content-management and blogging system. Due to its popularity and ease of use, there are thousands of tutorials on how to set up a blog and so we won’t go over anything related to setup. Instead, we’ll look at some WordPress themes that you can customize for your own apps. Note that this is just my selection and is by no means a complete list. If none of these suits you, there are tons of other themes available.

A note on price: While there are free themes available, premium WordPress themes range between $30 and $50. Alternatively, you can sign up for a specific designer site and get access to all their themes, as Austin did with Elegant Themes.

FREE

1. Darstell – App Design Vault
While it’s not responsive, Darstell is still a great theme with lots of features, including a screenshot slider and a call to action (download and email sign-up). Not to mention that it was built by the expert team behind App Design Vault, which sells high-quality app design templates. And for the price (free), it’s worth checking out. (http://www.appdesignvault.com/darstell-iphone-wordpress-theme/) – App Design Vault

2. Appz – Theme Shaker
Theme Shaker’s Appz theme allows you to showcase the beautiful visuals of your app. It also offers a longer description below the fold. A cool feature is that screenshots correspond to a short description below. This is another download worth checking out. (http://www.themeshaker.com/theme/appz-free-iphone-app-wordpress-theme) – Theme Shaker

PAID

3. Encore – $40
Encore is a sleek responsive theme that is easily customizable with the included skins or your own. With over 200 options, a built-in blog and newsletter sign-up form, and integrated MailChimp campaigns, this theme has it all—not to mention it looks great, too. (http://themeforest.net/item/encore-responsive-product-showcase-wordpress-theme/4706533?ref=snam2)

4. FluidApp – $45
FluidApp is another sleek responsive and simple theme. With the site divided into two parts, with the description on the left and images to the right, it’s a great start to emulate the best app landing pages out there. (http://themeforest.net/item/fluidapp-responsive-mobile-app-wordpress-theme/3726350?ref=OnWPThemes&ref=snam2)

5. Mobilee – CSS Igniter $39/yr for all themes
Mobilee provides a great layout and is filled with options to make it truly your own. It can easily help you emulate existing app web sites. (http://www.cssigniter.com/ignite/themes/mobilee/)

6. Mobera – $40
Mobera is another slick and clean responsive theme and another great starting point to build your own version of popular and successful landing pages. (http://themeforest.net/item/mobera-premium-app-showcase-wordpress-theme/6332082?ref=snam2)

7. Apley – $35
With subtle Apple-esque animations, a simple layout, and a minimalistic design, Apley is a beautiful theme. A place for video, screenshots, features, testimonials and press mentions, it has everything you could need in an elegant package. (http://themeforest.net/item/apley-a-mobile-application-landing-page-/4586940?ref=snam2)

8. Grizzly – $40
Grizzly is one of the few “corporate” themes built for mobile apps. It provides tons of different options to help you make each app page stand out and also has an attractive homepage and a blog option. (http://themeforest.net/item/grizzly-responsive-app-showcase-corporate/1546240?ref=snam2)

For even more themes, check out the following blogs:
aThemes
WP Themes
Design Reflect

HTML

If you want to go the traditional route and build a website using HTML and CSS, you’re in luck. Many WordPress themes are available in HTML format and there are a ton of HTML-exclusive templates.

Note on price: HTML templates tend to start at a lower price range but may take more time to set up and maintain.

1. Landy – $7
Landy is a straightforward, fully responsive landing page for your apps. It’s clean, sleek, and minimalistic to make sure your app is in the spotlight. (http://themeforest.net/item/landypage-responsive-retina-landing-page/3300709?ref=snam2)

2. App Star – $11
App Star offers six different color schemes with a flat design style and a ton of options to help you build a beautiful responsive landing page. (http://themeforest.net/item/appstar-one-page-portfolio-app-landing/5464610?ref=snam2)

3. Launchpad – $11
Simple, sleek, yet still powerful, Launchpad has many of the elements that make a great landing page, ensuring your site is great, too. (http://themeforest.net/item/launchpad-responsive-app-landing-page/4848196?ref=snam2)

4. Scotty – Responsive Landing Page – $10
Scotty is a flexible landing page built with apps in mind. With over 20 different backgrounds and a ton of customization options, it’s another great choice. (http://themeforest.net/item/scotty-responsive-landing-page/3764406?ref=snam2)

5. Candy – App Showcase – $8
Candy is a beautiful and minimalist showcase for your app. Another great choice, it’ll help you incorporate many of the features to make sure your website is beautiful and successful. (http://themeforest.net/item/candy-app-showcase/3279217?ref=snam2)

Check out the following blogs for a more extensive list:
Design M
App Marketer

Landing Page Creator

There are a ton of free sites to create landing pages for any product or service. These often have templates for mobile apps. Many have analytics and A/B testing features. Then there are the sites that are specifically geared toward mobile apps. Which service you choose is really up to you, and will differ depending on your needs and budget, the number of apps you have, and other factors. Most offer a free trial, so check them out to see which one you like best.
Unbounce and Kickoff Labs are two of the most popular and most powerful landing page creators. Both offer analytics and tons of free templates (including mobile app-related ones), and let you try the templates out before paying. While Unbounce is focused on A/B testing and Kickoff Labs is focused more on building an email list, both can be used for building landing pages for your mobile app as well.
Carp is targeted toward app developers. It’s easy to use, takes care of all the website hassle, and has a simple payment plan.

DIY

If you don’t want to use templates or an automated site, or want a custom solution, you can always choose to build the website yourself (or outsource it). Of course, if you’re not a web developer, you’ll have to learn. But there are also many lesser-known HTML and Photoshop templates you can use.

Facebook Page

This is the option if you don’t want to set up a website at all. Free, easy to build and maintain, and quick, it’s available as an alternative if for whatever reason you don’t have a website at all. Though you should keep in mind the success factors of websites, creating and maintain a Facebook page and getting Likes is a whole different animal.

Resources

Themeforest – themeforest.net

This is my go-to marketplace for both HTML website templates and WordPress themes. They have a huge collection of website themes as well as plugins, Facebook page templates, Photoshop files, and a ton of other design-related products.

These are two blog posts I found extremely useful during my research. While I’ve covered much of their content here, feel free to check them out also:

Usabilla – http://blog.usabilla.com/16-inspiring-app-landing-pages-and-8-reasons-why-they-are-effective/

Kickoff Labs Blog – http://blog.kickofflabs.com/ten-tips-for-creating-a-billion-dollar-landing-page-like-instagram

About Sean:

I’m a college student at UC San Diego. I’ve been following Apple since the original iPhone was released. I love all things tech and entrepreneurial. I’m interested in a variety of things including programming, blogging, and start ups. In the summer of 2012, I finally got into the mobile app business and launched The App Republic  (theapprepublic.com). When I’m not working or studying, I love to travel, learn new things, and read good novels.

You can find me at my website (seannam.com), my apps on the iTunes store (georiot.co/iosdev) or follow me on Twitter @nam_sean (https://twitter.com/nam_sean).

Comments and Support:

    Join in:

    Your email address will not be published. Required fields are marked *