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

27 Jan 2012

iPad/iPhone template made in pure HTML and CSS (no JavaScript needed) that works perfectly on any modern browser (iPad, 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

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.

Heading styles

Two different heading styles: the main black one and the smaller blueish.

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 and Firefox 9.

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

Not working: (none tested yet).

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.

Download the template

To download the most recent version of the Xavi iPad template click the link below:

Xavi iPad template

And then go to File > Save as… The CSS has been coded in a <style> tag to keep everything in a single file.

For a better experience open the template in an iPad and test how cool Responsive Web Design is by rotating the iPad.

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 below or tweet me at @xaviesteve in Twitter. 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 <link rel="stylesheet">, <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.

Living in United Kingdom? Read about the best mobile phone network in the UK.