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

on January 27, 2012
(3 minute read)

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).

Things I’m buying on Amazon this week

Here’s how it looks in the iPhone (click image to view full size):

HTML CSS iPhone template (responsive, no javascript)

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:



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.


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


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


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).


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 go to GitHub:

Xavi iPad template

The CSS has been coded in a <style> tag to keep everything in a single file.

I’ve got invites for a free bank transfer!

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.


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.

Did you enjoy this article?

Thank with a coffee ☕

Or help me out by clicking one of these buttons:


One comment

  • Iain says:

    Can’t believe there aren’t any comments on this article! It’s honestly been a huge help and time-saver, so props for the effort.

    I’ve just spent the last half an hour going through this process on one of my own sites and found the culprit and have removed the name from the site.

    Now to throw that reinstatement request form into the abyss with the hopes that it’ll be actioned. Fingers crossed :)

    Thanks again!

Follow me for cool new products and interesting findings on graphic design, web development, marketing, startups, life and humor.

/*Twitter*/ !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs"); /*Facebook*/ (function(d, s, id) {var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1&appId=28624667607";fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk')); /*Google+*/ window.___gcfg = {lang: 'en-GB'};(function() {var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;po.src = 'https://apis.google.com/js/plusone.js';var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);})();
Airbnb 25€ discount