Useful Tools, Template and Design for iPad and iPhone

In these days, I'm on developing web based Mobile Tablet project for especially iPad. That's why I need more information about iPad such as framework, template and Design for coming out nice GUI design. For actually development, I've used jQueryMobile of course because it's kinda flexiable and reliable. But I gotta know which other else framework and template are avaliable for web mobile development. For that case, I've found this website http://webdesignledger.com has a lot of information for iPhone and iPad development articles. Among them, I'd love to read the following three articles for iPad development.

http://webdesignledger.com/freebies/11-ui-kits-for-iphone-and-ipad-development

http://webdesignledger.com/tools/10-best-ipad-apps-for-web-designers

http://webdesignledger.com/inspiration/30-inspiring-ipad-app-websites

Hope above three articles will be useful for someone who is trying to implement Web Tablet Development like me.

Shortcut icon for iPhone

Everybody know how to make shortcut icon for Internet Explorer, Firefox and others. But, some people doesn't know how to make shortcut icon for apple projects. For me, I recently know how to make shortcut icon for iPhone either. Well, it's just simple and totally look alike with other shortcut icon.

Ok, let's go. First of all, we need to create Icon and standard resolution is 45x45 pixels. If you create the size more than standard resolution, iPhone automatically resize to their standard size.

Here is my icon for my blog.

App-Icon

(click above image to view)

After that, we need to put this icon as shortcut icon for apple projects in our coding. Ok, here we go....

view plain print about
1<link rel="apple-touch-icon" href="app-icon.png" type="image/png"/>

How? Easy, right?

 

Shortcut screen for iPhone

Last day, I've created shortcut icon and shortcut screen for iPhone but only shortcut icon is done. Oddly, I don't know why shortcut screen hasn't come up in iPhone even I've put some code in my blog. Recently, MrBuzzy gave me some codes to implement what I have a need to do. It's quite cool.

If you done creating shortcut icon and shortcut screen regarding my post for your website, you don't need to open Safari browser and don't need to wait page loading screen of Safari browser if you want to open your website in iPhone. Only click on shortcut icon and browse the website without using Safari browser.

One thing forgot to mention is your site must support mobile version. Currently, my site doesn't support mobile version. :)

Here we go:

view plain print about
1<link name="viewport" content="minimum-scale=1.0, maximum-scale=1, width=device-width, user-scalable=no">
2<link name="apple-mobile-web-app-capable" content="YES">
3<link name="apple-mobile-web-app-status-bar-style" content="black-translucent">
4<!--- create shortcut icon for iPhone --->
5<link rel="apple-touch-icon" href="app-icon.png" type="image/png"/>
6<!--- create shortcut screen for iPhone --->
7<link rel="apple-touch-startup-image" href="app-welcome.png" type="image/png">

It will look alike following image:

(Click to check preview image)

Font embed for iPhone browser (Safari)

Today I'm testing about font embed for iPhone browser. It's just like font embed style of EOT for Internet Explorer. What I'm gonna show is for all browser specially Internet Explorer, Safari brower (in iPhone either). First of all, we need to create EOT file, SVG and SUGZ file. EOT is especially for Internet Explorer and SVG and SVGZ are for Safari. To generate these files, we need to go http://www.fontsquirrel.com After that, they will generate .eot, .svg and .svgz And, also demo stylesheet. And, open it Safari browser. It's cool.

ENJOY..!!

If you wanna open it from iPhone, you need to jailbreak and test it. Unfortunately, iOS 4.0.2 isn't ready for jailbreak yet.

Top of Page