Archive for 'Mobile Safari'

So, as perhaps you noted on an earlier post available briefly before the client decided that we were sharing too much so down the memory hole it went, Apple is starting to crack down on enforcing App Store Review Guidelines section

2.13: Apps that are primarily marketing materials or advertisements will be rejected

with a rejection letter reading

We found that your app provides a limited set of features and functionality, and focuses primarily on marketing or promoting your business, which is not appropriate for the App Store…

and will go on to suggest

Alternatively, you may wish to consider building a web app using HTML5. HTML5 is the major new version of HTML and enables audio and video to play natively in the browser without requiring proprietary plug-ins. Using HTML5, web apps look and behave like native iPhone and iPad apps, and using HTML5′s Offline Application Cache, your web apps work even when the device is offline. With web apps, you have flexibility to deliver as much or as little functionality as you desire.

To get started with iPhone or iPad web apps, please review “Getting Started with iPhone Web Apps” .

For a description of the HTML elements and attributes you can use in Safari on iPhone, check out “Safari HTML Reference: Introduction“.

which is all very well, but the couple client inquiries we’ve had since then that we’ve told “yeah, we think you’re risking THIS…” have had their web designers not be overly impressed with the understandability of those referrals.

So, here is what appears to be an definitive, succinct, and nicely geared to web designers’ sensibilities writeup:

HOWTO: Create native-looking iPhone/iPad applications from HTML, CSS and JavaScript

In this article, I’ll explain how to:

• strip away the browser chrome (the url bar and button bar);
• prevent viewport scrolling and scaling;
• respond to multi-touch and gesture events;
• use webkit CSS to get the iPhone OS look and feel;
• cache the app so it runs without internet access;
• get a custom icon on the home screen; and
• have a splash screen load at the start.

If you want to put it in the app store, you can even package your web app as a “native” Objective-C app. (Although, why you’d want to subject yourself to the app store approval process when you don’t have to is beyond me.)

I’ve put this HOWTO together, because–even on Apple’s site–there’s not one centralized page that tells you how to do all this. I’ve included templates, examples and a stubbed-out XCode project…

Yes. Yes, that should do nicely as a Web App Making For Designers 101 that they’re likely to actually read, we’d say. Anything better you know of, Dear Readers?

h/t: @smashingmag!

UPDATE:

These look like more excellent resource for getting started on web apps:

Mobile Boilerplate – A Base Template For Mobile Web Apps

18 New Useful Frameworks for Web and Mobile App Developers

If the ‘Flash video!!!’ things comes up: Sublime Video

So we’ve mentioned before several options for bringing the shiny to your app’s buttons; well, if you really want to get your button look just so, here’s the tool for you: AppControls!

• Creates buttons and other application controls with pixel-perfect precision
• Automatically renders high-resolution “@2x” images for use with the iPhone 4
• Creates color gradients with up to 8 color-stops
• Text content is accurately rendered and can include an optional shadow
• Designs can be saved as a single image, 3-part image or 9-part image for automatic scaling
• CSS output can be generated for use in an external file or as an inline style element
• Generates custom CSS for WebKit and Mozilla
• Designs can be saved as Presets
• Up to 3 Presets can be combined in a single file for use as a “rollover” image for the web

Yep, that gives you pretty much all the customization you could wish for in a standardish looking button, and it’s particularly convenient to have it export CSS along with the images so your app and its website can have a unified look. At $29.90 we’d have to be rather more serious about the look of our buttons than we happen to be at the moment to actually buy it, but hey, it’s always nice to have options!

Here’s a collection of iPhone-targeted HTML5 links we stumbled across recently, for whenever it is you decide to get into writing cross-platform or non-AppStore apps:

Tutorial: Your First Mobile HTML5 App – The Basics, Forms, and Geolocation (Part 1)

Tutorial: Your First Mobile HTML5 App – Offline Storage (Part 2)

Nice and easy introduction.

HTML fullscreen apps for the iPad

Some handy formatting tips.

Create offline Web applications on mobile devices with HTML5

From IBM developerWorks, no less; provides a sample inventory management application, tested on an iPhone 3GS and a Palm Pre.

Opensourcing Golingo

Source of a word puzzle game published in the App Store, created with Titanium Mobile and Web code.

Akihabara

Sprite library using the canvas tag, targeted at retro pixelated games; several playable demos.

Japstore – The free Javascript application store

Bookmarkable Javascript applications and a downloadable SDK to create them.

Parcycle: A Particle System with HTML5 canvas

Oh, we just love those particle systems, yes we do. Browser and offline webapp demos for your hypnotic pleasure. And dig around on the site for other links to various webapp examples.

UPDATE:

Learn HTML5: 10 Must Read Lessons has a bunch of good stuff.