Designer Antonio De Rosa has really outdone himself this time, with an edge-to-edge capacitive screen on a super-thin all-glass body, surrounded by a lightweight polycarbonate band where the antenna would be on the current iPhone 4S. Since we’re operating in the world of make-believe anyway, De Rosa thew in a 10 megapixel rear shooter and an A6 processor, which, though not yet real, should eventually pack quite the processing punch. The SJ, in case you were wondering, does indeed stand for “Steve Jobs.”

I think this tops any concept designs I’ve seen thus far, even if it is a tad far-fetched (what kind of battery life could a device that thin possibly have?). What do you think of this fictional beauty?

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

• 2012: Data, spectrum and the race to LTE
• Will cloud computing push the BRIC market to the front?
• Mobile Q2: Smartphone growth surges; iPad’s rule continues

Apple Stores draw crowds

Around the world, Apple Retail storefronts attracted many mourners and countless memorials in the form of flowers, scrawled messages and Post-it Notes. The little squares of paper quickly covered the windows at the Stockton Apple Store in San Francisco. In Boston, at the Apple Store on Boylston Street, fans and admirers gathered and left flowers and photos outside the storefront. According to the Boston Globe, one mourner, Brad Lackey, despite having never owned a single Apple product, called Jobs “[his] generation’s Edison.”

The Apple Store in Ginza, Tokyo, became a makeshift memorial when the news hit the nearby Ceatec conference, which is Japan’s largest consumer electronics show. Fans left flowers outside the store and organized a candlelight vigil there for after dark. The Fifth Avenue store in New York City was nearly covered in fliers featuring the image of Jobs with messages inscribed upon them by mourners. Apple Stores in Brazil, Australia and many other countries around the world were host to similar tributes.

Artists, designers and developers remember

Macs have always been tools of inspiration, so it’s no surprise that the creative community has already paid a lot of tribute to Jobs. Comic artist Randall Munroe at xkcd shared this fitting memorial:

R. Stevens, the creator of Diesel Sweeties, also offered a simple but sweet visual memento:

Mac developers Panic talked about how Jobs has given direction to their lives in a splash page on their site, which I think sums up the feelings of most of us who work in the shadow of Apple. This, in particular strikes a chord:

Apple went from a marginal novelty to rewriting the rules of entire industries, in the blink of an i.

And as Apple grew, we grew.

And as Apple inspired, we were inspired.

Dylan Roscover, an L.A.-based graphic designer, created this beautiful image that fittingly uses font to tell a story about a man who obsessed over exactly those kinds of details.

Last but not least, there’s an image that’s been making the rounds almost as long as the news of Jobs’ death itself. Created by Jonathan Mak Long, a 19-year-old Hong Kong resident and designer, it seems to be acting as a touchstone for what many are feeling. So we’ll leave you with Long’s stunning, stark tribute as we get back to the business of watching and wondering as Apple changes the world.

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

• Mobile Q3: the fight for OS domination continues
• Mobile Q2: Smartphone growth surges; iPad’s rule continues
• Why iPad 2 Will Lead Consumers Into the Post-PC Era

The device that became an industry

The iPhone (and now the iPad) are unique among similar devices in that only they have spawned sprawling industries dedicated solely to their support and supplementation. Sure, people make accessories and software for other smartphones and tablets, but they don’t make them in such volume specifically for what essentially amounts to a single new annual device from a single manufacturer each year.

According to one count, the iPhone has 71,890 active developers, and the iPad has 51,677. That’s an industry of more than 120,000 content producers targeting a platform that sustains itself on just one new product a year from one company, and I’m not even including the various accessory makers that also cater to Apple devices. Payout from Apple to developers to date is $2.5 billion, which is higher than the GDP of some small developing countries.

Talent flocks to and begets greatness

When Jobs took a medical leave in January of this year, still retaining the title of CEO, I wrote about how the company has a deep executive bench with people who are all individual industry leaders in their own right. Erica wrote yesterday about Tim Cook, a figure who has guided Apple through Jobs’ absence in the past, even amid some of the scariest economic turmoil we’ve faced, and still managed to lead the company to multiple record quarters. Michael Grothaus at TUAW has an excellent first-hand account of Tim Cook that says more for his ability to take over as CEO than I ever could.

But even leaving the executives aside, Apple has managed to build a team that includes some of the best and brightest engineers, product managers and marketers the world has ever seen. In a Wired story from 2008 about the invention of the iPhone, we get a glimpse behind the scenes at the dedication of individuals committed to creating a quality product that lives up to the company’s reputation. Apple is the most valuable brand on earth, and the company’s employees respect that as much as Jobs does, and are no less excellent at what they do for his departure.

Products designed for a lifetime

Apple’s products aren’t casually created based on whatever technology happens to be available at the time. You can tell that because the company doesn’t overreach and pack in features like 4G radios and NFC chips just because they happen to exist, the way many Android handsets do. Apple products represent a measured balance of tech and simplicity that caters to how the largest number of buyers are or will actually be using their devices on a daily basis.

Part of achieving that balance is knowing what you’ll need to include next. That’s part of the frustration of being an Apple device buyer, since sometimes we can see what should come next, too — like a camera for the iPod touch — and are disappointed when it doesn’t arrive as early as we expected it to. But Apple is smart about including these things when it needs to, rather than when tech enthusiasts think it should. It’s not a mistake when they arrive, and you can bet Apple engineers are aware of what tech is and will be available before you are; Apple devices are in this way designed with a roadmap for the duration of the life of the product.

Deviations from that roadmap are possible if market conditions or changing expectations call for it, but the existence of such a roadmap means that products coming out of Cupertino won’t disappoint in the near-to-mid future. For more detail about Apple’s process, a May 2007 article by the MIT Technology review illuminates the amazing depth in Apple’s hardware design guidelines, another thing which won’t disappear with Jobs out of the top seat.

Creating a culture, not a company

Steve Jobs won’t yet be leaving the company entirely, and even when he does, his influence won’t. Jobs hasn’t merely built a company during the past decades; he has infused the people he works closely with and those who work under them with a cultural ethos that strives for excellence. If Jobs was the only one at Apple who required perfection and consistent, high-level performance, you’d have a very frustrated guy in a black turtleneck and we’d all still be using Motorola RAZRs.

Apple’s stock prices will shudder at the news of Jobs departure, and countless tech pundits will wring their hands and cry doom, but in the end Apple shares will rally, we’ll get a new iPhone this fall that propels Apple to more record quarters, and we’ll get back to doing what we do best: watching in wonder as Apple continues to change the world.

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

• Millennials in the enterprise, part 1: strategies for supporting the new digital workforce
• Connected Consumer Q2: Digital music meets the cloud; e-book growth explodes
• Mobile Q2: Smartphone growth surges; iPad’s rule continues

The iPod nano wristband accessories Scott Wilson designed shortly after Apple introduced a new model of its smallest-screened iPod have gone from community-funded success to Apple Store shelves. The LunaTik and TikTok watchband kits go on sale in Apple Stores across North America this week.

Wilson, founder of Chicago-based design studio MINIMAL, and one of the driving forces behind the visual style of the redesigned Xbox and Microsoft Kinect, set out to create the LunaTik and TikTok as a project he would have complete control over. To avoid the influence of traditional investors, he turned to crowdsourced community fundraising site Kickstarter. We watched as the TikTok and LunaTik first broke Kickstarter funding records early on in its time on the site, and then later as it capped out at an unprecedented total of nearly $1 million raised through accumulated individual donations.

The wristbands were so well-designed that many early investors in the project actually bought iPod nanos only after securing either wristband as a reward for backing their production. I reviewed the TikTok, and indeed, no other similar accessory I’ve since come across comes close in terms of quality and design.

Wilson was distributing both the LunaTik and the TikTok via the official LunaTik.com website, where they will continue to be sold, but different retail channels have now come calling, including Apple itself. Apple initially wasn’t convinced buyers would be willing to pay for the more expensive $79.95 LunaTik. In fact, Wilson has sold twice as many of the more expensive model according to Co.Design. That’s 20,000 through his site, adding to the initial 21,120 orders made through Kickstarter. Those numbers have convinced Apple that buyers most definitely are interested.

The success of both accessories has also spawned new models recently, including a white version of the TikTok and both a red and black version of the LunaTik. Apple will be selling the LunaTik in silver (the original color) and red for $79.95, and the TikTok in white and black for $39.95.

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

• Connected Consumer Q1: The Over-the-Top vs. Pay TV Battle Heats Up
• Smart Grid Apps: Six Trends That Will Shape Grid Evolution
• Infrastructure Q1: IaaS Comes Down to Earth; Big Data Takes Flight

Choosing the Right Colors

ColorBlender ($1.99). When choosing a color palette for your App, you either have an eye for it or you don’t. For those of us who don’t have it, ColorBlender can help out.  There have been a lot of studies on how humans are affected by different colors, and there are certainly combinations of colors that are hard on the eyes.  The main function of ColorBlender is to create a palette with six harmonious colors that will make looking at your app pleasant, or at least tolerable, for most people.  The only thing this app is missing is a good color picker, but that’s quickly remedied using OS X’s included DigitalColor Meter utility. After choosing a base color in the DigitalColor Meter, ColorBender will help you select a collection of harmonious colors to use throughout your app.

AppControls ($19.99). Once you have a solid color palette picked out, the next step will be to use that palette when creating various controls throughout your app. AppControls will help you create the artifacts necessary to create some great looking controls. You can copy the values of the colors generated in ColorBender, and paste them into the Color Picker of AppControls. Even if you don’t like the limit of six colors that ColorBender generates, you can at least use it to select the two colors that will be used to create a smooth gradient on your controls. All you need to do is the following:

1. Use the DigitalColor Meter to select the color you want to use as your primary color, and hit the Shift+Cmd+H key combination to hold the colors on the screen.
2. Type the color codes into ColorBlender to set your six harmonious colors.
3. Copy the value of the color you want to use directly from ColorBlender’s screen and paste it into AppControls color picker.

Preparing for App Store Submission

LittleIpsum (Free). How many time have you tried to size up how a data entry or large text display field will look by pounding random keys on the keyboard? A tool named LittleIpsum provides a better way. It generates Latin text in varying lengths including words, sentences and paragraphs. The text is then copied to your clipboard, and ready to paste into your app.

Status Barred ($0.99). Occasionally, you may want to pull together a collection of screen shots for the current state of the application, either to update documentation when designing a change in the way the application works or simply to craft your marketing material.  Status Barred is a simple little app that will crop off the carrier status bar from the images you take so that the focus in on your app, and not your carrier.

Icons ($2.99). The final Mac App in this collection of design apps will help in the creation of icons, both for and within the app.  It can also be used to help with the design of any support or marketing web sites that will be created.  Icons could not be easier to use. Start with a 512×512 square image, drop it into the tool, and generate your icons.  You can even round the edges and add that cool glass look.

While these tools individually are no match for Adobe’s creative suite of tools, for the price, they add up to a competitive package. And like the start of a thousand bee stings, it only makes sense that this tightly focused new breed of apps help others create more great task-specific software as the App Store model continues to propagate.

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

• Mobile Q1: All Eyes on Tablets, T-Mobile and AT&T
• A Media Tablet Forecast, 2011 – 2015
• Connected Consumer Q1: The Over-the-Top vs. Pay TV Battle Heats Up

Looking at images of the removed iPad 2 case designs, it’s obvious that manufacturers were indeed in possession of accurate information regarding that device’s design. The speaker and camera both appear right about where they do in the final design, albeit with minor modifications (which may have been tweaked by Apple prior to release). At the time, one of the companies behind the iPad 2 cases claimed to have firsthand info about the upcoming hardware design from Hon Hai Precision Industry (Foxconn in the U.S.), one of Apple’s key manufacturing partners.

If the new case designs are accurate, the iPhone 5 will bear the same physical dimensions as its predecessor. The iPhone 3G and 3GS shared the same external case design, so it’s something that Apple has been historically known to do. Recent rumors have also suggested the design will be similar, albeit with a larger screen made possible by extending it even closer to the iPhone’s edge. That’s still a possibility, since the new case designs leave the front of the iPhone uncovered.

While it’s always best to proceed with caution when it comes to these early rumors, case designs tend to be a fairly reliable source when it comes to the physical design of upcoming products, and this is in keeping with the idea that the iPhone 5 will likely be an evolutionary, rather than a revolutionary update.

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

Take a trip with me through the last decade of milestone product releases from our favourite consumer electronics — sorry, our favourite “mobile computing” — company. It’s hard to believe how far we’ve come in such a short time.

A few things to note: I haven’t included every product release on the timeline, just those I felt stood out. I’ve included a little trivia here and there, but this is by no means supposed to be the most fact-filled timeline of Apple events.

Did I miss something obvious that really, definitely, absolutely should be included? Share your suggestions in the comments below and who knows — maybe I’ll add them in later.

Happy New Year everyone, and Happy New Decade — I can’t wait to see what Apple has in store for us next!

Music used in video courtesy of ccMixter user Zapac, licensed under Creative Commons Attribution (3.0).

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?

When an app is launched on an iPad, it becomes the iPad, it encompasses the entire device. In the best case, the iPad then fades into the background, and the experience becomes focused entirely on the application. When an app fades into the background as well, the iPad becomes all about content.

River of News gives me a pop-up menu to choose a folder from Google Reader, and that’s all I see of the app. The rest of the experience is all about scrolling through and reading the latest feeds. No overbearing animation, no surprising interfaces: it’s just me and the morning news. River of News’ focus on text reminds me a lot of Instapaper, another favorite iPad app, which also foregrounds content, leaving navigation and menu items couched in pop-ups.

An alternative application design philosophy looks at what the iPad can do and uses its capabilities to push the functionality of applications further. My previous favorite RSS client, Reeder, fell into this category. Reeder re-imagines how to use multi-touch to navigate through stacks of unread feeds. Pinch out to open a stack of feeds, pinch in to close it. More recently, Twitter released their official iPad application, and like Reeder, it pushes the boundaries of what we expect an iPad app to be.

Twitter for iPad uses panels that can slide on top of each other to show links, replies, and information about the user. The panels can be successive, meaning that you can follow links endlessly, and wind up with a long history of panels behind what you can see on-screen. The interface is obviously very well thought out, and well planned. It’s a very different design philosophy from iPad applications like River of News because it focuses on functionality, not simplicity. When I started using the app, I really didn’t like it. However, after committing to using it for a week or so, and discovering how to navigate it, I find it growing on me quite a bit.

With Twitter for iPad, the gestures are swiping left and right, and tapping. When using River of News, the gestures are more limited. You swipe up to scroll, and articles are automatically loaded at the bottom and marked as read at the top. You can swipe left and right to load other folders, but personally I’ve never found a need for it.

You can also tap to select a folder of feeds if you wish, but I normally just wait a second or two for it to automatically load my unread feeds. The level of activity is different with River of News and Instapaper than it is with Reeder and Twitter for iPad. Not necessarily better or worse, though.

When I began researching this article, I wanted to show why taking the simplistic approach was better, and how trying to make an iPad app too functional would cause confusion. The truth, though, is that the app design philosophy that’s best will depend on usage preferences and the type of app you’re making. It also means there’s room for more than one app on each iPad designed to accomplish the same thing.

How do you feel about application functionality versus simplicity on the iPad? Should all applications fade into the background, or should they give you the choice to be what you want them to be? I’d love to hear your thoughts in the comments!

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

• How to Market Your iPhone App: A Developer’s Guide
• Report: The In-App Advertising Landscape
• HTML5′s a Game-Changer for Web Apps

The First Crop

The ClamCase was one of the first out of the gate with the concept, but they haven’t been able to make the leap to actually producing units yet. ClamCase’s creators have pegged Fall 2010 as the timeframe for actually shipping the hard-shell keyboard case, but no concrete details have emerged.

Two other more recent competitors look poised to beat them out the gate in terms of putting devices into the hands of actual consumers. The first is the Sena Keyboard Folio, a high-end leather option retailing for $149.99 ($129.99 if you pre-order), and the second is the very similar Kensington KeyFolio, which trades real leather for faux, and retails for much less at $99.99. Neither has actually come to market, but both are available for pre-order.

Why It’s Needed

I’m excited about the arrival of the keyboard case, as it means I’ll soon be able to actually use my iPad to do work on the train comfortably, without having to figure out some way to affix the iPad itself to the seat in front of me, since my stand and keyboard together won’t fit on the meal tray. That’s an incredibly specific situation, it’s true, but it’s representative of the more general problem of using the iPad on the go.

How The Keyboard Case is a Game Changer

If keyboard cases can solve this problem, it’ll have huge ramifications not only for the iPad itself, but for all tablet computing. Apple, with its staunch dedication to ever-simpler interfaces and less buttons, will never admit that a tablet with an integrated keyboard could be successful, but its competitors could take advantage if they can find a way to make such a design work. It’s a better idea than just throwing more and more 7-inch devices at the problem.

Apple would do best to go the route of scrapping the keyboard dock altogether (extremely limited, and terrible for use while in motion), and probably the official iPad case itself, too (I bought one at launch and literally haven’t touched it since I removed it after the first day). In the place of both accessories, it should offer a case that integrates a Bluetooth Mac keyboard, slightly redesigned to include the special function keys currently found on the keyboard dock.

Building the Accessory Bridge

The keyboard case may be treading softly as it comes to market, but make no mistake, this one’s got legs. At the very least, it’ll help bridge the gap between the notebook and the tablet for users who are having a hard time adjusting, which will significantly benefit the bottom line of Apple and other manufacturers getting into the market.

What do you think? Will the keyboard case actually make a big difference in the tablet game?

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

Why Apple Hasn’t Sewn Up the Tablet Market — Yet
Transient Apps: The Consumer Influence on Enterprise Mobility, Part 2
Rogue Devices: The Consumer Influence on Enterprise Mobility, Part 1

It’s Got The Touch

First and foremost, the new version has a “multitouch” screen. Actually, it’s only capable of discerning two finger gestures (and only for rotating the screen). The introduction of a touchscreen on such a small device is certainly one way to reduce the need for physical controls (ironic that this was introduced immediately after the new iPod shuffle regained its tactile buttons).

The touchscreen also adds a “wow” factor for those who wish they owned an iPod touch or an iPhone. The icons even jiggle when you move them around! But don’t let that fool you. The iPod nano isn’t running iOS, simply updated software designed to resemble iOS. The result? You’re not going to be using apps with it anytime soon.

Design Details

If you were to take a casual, superficial look at the iPod nano, you might think it’s a bit awkward.

The form factor resembles a larger iPod shuffle and the straight edges at the top and bottom seem a little odd for Apple’s standards. One would think the form factor would resemble a smaller iPhone and be curved at the corners like the plastic boxes in which they ship.

The display itself doesn’t sit flat against the body of the device, likely a result of a decision to make the device as small as possible. In my opinion, the design is a bit contrived. Considering the latest iPod shuffle is just a smaller version of the second-generation model, and this new nano looks like a larger version of it with a multi-touch screen, I wonder what Jonny Ive’s team is actually doing.

Technical Specs

When you think about iPod nanos, you might think about how they could play video (2007 and on) or how they had a built-in camera and record video (2009). You might even think about increasingly bigger and better displays. Sure it wasn’t all that great, but you might even think back to when iPod nanos included a speaker (2009). Well, times are changing.

The introduction of a touch screen has driven the component costs of the iPod nano higher than previous models. As a result, Apple trimmed some features that were “not often used” to maintain an amicable price point for consumers, and the company’s profit margin.

Were these features infrequently used? It is true if you own an iPhone, you already have a camera at your disposal. But a nano was an inexpensive and convenient alternative for those who didn’t. And while few might have actually watched video on the tiny screen, you could still plug it into a TV.

The real point I’m trying to make is that while Apple seems intent on pushing the iTunes Store and all it offers, its latest device plays a lot less of that content than the previous generation. That doesn’t seem terribly innovative to me.

Granted, the nano has a specific audience. But for me, it’s not a simple matter of “well if you want those features, go buy an iPod touch or an iPhone.” Instead, it’s about Apple allowing form to trump function. There’s another glaring example I can cite from recent memory.

Have you had a chance to check out the new iPod nano? What do you think? Will you upgrade or sell your previous generation for an ungodly amount on eBay? Share your thoughts in the comments below!

Related content from GigaOM Pro (sub req’d):
How to Market Your iPhone App: A Developer’s Guide

Take a look at part of the home screen on my new iPhone 4. The icons look super sharp but Apple’s own Remote app still needs an update to take advantage of the higher-resolution display. In fact, it just looks plain gross compared to the rest of the icons.

Here’s a few more examples, this time of Apple’s own iDisk app. This particular app, which still lacks a native iPad version), really looks rough around the edges. (Click on these images to view a full size version.)

Consider the official new Apple Store app, which is being highly profiled and featured by the staff at local Apple Stores. The tab bar icons need a definite refresh. (Click on the image to view a full size version.)

Native iPhone UI elements, like segmented controls, text labels and navigation buttons are all automatically updated, however some of them still cause awkward interface goofs, like when receiving a message on Facebook.

The time it’ll take for developers to update their assets is indeterminate. Depending on how their interface assets were originally created (vector vs. rasterized files) could mean some developers have to re-design their interfaces from scratch.

Five months ago, developers were asked to update their apps to support a larger interface on the iPad. Though the iPad can automatically scale an iPhone app to twice its size, it’s generally agreed that such scaling does not look attractive at all.

If developers have been holding off delivering native iPad versions of their apps, now is a great time to polish their apps for the iPhone 4 because the increased resolution will automatically translate into a higher resolution on the iPad when iOS 4 ships for the iPad this fall. At least, until the next iPad revision sees a Retina Display-like update.

Has Apple put too much work on developers to keep their apps updated to take advantage of the latest and greatest? Apple could be feeling a bit of this weight itself, as some of its own apps, including MobileMe iDisk, Remote, Texas Hold’em, Keynote Remote and MobileMe Gallery are still not ready to shine on the iPhone 4. In fact, some of the more high-profile apps aren’t even designed to take advantage of the full canvas of the iPad, like the iDisk and Apple Store apps. Why not?

Do you develop apps? What do you think about how apps look on the Retina Display? Anxious for developers to update their apps to really look sharp? Tell us what you think in the comments below.

A little over a month ago, Apple introduced a new beta version of webmail for MobileMe. The new version supported features like widescreen or compact views, mail rules, single-click archiving, faster performance and better security and more. Now that the new webmail is out of beta, Apple has unwrapped a few additional features.

Support for External Emails

You’ve always been able to read Mail from external accounts but a new feature (since the beta) will allow you to reply to emails and make it appear to be coming from that account.

The way this process works is a little strange though. Basically, you setup your email account, for example, a Gmail account, to forward its messages to MobileMe. Then you setup MobileMe with a “Send From” account. Your emails will then be sent through the SMTP server of your original email account (the Gmail account in this example) and to your receiver will appear to be coming from your original account. In practice, the setup works pretty well, though it’s still not true external IMAP support, which would be nice. On the plus side, you can add as many of these external accounts as you wish, a welcome upgrade from the previous version.

Improved Junk Mail Filtering

Another new feature since the beta is automatic support for tagging emails as Junk, similar to how Junk Mail filtering works in Mail on OS X. If it messes up and there’s an email you want that’s not junk, just click “Not Junk.”

New Navigation

Pulling a design cue from OS X, the navigation bar has disappeared from MobileMe and been replaced with something akin to the application switcher on the Mac. Clicking the Cloud icon (or using the keyboard shortcut shift + escape) will bring up the Application Switcher, allowing you to easily move to another MobileMe app.

Beyond just the Application Switcher, the refreshed blue navigation bar has also been extended to the other areas of MobileMe, bringing updated icons along with it. Most of the other MobileMe cloud apps function the same, but the Find My iPhone app also got a makeover (coinciding with the Find My iPhone native app).

What do you think of the new MobileMe changes? Do you prefer to use MobileMe through its web interface or just through your Mac or iOS device? Tell us what you think about the new webmail or how you think Apple could make it better!

For those interested in cloud computing or data centers, check out our Structure conference in June.

DigitalColor Meter is a tool that lets you sample colors on your screen to get their color values that you can then copy and paste for use elsewhere.

In this TechUniversity DigitalColor Meter screencast (subscription required), I’ll show you the in’s and out’s of the app and how you can use it in your design workflow.

View full DigitalColor Meter screencast on TechUniversity (subscription required)

Screencast Sample

After the battery gave up the ghost, the Mini continued to work great, as long as it was plugged in, for a couple more years. After the Mini refused to power on when plugged in, (or so I thought) I put it up, and generally forgot about it until my two year old son somehow found it and decided that he needed it.  Since it was busted anyway, I let him have it, and that’s when the real abuse began.

My son dropped it on the concrete, used it as a hammer, and may have even taken a dive in the tub with it once or twice.  I don’t think I’ve ever had a device as throughly beaten as this old Mini. For months, what was my companion became my son’s, inside and out. So, imagine my surprise when, after months of neglect and mistreatment, the Mini powered on and filled my daughter’s room with music once more. My old iPod is not without its scars, the click wheel doesn’t work, and the black and white display is a little patchy, but it still accepts the buttons on the iHome.

Have you had a similar, jaw dropping, “it still works” moment with your Apple gear?  I’d love to hear about it, sound off in the comments!

Image courtesy of Flickr user mfajardo

The iPhone OS is pitched as the entire Internet in your pocket…minus Flash. This works most of the time, but what if you just want to design a site or form that looks like a native iPhone App?

This is where iWebKit comes in. iWebKit is a free framework package for creating websites and applications that are optimized for the iPod Touch, iPhone & iPad. The bulk of the framework is CSS3 which can work its magic to makeover any dreadful site and make it look fresh.

I will be covering the web-form aspect of creating an optimized site, but iWebKit has many deeper features that can communicate directly with the OS. Its documentation is excellent, so dig around or check out the demo site on your iPhone to get inspiration.

When designing for the iPhone OS, you should use the iPhone simulator available in the SDK to get an idea of where your design is heading. You can also use Safari to get a pretty close representation, but nothing beats using a real physical device. It’s amazing how cool it feels and you really do get the impression it’s a native application.

Getting Started

Here is what the form looks like on the iPhone before we optimize it.

It’s pretty dull looking, to say the least. Below is the original HTML code being used. We’re going to get Apple-blood running through it and give it a makeover.

<html><head><title>Test Form</title></head>
<body>
  <form method="post">
    Name: <input type="text" size="12" maxlength="12" name="name">
    Password:<input type="password" size="12" maxlength="36" name="passw"><br />
    Gender:<br />
    Male:<input type="radio" value="Male" name="gender"><br />
    Female:<input type="radio" value="Female" name="gender"><br />
    Favorite Food:<br />
    Steak:<input type="checkbox" value="Steak" name="food[]"><br />
    Pizza:<input type="checkbox" value="Pizza" name="food[]"><br />
    Chicken:<input type="checkbox" value="Chicken" name="food[]"><br />
    <textarea rows="5" cols="20" name="quote" wrap="physical">Enter your favorite quote!

    Select a Level of Education:<br />
    <select name="education">
      <option value="Jr.High">Jr.High</option>
      <option value="HighSchool">HighSchool</option>
      <option value="College">College</option>
    </select><br />
    <input type="submit" name="" value="Submit" />
  </form>
</body>
</html>

This code needs to be in an HTML file in the same folder as the iWebKit framework. I called it index.html.

The first step is to add these lines between the <head> tags.

<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type" />
<meta content="minimum-scale=1.0, width=device-width, maximum-scale=0.6667, user-scalable=no" name="viewport" />
<link href="css/style.css" type="text/css" rel="stylesheet" />
<script src="javascript/functions.js" type="text/javascript"></script>
<link rel="apple-touch-icon" href="homescreen.png"/>
<link href="startup.png" rel="apple-touch-startup-image" />

These lines tell the iPhone browser that this page is designed for it. It also references the CSS, JavaScript and images for the iPhone Home Screen and a startup image.

To create the top title bar we need to enter the following code immediately after the <body> tag.

<div id="topbar">
  <div id="title">Test Form</div>
</div>

If you load up the page in your iPhone simulator browser you will see this bar at the top.

Now we need to start our main content with the following <div> tag.

<div id="content">

All the form fields will be inside of this <div> and we won’t close it till the end of the form. The first form fields we want are the Name and Password fields.

Replace the original code:

Name:<input type="text" size="12" maxlength="12" name="name"><br />
Password:<input type="password" size="12" maxlength="36" name="passw"><br />

With this:

<ul class="pageitem">
  <li class="bigfield"><input placeholder="Name" name="name" type="text" /></li>
  <li class="bigfield"><input placeholder="Password" name="passw" type="password" /></li>
</ul>

Our Name and Password fields have now been transformed.

The <ul> container represents the white box while the <li> tag is to signify separate sections inside of the white box. You could also put each of these fields in their own <ul> containers and they would look like two separate boxes. To save screen space, I group similar items together. Now lets replace those old fashioned radio buttons from the Gender question.

Replace this:

Gender:<br />
Male:<input type="radio" value="Male" name="gender"><br />
Female:<input type="radio" value="Female" name="gender"><br />

With this:

<span class="graytitle">Gender</span>
<ul class="pageitem">
  <li class="radiobutton">
    <span class="name">Male</span>
    <input name="gender" type="radio" value="M" />
  </li>
  <li class="radiobutton">
    <span class="name">Female</span>
    <input name="gender" type="radio" value="F" />
  </li>
</ul>

The radio buttons are changed for the better.

Next up are the checkboxes under the Favorite Food question.

Replace this:

Favorite Food:<br />
Steak:<input type="checkbox" value="Steak" name="food[]"><br />
Pizza:<input type="checkbox" value="Pizza" name="food[]"><br />
Chicken:<input type="checkbox" value="Chicken" name="food[]"><br />

With this:

<span class="graytitle">Favorite Foods</span>
<ul class="pageitem">
  <li class="checkbox">
    <span class="name">Steak</span>
    <input name="steak" type="checkbox" />
  </li>
  <li class="checkbox">
    <span class="name">Pizza</span>
    <input name="pizza" type="checkbox" />
  </li>
  <li class="checkbox">
    <span class="name">Chicken</span>
    <input name="chicken" type="checkbox" />
  </li>
</ul>

Now instead of check boxes, we get those pretty on/off sliders we’re accustomed to inside the iPhone OS.

The textbox is pretty simple since it just creates a nice white box around the textbox.

Replace:

<textarea rows="5" cols="20" name="quote" wrap="physical">Enter your favorite quote!</textarea><br />

With this:

<ul class="pageitem">
  <li class="textbox">
    <textarea name="quote" rows="5">Enter your favorite quote!</textarea>
  </li>
</ul>

Lets move on to the dropdown menus. Dropdowns always use the iPhone’s built-in method and help create the feeling of a native app.

Replace this:

Select a Level of Education:<br />
<select name="education">
  <option value="Jr.High">Jr.High</option>
  <option value="HighSchool">HighSchool</option>
  <option value="College">College</option>
</select><br />

With this:

<span class="graytitle">Level of Education</span>
<ul class="pageitem">
  <li class="select">
    <select name="education">
      <option value="Jr.High">Jr.High</option>
      <option value="HighSchool">HighSchool</option>
      <option value="College">College</option>
    </select>
    <span class="arrow"></span>
  </li>
</ul>

Notice the arrow span class adds the down arrow to the right of the selection box.

As far as the form goes, all that’s left is the Submit button and to close the <div> tag.

Replace this:

<input name="Submit" type="submit" value="Submit" />

With this:

<ul class="pageitem">
  <li class="button">
    <input name="Submit" type="submit" value="Submit" />
  </li>
</ul>

Now close the content <div> tag with the following:

</div>

Finally, we may want to put a footer at the bottom of our page. It’s nice to also support the iWebKit folks.

<div id="footer">
  <a href="http://iwebkit.net">Powered by iWebKit</a>
</div>

That’s it for the HTML portion. Two nice little touches you can do are for when someone adds the page to their home screen. When browsing the page, click the “+” button and select the Add to Home Screen option. You will see an icon that, by default, is a screenshot of the page. You can customize this by making your own 58×58 pixel image and referring to it in the <head> section. Mine is named homescreen.png and I’ve already included the code at the beginning of the article.

Now when this page is added to the Home Screen, it will look and feel like a native app. Why not have a startup screen displayed while the page loads? iWebKit also has this feature and you simply need a 320×460 pixel image that again, is referenced in the <head> section. I have called mine startup.png.

That’s it, we’re done! iWebKit has many other features that you should check out. You may get some inspiration for an app or at least look good to your boss when you pretty up that old form that’s been around for years. All the files used in this article are also attached for your viewing pleasure along with a short video walkthrough of this tutorial.

Project Files: iwebkit-tutorial-files.zip (94 KB, ZIP)

Holiday spending has seen sales of Apple’s Magic Mouse soar. According to a report by NPD and covered today by AppleInsider, last month saw a twofold increase in Apple’s share of domestic mice sales. By the end of November, Apple had captured 10 percent of the market.

NPD analyst Stephen Baker told AppleInsider:

Sales in November were through the roof. The Magic Mouse had the best month for a mouse product from Apple that we’ve ever seen.

It’s the first time Apple’s share of the domestic mouse market has ever reached double digits, and even more impressive considering the data was compiled from standalone sales. Units sold with new iMacs were not counted.

While that’s fantastic news for Apple, I find myself wondering whether those new Magic Mouse owners aren’t going to be feeling somewhat disappointed because, despite its name, the Magic Mouse is anything but magical. For a company that gets so much of its user experience spot-on, it does keep missing the target with its pointing devices.

Andy Ihnatko said it best:

I can’t think of a single good Apple mouse released this millennium. Ideologically, they’ve all been covered with spray-glitter and rainbow stickers.

When I got my Magic Mouse I admired its diminutive form factor and minimalist lines but it was clearly not an ergonomic design. That super slimline, ground-hugging shape took some getting used to. But aesthetic and ergonomic matters aside, I think the thorniest issue isn’t with the hardware at all. The problem, as I see it, is one of user perception.

You see, users accustomed to the touchy-goodness of an iPhone or MacBook trackpad lament the lack of similar functionality in their supposedly ‘magic’ mouse. The major criticism is usually expressed in the form of common questions, like, Why is there no pinch to zoom functionality? Why do we have to click, when we could tap? Why aren’t more swipe-gestures supported?

“It’s just a software fix,” reviewers on popular Apple tech sites have concluded, “Apple will likely add that functionality later in a software update.”

Well, I don’t think so. In fact, I think Apple will intentionally avoid adding further touch functionality to this mouse, and I think I know why.

Be Careful What You Wish For

In the relatively short time since the Magic Mouse was released in late October, several third-party applications have appeared, both free and paid, that (ahem) ‘tap’ into the Magic Mouse software and foist upon the device all that pinching, swiping, multi-touch functionality people think they want. Well, I also thought I wanted those things…until I got them.

Remember how, with the Mighty Mouse, you had to handle it with care because those side-buttons could be way too sensitive? They were so sensitive, in fact, many people disabled those buttons entirely because they proved such a nuisance. Turns out, having multifunctional touch-sensitive controls all across the surface of the Magic Mouse turns the thing into a far greater nuisance than its “mighty” predecessor ever was.

I swiftly discovered that controls I wanted to trigger (say, a three-finger-tap) often wouldn’t register. I’d spend an inordinate amount of time obsessive-compulsively tapping the mouse with minimal success. Pinching and zooming was literally painful, transforming my hand into a deformed claw of knotted knuckles and cramp. Yet, for all my efforts, it still never zoomed in a controlled, predictable manner.

Worse still, functions I didn’t intentionally invoke would trigger while I was doing something else entirely. It got to the point where simply moving the pointer across the screen — an action so natural and normal I normally give it no conscious thought — was now an event demanding deliberate care and attention. I tried two of the most popular apps and got the same results each time.

In short , it’s not a software problem, but rather, a limitation imposed by the very form factor of the mouse. As long as Apple wants its flagship pointing device to be small, svelte and sexy, it’s just not going to be the right shape and size for full-fledged multi-touch controls.

Software like MagicPrefs introduces hugely varied additional functionality

Apple, I’m sure, did a lot of R&D to determine what were the most appropriate default touch controls for the Magic Mouse. Therefore, a feature’s absence is a deliberate choice. It makes perfect sense. One of the most celebrated aspects of Apple’s user-experience is its consistency; across all Macs the user experience is predictable and dependable. There are rarely unexpected (or unwelcome) surprises. Much of the time, that’s made possible by Apple’s minimalist, ‘less-is-more’ approach to interface design.

That is why so many people disliked the Mighty Mouse. In trying to do so much it was just too unpredictable and ruined the user experience. And that is why the Magic Mouse is so limited. It’s better this way.

I just wonder if all those new Magic Mouse owners will agree?

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

• Report: NoSQL Databases – Providing Extreme Scale and Flexibility