Make iOS App Prototypes with HTML, CSS, and Javascript
Move fast — users don’t care how you made it.
Staring Up the Steep Learning Curve
Last year I got to focus on product and design at a startup and leave a lot of development work to more talented engineers. I still got into some code, but I didn’t feel like I had to be aware of every shiny, new tech to come out like I did when I worked as a freelancer. I recently left to explore new adventures and as I look to build new things, I’m stunned by how much has changed in a year.
A lot of the products I admire (Storehouse, Flipboard, Prismatic, Instagram…) have chosen React JS to build their web app front-end. I was introduced to React by a coworker, but if I want to start building with it, I have a lot to learn. It’s always intimidating to see that steep learning curve ahead of you if you decide to explore a new framework or library.
I had an idea for an iOS app, so I starting looking at new prototyping tools. I found: Oragami, Framer, Form, Pixate…yikes! The problem is, I already have the tendency to build too soon before testing the riskiest parts of an idea. Learning how to use these new tools wasn’t going to help me learn if my idea was worth pursuing faster.
I love learning about the Google Ventures Design Team’s process and I caught their cameo on the ‘Startup Podcast’. They shared a video of the prototype mentioned in the episode, but it didn’t seem possible they were using their go-to prototyping tool, Keynote. I learned in the following twitter conversation that they used a web-based prototype.
This was good news because I already know how to make things quickly for web. I learned the details on how to do this and I wanted to share that to make it easier for you to get your prototype done.
How to Build a Web-Based iOS App Prototype
Let’s say your app is just a single button and what you want to test is: will people click the button?!
Using HTML, CSS, and Javascript, build a quick prototype and check that it works on your iPhone (you can access it via the local Apache server or by uploading it to a server somewhere if that’s easier for you).
Good job—that hard part is done! Now, make an app icon that will show up on the home screen. Remember, the purpose of this is to simulate the experience of using a real app for the tester, not to make pretty icons. Spend no more than a few minutes making your icon. You could even skip this step and iOS will use a screenshot of the web page as the app icon.
Home screen icon sizes for Apple devices (in pixels):
iPhone 6 Plus: 180×180
iPhone 6: 120×120
iPhone & iPod Touch (Non-Retina): 60×60
iPad 2 & iPad mini (Non-Retina): 76×76
iPhone & iPod Touch (Retina): 120×120
iPad & iPad mini (Retina): 152×152
You probably don’t need it, but if for some reason you need to test having a launch screen that appears when the home screen app icon is clicked, you can make an image for that, too, using the dimensions of the device you’re testing on.
Now, in the <header> of your web page HTML, add these metatags:
Now on your test device, do the following:
- Open Safari.
- Navigate to the URL of your web prototype.
- Click the share button in the bottom navigation bar.
- Click “Add to Home Screen”.
- Customize the title if needed and click “Add”.
Your web prototype is now launchable from the home screen. There won’t be any browser navigation UI and zooming will be disabled, so it will act just like a native app. Sure, because you’re not using native animations and other features, performance might not be optimal or it might feel a little janky, but you can begin learning as fast as possible and start testing the riskiest parts of your idea now.
