HTML5, CSS3 default templates

Free for use in all web projects, professional or personal, HTML5 Reset by Monkey Do! is a set of HTML5 and CSS templates that jumpstart web development by removing the styling native to each browser, establishing basic HTML structures (title, header, footer, etc.), clearing floats, correcting for IE problems, and more.

Most of us who design websites begin every project with bits and pieces of this kind of code, but developer Tim Murtaugh, who created these files and who modestly thanks everyone in the universe, has struck a near-ideal balance. In these lean, simple files, without fuss or clutter, he manages to give us the best-practices equivalent of everything but the kitchen sink.

Tim Murtaugh sits beside me at Happy Cog, so I’ve seen him use these very files (and earlier versions of them) to quickly code advanced websites. If you’re up to speed on all the new hotness, these files will help you stay that way and work faster. If you’re still learning (and who isn’t?) about HTML5, CSS3, and browser workarounds, studying these files and Tim’s notes about them will help you become a more knowledgeable web designer slash developer. (We need a better name for what we do.)

My daughter calls Mr Murtaugh “Tim the giant.” With the release of this little package, he earns the moniker. Highly recommended.

An InDesign for HTML and CSS?

In “CSS is the new Photoshop” (?), Adobe’s John Nack correctly observes, as have many of us, that “Cascading Style Sheets can create a great deal of artwork now, without reliance on bitmap graphics.” Nack quotes Shawn Blanc, one of several concurrent authors of the phrase “CSS is the new Photoshop,” who cites as evidence Louis Harboe’s iOS icons and Jeff Batterton’s iPhone, both designed entirely in CSS and both only viewable in the latest Webkit browsers, Safari 5 and Google Chrome 5.

He’s not alone: Håkon Wium Lie from Opera predicts that CSS3 could eliminate half the images used on the Web. You can use various graphical tools to generate things like CSS gradients and rounded corners. As people can do more and more in code, it makes sense to ask whether even to use Photoshop in designing Web content.

I think Adobe should be freaking out a bit, but in a constructive way.

So far, so good. But Nack’s “constructive” suggestion for Adobe, quoting Michael Slade, is to create “the modern day equivalent of Illustrator and PageMaker for CSS, HTML5 and JavaScript.”

Nack acknowledges that this will be difficult. I propose that it will be impossible. Says Nack:

As I noted the other day, “Almost no one would look inside, say, an EPS file and harrumph, ‘Well, that’s not how I’d write PostScript’–but they absolutely do that with HTML.”

Well, there is a reason they absolutely do that with HTML. PostScript is a programming language designed to describe page layouts and text shapes in a world of known, fixed dimensions (the world of print), with no underlying semantics. PostScript doesn’t care whether an element is a paragraph, a headline, or a list item. It doesn’t care if a bit of content on one page cites another bit of content on a different page. PostScript is a visual plotting language. And HTML is anything but.

HTML is a language with roots in library science. It doesn’t know or care what content looks like. (Even HTML5 doesn’t care what content looks like.) Neither a tool like Photoshop, which is all about pixels, nor a tool like Illustrator, which is all about vectors, can generate semantic HTML, because the visual and the semantic are two different things.

Moreover, authoring good HTML and CSS is an art, just as authoring good poetry or designing beautiful comps in Photoshop is an art. Expecting Photoshop to write the kind of markup and CSS you and I write at our best is like challenging TextMate to convert semantic HTML into a visually appropriate and aesthetically pleasing layout. Certain kinds of human creativity and expertise cannot be reproduced by machines. Yes, there are machines that create music, and a composer like Brian Eno can program such systems to create somewhat interesting aural landscapes, but such music can never be the Eroica or “This Land is Your Land,” because there is no algorithm with the creative and life experience of Beethoven or Woody Guthrie.

Adobe already has a fine product in the code arena. Some hand coders knock Dreamweaver, but it does about as good a job as is possible of converting groupings of meaningless pixels into chunks of valid code. It is unreasonable to expect more than that from a tool that begins by importing a multi-layered Photoshop comp. Of course you can do much more with Dreamweaver if you use its code merely as a starting point, or if you use it simply as a hand-coding environment. But that’s the point. Some things, to be done right, must be done by the human mind.

There’s something to what Nack says. Photoshop could be made friendlier to serious web designers. Adobe could also stop ignoring Fireworks, as Fireworks is a better starting place for web design. They might even interview serious, standards-oriented web designers and start from scratch, as a new tool will suffer from fewer political constraints and user expectations than a beloved existing product with deep features and multiple audiences.

But while our current tools can certainly stand improvement, no company will ever create “the modern day equivalent of Illustrator and PageMaker for CSS, HTML5 and JavaScript.” The very assumption that a such thing is possible suggests a lack of understanding of the professionalism, wisdom, and experience required to create good HTML, CSS, and JavaScript. Fortunately, a better understanding is easy to come by.

37signals’ Jason Fried live today on The Big Web Show

I have known 37signals CEO Jason Fried since he was a young copywriter who reminded me of me, only smarter and more confident. Like many of you, with a mixture of awe and pleasure, I have watched him change our industry, along with book publishing and business generally. Dan Benjamin and I are delighted to announce the mercurial Mr Fried as our guest on The Big Web Show. Join us today, 1 July 2010, for the live taping at 1:00 PM ET.

Jason’s official bio is brief, but he can write at length when he wishes: see Rework, Getting Real, and Defensive Web Design, each a classic, and to each of which he was principal co-writer and guiding force. Besides saying no to meetings, contracts, and VC money, Jason and 37signals are famous for godfathering a speedy, iterative form of web application design; for gifting the industry with Ruby on Rails; for creating a suite of beloved (yes, really) business productivity web apps; for mastering and then abandoning client services in favor of making stuff; for somehow, in the midst of all that busyness, churning out tons of fine content on their popular blog; and for being roommates with the equally fantastic Coudal Partners.

Can’t wait to interview Jason Fried in front of a live internet audience today. Hope you’ll join us.

The Big Web Show is taped live in front of an internet audience every Thursday at 1:00 PM ET on live.5by5.tv. Edited episodes can be watched afterwards (often within hours of taping) via iTunes (audio feed | video feed) and the web.

Photo © John Morrison – Subism.com

Responsive design is the new black

Collylogic.com, retooled as responsive design. The wide version.

The blog of Mr Simon Collison, retooled as responsive web design. The wide version.

Collylogic.com, retooled as responsive design. The narrow version.

The blog of Mr Simon Collison, retooled as responsive web design. The narrow version.

See more versions in Mr Collison’s “Media Query Layouts” set on Flickr.

Read the article that started it all. Coming soon as a book by Mr Ethan Marcotte from A Book Apart. (The current A Book Apart book, Mr Jeremy Keith’s HTML5 For Web Designers, ships Friday. Mr Ethan Marcotte will be our guest this Thursday, June 24, on The Big Web Show. Synchronicity. It’s not just an LP by The Police. Kids, ask your parents.)

The beauty of responsive web design becomes obvious when you see your site in smart phones, tablets, and widescreen desktop browsers. It’s as if your site was redesigned to perfectly fit that specific environment. And yet there is but one actual design—a somewhat plastic design, if you will. An extensible design, if you prefer. It’s what some of us were going for with “liquid” web design back in the 1990s, only it doesn’t suck. Powered by CSS media queries, it’s the resurrection of a Dao of Web Design and a spiffy new best practice. All the kids are doing it.

Well, anyway, some of the cool ones are. See also the newly retooled-per-responsive-design Journal by Mr Hicks. Hat tip: Mr Stocks. I obviously have some work to do on this site. And you may on yours.

Seen any good responsive redesigns lately?


Big Web Show Roundup

The Big Web Show

The Big Web Show is a weekly video podcast on Everything Web That Matters, co-hosted by 5×5 network founder Dan Benjamin and yours truly. Here’s a roundup of recent shows:

  • In Episode 2: HTML5, Dan and I talk with Jeremy Keith, designer, writer, featured An Event Apart speaker, and author of HTML5 for Web Designers. We discuss the goals and inspiration behind the book, as well as what HTML5 means for both web creators and those who consume the web, covering topics that range from structure to accessibility and implementation.
  • Melissa Pierce’s new film, “Life in Perpetual Beta,” asks the question, “is the planned life worth living?” and sketches an answer via interviews with the likes of Baratunde Thuston, Irina Slutsky, and Twitter’s Biz Stone. In Episode 3: Re-invent Yourself, Dan and I interview Melissa about the unplanned life, Facebook privacy, and using the internet to re-invent yourself.
  • In Episode 4: Content Strategy, Dan and I get down to cases with Kristina Halvorson, CEO, Brain Traffic and author, Content Strategy for the Web (New Riders, 2010), and Erin Kissane, content strategist with Happy Cog, and author of Incisive.nu.
  • In Episode 5: Web Education, we talk with special guest Liz Danzico, author of Bobulate, and chairperson of the MFA in Interaction Design program at New York’s School of Visual Arts. They discuss web and interaction design education, user experience design, how to structure a program and teach a class, acquiring and editing content, and much more.
  • In Episode 6: Mobile First, Dan and I chat with leading interaction designer Luke Wroblewski about designing for the mobile space, and learn why the mobile experience for a web application or site should be designed before the PC version.
  • In Episode 7: Usability Testing, we schmooze larger-than-life user experience design guru Jared Spool about usability testing in the real world. Jared is the founder of User Interface Engineering, the largest usability research organization of its kind in the world, and has been working in the field of usability and design since 1978, before the term “usability” was ever associated with computers.
  • Most recently, in Episode 8: User Experience Design, Dan and I talk with Happy Cog’s senior UX designer Whitney Hess about social networking, getting clients, and user experience design—from research to wireframes to testing and beyond.

The Great Salami Caper

In the late 1980s, while making efforts to move to New York City, I came up with the winning ad campaign for Hebrew National Kosher Salami. Only I didn’t win.

Hebrew National held a contest to see if people outside Madison Avenue could come up with a great ad idea for their 83% fat free salami. The grand prize was $83,000.

Even in New York, $83,000 would have more than covered a moving van, broker’s fee, and first and last month’s rent.

But creating the winning ad carried a benefit even bigger than the cash for someone like me who was trying to break into New York advertising. I’d worked for a couple of years at Washington, DC-area ad agencies, one of them pretty good, but that and my portfolio bought me nothing in the competitive New York advertising job market of the late 1980s. There were kids coming out of school with better portfolios than mine.

Winning that contest, I believed at the time, would make a New York ad agency take me seriously.

My then-girlfriend Eva S and I submitted an ad built around the headline, “You should be so fat.”


Well, we never heard back after entering the contest, and months passed the way they do.

I continued to drive back and forth from DC to NYC looking for jobs and an apartment.

A couple of times I flew to New York for an interview in the middle of my work day. I told my DC-area-agency creative director I was seeing a doctor. I still feel bad about that lie.

One day I open a magazine, and there’s a picture of an athletic woman wearing a leotard, working out.

The headline reads, “You should be so lean.”


Lean. You should be so lean.

It was our concept made safe. “You should be so lean” was a faster read and a much less interesting idea.

Hebrew National had said in the contest rules that, in the event of duplicate ideas, they would pick the one that was best executed. I am certain today that several people submitted similar ideas and Hebrew National and its agency chose the best-looking comp, which was not mine. Quite probably the winner even wrote “You should be so lean.” All perfectly ethical.

But at the time I was sure that we had gotten ripped off.

So I confided in the president of the DC-area agency where I worked—like he needed another reason to fire me—and asked him if I should sue Hebrew National.

I sought this advice while buying a drink for the president of the agency when I should have been at my desk, working. I figured if the president of the agency was spending the afternoon in a bar, he wouldn’t mind his peon employee doing likewise.

I was thirsty and not very bright. A while later, for many reasons, the agency let me go, surprising absolutely no one but me.

But meantime I’m in the bar buying my boss a drink on his time.

He tells me something I’ll never forget: a big company has lawyers on retainer, and you don’t.


Icon: For Love of Barbie

When I was twenty, Barbie was a symbol of oppression with obvious food issues. No way would a future child of mine identify with that.

When I was twenty, “princess” was another word for “child of oppressor.” Monarchs went with pogroms and capitalists.

If I ever had a daughter, she would be one of the people. Or a leader of the people. Or an anarchist. Or most probably an artist. Art was problematic because it also went with corporate capitalism (when not going steady with poverty) but at least the few artists who made money disdained it, if only publicly.

Twenty wasn’t easy.


When I was twenty, when I considered bringing a child into this world of wrong, I pictured her enjoying organic produce and healthy ethnic cuisines.

Decades and chameleon lives later, I was married and we were expecting.

After our daughter was born, I suggested raising her vegetarian. It seemed wrong to feed an angel on the blood and limbs of slaughtered animals. Her mother said she’d go along with the vegetarian angle as long as I did the research and committed to preparing fresh, nutritionally balanced meals that supplied every nutrient our child would need.

So she eats meat.

Mostly she eats french fries.

She sometimes eats at McDonald’s. Also she eats candy and plays with Barbies. She says she is Barbie’s biggest fan. Soon after learning to say Dada and Mama, she asked if she was a princess. We said yes.


What used to be my elegant teakwood dining table is now the staging area for a Barbie apartment. The Barbie pool, Barbie camping van, and Barbie salon that comprise the “apartment” barely leave room for the Barbies, Stacies, and Kellys who make use of these facilities.

The princess turns six in September. She’s working on the party guest list and we’ve already decided on her birthday present: a Barbie house.

Barbie is now fifty. But fifty is the new 49. There’s a reason she’s stuck around all these decades. Turns out it has nothing to do with theory and everything to do with girls.


P.S. Hint to my people: when you go to barbie.com, enable Flash.


Web Education on Big Web Show


Update! Final audio and video are now available for your listening and viewing pleasure at 5by5.tv.

Liz Danzico (@bobulate), author of Bobulate, and chairperson of the MFA in Interaction Design program at New York’s School of Visual Arts, is today’s guest on The Big Web Show.

Join co-host Dan Benjamin, Liz, and me live at 1:00 PM EDT today as we discuss web and interaction design education, user experience design, how to structure a program and teach a class, acquiring and editing content, and much more. Watch the live program at live.5by5.tv. Your call-in and chatroom questions and comments are welcome.

After the live “taping,” the show will be edited and posted in video and audio podcast form, available from 5by5.tv and the iTunes store. (Audio on iTunes | Video on iTunes)

Liz Danzico is an independent consultant, and user experience consultant for Happy Cog Studios. She is a columnist for Interactions Magazine, former editor of Boxes and Arrows, former director of experience strategy for AIGA, and former IA director at Barnes & Noble. She directed product development at Daylife and Rodale Digital, and before co-founding the MFA in Interaction Design program with Steven Heller, she taught at the New School University, the Fashion Institute of Technology, and Columbia University.

Join us for a very special interview today on The Big Web Show.


Apple Responds

Apple responds to the Adobe "We love Apple" ad.

Via yfrog.com/83n4fp. See also:


Life is Beautiful

I haven’t slept. For much of last night, my daughter Ava cried out in her sleep with nightmares. Eventually her cries would wake us both. Instead of going back to sleep, Ava would chat with me about her day. I wish I could remember all the amazing things she told me at 2:00 AM.

Around 3:30 or so, we were both asleep when our little dog Emile began barking to be let down from the bed. (He’s too small to hop down himself.) I groaned, rose, and set him gently on the floor; off he trotted to relieve himself on a Wee-wee Pad™ I’d left in the front hallway for just such a contingency.

Moments later we heard an unearthly shrieking. The dog has progressive, incurable, pulmonary fibrosis. The attacks come on suddenly and unpredictably (except that they often most occur after he has relieved himself in the middle of the night). His lungs stop pumping oxygen. He falls over, typically into his own excrement, and goes into what appears to be cardiac arrest. Uncanny shrieks testify to his terror and pain.

Typically I can bring him back by throwing myself on the floor, talking to him, and patting his ribs to get the lungs working again. I did this and my five-year-old was right beside me, helping, and asking if the dog was dying.

“He’s not dying,” I said, confident that this was not the moment. (And luckily, I was right.)

We cleaned the dog and put him back in bed.

“Dad, there are poopy turds on the floor,” my daughter said.

“I know, I’ll clean them in the morning.”

“Dad, there are poopy turds on the floor.”

“I’ll go clean them,” I said.

Around 4:00 AM the three of us cuddled up and my daughter carried on a delightful conversation, mainly by herself, for at least half an hour. Then we were all asleep. And then the 6:00 AM alarm rang.

Kids can keep you up all night but it’s all worth it. Domestic animals give love freely to the least deserving, but their lives are short and their ends are often brutal. And it’s worth it. It is all worth it. Every day, even a sad day blurred by headaches and filled with business meetings, is magical and infinite. This dance, this particular proton dance, will never come again. This tune we’re too busy to hear will not be played again. Never forget to be thankful for your life.