iPhone and iPad Design: Use JavaScript Frameworks to Add Advanced Features - dummies

iPhone and iPad Design: Use JavaScript Frameworks to Add Advanced Features

JavaScript frameworks help you add rich features to your iPhone and iPad web designs. If HTML5 and CSS 3 aren’t enough of a challenge for you and you want to add more advanced features with scripts, you can save time and trouble by starting with one of these popular JavaScript frameworks.

  • jQuery Mobile is the mobile version of the very powerful jQuery JavaScript library. The mobile version works across most smart phones and offers user interface components that go far beyond a JavaScript library. User interface elements include enhanced styled forms (as shown in this figure), a large variety of list types, searching, page transitions, themes, and more.

    With the support of device manufacturers and the .mobi group, this project has the most sponsors of any of the mobile frameworks. This typically indicates the lasting power and quality of an open source project, making jQuery Mobile a good bet now and into the future.


  • Sencha is a commercial framework development company. After its tools are out of the beta development phase, they will probably cost money to use. These tools will likely serve you better if you need a commercial-level product that comes with customer support.

    Reviewing the features and demos on the Sencha website, this company clearly is developing tools that can be used to create rich-media advertising, as well as complicated interactive features, such as the Solitaire game.


  • IUI is the oldest iPhone web app framework. Created by developer Joe Hewitt, its user interface looks much like an iPhone application. One great feature is that this tool builds in Offline Storage. Offline Storage is what enables a web app to work even when a user is not connected to the Internet.

  • iWebKit was one of the first web app frameworks. iWebKit focuses on achieving a user interface that is as close to the iOS native user interface possible using HTML5, CSS 3, and JavaScript. This framework includes helpful widgets, forms, and the ability to display RSS feeds, making it a great place to start if you want to focus only on creating web apps for iOS devices.


  • Impact Engine is a framework that focuses on enabling developers to create games that feel like installed native apps. It’s a great choice if you are interested in making games using HTML5, CSS 3, and JavaScript. The current price is $99.

  • Cubiq is a great way to add interactive features without delving into all the complexities of the framework tools.

    • iScroll: Created because of the difficulty of using position:absolute within the virtual iPhone window, iScroll makes it easier to have a fixed bar at the top or bottom of the page.

    • Hardware Accelerated Accordion: An accordion shows the header or first line of a section. When the user touches it, it expands so the user can see the rest of the text in that section. Accordions are useful when screen real estate is scarce, like it is on the iPhone or iPod touch.

      Accordion effects on mobile are difficult and usually choppy and jerky, not smooth. Cubiq uses the CSS 3 translate property to better control opening and closing. It’s a smart technique because the iPhone uses hardware acceleration with this property to ensure that the transform is smooth.

    • Slide-in menu: If you would like to tuck your navigation up past the top of your page and enable users to pull it down when they need it, this one’s for you. After you add the slide-in menu to your site, it can be styled and set up to hold your navigation using any icons or design you prefer.


    • Add to Home Screen: This adds a floating balloon at the bottom of your web page on an iPhone and at the top of the page on an iPad, to call attention to the Add to Home Screen feature on the iPhone.

      Adding a callout message to the iPhone and iPad makes it more likely that visitors will bookmark your site. The message, shown in this figure, dynamically stays in place at the bottom of the page when the user scrolls. You can customize the length of time before the message appears and disappears. It’s also available in 13 languages.

      Users can choose the Add Bookmark, Add to Home Screen, Mail Link to This Page, or Print option. When a user selects Add to Home Screen, a small icon is saved on the iPhone’s Home screen.