Category Archives: Technology

The Death of the Pixel

Posted on by Jeff Yerkey
1

Hoist your glasses to a trusted companion! He disappeared at the youthful age of 28. Not Hendrix, not Winehouse, but… the pixel.

Largely born in the 1980s desktop publishing revolution with the first 1984 Mac computer, the pixel was at birth very declarative: he was either on or off. Very quickly he grew to 16 shades of gray and later became a rebel, waving 256 colors and finally matured into 16 million colors.

Two weeks ago, his “parents” at Apple effectively killed him with the launch of the MacBook Pro Retina display laptop, that jaw-droppingly beautiful notebook with 2-1/2 times the number of pixels of that 50-inch HDTV in your living room.

Birth of the High-Resolution Web

With the new MacBook Pro Retina laptop (technology also found in the new iPad, Android phones and the iPhone 4S), the pixels are now sooo small, so teeny, that we can no longer design around them. Web practices like creating a web page at 1024 x 768, or creating a 2″ x 2″ banner ad, and anything that used to be WYSIWYG are all going to be obsolete in the future.

Retina Mac early adopters are already complaining that websites which were created using standard size graphics and images (that would be 99.999% of all current websites) look fuzzy on these new devices. You can’t take little images and icons and just blow them up as Apple’s new flagship is doing. They get blurry and jaggy.

How can you plan for and design around something you can’t see?  The short answer is you need a new web toolkit (and vernacular) to create new high-rez friendly websites. The good news is the geeks (hey, I count myself as an honorary subject in their unruly legion) are already on it.

Quashing Fuzzy Web Graphics: “Retina” Graphics Primer

Following are three tips, technologies and best practices you’ll need to think about before embarking on creating your next website.

1) Kick the Pixel Habit.  This will be the hardest one for designers — we all love our Photoshop images. By learning about new web image technologies like SVG (scalable vector graphics), web designers need not rely on JPEG and GIFs of things like arrows, charts and smooth headers. The current problem with the SVG file format is that not every web browser supports it. Most modern browsers do, but Internet Explorer 8 and below, and Android 2.3 do not.

2) Icon Fonts. This is the tech that has us jazzed at Right Hat. Icon fonts take small line graphics like arrows, icons and so on, and embed them into CSS3-compliant web page code. Awesome. Icon fonts  successfully avoid many of the backwards-browser issues that SVG faces.

3) Responsive Images. While the two technologies above deal with line art and icons, dealing with photos is more complicated. Retina-ready images should be treated “responsively”, that is to say your images will need to be four times the size they are currently. (While this is frequently referred to as 2X images, it is in reality 4 times the number of pixels). There are currently several web developer “hacks” and discussions about how to best deal with higher rez images, so talk with your developer about the best plan.

One image downside: if you have a practice of purchasing royalty-free images in the smaller “web” image sizes, that won’t cut it in RetinaLand.  High resolution-frindly websites mean higher image budgets.

What can you do to get ready for the emerging presence of high rez laptops and iPads? For starters, monitor your web logs and visitors’ screen resolutions.  At the sky high prices of these Apple products, it will take a while for these stats to register. However, once the Retina resolution stats approach double digits, it’s time to start reformulating your graphics approach using these new technologies.

The good news is that there is nothing in these new high-resolution computer and tablet screens that’s going to break your current site. I’m sure the folks with more-money-than-God who can afford the new MacBook Pro Retina are already getting used to fuzzy graphics.

But the high-resolution future is coming. That much is clear.

UPDATE: 11 July 2012:  Thomas Fuchs has put up a nice PDF on how to “retinafy” your site. (Tip of hat to Daring Fireball)

Signal to Noise Ratio

Posted on by Jeff Yerkey
1

Before the World Wide Web was a glimmer in Tim Berners-Lee’s eye, I used to produce audiovisual shows for such clients as GE, Ford and KFC. I hard-wired two Sony TC-788 4-track quad reel-to-reel tape decks together to produce lavish sound and vision extravaganzas for annual retreats, sales meetings and the like.

In producing the shows, the enemy was noise — tape hiss. When you recorded too many tracks, the tapes would slowly and relentlessly add hiss to the content. Add more overdub tracks and you introduced more noise. Sound engineers called it the battle of signal to noise.

Jump forward to 2012 and those of us who design websites are fighting the battle all over again. Banner and Flash ads, “Like” and Twitter buttons, “Add This” links and “Download the App” buttons now infest so many web pages that we now have a visual metaphor for Lou Reed’s prophetic Metal Machine Music.

Interestingly, some of today’s most talented developers and designers are fighting back. Web designer and prolific blogger Jeffrey Zeldman  earlier this month published a revelatory blog post that captured my imagination. In it, he makes his case for purity of type, white space and yes, voice. Zeldman writes:

Many people who’ve visited this site since the redesign have commented on the big type. It’s hard to miss. After all, words are practically the only feature I haven’t removed. Some of the people say they love it. Others are undecided. Many are still processing. A few say they hate it and suggest I’ve lost my mind—although nobody until you has suggested I simply didn’t have access to a computer and therefore didn’t know what I was designing. This design may be good, bad, or indifferent but it is not accidental.

Talented developers like Marco Arment, creator of the groundbreaking iPhone and iPad reading app, Instapaper, and elegant RSS “scrapers” like Reeder are aggressively stripping millions of web pages a day down to pure words on a backlit screen. Even Apple and Microsoft have joined in with Apple Safari’s “Reader” mode and Windows Metro interface stripping designers’ pages of all “noise.”

It’s a joy. You see, in this noisy ad and megamenu-infested realm we call the 2012 web, heaven help the well-meaning designer who gets between me and the story.

Technology as a Disrupter

Posted on by Elonide Semmes
Reply

At the College of Law Practice Management Futures conference, there were plenty of sessions that provided food for thought. But one of the most compelling was, “Technology as a Disrupter.” The session started with the usual examples of iPod/iTunes changing forever how we buy and listen to music. Or Amazon shifting, not only how we find a book, but for many rural customers how you buy your paper towels. Even a colleague next to me described how her very cute prescription glasses came from China. She uploaded a photo of herself, tried different pairs on her virtual image and then ordered them for a mere $10.00. She now has five pairs each entirely different.

After the introduction, there was a very compelling talk by a trial lawyer from Wachtell about how computers are more accurate than humans at massive document review. And how that has fundamentally changed how major trials are happening. This session has driven me to obsess on how our own business is impacted. And it makes me wonder why every corporate retreat or strategic planning meeting doesn’t devote a good chunk of the discussion to this topic. Perhaps it is simply because we are scared at the answer.