Mobile App Design and Submission has Never Been This Easy

Justin | design,HTML5,InDesign | Tuesday, December 10th, 2013

I mentioned a while back that Amazon had quietly revolutionized the app creation process by allowing submission of HTML5 apps to their marketplace. Very few people understood the significance of this change which allows people to publish without the burden of going through the traditional app production process. So I’m going to cover this topic a bit more within this post. Firstly, what does the existing process of creating and submitting an app to an app store look like?

The Typical App Submission Process

The steps required to create and submit an app vary depending on the tools you’re using and the app store you’re submitting to, but the steps go something like this:

  1. Pay for a developer account (recurring annual fee).
  2. Use your developer account to produce a code-signing certificate (a way to verify that you paid to publish).
  3. Insert the signing certificate into your app.
  4. If you’re a coder, compile your app. If you’re not a coder, pay some service or developer to compile your app.
  5. Submit your app to the app store and wait for approval.

The New Process Created By Amazon

Amazon essentially reduced this process to a single step: submit your content to the app store. No fee, no signing-certificate, no packaging, no need to know a heavy-duty programming language or to pay someone who does. Your content just has to be in the form of HTML.

I don’t think it was clear to many people just how easy Amazon’s app submission process has now become, and how favorably it compares to other options.

Thankfully, David Isbitski, recorded a video on how to submit an HTML5 Web App to the Amazon Marketplace:

Unlike other app stores, getting an Amazon Developer account and submitting an app is totally free!

Don’t know how to create HTML5? No problem.

You don’t need to be a web developer to take advantage of Amazon’s HTML5 app submission process. You can export HTML5 directly from InDesign using in5, upload your content to a server and submit the URL directly to Amazon. InDesign to app! No programming knowledge required and no recurring costs.

How in5 makes it even easier

When creating content with InDesign and in5, you can simply enter the Amazon Verification Key into the in5 dialog and in5 will even generate the web-app-manifest.json file for you so that you can focus entirely on the design of your app (and not programmer-type things like “manifest” files).

Here are the two fields that are available in the SEO & Meta section of the in5 dialog:

in5 Amazon options

Take a look at in5 and the Amazon HTML5 submission process and let us know what you think in the comments below.

The Most Useful in5 Feature that You’re Not Using Yet – Scaling a Single Design to Multiple Devices – The Viewport Zoom Setting Explained

Justin | design,extensions,HTML5,InDesign | Wednesday, December 4th, 2013

The Viewport Zoom Setting can be used to control how your design scales automatically on mobile devices (tablets and smartphones). This video below provides a tour of versatile Viewport Zoom options and shows the results displayed on the screens of multiple devices.

Update: in5 now has sophisticated proportional scaling for all devices.
Learn more about scaling with in5

How to create a specific number of repeated characters without using a loop

Justin | tips | Wednesday, October 23rd, 2013

I’ve run into an issue on a few occasion where I wanted to dynamically create a string of repeated characters (usually spaces or tabs) an exact number of times. It always struck me as a bit of a headache to have to create a loop to join all the of the pieces of the string together.

Recently, I found a simpler way. The solution relies on the Array constructor. The Array constructor can accept either an array of values, or a number. If you pass a number, an array with that length is created with each item being empty. We can take advantage of the fact that the items are empty. Any character we use to join the array into a string is the only thing that will be shown, because the items themselves are empty.

var n = 3;
var str = '.';
var result = new Array(n+1).join(str); //creates "..."

Here’s what it looks like in a single line:

var result = new Array(4).join('.'); //creates "..."

(You need to add one since the join string appears between array items).

Far simpler and cleaner than creating a loop!

This code can be used in JavaScript or ActionScript.

Easily Hide Elements From Mobile Devices

Justin | HTML5,Tutorials | Thursday, October 17th, 2013

There are many cases where it makes sense to hide particular elements on mobile displays. One of these cases is a print button that is used to print the screen.

Since mobile devices are generally not attached to printers, a (now) useless print button is taking up valuable screen real estate. This post will cover some techniques to hide items on mobile devices.


Local Playback of YouTube Embeds

Justin | tips | Thursday, October 3rd, 2013

The easiest way to embed a YouTube video in another webpage is to use Share > Embed, found on any YouTube video page.

YouTube has recently made a slight modification to this code by removing the protocol (http:) at the beginning of the URL:

<iframe width="560" height="315" src="//" 
frameborder="0" allowfullscreen></iframe>

In many respects, this an improvement. The lack of a a protocol means that this link will inherit the protocol from its container page. So if the container page is https (a secure page), the YouTube video will be as well. This avoids a security warning to IE users when loading unsecured content (the http YouTube video)  within a secured (https) webpage. This is a more flexible method, as long as your page is on a web server.

However, it means that the embedded content will not preview locally from your hard drive.

To view a working embed from you local drive, modify the embed so that the src attribute begins with http:

<iframe width="560" height="315" src="" 
frameborder="0" allowfullscreen></iframe>

The same protocol policy goes for URLs used with Google’s Hosted Libraries (like jQuery).