Production Reproduction

What if retina is the best thing that's ever happened to the internet?

Tue, 27 Mar 2012 09:16:00 -0700

There’s been a lot of handwringing in the last week about how badly the resources served up for iPad will crush the internet. There’s no doubt that higher resolution screens are going to lead to increasing download sizes of media (movies &c.) 1080 streaming on the Apple TV is going to be nearly as big a culprit. There are going to be a lot of horrific hacks thrown together to retina-tize existing sites.

The one ray of hope in this dark, very high resolution, night, is the dream that people who make websites will take this as motivation to become resolution independent. It is clearly not sustainable to hack/overhaul a site every time someone invents a higher resolution screen. And we have tools to help. Small things that used to be image intensive (rounded corners, drop shadows) can now be done using CSS. SVG is creeping in slowly as a way to have illustrations and logos while retaining resolution independence. The launch of a high profile product that will make many websites look terible should be highly motivating.

It’s clear that we need a “responsive image” solution today. And Mssrs. Jehl and Grigsby have been doing awesome work there. However we’re a ways off from having a real standard. Which means that now is a good time to step back and see just how low we can get our page-sizes on everything but the ’s. That way when we do solve the responsive image problem everything will be amazing.

We know everyone’s looking at our sites over crappy 3g (or office Wi-Fi) connections. We know that all users want is for the site to load quickly. So rather than taking this increase in screen resolution as an opportunity to shove more giant images through the tubes let’s use it as an opportunity to re-evaluate.

Protytype Power

Sun, 25 Sep 2011 11:29:00 -0700

I proved the value of prototyping to myself a while back. A product manager and I had a disagreement about the way an interaction should work in an iPhone app. We agreed to disagree until after I made some wires to show the two different possibilities. Rather than making wires that sat inside the image of a phone on an 8x10 page, I made phone sized PDF wireframes for him to look at on his phone. He sat down in the meeting, put his phone on the table, opened the wires, and the decision was made. Even with a stupid simple static pdf, just being able to see it in context was the answer.

Since that day I’ve gotten more and more into prototyping. I’ve moved from simply viewing static wires on the phone, to building out functional prototypes using jQtouch and jQuery mobile. Todd Zaki Warfel has been running around preaching this gospel for a few years, and if you haven’t seen his talk or read his Rosenfeld book on the subject I couldn’t recommend them any more highly as ways to introduce yourself or others to the concept.

In his talk Todd boasts proudly about how long it’s been since he’s made a wireframe. I realize that for many folks, completely dropping the wireframe might not be feasible, but I have to say that it feels like the future. Especially as tools like jQuery, Twitter’s Bootstrap, and for the true nerds Serve, evolve into better and better tools for rapid prototyping. And as we each build up our own repositories of interface patterns that we can essentially drag and drop into new prototypes, I have to think (and hope) that wireframing is going to become a thing of the past. Moreover, there are three big nails in the coffin of static interaction designs: CSS3, responsive design, and mobile.

CSS3

CSS3 is the easy place to start, since it’s the reason why people are talking about the browser being the new photoshop. I couldn’t miss the old photoshop less. Gone are the days of “sliding doors” for rounded corners, huge amounts of non-semantic markup for box shadows, and tiled images for gradients. Especially since we can demand that prototypes be viewed in A-grade browsers, we can use bleeding edge CSS with impunity. You might not need so much fidelity in your prototype, but a little button shading never hurt anyone.

Responsive

“Responsive design” is all the rage, and with good reason. Web designers have never been shooting at a static target, and have simply had to do the best they could to make their design functional in the most browsers possible. Now we’re fully empowered to have a beautiful functional design at all screen sizes. The hitch comes when you try to “resize” your photoshop file to reflect this capability. The only way to really see how your content will “respond” to changing screens, is to design it in the browser. This is most important at the architecture phase when we’re figuring out where our content will sit.

Mobile

I split “mobile” apart from “responsive” because designing for native apps is a different beast, and no less aided by prototyping. Screen real estate constraints on mobile demand efficient design. Even more than size, design is impacted by animation and touch.

The way that screens animate from one to the next is an enormous part of the user experience, particularly on tablets. Animations provide interest and delight, but also annoyance and terror. Touch is a fickle monster. Directly manipulating the content with one’s finger is a whole different ballgame than interacting abstractly through keyboard and mouse. As my hero Josh Clark has been preaching, buttons are are a hack in mobile interfaces. Fine tuning these things before production is incredibly important. The only way to truly feel these interactions is to build prototypes that let you do just that.

.. aaaand we’re back

Which brings us back to my phone sized PDF. Don’t be freaked out by a lack of technical expertise. Get out there and fake it ’till you make it*. Keep using Omnigraffle if that’s what you know and love, just be sure get those files out in the world in a way that folks can get their hands on them. And while you’re at it do yourself a favor and learn some HTML and CSS.

*Credit for this sentiment definitely goes to Todd ZW

HTML Everybody, Everybody HTML

Sat, 20 Aug 2011 10:59:00 -0700

We have reached the point where everyone should learn HTML. We should certainly be teaching it to kids. They could learn it as a typing exercise! And beyond that, all adults should be taking a crack at it. I could see how not everyone really needs to know it, so I’d settle for everyone who works in tech knowing something about it, and here’s why:

It’s easy. No seriously, it’s reaaaaally easy. I’m not talking about learning how to do anything fancy, I’m just talking about learning the basics: a. how the language works and b. the basic structure of a page. Just enough so that when you “view source” or when some nerd “shows you source” you don’t retract in horror and pee yourself a little bit.
It’s in everything. If you use a computer, you’re looking at HTML most of the time. So what? Understanding the basics of how it works will help you know what’s going on if things aren’t working right. It’s also useful on occasion to know how to embed an image, link, or even just style text. Let’s say for example you’re writing a blog on Tumblr. Let’s say you’re using the visual editor, and you’re working along working along writing a post, and all of a sudden something stops working right. Best way to solve that problem? Look at the HTML.
You should know your medium. Knowing how HTML works lets you understand it’s limitations, and gives you some sympathy for the folks who spend all day staring at it’s darkest nooks and crannies. Getting a sense for the ways in which it is and isn’t intuitive will help you understand the brain-backflips your developer friends (or employees) are pulling off to think like robots. Or the brain backflips your robot friends are pulling off to think like developers.

The jobs corollary.

Let’s put it this way, our economy sucks. You know what part of our economy doesn’t suck? The internet. If you’re sitting at home wondering what you can do to get a job, the answer is learn HTML, then learn CSS and some jQuery. Seriously, those 12 letters are like catnip to HR people. They will not be able to resist hiring you, assuming that you are at least vaguely personable, and have showered recently.

So what now?

Get thee to the internet! Jessica Hische and Russ Maschmeyer have made a lovely site to introduce you to the basics called Don’t Fear the Internet. Once you get through that, assuming you want more you could move on to some other stuff. But honestly you might not need to go any farther. And one of the best things they’ll teach you is how to view source code, and this is one of the best ways to learn. Frankly the resources out there to learn the basics are pretty slim. Except for w3schools, which should be avoided at all costs.