Here’s how it looks in the iPhone (click image to view full size):
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.
The whole template has been built without requiring any images which means less server queries and increased bandwidth savings.
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:
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.
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)
-webkit-user-select: none(thanks Josiah)
Version 0.9b (27 January 2012)
- First release.