Book Image

HTML5 iPhone Web Application Development

By : Alvin Crespo
Book Image

HTML5 iPhone Web Application Development

By: Alvin Crespo

Overview of this book

<p>Create compelling web applications specifically tailored for distribution on iOS Safari. Work through real world examples with references, and in-depth discussions on the approach; including its benefits and drawbacks.<br /><br />"HTML5 iPhone Web Application Development" strives to teach all levels of developers, beginners and professionals, the process of creating web applications for iOS Safari. Utilizing current industry standards for frontend development, learn to take advantage of HTML5, CSS3 and JavaScript to create compelling software.<br /><br />Start with reviewing current industry standards for frontend development, and end with creating a native application using the same codebase.</p> <p>Your journey will begin with an overview of current industry standards for frontend technology, quickly moving to solve real world issues; from creating a resizable or responsive gallery, to creating a single page application that utilizes the popular Backbone.js framework.</p> <p>"HTML5 iPhone Web Application Development" aims to make you an expert in developing web applications for the iOS Safari platform.</p>
Table of Contents (17 chapters)
HTML5 iPhone Web Application Development
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

Form layout for iPhone


In this section, we briefly cover some design considerations when we are creating a form for iOS. You may or may not have full control of the design of your form; however, to make it simpler to understand the limitations that may come up, the following table helps demonstrate the limited amount of screen real estate we have when working with forms. Hopefully, this will help you explain these limitations so that adjustments could be made. Let's take a look at the following table:

UI control

Pixel dimensions

Status bar

20 in Height

URL text field

60 in Height

Form assistant

44 in Height

Keyboard

216 in Portrait Height

162 in Landscape Height

Button bar

44 in Portrait Height

32 in Landscape Height

The details regarding these controls can be found at https://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariWebContent/DesigningForms/DesigningForms.html.

Based on these values, we need to adjust our forms for certain dimensions...