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).
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:
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 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.
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.
About the author
Published on January 27, 2012 by Xavi Esteve, a UX Designer and a Front-End Developer with more than 10 years of experience. I am currently working for Fitbug as a Front-end Developer in London UK and enjoy contributing to the Open Source community, sharing interesting links in Twitter and blogging about related topics.
Comments (36)
This is amazingly good. I intend to use this for pretty much all my Phonegap projects!
January 27th, 2012 at 22:52Thanks 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 23:53Great work !
January 28th, 2012 at 04:26Nice job… We will use this on one of our upcoming projects! This really helps.
January 28th, 2012 at 16:56That’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 22:37Simply 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 02:38Great Job! :-)
February 3rd, 2012 at 13:24Awesome! Love this.
February 3rd, 2012 at 18:24This 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 15:49Thanks everyone for the comments, I’m glad you like it.
Lee,
February 4th, 2012 at 23:38To 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 16:43[...] you haven’t seen my iPad HTML/CSS template you must see it [...]
February 8th, 2012 at 16:11how can i remove the ‘delete account’ ? i can not find the html tag. i am a student.
February 12th, 2012 at 09:01Freak’n awesome
February 16th, 2012 at 01:58Wow, just what I’ve been looking for all day. Just ran this on the android simulator and it has amazing performance compared to other templates I’ve been looking at today.
I’m going to split it up and create a base template for applications created using PhoneGap. A good template that can be used on iOS, Android and other mobile touch devices is certainly needed. I’ll post a link to the finished version on here once done.
Note: I’m not a pro at HTML/CSS so this may take a week or two.
March 31st, 2012 at 21:36That’s great news bored-student :)
April 1st, 2012 at 01:02It’s so fast because it doesn’t use any JavaScript at all and the code has been hugely optimised to be both small and fast to render.
If you have any doubts with HTML/CSS let me know, I’ll be glad to collaborate in the creation a PhoneGap template.
[...] has created a free HTML and CSS template that replicates the look and feel of an iOS application on the iPhone and iPad. This is the [...]
April 9th, 2012 at 15:37[...] on work done by Xavi Esteve: iPad/iPhone/mobile HTML/CSS template for web apps (responsive, no javascript) No Comments Click here to [...]
April 10th, 2012 at 12:00So I’ve done abit of work on my template for PhoneGap that is based on this template. The template is in it’s early stages of development but version 1.0 can be downloaded from:
http://www.bored-student.com/phonegap-ui-template/
A Google Code project has been set up under the Apache 2.0 License to develop this template further. All details can be found on the page link above.
I hope people find it useful and it would be great for other developers to get involved with the project who have some expertise and time.
April 10th, 2012 at 12:47Very nice template as this kick started my project with a few mods. On the table there is a border around it in your sample as well as mine and I’ve tried to get rid of it with no luck. Any ideas?
April 13th, 2012 at 00:15Hi Kryton,
April 13th, 2012 at 00:21I spent some time trying to get the corners rounded and there is no way yet, searching around the Internet it seems it is a bug from browsers (or it hasn’t been implemented yet). Problem is that the borders are not set in the
tablebut in itstbody.The alternative is to just remove the border in the CSS here:
#main table tbody {border: 1px solid #B4B7BB;}Glad to hear you are using the template, I’d love to see what you come up with.
Gracias por este impresionante trabajo sin imágenes.
May 15th, 2012 at 08:33Viene lo vectorial y para quedarse. El diseño y la programación se funden y tu lo has logrado con este fantástico template.
Enhorabuena y muchísimas gracias.
Cuando termine mi proyecto (algún día) te enviaré el resultado.
Thanks for the great template!
May 21st, 2012 at 22:31This may be a solution for the table corners problem. Move the white background color from tbody to the individual table cells (tbody tr td), then replace the existing “Dirty fix…” with the following:
—
#main table {
border-collapse: separate;
}
#main table tbody tr td{
border-top:1px solid #B4B7BB;
}
#main table tbody tr:last-child td{
border-bottom:1px solid #B4B7BB;
}
#main table tbody tr td:last-child{
border-right:1px solid #B4B7BB;
}
#main table tbody tr td:first-child{
border-left:1px solid #B4B7BB;
}
#main table tbody tr:first-child td:first-child {
border-top-left-radius:10px;
}
#main table tbody tr:first-child td:last-child {
border-top-right-radius:10px;
}
#main table tbody tr:last-child td:first-child {
border-bottom-left-radius:10px;
}
#main table tbody tr:last-child td:last-child {
border-bottom-right-radius:10px;
}
—
Tested in latest Firefox, Chrome, Safari(Mac). Hope it helps.
now this is beautiful..great work .. thanks for share !!
May 30th, 2012 at 19:18Great work! I am glad I found this template. One little problem. How can I get the side bar to scroll on an Android Tablet 3.2.1 – I thought I might change this:]
/* All portable */
June 7th, 2012 at 18:07@media only screen and (max-device-width: 1024px) {
#sidebar {overflow:scroll;} /* Sidebar is only scrollable in portable devices, you can change that */
}
/* iPhone */
@media only screen and (max-width: 768px) {
#sidebar {display:scroll;}<————————————**
#main {padding-left:20px;}
#main .header {padding-left:0;}
#main .header .left {left:10px;}
No luck. Any suggestions? Thank you again!
Magash, this was excellent! When I get some time over, I’ll make sure to implant this on my mobile site. You are a true hero, Steve.
June 24th, 2012 at 19:12Excelent work. Congratulations. I was looking hours for this and nothing is better than yours.
July 7th, 2012 at 22:55Thank you
I already have a database created and managed with MySQL Workbench, where do it enter the details? How can I use the fix it in Workbench?
Thanks
July 23rd, 2012 at 17:16This is great!
Do you have a version of this with an additional left column for a Country/State/Detail style interface?
July 28th, 2012 at 14:33Very nice template, I’m currently transitioning a web app to use this new template. I will send the author the link to the application by roughly the end of the week.
July 31st, 2012 at 02:56Only one issue I encountered is by adding a form tag around p input styled elements get crunched (looks to be margin). Seems wrapping with form modifies the context they are in.
Actualmente solo resta esperar que la empresa Apple realice
September 8th, 2012 at 22:26lo esperado y disponga su esperado producto para cumplir las
necesidades de lo que se quiere con dicho móvil y una vez lo tengan en su poder disfrútenlo de verdad porque
necesitarán tiempo para conocer todas sus posibilidades y aplicaciones que
harán su rutina mucho más sencilla y divertida.
[...] iPad/iPhone/mobile HTML/CSS template for web apps [...]
September 20th, 2012 at 08:53Great stuff Xavi,
Definitely going to use this for an app. How do I go about inserting icons into the sidebar links where there’s a grey square? Couldn’t work it out…
Thanks!
October 9th, 2012 at 07:35Nice work. How do you intend to replicate the smooth transition from one web page to the next once a button is clicked? Thanks – Lester
October 23rd, 2012 at 06:44I’m thinking about first using your template for a desktop web app, which will eventually move to the ipad. For now, I’m having trouble figuring out how to get the sidebar to scroll along with the main content… if the web browser window is not tall, I cannot see the entire left navigation area, and scrolling only will move the right panel.
November 13th, 2012 at 21:19Xavi,
I’m using your template and it’s really great. It works very well but I’m having the problem with the fixed header moving as described in this note from the top of the template.php page:
Notes:
- Header position bug when scrolling: When you scroll down, the header may move to the middle of the screen. Fix it by removing the # from the URL.
I do not have a “#” in my URL. I’m not certain of what you’re talking about removing. Can you please clarify or suggest what else might be causing the header to move?
Thank you,
April 12th, 2013 at 02:13James