MaKey MaKey is an invention kit for the 21st century. Turn everyday objects into touchpads and combine them with the internet. It’s a simple Invention Kit for Beginners and Experts doing art, engineering, and everything in-between.

I love the spirit behind this. As the father of a 15 month old, I can imagine that this will amount to infinite hours of creative invention for me him in the future.

I was sure the pixel-dense screen would take the websites we’ve built and peel back their layer of pretty, revealing something less than perfect (like HD cameras did to sitcom actors). Was this layer we’ve so painstakingly designed, sliced, exported, and built stylesheets around really so thin? Just before the screen lit up, I realized this was nothing new. For the first time, I saw the Internet for  what it really is—a tall, lanky junior high kid who is pissed at the world because he just got done being a short, fat grade schooler.  It’s never just right. Rather than grow proportionally and gradually,  it hits terribly awkward spurts that throw everything off balance.

So, how will the retina change the shape of the web, and do we need to rush to update everything we’ve ever built? Of course not, part of building for the web is accepting that everything is in a constant state of flux—there isn’t enough time and money in the world to “fix” the internet every time a company releases a new technology. Instead, we cling to sensibility by seeking a middle ground and building things with the future in mind. Here are a few specific things I’ll do (or continue to do) as screen resolutions evolve:

Rely on web type & CSS.

We’ve always wanted better rendering for web fonts, and seeing type on a pixel-dense screen for the first time is mind-blowing. It’s also a validation that our commitment to making great type happen on the web without image replacement has paid off. Retina exposes those places where images are used rather than HTML text or CSS. Next to the ultra-crisp text that CSS + HTML render on retina, those fuzzy spots around image buttons and letters tend to stand out. For comparison, here’s a retina iPad screenshot of a button exported as an image, then rendered with web type and CSS (minus the dot texture):

I recently wrote that seeing how blurry the sprite icons on this site looked next to retina text pushed me to get to know font icons better. The advantages are numerous, namely how easily scalable they are and how quickly we can re-color or transition them with CSS. Using font icons whenever possible seems like a low-risk investment. Especially when implemented with care.

Images shouldn’t all be doubled in size...

unless, perhaps, you’re serving images as amazing as NASA. It might make sense to use media queries to target pixel density for handling things like background images in CSS, or even look to Retina.js to serve larger images to high-resolution displays, but should we always do it? As designers who’ve learned that every millisecond counts for load times, we can’t assume that just because someone is browsing from a retina device, they want to download 2x the image assets. Alongside that, there are a lot of smart people working on responsive images, and perhaps the picture element will prove to be the most sensible method, at least for inline images.

Of course this is subjective, but I’d say that for the most part, even 72dpi images (photographs, textures, and illustrations) look better on a retina display. Now that we’ve been using fluid-images and CSS background-size for responsive sites, when those images display even a little smaller than actual size, those smushed together pixels actually continue to shine through on retina. So, perhaps it doesn’t always have to be about serving uniquely-sized images to each device. In many cases, I think loading images that are just a bit better will go a long way. Make images a few percentage points (not 2x) larger, then optimize the hell out of them.

A pixel is still a pixel.

At least it is as far as I can tell. I’m sure I’m not alone in saying I’m scared when I think about how pixel densities across multiple devices will impact web design, but I have to say that everything I’ve seen thus far puts me at ease. Right now I am staring at a 1 pixel line drawn with CSS on a retina iPad and an iPad with an older display. They look the same. I’m not saying there’s not a lot of work to be done, just that I’m relieved to see that device makers seem to be doing quite a lot of it. Likewise, if we rely more on CSS than image exports, I’d say we’re doing our part.

So, that panic button? It gets to go back into the drawer for another occasion. Sure, the internet’s clothes are going to fit funny for a while as it figures out how & where to put all those extra image KBs, but we’re going to be okay. These are awkward times, but rejoice. We all get to play the role of the guidance counselor: having discussions, writing specs, and building tools that continually reshape the web into its full potential.

For that, I used the fantastically simple mac app, Glyphs. It gets an A+ for suiting my needs perfectly. I put in a B+ amount of effort for results I’m pleased as punch with, though as I learn & test I may shoot for minor improvements from time to time. The font icons may render a tad on the jagged side for older machines, but it’s a fair tradeoff when you’re browsing from a retina iPad.

In addition to Icon Fonts are Awesome, check out Displaying Icons with Fonts and Data- Attributes from John Hicks for help with implementation. If you’re looking to create custom web fonts, check out Shifticons.

While I think the Freelancers Union site has some great resources & goals, I can’t get on board with the attitude of the longest invoice page. Since being in business, I’ve had 2 unpaid invoices. Sure, I’m disappointed in the clients, but I’m more disappointed in myself. I run a small business and like the fact that the buck stops at my desk, but I also realize it’s my responsibility (through things like contracts, legal advice, and payment schedules) to be sure that the buck gets there in the first place.

This post is my small way of participating in Ideas of March.

I was part of a BMX kid gang of sorts. We rolled our jeans up and folded our converse down. We built forts, played Nerf football, and shot bb guns. When that got old we’d explore the outer limits of our territory. These boundaries were defined by geography (the muddy bayou we didn’t dare cross for fear of alligators), by rules (the busy streets parents wouldn’t let us cross), and by ourselves (how far we could pedal and still make it home before dark). The more we explored, the smaller our domain felt. Though we’d never actually seen the wondrous places across the bayou or beyond those roads, we were convinced they were out there.

We spent a lot of time at a small park which was, incidentally, the farthest point we could travel within the neighborhood—but it sucked. It had a kiddie slide, a kiddie swing, and a tennis court. What the hell was a 10 year old supposed to do with a tennis court? We didn’t know, so we loitered, enjoying how tough we felt being so far from home. One evening as dusk approached, we were throwing rocks near the outer edge of the park when we found a trail. It didn’t look bike-friendly, so we all looked at each other, waiting for someone to voice our collective curiosity: “Let’s see where this goes.” We were all afraid of pressing on, and everyone had his own excuse for why we shouldn’t go, but the fear of being grounded or getting lost in the dark woods overnight couldn’t compete with the weight of a double-dare. So we set out.

I remember praying as we approached every turn for some kind of significant marker or relevant finding so that we could call our expedition a success and turn back with our honor intact. But we just saw woods. We drudged through muddy low spots that we all were sure was quicksand. We contorted our way through stickers, briar, and brush. We found ourselves covered in mud and scrapes and certain we were already in deep trouble when what we saw across an approaching bridge made it all worth while—a new park. This one had everything: a huge paved trail (for bike races, of course) that wrapped around a baseball diamond, big kid swings, and a creek. We could even see a fireworks stand off in the distance. Every afternoon, from the time the school bell rang until dusk, we ventured back to the park. Hide & seek games became epic battles across acres of forest with forts, tree-swings and booby trap pits. We were Goonies, conquistadors, astronauts; we had forever changed our world.

***

So many great childhood memories are the result of our decision to follow that one trail. It redefined everything for us and expanded our territory exponentially. These days, I’m happiest when I feel part of a team with the same adventurous spirit as that kid gang. The web is, after all, as limited as my old neighborhood with boundaries set by our current tools and technologies, as well as our understanding of each. I believe my work counts most when I’m looking for new trails and feel brave enough to blaze them. I know that the minute I dismiss new discoveries or ideas because the way forward isn’t clear is when I’ve lost my sense of wonder for web design. I hope like hell that never happens.