• ShareKit : Drop-in Share Features for all iOS Apps
  Enabled sharing via Delicious, email, Facebook, Google Reader, Instapaper, Pinboard, Read It Later, Tumblr and Twitter in your iPhone/iPad apps with this open-source library. Has a customized UI, lets you share URLs, images, text, and files… even when offline.
  (tags: Share app iphone ipad open source library code Delicious Email Facebook Google Reader Instapaper Pinboard Read It Later Tumblr Twitter cocoa objective-c programming sdk framework iphonedev opensource sharekit sharing ios mobile social developer apple development)
• Freebie: Vector iPhone 4 PSD File | Psdtuts+
  This download includes a fully scalable vector iPhone 4 PSD file that you can use in your own designs. It was designed by Cambridge-based designer, Hector Janse van Rensburg from Inkpilot.com.
  (tags: iphone 4 vector PSD image screenshots showcase app developer template photoshop iphone4 design free illustrator download)
• TwitterConnect: DDSocialDialog at Under The Bridge
  A Twitter Sign In component that follows the Facebook Connect flow for creating consistent experiences in apps that support both Facebook Connect and Twitter xAuth.
  (tags: twitter xauth facebook sign in log signin login cocoa touch objc objectice-c connect)

Update: Sold out!

My three-day Introduction to iPhone Development course is back (now with 100% extra branding) as Slide to Unlock: Introduction to iPhone Development and I'm going to be teaching it in August in Gent, Belgium in conjunction with Gladiator and Little Miss Robot.

"I had an immensely useful couple of days, and now feel a lot more up to speed than I could have hoped for compared with purely using a book or web-based reference guides." – JP Jones, CTO, econversions.co.uk.

Following hot on the heels of my courses in Brighton and London, the tickets for Slide to Unlock are going really fast (this month's course, which I'm teaching next week in London, sold out within a couple of days.)

In fact, the three early-bird tickets are now gone (after we announced it on Twitter yesterday, before I had the chance to even blog it) and there are only seven places left on the course.

Since the early-bird tickets sold out so quickly, I just created a special code for you guys: use the code STILLEARLY at checkout to get €100 off your purchase. Note: this code is valid for today only!

Update: Sold out!

Sign up to attend Slide to Unlock: Introduction to iPhone Development and get started with a solid foundation in iPhone and iPad development.

I just tested it out (in rather low light too, it's early morning here) while standing on my white throw-rug and it worked like a charm! It didn't work as well on my pine floor with bare feet so make sure you're standing somewhere with lots of contrast (or buy a white throw-rug, they're great!)

Upsies! works on iPhone 3GS and iPhone 4 with iOS4.

Lovely idea, beautifully executed and currently on sale at 99 cents/59 pence: Check out Upsies! for iPhone and get those legs moving!

3mobilebuzz.com contacted me before my talk at WebDirections @media to see if I wanted to try out the Three MiFi unit and blog about my experiences (don't confuse this with the MiFi that's sold outside the UK, which is known as the Novatel Wireless Hotspot and is notoriously difficult to find here.) Having just lost the T-Mobile USB dongle that had served me well for the last two years or so, I decided to take them up on the offer.

If you haven't had the chance to see or play with a MiFi, it's a portable WiFi hotspot that takes a SIM card and shares your mobile connection with up to 5 devices. It has a brushed-aluminium-and-white-plastic case that resembles a metallic version of Eva from Wall-E. The user interface consists of three little buttons on the side and a screen with five colored icons.

At this point, you may be wondering why a device that has just one purpose needs three buttons and five icons to perform its duties. The answer, of course, is that it doesn't. The UI is the worst part of the package and it leads to a rather frustrating user experience with the MiFi in general. I can only assume that the unit was designed either by committee or by graphic designers, not product or experience designers.

One button to rule them all

As I previously mentioned, the MiFi unit has just one function: to connect to your mobile account with Three and share that connection, via WiFi, with up to five devices. To achieve this, however, the MiFi asks you to press and hold three different buttons: one to power up the unit, one to initiate the mobile connection, and one to create the WiFi network.

This is a perfect example of needlessly exposing the inner complexity of the device to the user.

It's also a perfect example of what happens when engineers and designers worry about solving their own problems first, not the user's problems ("inside-out design" vs. "outside-in design").

Basically, if Google was a MiFi, it would give you a map of its servers and ask you how you'd like to load balance the search you're about to perform. The MiFi is a one-trick pony that needs nothing more than a single "on" button that turns it on, sets up the WiFi network, and connects to the Internet. In other words, it should "just work". Or, as Steve Krug puts it, don't make me think!

Colour me unimpressed

Once you've mastered the black magic of which order to press the three buttons in and finally managed to turn the device on, you're tasked with making sense of the five icons you're presented with on screen. In another design faux-pas, the icons both create expectations they don't meet and use colour as their sole semantic differentiator.

There is a static signal strength indicator which looks like a signal strength indicator but, being static, actually does not use the bars to indicate signal strength. Instead, it uses colour. (I'm not making this up.) If the signal strength indicator is red, you have low signal, if it's orange, you have a medium-level of signal, and if it's green, you have good signal. Of course, this is exactly what the bars in a signal strength indicator are for.

Similarly, the battery indicator, connection speed, and WiFi indicators display their status based on colour alone. There's also an "R" icon that apparently comes on when you're roaming (and blinks alongside all the other lights when you first turn it on).

Gutsy

Another gripe I have with the unit is the location of the SIM card. Following the Nokia convention, the SIM card is located under the battery on the underside of the unit. This requires users to take the unit apart, remove the battery, and insert the sim card as part of their initial experience with the device. This is akin to going on a first date with someone and showing them the granny knickers you happen to be wearing. Why ruin the magic at "hello?" I don't want to see what the inside of my MiFi looks like. I want to insert my SIM card and be wowed by the magic of a data connection that I can share with up to four of my friends.

As far as actual operational functionality went, I didn't have any issues with the MiFi or 3's network. I was able to get a good signal in most places I went to in London and Brighton and when I couldn't, I couldn't. C'est la vie when it comes to mobile Internet these days with any network. The user interface issues, however, tainted the experience for me.

That said, the MiFi is a great idea and, even with its faults, it's a seductive financial alternative to purchasing different data plans for your laptop, iPad, and the plethora of other mobile gadgets in your geeky arsenal. With a single data plan and a single device, you can connect up to five devices or share your Internet connection with up to four friends. That, in and of itself, makes the MiFi a no-brainer.

If Three addresses the usability issues, the MiFi also has the potential to become a lovely experience. And it appears that they have begun to do just that with the recently-released MiFi 2.

MiFi: the sequel

I just read a review of the MiFi 2 by Ian Better that states that the MiFi 2 addresses some of the issues I outlined above. According to Ian, the new MiFi features a single "on" button. That's great news. Also, you can apparently now configure your MiFi via a web interface (this should make those of us on Macs and Linux PCs happy). Finally, the screen apparently now displays proper signal strength and battery information.

However, based on the photo of the MiFi 2 posted on Technovia and Ian's article, I still think there's room for improvement in the design. It looks over-engineered and the interface has way too much noise.

So, in my next post, I am going to design my version of the MiFi. Stay tuned for my MiFi 3 Prototype…

In my post yesterday, I outlined how to present high-resolution images in web pages using CSS media queries to users using a high-PPI screen such the iPhone 4's new Retina display. I also mentioned that while this works for background images in CSS, the only solution currently for carrying out this same substitution for images linked to using the <img> tag is to use JavaScript. Finally, I suggested that browsers should natively support substituting high-resolution versions of images when they detect that the user is using a high-PPI display. In this post, I'd like to formalize that suggestion a bit.

Proposal for native browser support of high-resolution image substitution

Authoring web sites to use resolution independent images that display beautifully on high-resolution displays should be made as easy as possible for developers and should not require JavaScript to accomplish.

To accomplish this, I propose a new HTML Meta Tag, resolutions, that can be used to specify that high-resolution versions of images linked to from the page are available and that the browser should use them in place of the lower-resolution default images if it detects that a user is using a high-resolution screen. The resolutions meta tag lists the device-pixel ratios supported by images in the page.

So, for example…

<meta name="resolutions" content="2x"

… means that the developer is telling the browser that she has created 2x resolution images for the images linked to from the current page and named them with a @2x suffix.

To illustrate, if her image tag is as follows…

<img src="/images/flower.jpg" alt="A flower">

… then she has two image files under /images: the low-resolution default (flower.jpg), and a higher-resolution (200%) version named flower@2x.jpg.

(This is the same naming convention already used by Apple in its Cocoa Touch framework for automatically loading in higher-resolution versions of images.)

Based on the meta tag, if the browser detects that the user is running at a min-device-pixel-ratio of 2.0, it will automatically ask for the 2x version of the image (flower@2x.jpg) instead of the default image as specified in the image tag.

Finally, so as not to flood external sites with high-resolution image requests, this functionality would only work for local images specified via relative links.

Multiple resolutions

The resolutions tag can also contain a list of supported device-pixel ratios so as to support even higher-resolution displays when and if they become available in the future.

For example:

<meta name="resolutions" content="2x, 4x, 8x">

In this case, the developer would provide 2x, 4x, and 8x versions of all images. So, in the running example, she would make flower.jpg, flower@2x.jpg, flower@4x.jpg, and flower@8x.jpg.

Advantages

The advantages of this approach are several:

1. Makes it very simple for developers to support high-resolution displays like the iPhone 4's Retina screen
2. Does not require JavaScript
3. Does not change the default way that things work (if the meta tag is not specified, the browser simply behaves as it always has).

So, how do we make this happen?

I have to admit that I'm rather clueless about whom to contact about making this happen and wouldn't even know whom to approach in the W3C so I'm planning on leading my rather more clued-up friends to this post and seeing what happens. If you think that this is a good idea and want to point the right people here to get the ball rolling, I'd appreciate it.

Update: I've now submitted this as a proposal to WhatWG. Check it out on the MetaExtensions Wiki page.

And, of course, I'd love to hear your feedback and thoughts.

The moment you first lay eyes on the iPhone 4's new Retina display, you are ruined. No other display will ever make you happy. Not unless it, too, is a Retina display. You start seeing pixels everywhere. My beloved MacBook Pro's screen? Pixels. The iPad I bought a few months ago and couldn't leave aside? Pixels.

Retina changes everything

The iPhone 4 really does change everything again and not just for phones. By introducing the Retina display, Apple has just changed the rules of the game. Make no mistake, this is as fundamental a shift as the move from black and white to color TV. I now want Retina displays on my next iPad and my next MacBook Pro (and will happily pay a premium for it). Whether or not Apple has the technology to meet the expectations it has now created with the Retina display on its other products is another issue (i.e., does the technology exist to manufacture a 326ppi 15" retina display for a MacBook Pro?)

With the introduction of the Retina display, Apple has guaranteed the following three things:

1. Vectors will play a central role in any graphic production pipeline.
2. You basically have to design liquid interfaces (and interface elements) for your apps.
3. You won't be able to get away with the levels of image compression you've been using so far.

Basically, if you want your applications and web sites to look beautiful on the iPhone 4's new retina screen, you're going to have to create high-resolution versions of your bitmaps and/or use vectors. Resolution independence is here today and it is here to stay.

What about images in web pages?

While version 4 of the iPhone SDK handles much of the hassle of working with two versions of every bitmap for you by automatically loading the right image if you adhere to the simple naming convention of adding @2x to the ends of your image names, no such automagic handling of images exists for images in web pages. I'd been meaning to look into this since I got my iPhone 4 last week and was happy to see that Walt Dickinson beat me to it with his article on Targeting the iPhone 4 Retina Display with CSS3 Media Queries in which he draws on Dave Hyatt's post on high DPI web sites, John Gruber's Why 960x640 post, and the Safari Web Content Guide to suggest the use of device-pixel-ratio CSS3 media query to serve high-resolution images to devices with high-DPI screens:

 
<link rel="stylesheet" type="text/css" href="/css/retina.css" media="only screen and (-webkit-min-device-pixel-ratio: 2)"
/>

Then, in the Retina-specific CSS, he loads in 32x32 icons as background images and specifies their dimensions in CSS pixels as 16x16 using the background-size CSS property.

Demo

I put together a quick demo using the same technique that you can test out. It uses the lovely Smashing Royal Icon Set by Artua.com to embed 64x64 and 128x128 actual pixel size icons for display at 64x64 CSS pixel size.

Download the source (.zip; 74KB).

CSS media queries and background images are all well and good, but what about other visual assets such as images embedded on a web site via the img tag? Or videos?

A call for native browser support for high-DPI image and video substitution

I'd like to suggest that browsers adopt the same naming convention that Cocoa Touch uses to find and load high-DPI versions of image and video assets. That is, if I embed an image using the following code…

<img src="flower.jpg" alt="A beautiful rose">

… it should load in flower.jpg when the device-pixel-ratio is 1 but it should attempt to find an image called flower@2x.jpg at the same relative path if device-pixel-ratio is 2 (and so on, for higher pixel-ratios), falling back to the original graphic if it can't find a high-resolution version.

(And the same convention could be used to load video assets.)

Update: Magne Andersson pointed out in the comments (and I agree) that sending two requests for every image asset would not be ideal. However, it would be easy to work around this by introducing a new HTML meta tag that tells the browser whether or not high-resolution images are available. The browser then only tries to load high-resolution images if the meta tag is present and if it detects that it is running on a high-DPI screen.

How to optimize for high-DPI screens today

Since browsers do not currently have this sort of automatic support for loading high-resolution versions of image and video assets, how can we detect that the site is being displayed on a high-DPI screen and load in high-resolution assets? The obvious way is to use a combination of CSS media queries and JavaScript:

1. Use the device-pixel-ratio CSS query to load in a high-DPI CSS file,
2. Set some CSS property to a unique value (to use as a flag),
3. Check that value in JavaScript and substitute high-resolution image/video assets accordingly.

Don't forget about SVG

SVG has been the unloved step-child of the web ever since I can remember. However, it has really begun interest me now that we're moving to creating resolution-independent designs. (That's why I'm so happy that I have the chance to catch Doug Schepers's talk on SVG at tonight's SkillSwap after missing it during WebDirections @media.) If you, too, have been ignoring it, now might be a good time to take another look.

Why native iPhone app developers should care

Most native iPhone applications are – to some degree – hybrid apps and use the UIWebView WebKit control to embed HTML, CSS, and JavaScript content. Some native apps – such as those wrapped by PhoneGap, are almost entirely created with web technologies. Regardless of where on this spectrum your app falls, you will probably find yourself having to support high-DPI images in web content. Not only that, but UIWebView renders SVG so you could consider using it to keep parts of your interface as vectors without having to write custom drawing code.

The iPhone 4's Retina display really does change everything. The sooner you start thinking about (and practicing) resolution-independent design, the sooner you can start to take advantage of this beautiful new screen and the other high-DPI screens that will, no doubt, be following its lead.

The issue is that the UIWebView keeps playing embedded media unless you reset it. But reset how?

I just tested it out and the only way I could get the audio to stop was to load an empty string into the UIWebView like this:

[self.webBrowser loadHTMLString:@"" baseURL:nil];

Things that didn't work include calling the UIWebView's stopLoading method, setting the web view as hidden, removing it from its superview or setting it to nil and/or releasing it.

I've seen this issue with other apps that have embedded UIWebView components so remember folks, reset that web view by loading in an empty string before hiding it to make sure any playing media is stopped.

I've just had a cancellation on my Introduction to iPhone Development course in London for July so there's one ticket up for grabs. I know a few people didn't get in who wanted to so grab it now before it goes! :)

Let's see how long it takes: publishing this at 21:55 on June 23rd :)

EA is holding a 48 hour 99¢ / 59p sale for some of its top iPhone games. The sale is on now and ends on the 24th of June. The following games are on sale:

• Tiger Woods PGA TOUR® BY EA SPORTS™
• Trivial Pursuit - Electronic Arts
• SimCity™ - Electronic Arts
• Need For Speed™ Undercover - Electronic Arts
• FIFA 10 by EA SPORTS™ - Electronic Arts
• CLUE - Electronic Arts
• CONNECT 4 - Electronic Arts
• BATTLESHIP - Electronic Arts
• MADDEN NFL 10 by EA SPORTS - Electronic Arts
• Surviving High School - Electronic Arts
• COMMAND & CONQUER™ RED ALERT™ - Electronic Arts
• THE GAME OF LIFE Classic Edition - Electronic Arts
• YAHTZEE™ Adventures - Electronic Arts
• NBA Live by EA Sports - Electronic Arts
• JEWEL QUEST MYSTERIES: CURSE OF THE EMERALD TEAR - Electronic Arts
• Dragon's Lair - Electronic Arts

The new iPhone 4 sports a high-resolution display called Retina with 326ppi resolution. While you already had to create different renders of your application icon and launch screens for the iPhone and iPad versions of your apps, the iPhone 4 means that you now have to have two renders (low-resolution and high-resolutions) of your artwork for just the iPhone version of your app. Couple this is with the iPad and iPhone versions, and the landscape and portrait versions of the launch images and you end up with quite a number of app icons and launch images to create.

If anything is apparent, it's that you should probably be working with vectors whenever possible and rending the different assets from them using some sort of automated process (actions in Photoshop work well for this. There's also an OS X app called Opacity that supports this workflow – although I couldn't really get into it when I gave it a shot last week.)

Although there are a number of ways to include the various icons and launch images in your apps, I would recommend that you go with the naming convention approach.

For example, for your application icons:

• Icon.png (57x57 – for iPhone and iPod Touch)
• Icon@2x.png (114x114 – for iPhone 4)
• Icon-72.png (72x72 – for iPad)
• Icon-Small.png (29x29 – Settings app and in search results for iPhone and iPod Touch)
• Icon-Small@2x.png (58x58 – Settings app and in search results on iPhone 4)
• Icon-Small-50.png (50x50 – search results on iPad)

One advantage of this method of working is that all you need to do is to generate your various icons (e.g., via an Action in Photoshop), drag them into XCode and you're done.

The additional advantage is that – if you're using multiple targets – it's really simple to include separate sets of icons for each target. For example, both Feathers and Feathers Visage share the same project and are simply different targets. To include the icons:

1. Render your various icon files and place them in their own folder (e.g., I have folders called Twitter Icons and Facebook Icons)
2. Drag the folders into XCode
3. Bring up the Get Info panel for the folders in XCode and check the Target you want that folders contents to be included in.

Hope this helps.