Tag Archives: Apple

Bracing for the HD web

Joshua Johnson has an excellent new post over on Design Shack called Ready or Not, Here Comes HD Web Design, discussing adapting your web design techniques for the imminent HD revolution, being led by the new iPad.

I’ve been adapting my designs for the Retina Display on the iPhone 4/4S for a while now, but it’s easy enough to build a responsive web design that just shrinks down large desktop website images to half their size for display on a tiny iPhone screen. Making an essentially desktop-sized display support high-resolution graphics is a whole other story, and even though I knew (or presumed, along with the rest of the world) that a Retina iPad was coming, I think some small part of me was still in denial about what it would mean for web design.

Well, that future is here. Sure, most of the world is not browsing the web on a Retina Display iPad. But if you think the HD revolution ends there, think again. It’s just getting started. I’m about to enter the implementation phase on a handful of big web projects over the next month. Accommodating the new iPad’s display is going to be one of my top tasks.

I’ve been thinking for the past month or so that I was going to need to address this, and I’ve made the decision that, moving forward, on any site that has responsive web design as a component (which will probably be all sites I do), full-size “Retina Display” graphics are essential.

I posted a comment on Joshua Johnson’s post, where I noted that “Retina” (or, to avoid using Apple’s marketing term, “HD web”) graphics don’t really need to be 326 pixels per inch (ppi), the iPhone 4/4S’s resolution, or even 264 ppi, the new iPad’s resolution.

The standard practice with web images has always been to render them at 72 ppi, but the fact is, browsers don’t care what resolution an image is set to. A pixel is a pixel, and web images get displayed at the screen’s native resolution (unless, of course, you resize the image dynamically in the browser using HTML dimension attributes or CSS). The Retina Display approach Apple uses is to simply double the resolution (quadrupling the number of pixels). Web images by default get “pixel-doubled” in this scenario, displaying at the same relative size as they would if the iPad still had a low-res display, but appearing pixilated or blurry as a result.

You don’t need to render your images at 264 ppi for display on the new iPad. In fact, you can leave the resolution at 72 ppi, because the browser still doesn’t care. (Well, maybe it does; I haven’t actually had an opportunity to test it, but I strongly suspect the answer is no.) You just need to make the pixel dimensions of the image twice what they were before. In fact, even if you do change the resolution, you still need to double the dimensions. That’s the key.

After mulling all of this over for the past week, I’ve decided I’m going to have to get a new iPad (what a hardship, I know). I could technically do this work without it, but I think it’s important to be able to see what I’m producing, if for no other reason than to remind myself how important it is.

This is going to be an ongoing process, and because web design (or, more accurately, web design implementation — I usually work with designers who produce the initial UI in Illustrator or Photoshop) is only one part of my job, I can’t give it my undivided attention. But it’s something I am preparing now to immerse myself in as fully as possible. From now on, this is just how I do things. And with that in mind, there are some key points to consider:

1. Some images are more important to represent high-res than others. Logos, absolutely, 100%. Design elements that are on all pages (backgrounds, borders, navigation) come next. One-off photos are not as critical, but probably still are if they’re on the home page. But consider the next point as well.

2. Bandwidth is a concern. I’ve been somewhat dismissive of this up to now, as I’ve been focusing on high-res logos for the iPhone’s Retina Display — it can just take the regular web images and show them at half size to achieve high-res — but if you’re suddenly talking about downloading 4 or 5 high-res photos for a home page slideshow, it’s going to be a problem. Making users with standard resolution download unnecessarily large images is bad; making iPad users eat up their 4G data plan downloading your perfect-looking photos is bad too. Most of the attention paid to bandwidth in this discussion that I’ve seen so far has focused on the former, but both need to be addressed.

3. CSS and SVG. Joshua Johnson talks about this in his post. If we can render elements using CSS instead of images (things like curved corners, gradients, shadows, etc.), we should do that. More complex vector graphics can be displayed in SVG. All modern browsers now (finally) support SVG. Up to now it’s been a cool but essentially useless technology, due to lack of widespread support. But IE8 and earlier don’t support SVG, so if those browsers matter (and unfortunately they probably still do), you need a backup plan.

It is an exciting time to be working in web design and development. More and more, the challenges center around adapting your techniques to take advantage of cool new features and capabilities, not accommodating the limitations of crap browsers. But they’re still challenges, and we’re just beginning to discover their depth, along with their solutions.

Update: Over at Daring Fireball, John Gruber just linked to Duncan Davidson’s post detailing an issue with WebKit (the rendering engine inside Safari) automatically scaling down images above a certain size, specifically over 2 megapixels. Looks like sending huge, high-res images to the new iPad might present even more challenges than the ones I’d been considering.

I still don’t have that new iPad, so we’ll see what happens when I get it. (Tomorrow?)

Update #2 (March 25, 2012): A few more days have passed, and more has been learned on this topic. Duncan Davidson has a follow-up post that further explores the issue and a tentative path forward.

P.S. I did get that new iPad, and Duncan’s demo of an 1800-pixel JPEG on the iPad’s Retina Display is truly impressive. But what I find really interesting about it is that the 1800-pixel version of the photo looks better than the 900-pixel version even on a regular computer display… because, as I’ve observed, WebKit downscales images better than Photoshop does.

What could Apple buy with $100 billion?

In less than an hour, Apple is holding a conference call with the press to announce plans for its vast stockpile of cash, currently approaching $100 billion. What could they do with all of that money?

The most likely (and boring) suggestion is that they’ll start paying dividends to their shareholders. Bolder predictions include buying one of the cellular carriers (can you imagine Apple owning AT&T?) or possibly even Google. (OK, I don’t think I’ve actually seen that one, but I think they could do it.) Or, if they were Dr. Evil, they could hold the entire world ransom.

But let’s have a little fun, shall we? Here are some other things they could buy with $100 billion:

  • A large supreme pizza for every person on earth
  • A new stadium or arena for every team in the NFL, MLB, NBA and NHL
  • The entire GDP of Morocco
  • 500,000,000 iPod touches (“iPods touch”?)
  • Over 41,000 of the most expensive car on earth
  • 6,200,000 of the most popular car

Or, they could just give every person in America $320.93. Or pay off 0.64% of the national debt.

Mountain Lion. Clever?

Apple just announced the next version of (Mac) OS X: Mountain Lion. And they did so in an rather unusual fashion. Grubes has the scoop:

The recurring theme: Apple is fighting against cruft — inconsistencies and oddities that have accumulated over the years, which made sense at one point but no longer — like managing to-dos in iCal (because CalDAV was being used to sync them to a server) or notes in Mail (because IMAP was the syncing back-end). The changes and additions in Mountain Lion are in a consistent vein: making things simpler and more obvious, closer to how things should be rather than simply how they always have been.

But a lot of the chatter (chirping?) on Twitter concerns the name:

I “get” what Apple’s doing with the name. Mountain Lion (10.8, presumably) is to Lion (10.7) as Snow Leopard (10.6) was to Leopard (10.5): a refinement, a continuation of the same direction in OS X’s evolution as the version that preceded it.

But it is rather odd, if you think about the actual cat names involved, especially since a mountain lion is essentially the same thing as a cougar, also known as a puma or… a panther, which Apple already used as the “big cat” codename for Mac OS X 10.3 way back in 2003.

Beyond that, Lion always seemed like something Apple was building up to… the “king of the jungle.” That version 10.7 was named Lion seemed to suggest the “big cat” lineage, version 10.x of Apple’s Mac OS, and perhaps even the “X” (which is pronounced “ten” after all) was done. And here we have… Mountain Lion? A decisive step backwards in the awesomeness of the big cats. Heck, mountain lions have even been spotted here in Minnesota for crying out loud!

So… anyway… I think the point is: Apple is not taking this whole “big cat” thing too seriously, and neither should we. Mountain Lion looks pretty great. I can’t wait to try it out!

Update: After some research, it turns out Apple already used Puma, too, for 10.1. But as I recall, they didn’t start using the big cat codenames in marketing until 10.2, Jaguar. And I still have the Jaguar mousepad on my desk to prove it!

Apple’s skeuomorphism reconsidered

I was just looking at the much maligned skeuomorphic interface on iCal in Lion, and trying to decide why it doesn’t really bother me that much. I think I figured it out.

It’s inconsistent with other windows, but the objects on a real desk don’t all look alike. I’ve observed novice computer users, even today, struggle to differentiate windows on a standard computer desktop. They can’t tell which window is active; they can’t tell windows apart; they don’t know the difference between different applications or whether a given app is still running without any windows open or not.

In short: a lot of people still don’t understand the GUI, and never will. And, kind of like I wrote yesterday about Kevin and Robert California, whose fault is that? The user’s, or the interface designer’s?

iCal may look out of place, but there’s no mistaking it in the jumble of overlapping windows, just like there’s no mistaking a particular physical book in a big pile on a cluttered desk.

The arguments for or against skeuomorphism are completely different on iOS, of course, where there’s only ever one app on the screen at a time. But I think the HIG zealots and Magritte maybe need to get over themselves a bit, even if iCal makes all of us want to tear those little bits of paper off.

Fiddly

I got up this morning and, like on most mornings, one of the first things I did was brush my teeth. It’s a simple process, just part of the minutiae of daily life. But as with so many of those little things we do every day, it’s a less-than-ideal experience. After fumbling to pull the toothbrush from the cup — where its bulbous, rubberized handle was wedged against the bulbous, rubberized handles of the other toothbrushes necessary for a household of four — and nearly dumping them all into the sink along the way, I took my frustration to Twitter:

It got me thinking about a recent post on Daring Fireball, where John Gruber expressed his frustrations that some people — even Apple Store “geniuses” — were telling iPhone owners that they need to occasionally force-quit all of the apps in their recently-used items tray. He followed up on that post on his podcast, The Talk Show, where he described the experience of operating systems where you are expected to manually monitor and adjust their states as being “fiddly.”

I’ve been thinking about that word, “fiddly,” a lot since then. I think it applies to a lot more than smartphone OSes. I’ve spent a great deal of my life dealing with overwhelming frustration at the clumsiness, the fiddliness, of everyday objects: cheap plastic toys that break easily, things that stick to other things when they shouldn’t or don’t when they should, tools that cannot adequately perform the tasks they are expressly intended for, etc.

As someone who’s not inclined to tinker with objects, much less invent solutions to their shortcomings, that frustration usually just burns off as simmering rage. But as I pondered the nature of fiddliness, and the ideal of the iPhone as a “non-fiddly” object, a couple of thoughts occurred to me:

1. It is the purpose of design to reduce the fiddliness in the world.

2. Very few makers of physical objects today follow #1.

Gary Hustwit’s documentary Objectified is focused on the design of everyday objects, and those who have excelled at creating objects that are, for lack of a better word, as non-fiddly as possible. Two people featured in the documentary are Dieter Rams, the legendary German designer who led Braun’s industrial design team in the 1950s and 1960s, and Jonathan Ive, the head of Apple’s industrial design team today. Both Rams and Ive share a passion for making objects that work. Form not only follows function, form is function. It’s a seamless integration of purpose and style that makes the objects a delight to use.

And that’s a very rare thing today, indeed.