iOS Icons For Web Apps

I just created a new set of iOS home screen icons for this website. Creating multiple home screen icons allows the icon that launches your site to look professional and crisp on Apple’s retina and pre-retina displays for iPhone and iPad.

Icons: Before and After
Icons: Before and After

It’s very easy to do. Just create a set of PNG image at 57×57 pixels, 72×72 pixels, 114×114 pixels, and 144×144 pixels. Create the images individually in Photoshop and don’t just resize the largest to the smaller sizes. Create the images as squares with 90-degree corners. iOS will take care of adding the rounded edges and reflective effect.

The image in this post shows the raw PNG I created and how it looked after iOS applied its effects. You can also tell iOS not to alter your image by using the “-precomposed” option. This approach is used by a lot of sites and apps like Path and Pinterest. Apple’s developer documentation will tell you how to do that.

Once your images are created, place them at the document root of your web server. Then add the <link> tags below in the <head> section of your site’s pages. And with that you’ll have nice clean home screen icons for people who want to keep your site one tap away on their Apple devices.

<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png" />

The icons are used by the different devices in this way:

  • 57×57 will be for iPhone 3GS, 2011 iPod Touch, and older Android devices
  • 72×72 will be for iPad 1, iPad 2, and iPad mini
  • 114×114 will be for iPhone 4, 4S, 5, and 2012 iPod Touch
  • 144×144 will be for for iPad 3 and 4

For more information on configuring web apps, see Apple’s iOS Developer Library.

The Touchable Desktop

Yesterday I presented at UX Thursday in Chicago.

My 20-minute talk was on The Touchable Desktop – When Responsive Won’t Fly. It looked at design considerations for websites targeting desktop computers and tablets when responsive web design is not an option. Here are my slides:

 

Here are some additional resources to help you when designing for tablets and touchscreens:

The event was sponsored by User Interface Engineering.

Adobe Shadow Device Mirroring

Adobe Shadow on an iPad, iPhone, and MacBook Pro
Adobe Shadow on an iPad, iPhone, and MacBook Pro

I recently started using a new tool for testing website designs across different mobile device screens without the hassle of having to refresh each browser I’m using.

Adobe Shadow is a free tool from Adobe that allows you to mirror your desktop Mac or Windows computer to multiple mobile devices. You can pair your desktop to iOS and Android devices, including the Kindle Fire. Shadow can connect to an unlimited number of mobile devices.

Adobe Shadow works by running an application on your desktop computer and using a Chrome browser extension to connect the desktop browser with your mobile devices. Your desktop computer and mobile devices have to be on the same network. The device synching worked fine on my home Wi-Fi network but I encountered problems with my wireless network at work due to corporate security settings that block certain ports.

Once the computer is paired with your mobile devices, the mobile displays are updated in near real-time as you browse on the desktop computer. This makes it easy to test things like media queries or any conditional logic that is using the user-agent string to tailor the layout for that device. This is done by sending a command to the mobile device that contains the URL of the page being viewed on the desktop.

Shadow also allows you to do remote inspection and editing of the HTML or CSS and immediately displays the results on all your mobile devices.

There is a video demonstration of Shadow on the Adobe Labs website.

Design Tools for iPad

Apple’s iPad has been out only a few weeks and already clever software developers are building design tools for this amazing new platform.

The Omni Group, makes of the popular OmniGraffle wireframing tool, have released OmniGraphSketcher for iPad. Priced at $14.99 in the iTunes App Store, OmniGraphSketcher allows you to create attractive charts, graphs, and other data visualizations on the iPad.

And Endloop, a Canadian iPhone/iPad development company, has released iMockups, a wireframing and diagramming tool for the iPad. Available on iTunes for $9.99, the app allows designers to create Balsamiq-like wireframes using their fingers.

I haven’t used iMockups but Endloop says in its blog that upcoming features include snap-to grid lines, a border and background color picker for UI controls, improved customization of UI controls, additional UI controls, more icons, and the ability to export to email, XML, or PDF. iMockups gets a 3-and-half-star rating from users in the iTunes store and the few reviews there comment about the app not being 100% ready yet.

It will be interesting to see how OmniGraphSketcher, iMockups, and other diagramming apps for the iPad add to the collaborative design process. For now I’m still keeping my sketchbook handy, but this could be the first wave of exciting new additions to the interaction design toolbox.

[youtube=http://www.youtube.com/watch?v=LOyIVqJcGfc]

iPad Misses on Several Key Points

The world got its first look at the long awaited iPad from Apple this week. And after digging into it bit I think I can wait a little longer to actually get one, though, as Apple has missed some key functionality.

iPad Home Screen

A few of the key features Apple missed are:

No camera: Video chat is impossible without a built in iSight camera. With the hardware as large as it is there is no reason not to have a camera, and one better than the 2.5 megapixel on the iPhone.

No multitasking: There’s no reason a more powerful processor couldn’t have been included so that Mac OS X could be supported. And that’s another miss in itself.

No Mac OS X: Limiting the iPad to the iPhone OS removes a lot of key functionality for mobile users. Unless someone is planning to use Google Docs and other cloud-based apps there is a lot you can’t do with Apple’s “magical” new machine. Business travelers and many other users will find themselves having to carry an iPad and laptop.

Battery not removable: The 10-hour life of the battery is a big improvement over iPhone, but for the cost of the iPad it should come with a removable battery so a heavy user could charge it and swap in a backup.

Lack of clarity on GPS: It’s not clear if the iPad has a dedicated GPS chip or if that will be available on all models. The tech specs indicate Assisted GPS will be used, but not a dedicated GPS chip like one would find on a Garmin. It’s hard to believe Apple wouldn’t match the quality of location-based services available to the 3GS so I suspect this is more of a marketing or semantic problem than a technical limitation of the iPad.

While the iPad is a big advance in multitouch technology and will provide a great mobile web surfing experience, it does not offer enough functionality to replace the laptop, which is what many people were expecting. This is likely a business decision by Apple to not cannibalize the market for their Macbooks. The iPad may have strong appeal to BlackBerry users who want some of the iPhone experience without having to give up their Berry. Only time will tell if Apple made the right calls in limiting what iPad can do.