Code is design

I was asked to do a Pecha Kucha style presentation at Pecha Kucha Portland 2013. Transcript included below.

# 01

Thank you. Ever since I was a kid, I've been addicted to computers, technology, and eventually the web. This is a photo of me at age two, furiously chugging my formula before a big day at the computer.

# 02

I was getting ready to boot up MS-DOS from my father's lap to play my favorite computer game at the time, called Reader Rabbit. This was the fuel to my fire. Little did I know this machine would both define me *and* ruin me for years to come.

# 03

By age four, I was teaching others how to use our computer too. If you couldn't already guess, I'm the one on the left being a total drama queen, probably waiting for my cousin Mike to lose so I can show him how it's really done.

# 04

Let’s fast forward to age twelve, because that's when I discovered Microsoft FrontPage in my middle school's computer lab. I used this horrendous piece of software to make equally horrendous websites like the one pictured here, which I created to fool my classmates into thinking I could actually tear it up on a skateboard.

# 05

In case you don't remember, even some of the most popular websites built over a decade ago were pretty gross. You could only do so much with early versions of HTML, CSS, and Javascript. It didn’t help that the text editors were terrible, and computers were sluggish and expensive.

# 06

But, desktop computers were the best way to browse the web. Our experience of the web was confined to these clunky 15" boxes, so it made sense for web designers to create websites that were optimized for this small, fixed viewing space.

# 07

This fixed viewing area is sort of like a painter's canvas placed on an easel. Like a physical canvas, each computer monitor has a set of fixed dimensions in which web designers must work within to craft their masterpieces. It wasn't long before common design practices like the "960 pixel grid" were created to make the web design process less arduous.

# 08

In the past, web designers would typically hand off their masterpieces to web developers who would write the code necessary to replicate it. Design and development were often separate practices happening as sequential steps in the overall web development process.

# 09

And then this shit happened. The iPhone, though not the first smart phone, really kickstarted the mobile web back in 2007, and today there is a plethora of new devices, all with access to the web. The old analogy of designing the web on a "fixed canvas" like a painter is foolish, because the canvas is no longer fixed.

# 10

Those beautiful, pixel-precise websites that I tinkered with for months were instantly broken on mobile devices. More devices introduced a new set of problems for designers and developers to solve. Websites had to work on all these new devices, whether it be a mobile phone, a tablet, a Kindle, or even a 48" conference room display monitor.

# 11

For the better part of the last two decades, design and development were seen as sequential processes. First you design, then you develop. As a lone developer in my teenage years, however, I was constantly jumping back and forth between these left brain/right brain processes, designing and developing sites on the fly. I was on my own, so I didn’t have a choice.

# 12

After college and a brief hiatus from web design, I got sucked back in and discovered a concept called "Responsive Design". Developers can now build complex websites that flex, respond, and adapt depending on the device that is being used to view it.

# 13

Responsive design had a large impact on the web industry. It totally changed the thought process behind building a website. The days of submitting static Photoshop mockups to a developer you've never met are numbered. Building a website today requires designers and developers to work together. Closely. And without killing each other.

# 14

As it turns out though, designers and developers aren't really that different. Each process is just a means to an end; which is usually to solve a problem. In the web industry, the line between these two professions are blurring, and it's an exciting movement to be a part of for somebody like me.

# 15

Designing and developing together forces us to think about the constraints of current technology, and about what is most essential to solving the problem. Today we can can build web applications for dozens of devices, all at once, which is pretty sweet if you ask me. Now, let’s finally take a look at some applications that were built this way.

# 16

Last summer, Chris Coyier of CSS-Tricks.com crowdfunded and documented the redesign of his popular blog. Turns out a lot of the design was done by writing code. And the end result was a fully flexible, speedy website with complex layouts and incredible content.

# 17

Microsoft redesigned Microsoft.com in late 2012, proving even big business can get it right *sometimes*. They jumped straight into coding after some preliminary sketches, and even built a "device lab" at headquarters so that an army of developers could test its performance on a zillion devices.

# 18

Stephanie Reiger recently built this mini-site which promotes Nokia’s new web browsers. The site had to work on over 70 different Nokia devices, those sadistic bastards. To save time, Stephanie built a working "live" prototype of the site early on. After some iterations, the end result was a neat, polished mini-site for Nokia customers.

# 19

Now this one was fun. Two of my co-workers at Big Room Studios and I whipped up this interactive proposal for Porsche in a few hours. It’s a simple radio tuner that flips through stations as you turn the knob. I designed that knob with HTML & CSS. No images, no Photoshop, and it works on a range of different devices.

# 20

Designers and developers working together to solve problems is a shift in the right direction, and I am grateful to have found my calling so early in life. The web and I have grown together, but we’re still pretty scrappy and in our mid-20s. Can you imagine how classy we’ll be ten years from now? Maybe my beard will fill out. Either way, I’m excited for what’s to come. Have a great future.