Off by 7%

I noticed something quite strange today, almost a year since Apple launched their Magic Trackpad their marketing materials on the website do not depict the actual device correctly in terms of proportions.

Don’t get me wrong, a 7% width difference from the promotional images to that of the actual device is a far cry from deceptive marketing and had it been any* other company than Apple such a slip up would not even worth mentioning, but i find it quite notable given how notorious Apple is for the attention to detail in both products and marketing going as far as to depict the exact time that Steve Jobs introduced the iPhone on all iPhone marketing materials.

Here is how the images on apple.com/magictrackpad/ compare to a image of a actual Magic Trackpad, all images show it 7% wider, and it is not that they do not have images of the hands on properly sized Magic Trackpads, boxes for it from the initial US version and the current EU version both show accurate sized devices.

*Take ViewSonic for example that had OSX depicted running on their ViewPad tablet‘s promotional materials

discrete graphics and you

In 2010 Apple introduced a feature in MacBooks with the aim of extending battery life “Automatic graphics switching” that switches between using either the integrated Intel GPU  inside the CPU or the standalone discrete AMD/Nvidia GPU.

The exact conditions however that make it switch one or the other were never clearly stated by Apple, and there has been much debate confusion and speculation on the subject.

Upon testing i found the answer to be pretty straight forward in that if a application ever loads the OpenGL.framework the machine switches to the standalone GPU (easiest way to determine this is inspect the files area of the program with Activity Monitor and look for OpenGL.framework) ,i have so far unable to find any other framework besides it to trigger the switch.

Determining what can make it load that framework is not that straight forward however, and remember it does not have to be linked for it to be loaded, any API that relies on it can trigger it’s loading, and the likely culprit in most cases will be Core Animation which uses OpenGL backing.

So to make sure you do not trigger the standalone GPU you need to make sure your code does not rely on any Core Animation API’s or any that otherwise uses OpenGL, also remember that all the “Effects” in Interface Builder require a Core Animation layer that will trigger the loading of the OpenGL.framework

EDIT: As of lion there is a property you can control this behavior with, the NSSupportsAutomaticGraphicsSwitching key as detailed in the Allowing OpenGL applications to utilize the integrated GPU QA

 

iOS and vectorial artwork

Any conscious iOS developer wants his artwork to look as good as possible, and with the retina display for example we were told to upgrade our artwork to higher resolution, which involved alternative @2x versions for each file and gets daunting fast if you have a lot of artwork files, and especially if a lot of your artwork is vectorial and you could just use it directly.

A popular vectorial format is PDF, and Apple has implemented a lot of the resolution independent artwork in their OSX apps as PDF, unfortunately there is no straightforward way to do that, the iOS SDK does not yet have the PDFKit.framework that exists on OSX (Interface Builder does still accept pdf files as images but they will not show on iOS) so what is there to do ?

Well the only way to do it currently is to set your artwork images in code, after rendering the PDF file into a UIImage, there are a couple of approaches to this and i am going to show you the one i use :

#include <dlfcn.h>

-(UIImage *)UIImageFromPDF:(NSString*)fileName size:(CGSize)size{
    CFURLRef pdfURL = CFBundleCopyResourceURL(CFBundleGetMainBundle(), (CFStringRef)fileName, NULL, NULL);
    if (pdfURL) {
        CGPDFDocumentRef pdf = CGPDFDocumentCreateWithURL(pdfURL);
        CFRelease(pdfURL);
        //create context with scaling 0.0 as to get the main screen's if iOS4+
        if (dlsym(RTLD_DEFAULT,"UIGraphicsBeginImageContextWithOptions") == NULL) {
            UIGraphicsBeginImageContext(size);
        }else {
            UIGraphicsBeginImageContextWithOptions(size,NO,0.0);
        }
        CGContextRef context = UIGraphicsGetCurrentContext();
        //translate the content
        CGContextTranslateCTM(context, 0.0, size.height);
        CGContextScaleCTM(context, 1.0, -1.0);
        CGContextSaveGState(context);
        //scale to our desired size
        CGPDFPageRef page = CGPDFDocumentGetPage(pdf, 1);
        CGAffineTransform pdfTransform = CGPDFPageGetDrawingTransform(page,kCGPDFCropBox,CGRectMake(0,0,size.width,size.height),0,true);
        CGContextConcatCTM(context, pdfTransform);
        CGContextDrawPDFPage(context, page);
        CGContextRestoreGState(context);
        //return autoreleased UIImage
        UIImage *ret = UIGraphicsGetImageFromCurrentImageContext();
        UIGraphicsEndImageContext();
        CGPDFDocumentRelease(pdf);
        return ret;
    }else {
        NSLog(@"Could not load %@",fileName);
    }
    return nil;
}

Typically you would use it like this : [someButton setImage:[self UIImageFromPDF:@”search.pdf” size:CGSizeMake(20,20)] forState:UIControlStateNormal];

The best thing about this is that it not only makes your artwork compatible with the current form and scaling factors, but most likely with further ones as well.

This is compatible with iOS 3.0+ and has been tested on iPhone and iPad, it is compatible with any resolution scaling (retina display has 2.0 for example) , i have also attached 4 pdf icons to get you started (created with Photoshop, exported with no layers or color profiles).

If for some reason you do not want to #include dlfcn.h and use dlsym() you can weak link UIKit and just check if UIGraphicsBeginImageContextWithOptions is NULL, or obviously if you are not supporting anything before iOS4 remove the conditional altogether.

NOTE: technically on IOS 4  you can currently exploit a bug and load a pdf file from [UIImage imageNamed:@”filename”] by stripping the extension, however the default size of the artwork in the pdf has to be exactly the size of the UIImage you want, if it gets scaled significant pixelation occurs basically making this shortcut unfeasible, plus it could stop working altogether at any time.

iphone signal testing with code

Closest cell tower 1 Km, iPhone 3G, Wi-fi mode, iOS 4.0, Orange network.

With device held gently by edges:

signal avg 90 (outdoor, line of sight to cell tower, same altitude)
signal avg 😯 (indoor, line of sight to cell tower, same altitude)
signal avg 60 (indoor, no line of sight to cell tower, same altitude)
signal avg 4O (outdoor, no line of sight to cell tower, ground level)

With device cradled in hand a average decrease of signal by about 20 in all cases and whatever finger configuration.

Turning 3G on causes a average decrease of signal by 5 in all cases.

The connection strength bars shows 5 bars in all cases.

Absolute minimum experienced : 19, absolute maximum 96.

The thing to take away from all this is that if  you already had a very bad connection under 20 and subtract the hand attenuation of about 20 you are left with no signal, and it did not hep that until iOS 4.0.1  a bad connection with a 20 strength would have shown 4 or even 5 bars.

The application used to test gets the signal strength from private calls to apple’s CoreTelephony framework, in a effort to help the iphone signal testing going on share a common base i am providing the application to anyone, please let me know what are the results of your tests and feel free to contribute to the code on github.

The application is named  VAFieldTest , it’s code is under a open source license and can be found at http://github.com/valexa/VAFieldTest , you need Xcode and a iPhone developer account to compile and run it.

iOS 4.0.1 update
same behavior as before, with the difference that now the connection bars properly reflect changes in the strength (I 1-19, II 20-29, III 30-39, IIII 40-49, IIIII 50-99 ) , with previous versions they just show 5 bars for any signal strengths above 25.

how to make your iOS device read stuff

Here is a little handy tip to make your device speak textual content with almost acceptable computer voice:

Go to Settings > General > Accessibility > Triple-click home to “Toggle VoiceOver” or “Ask” if you want to get a dialog asking wether to turn it On/Off (remember that tapping is done by double-tapping when voiceover is on).

Optionally go into Settings > General > Accessibility > Voiceover and set the “Speaking Rate” slider to around 20%, i found that speed to work best for me when reading papers.

Now go to your book or webpage or anything you want read and triple-click home and behold the machine start speaking your currently selected element,

Remember to turn voiceover off when you are done or else you will have to interact with the phone interface in a a whole different way (if by any chance you lock the device as i did you can unlock it by tapping the swipe bar to select it then tapping it again to unlock).

The major pitfalls besides the surprisingly hard to perform triple-tap home is that you have to select any text blocks you want read, and while this might be acceptable for pdf books where you can select a whole page in basically everything else you have to select individual paragraphs, even sentences, so do not expect a audiobook experience, and do not expect it to speak the contents of apps that do not have selectable text like WSJ, NYT etc (BBC/Reuters/AP work).

It is a shame Apple did not make it possible for this to be implemented as a book/content speaker with a consistent behavior and without relying on voiceover tricks, as it will even support reading in a lot of other languages than English, (for the full list see this for iPad and this for the other devices)

Voiceover is only available on iPhone 3GS, 4, iPad and 3rd generation iPod touch.

enforcing iAd implementations


There seems to be a significant issue with the iAd implementation at the moment, the ads themselves are not cached on the operating system, and that has two major implications:
1 – ads can be disabled by the user by just turning off the network connection
2 – the user has incentive to disable ads under pricy data plans as every load adds to their data quota

To a developer this gives a strong incentive to both give the user the ability to purchase a removal of ads and make sure the user does not turn adds off otherwise (i am even starting to see places advising users to do so) i will go on showing how to do both and all the code is given as a xcode project attached.

Wether you have a free application and your business model depends solely on iAd’s or you monetize in other ways, if you implemented iAd you have to acknowledge the next thing:
People will want to remove the ads if at all possible, if you implemented iAd you should also allow the user to make an in app purchase for removing the ads, i will also show you how to do that in the code attached as a xcode project.


Do not get me wrong, i believe that some of the users will make the right choice and pay compensation in return of removing the ads if you give them that option, but a lot of the people will make the choice of depriving you of your ad income if they can make them stop loading.
So i will also show you how to implement a way to check if a ad was loaded after a amount of time and effectively disable the application otherwise, you can find the code in the xcode project attached.

I want to end with saying that this is clearly not a ideal situation and i hope that Apple will move quickly to address both issues 1 and 2 from within the operating system which would make a lot of sense and is a case of how they should have leveraged the fact that they built it within the operating system in the first place.

Now i will give you some details about the code, it supports all interface orientations, all devices, it requires 2 frameworks (iAd and StoreKit with iAd being weak linked) , the bulk of the code is in iAdAppViewController, this is the only one you need to edit to suit your interface and change com.foo.bar.removeads to your ProductID, besides that there is a PaymentObserver class that handles the in-app purchasing.

AdAppViewController must implement the PaymentObserverDelegate and ADBannerViewDelegate protocols, it subclasses viewDidLoad to do the initializations, viewDidAppear to position the elements, adLoadCheck to check if the ad was loaded, adsButtonPressed for when the user buys, removedAdsPurchased for when the purchase is confirmed, bannerViewDidLoadAd fires when an ad loads and willAnimateRotationToInterfaceOrientation when the device orientation is changed, resizeBanner is the code called to position/reposition the ad and the other elements in your interface.

ADBannerView *adBanner is the banner itself,  UIButton *adButton is the button above the ad to purchase ad removal, UIView *adBlockView is the view presented over the interface as shown in the image to the right.

I will not go into more detail than this other than to say it was all tested and should work as expected, but i did not implement this myself and i give no absolute guarantees , if you have any specific question leave it as a comment.

Safari-like Reader for any browser including Mobile Safari

We all like the new feature in Safari 5, Reader, well maybe except the advertisers, it is so pristine as anything we would expect from Apple but as it turns out it is actually based on the work of NYC based design house arc90, namely Readability which is acknowledged by Apple in file:///Applications/Safari.app/Contents/Resources/Acknowledgments.html

If you visit their Readability page you will notice that it is implemented as a javascript bookmarklet useable in any browser (i tested Chrome and Firefox) , all you have to do is drag the link to the bookmarks bar, for Mobile Safari which does not have such a bar it is a bit more complicated:
1 – create a placeholder bookmark by pressing plus (can be any page), press Save
2 – copy the javascript at the bottom of this post into the pasteboard
3 – press bookmarks > press edit > press the arrow on the shortcut you created
4 – press the round x to clear the name and type say Readability
5 – select the bottom field, press the round x to clear the address and paste the text

javascript:(function(){readStyle='style-newspaper';readSize='size-medium';readMargin='margin-wide';_readability_script=document.createElement('SCRIPT');_readability_script.type='text/javascript';_readability_script.src='http://lab.arc90.com/experiments/readability/js/readability.js?x='+(Math.random());document.getElementsByTagName('head')[0].appendChild(_readability_script);_readability_css=document.createElement('LINK');_readability_css.rel='stylesheet';_readability_css.href='http://lab.arc90.com/experiments/readability/css/readability.css';_readability_css.type='text/css';_readability_css.media='all';document.getElementsByTagName('head')[0].appendChild(_readability_css);_readability_print_css=document.createElement('LINK');_readability_print_css.rel='stylesheet';_readability_print_css.href='http://lab.arc90.com/experiments/readability/css/readability-print.css';_readability_print_css.media='print';_readability_print_css.type='text/css';document.getElementsByTagName('head')[0].appendChild(_readability_print_css);})();

Now when you want to see only the content on a page you are visiting just tap the newly created bookmark and you are all set.
Just in case you want to enhance your Mobile Safari even more you might want to check out http://ipuhelin.com/en/safariplus/ ,in page text search is a must-have if you ask me.

adapting web interfaces to the iPad

I decided to write this on the heels on the impending iPad launch, but is is just as valid for the iPhone as well, maybe just a bit less obvious.

The core difference from a user interface designer’s point of view between interaction with content on a desktop and a iPhone/iPad can be summed in a few words : cursor input versus touch input, much of what i will go on to detail stems from this, some of it might seem obvious but it is the obvious that is often forgotten.

1 – Hover

There is no hovering, your user interface can not depend on hovering to display tooltips, to visually highlight/select menu items, to show and hide dhtml dropdown menu’s, to underline links.

– hover tooltips are just gone, there is nothing you can do to replicate them.
– hover selecting/highlighting menu items is also something gone entirely.
– hiding and showing dropdown menu’s when hovering out/into has to be changed with a hide/show toggle on click events.
– differentiating textual links from normal text by wether they change when hovering over is gone, you have to make sure you do not rely on this differentiate textual links from static text.

Your browser does not support video, upgrade to a HTML5 compatible browser.

2 – Cursor

Well there isn’t any, cursor that is, traditionally the cursor changes shape depending on the type of the interface element under it, this gives important feedback to the user.

– the cursor does not change to the hand over clickable interface elements so you have to make sure the element reflects the fact that it is a clickable element

that it reflects what exactly is it’s clickable area, and that it’s clickable zone does not have blind spots

– the cursor does not change to the vertical bar that is the visual hint of a element that accepts text input below the cursor, so you have to make sure text input fields are distinctive.

There are a lot of other things to keep in mind besides these two major aspects, scrolling for example is different, page scrolling is performed by touching anywhere in the page, scrolling of distinct elements within the page has to be handled differently, there is also no pixel precision like on desktops and the element directly under the finger is obscured from view.

Seesmic before the iPad

Exactly 2 years ago Seesmic purchased Twhirl and shifted from a video conversation platform to a twitter client, i will continue to make a brief overview of the process as it provides a extremely interesting and relevant case.

I started following Seesmic when it was still a video site, behind it is Loic Lemeur a well known entrepreneur highly involved in social media and the father of the LeWeb conference, when he started Seesmic he even moved to San Francisco getting people like Pierre Omidyar, Reid Hoffman, Stephen Case on board and two series of founding $6M each.

By this time there still was no business model but Loic’s goal was to have a impact and create value and like every investor knows, that eventually blooms into a business, by the end of 2008 however there were already signs of trouble with 1/3 of staff being laid off, early into 2009 a web version of Seesmic’s twitter client was released then silence until early 1010 when Loic used Microsoft’s Professional Developers Conference as a platform to launch Seesmic for Blackberry and Android, which signaled the shift toward Windows, Loic himself switching to Windows after complaining about issues upgrading OSX to Snow Leopard.

The mobile and web versions joined the initial desktop Seesmic twitter client that ran on both Windows and OSX courtesy of Twirl’s Adobe Air codebase, so by now you could say that they had everything covered, except one minor thing, the iPhone, and in two days from now the iPad, which brings me to the reason why i started writing this.

Sure, you could argue that they identified the niche in the lucrative and less competitive Blackberry/Windows space, apparently they quickly hired a bunch of romanian windows developers and eventually even partnered with Microsoft to create a windows only flavor of Seesmic for the masses, Seesmic Look, so they could afford to ignore iPhone and the iPad markets, saturated with independent developers and highly competitive, even if Loic had the founds and the levers to give it a edge over anyone else.

Either way Seesmic makes for a extremely interesting case study, i gave up waiting for a native OSX/iPhone client, but things are not looking good for the days ahead, here is how it will look: people opening seesmic.com from a iPhone and more importantly from the iPad will be thrown into a dead-end with broken image links and suggestions to get the Android and Blackberry clients, even if they know the url to the web based Sesmic client they will be unable to access it from mobile browsers, and there is no native Sesmic in the AppStore either, which brings the options to 0.

iPad, the “Truly” Personal Computer

The media is awash with reviews about the iPad being underwhelming, limited and so forth but mostly missing the point save for a few notable exceptions (1, 2, 3).

I am going to state in no equivocal manner that the iPad is the biggest thing since the PC was introduced by IBM in 1981 and for a long while it is going to be in a class of it’s own that could be easily called the “Truly” Personal Computer.

It is going to be the first choice as a first computer for people not having one, and the first choice as the first portable/tablet device for people not having one.

It is going to sell huge numbers slowly but steadily and by 2015 there are probably going to be 100-200 million units sold compared to 1-2 billion computers worldwide.

Why ? 5 reasons :

1 – no operating system learning curve
The
majority of computer users do not want to learn how to use a operating system and only use one for a limited number of tasks identified by apple as : access the internet/email, read books/periodicals, watch/listen to audio-visual media, play games, manage contacts/calendar/spreadsheets etc.

For everything else there will be a app, you know “there’s an app for that”, as for the techies/geeks will probably sport jailbroken iPad’s or run OSX on it.

The majority of computer users are not really familiar with how a operating system works, and they should not be, once they figure out that they can do pretty much everything they need on the iPad the time they use a PC will dramatically decrease.

2 – touch:
Have you ever watched a person learning to handle a mouse trying to click a icon and instead dragging it, struggling with frustration to grasp the user interface elements in a operating system ?

Have you ever seen someone that never used a touch device like a iphone before or a 5 year old just take it and immediately figure out by intuition alone how it works and how to handle it ?

Touch is infinitely more natural than cursor/pointer based interaction with user interface elements and the mouse will slowly grow limited to the those of us that really need the precision the same way that trackball and graphic tablet users are limited to those that need it’s added functionality when interacting with a computer.

3 – portability :
The “personal” in PC used to mean you owned it, it was yours, but nothing is more personal than something you can carry on person, have it always with you, nothing more personal than an device you control by touch alone.

The technology is mature enough at this point that devices are really starting to be portable , at this point the size of the device for now is almost solely dictated only by the size we want it’s display to be.

The iPad is exactly the right size between a phone and a laptop to be wearable in our bags and purses without being a bother.

10 hours of battery is finally starting to get close to handling a full day of usage unprecedented in portable computers.

4 – multipurpose platform :
Every single engineering/musical/medical etc. multitouch device can be replaced by a single iPad having multiple specific software, people have been dreaming this for ages, the days of proprietary devices that married one specific piece of software with a specific piece of hardware are numbered.

5 – affordability :
Apple has really made apparent their intention of having the iPad priced as low as possible and as they sell more and more of them and the technology evolves and cheapens they are going to significantly lower the price at which they sell the iPad without a significant loss of the margins.


That being said the iPad is great, the only issue with it is the paradox that makes the level of simplification in the iPad only possible in conjunction with paramount control over they way it behaves, if i could ask Apple for one thing it would be a single switch that takes away a bit of simplicity in exchange for a bit of  flexibility, there are certainly a number of us out there that would pull it.