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


Personal MBA
Get out while you can
And death came third
Universal Principles in Design
Comments
14 comments to iPad/iPhone/mobile HTML/CSS template for web apps (responsive, no javascript)
This is amazingly good. I intend to use this for pretty much all my Phonegap projects!
January 27th, 2012 at 10:52 pmThanks Tim, that’s the purpose of this project, it is a great lightweight start without requiring any heavy library or restricting license. If you find any issues let me know and I’ll help you fix them. Please let me know if you launch any apps with it, I’ll be glad to feature them in this post.
January 27th, 2012 at 11:53 pmGreat work !
January 28th, 2012 at 4:26 amNice job… We will use this on one of our upcoming projects! This really helps.
January 28th, 2012 at 4:56 pmThat’s pretty cool. It even degrades acceptably in IE8 (the farthest back I personally care about). One enhancement you might try is setting user-select to none on some of the interface elements that shouldn’t be selectable. Really great work! Thanks for sharing this!
January 29th, 2012 at 10:37 pmSimply love it!
You can add -webkit-touch-callout: none; to disable the callout shown when you touch and hold a touch target.
Also, sometimes when clicking a link in web apps they may open in Safari, you can fix that by using a script like gist.github.com/1042026
January 31st, 2012 at 2:38 amGreat Job! :-)
February 3rd, 2012 at 1:24 pmAwesome! Love this.
February 3rd, 2012 at 6:24 pmThis infinately contributes to the Public Domain License. You sir, are a scholar and a gentleman. Please continue to update and improve this. Also, look into some donation services and get some buttons put up.
How do I completely remove the sidebar? Everything I tried removed the sidebar but the content does not go fullscreen… it still acts as if the sidebar is there, just not being displayed.
February 4th, 2012 at 3:49 pmThanks everyone for the comments, I’m glad you like it.
Lee,
February 4th, 2012 at 11:38 pmTo hide the sidebar you will need to resize some main content elements. See the CSS at the end of the ‘style’ tag that starts like this:
@media only screen and (max-width: 768px) {
Great job, it’s really usefull and really well thinked ! GG
February 7th, 2012 at 4:43 pm[...] you haven’t seen my iPad HTML/CSS template you must see it [...]
February 8th, 2012 at 4:11 pmhow can i remove the ‘delete account’ ? i can not find the html tag. i am a student.
February 12th, 2012 at 9:01 amFreak’n awesome
February 16th, 2012 at 1:58 am