iPad/iPhone/mobile HTML/CSS template for web apps (responsive, no javascript)

Demo: http://xaviesteve.com/pro/ipad-template/

Full article: http://xaviesteve.com/2899/ipad-iphone-mobile-html-css-template-for-web-apps/

iPad/iPhone template made in pure HTML and CSS (no JavaScript needed) that works perfectly on any modern browser (iPad (including iPad 3), iPhone, tablets, mobiles, laptops, etc.). The template uses responsive queries to hide the sidebar in iPad portrait mode and in the iPhone and smaller screens (you can disable that easily if you want to).

This template is the perfect start for any front-end or back-end developer to build complex web apps without spending time on developing the main structure. Or even to create a mobile version of your current site.

The code has been developed so that there is no “divitis”, completely optimized, semantically correct and minimal HTML code. There are no images or animations at all, everything has been coded using some of the latest CSS3 available features and tested it in most modern browsers. Ready for you to download and start developing. These are some of the template’s features:

Features

Look and feel

The designs looks and feels as a default app from Apple.

App-ready

You can install this template as a normal App Store app, removing the Safari top navigation bar and enjoying the full screen.

Responsive Web Design

Hides the sidebar in iPhone, mobiles and iPad portrait mode. Adapts nicely to the full screen.

No images

The whole template has been built without requiring any images which means less server queries and increased bandwidth savings.

Anchor texts (links)

The whole clickable area is active so that even fat fingers can click comfortably.

Scrollable

Both the sidebar and the main content can be scrolled separately in the iPad and other touch screen tablets.

Tables

Fully flexible and liquid tables that allow you to include more information while keeping the same look and feel as in any Apple app.

Forms

Fillable textboxes, password fields, select dropdowns and buttons.

Fully tested in several devices

Works great in:

• iPhone 4
• iPhone 3GS
• iPad 2
• Samsung Galaxy Tab (GT-P7510)
• Safari 5
• Chrome 16
• Firefox 9

Graceful degradation: IE9 (no rounded corners), IE8.

Not working:

• (none tested yet, IE6 I guess)

License

The best of it, I am releasing it under a Public Domain license. This means it is free to use as many times as you want (even for commercial projects) and you do not need to give me credits if you don’t want to. I would appreciate if you do so or if you send me a link to your creation, it will motivate me to develop it further and make me happy.

Comments, improvements, feedback, feature requests and bugs

If you have any comments, doubts or would like to point out a bug or a feature request you can write a comment at the article (link at the top) or tweet me at @xaviesteve in Twitter.

Contribute

If you code your own improvements and would like to share them with everyone let me know and I will include them in the next release. Bear in mind that the purpose of this plugin is to remain as simple as possible so drag’n'drops, special effects and lengthy scripts should be avoided.

Changelog

Version 1.0 (31 January 2012)

• Moved sidebar to the bottom of the HTML.
• Fixed content header left and right link clickable area
• Added commented , <script> and favicon for faster development
• Disabled the callout shown when you touch and hold a touch target (thanks 185)
• Added -webkit-user-select: none (thanks Josiah)

Version 0.9b (27 January 2012)

• First release