Creating a web clip icon for each iOS resolution

There are apps in the Mac App Store, like Icons, that can help developers create web clip icons. Otherwise, you can just use your favorite graphic editor or even the basic OS X utility Preview (included free on every Mac) to create the image files required.

For the iPhone 4 and latest-generation iPod touch, a 114px x 114px image is what you’ll need. IPads optimally use 72px x 72px, and all other iOS devices prefer 57px x 57px image files. In all cases, the web-standard resolution of 72dpi is the way to go. If you like, you can manually create a custom image for each device, or you can just create an image targeting one device and let the others scale the image up or down as needed.

One thing that iOS does on your behalf is add image effects like rounded corners, a drop shadow and the iconic reflective shine to the icons you create. To take advantage of this, ensure that the image file you create is perfectly square and free of any shine or gloss. If you prefer to add your own effects, be sure to append the -precomposed keyword to the end of the image file name.

Adding the icons to your website

If you’ve decided to use just a single image or set of images for your entire site, then simply copy the files to the root directory of your domain. On the other hand, if you want to add different icons to different individual pages of your site and name them however you like, simply add the following link element to your pages, substituting your custom file name for the href value:

<link rel="apple-touch-icon" href="/your-custom-icon.png"/>

This also works if you create specific icons for each device’s particular display characteristics. You also need to include the size attributes, as illustrated in the following code:

<link rel="apple-touch-icon" href="your-custom-icon-for-iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="your-custom-icon-for-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="your-custom-icon-for-iphone4.png" />

Now when someone decides to add this page to their home screen, the image file you created will be used in place of a scaled-down thumbnail of the page itself.

Users increasingly want to access content on the Internet using their mobile devices, and that means iOS devices for a large percentage. If you want to make a lasting impression, make your content accessible on iPhones and iPads first of all, but also make sure that if users do want to save your site for later viewing, they can find it among their many web clips and apps with relative ease.

Related research and analysis from GigaOM Pro:
Subscriber content. Sign up for a free trial.

• A Media Tablet Forecast, 2011 – 2015
• The rise of tablets in the enterprise
• Why iMessage won’t kill SMS

Note: Click the image above to be taken to the actual working keyboard.

I noticed that some keys don’t work as of right now, like the “Eject,” “delete,” and function keys, but that doesn’t take away from the fact that this is an almost-perfect simulation. One request, Dustin: Make the Caps Lock key’s green light turn on when it’s active. Even if that never happens, thanks for the excellent Wednesday distraction.

Related content from GigaOM Pro (sub req’d):

• How to Market Your iPhone App: A Developer’s Guide
• Mobile App Developer Survey: Profiles, Platforms and Monetization
• App Developers: Are You Ready for HTML5 and Metered Data?

Chances are if you do any kind of front-end web development on a Mac you’ve heard about CSSEdit, a very popular tool for editing .css files in OS X. I use CSSEdit pretty much all day long at my day job and while I absolutely love it and have a hard time imagining doing my job without it, its lack of support for all the new CSS3 properties is becoming more and more problematic.

Unfortunately, the good folks at MacRabbit who make CSSEdit have had their hands full lately. They just shipped a new update to their all-in-one web development app Espresso and apparently haven’t been able to get around to updating CSSEdit with full support for CSS3 yet. Lucky for us though, @andyford is on the case and has come up with this great “hack” for customizing the AutoCompletion.plist file in CSSEdit to include CSS3 syntax.

The .plist file in question is essentially just a collection of arrays that define the possible values for a given property, like font-weight for instance. As you can see from the screen shot below, the font-weight property has several strings contained in it’s array, all of which will be presented as autocomplete options when defining an elements font-weight within a .css file.

This is great news, as now we can use a handy tool like PlistEdit Pro to go in and add our own custom properties and values. By adding in additional strings to an array or by creating entirely new arrays, we can change the autocomplete behavior of CSSEdit and make it more CSS3 friendly.

But wait, Andy is ahead of the curve and has already rolled up a custom AutoCompletion.plist file (ZIP) for us which includes all the hot new CSS3 properties like border-radius, transform, transition, and more, including some custom values of his own. To join the fun, just right click on the CSSEdit application to “show package contents” and throw the custom .plist file into the CSSEdit/Contents/Resources directory. It’s probably a good idea though to first back up the existing .plist file somewhere safe just in case.

I did notice a couple CSS3 properties missing from Andy’s file but now that we know it’s there it will be easy enough to add in any important missing properties or values we need. I look forward to the folks at MacRabbit getting around to making an official update to CSSEdit now that they have the new version of Espresso out the door. There’s a lot of excitement building around HTML5 and CSS3 at the moment and I’m really hoping that my favorite CSS application can keep pace.

Related research and analysis from GigaOM Pro:
Subscriber content. Sign up for a free trial.

• Why iPad 2 Will Lead Consumers Into the Post-PC Era
• The Near-Term Evolution of Social Commerce
• Content Farms: The Players, The Benefits, The Risks

Gears, Google’s “browser improver” (for lack of a better term), has come out of beta and is now officially available for Safari.

Gears is a browser plugin that extends its functionality by allowing it do things like store data locally in a searchable database as well as run JavaScript in the background to improve performance. A common example of its use is to allow web applications to be accessed offline.

Gears requires an applications developer to implement the functionality in to their site, so there aren’t a huge number of sites that make use of Gears.

A few that currently do:

• Google Reader
• Google Docs
• Zoho
• Remember the Milk

If you’re a developer, you can checkout the Gears API and get started on implementing it in to your site.

Related research and analysis from GigaOM Pro:
Subscriber content. Sign up for a free trial.

• What Does the Future Hold For Browsers?
• Why iPad 2 Will Lead Consumers Into the Post-PC Era
• The Near-Term Evolution of Social Commerce

It appears to store data in ~/Library/Application Support/Google/Google Gears for Safari, so this would be a good folder to check from time-to-time (remember lsof is your friend) and the database files that are stored use SQLite, so you can peruse them from the command-line or via various GUI’s (one mentioned just recently).

Being a beta release, there are issues and you can add your own newfound bugs to the list as you come across them.

You’ll need Safari 3.1.1 at a minimum (and OS X 10.4.11/10.5.3). I’ve confirmed that it works with Safari 3.1.2. No word on Safari for Windows compatibility (let us know!) and don’t count on Mobile Safari support anytime soon.

If you give the beta a go, let us know your experiences and if you are a developer with a Gears-enabled application, drop the URL in the comments for all the TAB-world to see!

Related research and analysis from GigaOM Pro:
Subscriber content. Sign up for a free trial.

• Why iPad 2 Will Lead Consumers Into the Post-PC Era
• The Near-Term Evolution of Social Commerce
• Content Farms: The Players, The Benefits, The Risks

Wrox Press recently released Professional iPhone and iPod touch Programming: Building Applications for Mobile Safari by Richard Wagner. So far (not quite finished with it yet), the book is an great reference for iPhone web development and focuses on the most effective use of Joe Hewitt‘s iUI framework. The CSS-heavy framework provides an excellent base for your iPhone/iTouch applications and enables you to focus on application design rather than device quirks.

One of the best features of the book is how Wagner drives home the need for applications to be both network-resilient and network-aware. The iPhone has the ever-tenuous EDGE connections to deal with and Wi-Fi is not always stable or speedy, even on the iTouch. This book and the iUI framework should help you quickly build robust and speedy web-based applications for either device and make you an overall better mobile-targeted web developer.

Web-based iApps will continue to have their place in the iWorld even after the on-device SDK is released and you can find additional resources over at iPhoneWebDev.

If you’re using the iUI framework, have read Richard Wagner’s book or have other suggestions for mobile web development, drop a note in the comments with your thoughts/experiences/suggestions.

Related research and analysis from GigaOM Pro:
Subscriber content. Sign up for a free trial.

• Mobile Q4: All Eyes Were on Android, 4G and the Rising Tablet Tide
• Report: A Mobile Video Market Overview
• In Q3, the Tablet and 4G Were the Big Stories

xScope, from the guys at IconFactory, is a suite of on-screen tools for web and creative professionals that includes Rulers, Screen overlay, Loupe, Guides, Frame, and Crosshairs. The tools are meant to assist in the design and testing process, allowing you to measure and inspect your website or software program on-screen in real-time.

Rulers

Rulers let you position a translucent set of perpendicular rulers over any element on your display, and adjust the width and height giving you pixel measurements. The current position measurements change as your mouse moves, so you can get the coordinates of any element relative to, say, the top left of your website. This is really helpful in trying to determine the actual spacing of content and sidebars, for instance.

The ruler feature works well, and does very simply what many browser plugins and standalone applications can’t seem to get. It’s the tool from xScope I used the most in my testing.

Screen Overlay

The Screen Overlay gives you a window that lays over your browser and shows you the available content area of every major browser, IE and Mac. It includes IE 4+, NS4+, Safari, Firefox and AOL and all 3 popular sizes: 640, 800 and 1024 (and a custom size option, maybe for a WAP or iPhone site?).

Most people design their layout within constraints from the beginning, so while this tool is somewhat useful, it’s also a little overkill for most developers.

Loupe

I have tried out several loupe programs but the loupe in xScope is simple and effective. It shows you a super blowup (up to 600%) and tons of useful information including HEX and RGB color, Hue, Saturation, and X & Y coordinates (from the top left of the display). You can copy the current color, copy the blowup image, lock the current settings, or freeze the mac’s display – all without a button or interface on the loupe. Simple and elegant.

Guides

The guides do just what you think – they put vertical and horizontal guides on your display, just as with Photoshop or many other graphics applications. Only these guides are global – they stay on top of all your applications and are not clickable unless xScope is selected.

The guides are a feature I did see much benefit from using. One feature I think would make them very useful is measuring the distance between any two guides. That would allow you to create two guides based on elements on a web page and measure the distance between them, but that can be done with the ruler so it’s not a feature that is really missed.

Frames

The frames are 1px thin boxes, just like the crosshairs only they are containers that you can draw to any width and height. You can get the exact dimensions of an element or frame content on a web page. You can make a frame an exact width and height using the frame wizard, and can specify the X and Y coordinates also.

One interesting feature of the frames is you can set the height of the frame based on a predefined ratio and the width. This is a great feature for video editors, as they could overlay a box and see what a 4:3 ratio video would look like cropped to widescreen (2:3 or 16:9).

Crosshairs

Crosshairs give you a simple, easy to see visual of the current X/Y coordinates of your mouse. You see the entire vertical and horizontal guide as a solid black line that tracks your mouse movement.

Used with the loupe, you could get the exact pixel coordinates of a dead pixel on your display, for instance.

Overall Opinion

xScope is a solid, well-built application for creative professionals who demand pixel-perfect accuracy. The suite has virtually every feature you could need to measure, troubleshoot and perfect your websites and software programs.

At only $16.95, with a free trial download, you can’t lose. Download xScope and give it a try.

Related research and analysis from GigaOM Pro:
Subscriber content. Sign up for a free trial.

• Why iPad 2 Will Lead Consumers Into the Post-PC Era
• The Near-Term Evolution of Social Commerce
• Content Farms: The Players, The Benefits, The Risks

Via DaringFireball

Related research and analysis from GigaOM Pro:
Subscriber content. Sign up for a free trial.

• Note: Telco Strategies for Over-the-Top Video
• Why iPad 2 Will Lead Consumers Into the Post-PC Era
• The Near-Term Evolution of Social Commerce