Categories
A Book Apart Design E-Books editorial HTML HTML5 Products Standards State of the Web Web Design Web Design History Web Standards

HTML5 For Web Designers: The eBook

HTML5 For Web Designers

Jeremy Keith’s HTML5 for Web Designers is now available as an epub at books.alistapart.com.

If you bought the paperback, watch your inbox for a special discount on the ebook. (To take advantage of this offer, enter the discount code in page 2 of the shopping cart’s checkout process, after you put in your billing information.)

Also, be on the lookout for our second book, CSS3 For Web Designers by Dan Cederholm, forthcoming this Fall. Upcoming A Book Apart topics include progressive enhancement, content strategy, responsive web design, and emotional design by industry-leading authors Aaron Gustafson, Erin Kissane, Ethan Marcotte, and Aarron Walter.

Categories
A Book Apart Acclaim Advocacy Announcements Apple Best practices Formats HTML HTML5 industry Jeremy Keith Products Publications Publishing

HTML5 Pour Les Web Designers

Sacre bleu! The French edition of the ebook of HTML5 For Web Designers is in the Top 5 sellers on iTunes Français.

Sacrebleu! The French edition of the ebook of Monsieur Jeremy Keith’s HTML5 For Web Designers is in the top five sellers in the iTunes Store Français.

To answer your other questions: an eBook version in English is coming to books.alistapart.com next week, will soon thereafter also be sold via the iTunes Store, and will be followed by a PDF version. Get those downloading fingers in shape now!

Categories
Code CSS HTML HTML5 Tools

How to use TextMate


Jeffrey Zeldman Presents

For nearly 13 years, I created websites with PageSpinner, a charmingly old-fashioned HTML coding environment from the days of Netscape 1.0. But two years ago, seeking updated web page encoding and other modern conveniences, I switched to TextMate, “the missing editor for MacOS X.”

PageSpinner greatly helps coders (but offends the aesthete’s eye) with Microsoft-Word-like menu bars containing buttons that let you instantly create paragraphs, list items, and so on. In contrast, TextMate has no UI chrome whatever. A screenshot of the TextMate interface is like a photograph of snow.

For two years, I’ve created web pages in TextMate, hand-coding every entity with no help from the application because I didn’t know it offered any. But my friend Ethan Marcotte knew, and today, responding to my cry for help, he sent the following info:


I highly recommend starting here. (If you only read one thing in this email—and who could blame you?—make it that link.)

Moving on! Here’s a more exhaustive “getting started” tutorial.

Random feature blogs:

Macromates has some helpful screencasts (most of which could use a good editor, but they might be good train fodder):

Because I have no life, I’ll occasionally trawl through Vimeo to find random tips.

And here’s Dan Rubin’s macro to convert multi-line CSS to single-line (or vice versa).

Categories
A List Apart An Event Apart Announcements Appearances Applications architecture art direction Best practices Browsers chrome Code CSS CSS3 Damned Fine Journalism Design Designers editorial Education engagement glamorous Happy Cog™ HTML HTML5 Ideas industry interface ipad iphone launches Layout photography Press Publications Publishing Real type on the web Responsive Web Design Standards State of the Web The Big Web Show The Essentials The Profession This never happens to Gruber type Typography User Experience UX W3C Web Design Web Design History Web Standards webfonts webkit Websites webtype writing Zeldman zeldman.com

I guest-edit .net magazine

Web 2.1. Zeldman guest-edits .net magazine.

A List Apart and .net magazine have long admired each other. So when .net editor Dan Oliver did me the great honor of asking if I wished to guest edit an issue, I saluted smartly. The result is now arriving in subscriber post boxes and will soon flood Her Majesty’s newsstands.

In .net magazine Issue No. 206, on sale 17th August in UK (and next month in the US, where it goes by the name “Practical Web Design”), we examine how new standards like CSS3 and HTML5, new devices like iPhone and Droid, and maturing UX disciplines like content strategy are converging to create new opportunities for web designers and the web users we serve:

  • Exult as Luke Wroblewski shows how the explosive growth of mobile lets us stop bowing to committees and refocus on features customers need.
  • Marvel as Ethan Marcotte explains how fluid grids, flexible images, and CSS3 media queries help us create precise yet context-sensitive layouts that change to fit the device and screen on which they’re viewed.
  • Delight as Kristina Halvorson tells how to achieve better design through coherent content wrangling.
  • Thrill as Andy Hume shows how to sell wary clients on cutting-edge design methods never before possible.
  • Geek out as Tim Van Damme shows how progressive enhancement and CSS3 make for sexy experiences in today’s most capable browsers—and damned fine experiences in those that are less web-standards-savvy.

You can also read my article, which asks the musical question:

Cheap, complex devices such as the iPhone and the Droid have come along at precisely the moment when HTML5, CSS3 and web fonts are ready for action; when standards-based web development is no longer relegated to the fringe; and when web designers, no longer content to merely decorate screens, are crafting provocative, multi-platform experiences. Is this the dawn of a newer, more mature, more ubiquitous web?

Today’s web is about interacting with your users wherever they are, whenever they have a minute to spare. New code and new ideas for a new time are what the new issue of .net magazine captures. There has never been a better time to create websites. Enjoy!


Photo by Daniel Byrne for .net magazine. All rights reserved.

Categories
Browsers bugs Code Compatibility CSS CSS3 development Free Happy Cog™ HTML HTML5 Ideas industry links Standards State of the Web The Essentials The Profession Tools Web Design Web Design History Web Standards

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.

Categories
A Book Apart Design HTML HTML5 Publications Publishing

Return to Sender

About 40 copies of HTML5 For Web Designers out of the first 10,000 sold have been returned to us because the recipients moved, or there was an error in their address.

Returns come from every continent on the globe. Japanese returns are quietly beautiful. French returns are vaguely contemptuous.

Returned books – A Book Apart

Categories
HTML HTML5 W3C Web Design Web Design History Web Standards

Earliest Web Doc is HTML5

Links and Anchors,” the very first document published on the web, is almost valid HTML5.

Hat tip: Jeremy Keith.

P.S. Got yours yet?

Categories
Design HTML HTML5 Marketing Web Design Web Design History Web Standards

HTML5 Fuzzies


Jeffrey Zeldman Presents

Yesterday, in response to something Tantek Çelik said here, Jeff Croft wrote a thoughtfully provocative piece arguing that informed web designers should encourage—or at least not worry about—the widespread misuse of the term “HTML5” as a buzzword covering everything from CSS3 and web fonts to excitement about the new Webkit-powered mobile platforms:

…I think there’s actually a very good reason why we should, in fact, embrace the term “HTML5” as an overarching buzzword for this latest round of web standards and specifications. Our industry has proven on several occasions that we don’t get excited about new, interesting, and useful technologies and concepts until such a buzzword is in place.

“AJAX,” of course, is the canonical example of this. DOM scripting, XMLHttpRequest, and dynamic Javascript all existed long before the term “AJAX”. But it wasn’t until the clever term was coined that anyone really cared. As soon as we had a single, simple word we could all get behind, Javascript really took off. A proliferation of frameworks and libraries hit the scene, and suddenly we were all building dynamic web projects. And the term was misused. Badly. Left and right. Much of the great code being written didn’t use XML. Much of it wasn’t asynchronous. But most of it was pretty great, and it was usually called “AJAX” wether it really was or not.

There is much to be said for Jeff’s point of view, although such fuzziness is a slippery slope. In the upcoming issue of .net magazine which I guest-edited, I refer to the current set of opportunities half-jocularly as “Web 2.1,” and while the title is a goof, it is also an attempt to encapsulate an exciting new phase of web design and experience. Instead of forging such constructions, perhaps it is best to go with what the market has seized upon—and “HTML5” is certainly that.

To encourage what should be encouraged, yet not add confusion to an already over-vague understanding, folks like us might want to say, “HTML5 and related technologies,” or “HTML5 and other new technologies,” or something along those lines.

Sure, it’s a bit stiff. But such a construction allows us to participate in the current frenzy and be understood by non-technical people while not fostering further misunderstandings—particularly as we also need to concern ourselves with web colleagues’ and students’ knowledge of what HTML5 is and is not.

via JeffCroft.com: On the term “HTML5”.

Categories
A Book Apart An Event Apart Code Design development Happy Cog™ HTML HTML5 Standards State of the Web Tools User Experience UX

10K Apart – inspire the web!

Just launched and just wonderful! The 10K Apart contest (“Inspire the web with just 10K”) presented by MIX Online and An Event Apart hearkens back to Stewart Butterfield’s 5k Contest of yesteryear while anticipating the HTML5-powered web of tomorrow … and encouraging us to design that web today.

We want beauty. We want utility. We want excitement. And we want it all under 10K:

HTML5 For Web Designers

Prizes, we got prizes! One grand prize winner will receive registration to An Event Apart plus $3,000 cash and a copy of HTML5 For Web Designers. Three runners-up (Best Design, Best Technical, and People’s Choice) will win free registration to An Event Apart plus a $1000 Visa cash card and HTML5 For Web Designers. Nine honorable mentions will receive HTML5 For Web Designers.

The judging panel that will evaluate all this awesomeness is made up of Jeremy Keith, Nicole Sullivan, Eric Meyer, Whitney Hess, and yours truly.

Sorry, no back-end, this is a client-side contest only.

Check the 10K Apart site for more info. Happy designing and developing!

Categories
A List Apart An Event Apart Appearances Best practices better-know-a-speaker conferences content content strategy creativity CSS CSS3 Curation Design Designers engagement eric meyer Happy Cog™ HTML HTML5 Ideas Images industry Minneapolis people photography Responsive Web Design Typography Usability User Experience UX W3C Web Design Web Standards webfonts Zeldman

Minneapolis Remembered

Eric Meyer at An Event Apart Minneapolis - photo by Jared Mehle

The show’s over but the photos linger on. An Event Apart Minneapolis was two days of nonstop brilliance and inspiration. In an environment more than one attendee likened to a “TED of web design,” a dozen of the most exciting speakers and visionaries in our industry explained why this moment in web design is like no other.

If you were there, relive the memories; if you couldn’t attend, steal a glance at some of what you missed: An Event Apart Minneapolis: the photo pool at Flickr.

Next up: An Event Apart DC and San Diego. These shows will not be streamed, simulcast, or repackaged in DVD format. To experience them, you must attend. Tickets are first-come, first-served, and every show this year has sold out. Forewarned is forearmed; we’d love to turn you on.


Photo: Jared Mehle.

Categories
Authoring CSS CSS3 HTML HTML5

HTML5 and CSS3 virtual classes

IF YOU’RE BONING UP on HTML5 and CSS3, you’ll want to consider two remarkable learning experiences taking place live on the web this summer:

Learn HTML5 with John Allsopp

Here is a great educational opportunity that’s also an amazing value. Experience eight structured sessions, two live Q&A sessions, private discussion forum, practical exercises and more, from one of the world’s best and most experienced teachers of standards-based design. All for just US $9.95. That is not a typo. Live classes start 26 July 2010.

Learn CSS3 with John Allsopp

And the hits keep on coming. This virtual classroom led by Allsopp includes twelve structured sessions, three live Q&As, and more, for just $14.95. It’s the perfect complement to any other reading or training you may be doing, at a price that’s impossible to beat. Classes start 16 August.

A Book Apart Discount

As if this deal wasn’t great enough, participating in either course earns you a coupon code good for a 20% discount off Jeremy Keith’s HTML5 For Web Designers, the A Book Apart inaugural pub that’s taking the web design world by storm. The discount is good through September 1st. No, you can’t apply it retroactively to a book you’ve already purchased. (So if you’ve already bought the book, buy a second copy—one for home, one for office. Or get it for a friend. Or don’t buy it. What matters is your health. Are you eating enough? You look thin.)

Categories
A Book Apart Authoring HTML HTML5 Web Design Web Design History Web Standards

HTML5 For Web Designers Sells Out

HTML5 For Web Designers, by Jeremy Keith

The first printing of Jeremy Keith’s HTML5 For Web Designers has sold out.

For a book about web forms, semantics, and the history of markup, it’s done pretty well:

  • The book sold 1,000 copies during the first hour of pre-sales.
  • It sold 5,000 copies during the first 24 hours of pre-sales.
  • The first printing sold out within two months.

Haven’t ordered yours yet, and now they’re sold out? Not to worry: a second printing is in the works; orders will ship the week of July 26.

So where’s my book, already?

We ship worldwide. Orders generally ship within 3 days and take 7–10 days to arrive. Some orders take longer, typically because of hold-ups at your local post office, over which we have no control. (Intriguingly, foreign orders shipped quickly, in many cases arriving much sooner than US orders.) We have expedited all remaining shipments to get you your book faster.

We ship via US Postal Service, so no tracking numbers are available.

If you ordered before June 30 and still have not received your order, please be patient a few more days, and thank you for bearing with our learning curve. We know a lot about web design, but we’re still getting the hang of interpreting what mail houses and the US Postal Service mean by “guaranteed fast shipping.”

If you need to speak to someone about your order, write to us.

I want an ebook, not a dead tree! What gives?

Stay tuned; we’re working on ebook versions. Follow @abookapart to learn when they’re released.

Categories
Adobe Code Design development HTML HTML5 The Essentials Tools Web Design Web Standards

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.

Categories
Acclaim Applications apps architecture art direction Authoring Best practices Browsers business Career Code creativity CSS Design development HTML HTML5 Ideas industry interface ipad iphone javascript links maturity Photoshop Platforms Publishing Standards State of the Web Stories The Profession Web Design Web Design History Web Standards

SlideShowPro adds HTML5

Todd Dominey at Happy Cog.

Most of us web folk are hybrids of one sort or another, but Todd Dominey was one of the first web designers to combine exceptional graphic design talent with serious mastery of code.

Being so good at both design and development that you could easily earn a fine living doing just one of them is still rare, although it looks like the future of our profession. One of the first serious designers to embrace web standards, Todd was also one of the few who did so while continuing to achieve recognition for his work in Flash. (Daniel Mall, who came later, is another.)

Finally, Todd was one of the first—along with 37signals and Coudal Partners—to abandon an enviably successful client services career in favor of full-time product development, inspiring a generation to do likewise, and helping bring us to our current world of web apps and startups.

A personal project that became an empire

In Todd’s case, the product was SlideShowPro, a project he designed for himself, which has grown to become the web’s most popular photo and video slideshow and gallery viewer. When you visit a photographer’s portfolio website, there’s an excellent chance that SlideShowPro powers its dynamic photo viewing experience. The same is true for the photo and video gallery features of many major newspaper and magazine sites, quite possibly including your favorites.

SlideShowPro

But deliberate lack of Flash support in the iPad and iPhone, while lauded here on February 1, 2010 as a win for accessible, standards-based design (“Not because Flash is bad, but because the increasing popularity of devices that don’t support Flash is going to force recalcitrant web developers to build the semantic HTML layer first”), presented a serious problem for developers who use SlideShowPro and readers who enjoy browsing dynamic photo and video galleries.

Mr Dominey has now solved that problem:

SlideShowPro Mobile is an entirely new media player built using HTML5 that doesn’t require the Flash Player plugin and can serve as a fallback for users accessing your web sites using these devices. But it’s not just any fallback — it’s specially designed for touch interfaces and smaller screen sizes. So it looks nothing like the SlideShowPro player and more like a native application that’s intuitive, easy to use, and just feels right.

The best part though is that because SlideShowPro Director (which will be required) publishes the mobile content, you’ll be able to provide the mobile alternative by simply updating the Flash Player embed code in your HTML documents. And just like when using the SlideShowPro player, because Director is behind the scenes, all your photos will be published for the target dimensions of these devices — which gives your users top quality, first generation images. The mobile player will automatically load whatever content is assigned to the Flash version, so the same content will be accessible to any browser accessing your web site.

A public beta will be released in the next weeks. Meanwhile, there is a video demo. There’s also an excellent Question and Answer page that answers questions you may have, whether you’re a SlideShow Pro customer or not. For instance:

Why mobile? Why not desktop?

We believe that (on the desktop) Flash is still the best delivery method for photo/video galleries and slideshows for it provides the most consistent user experience across all browsers and the broadest range of playback and customization options. As HTML5 support matures across all desktop browsers, we’ll continue to look into alternate presentation options.

Into the future!

Categories
37signals Acclaim Announcements Appearances Applications apps Authoring Best practices better-know-a-speaker business Chicago client services Code Coudal Partners Design ethics HTML Ideas industry interface Interviews Journalism at its Finest Press Products Publications Publishing Respect Ruby on Rails Small Business State of the Web The Big Web Show The Essentials The Profession User Experience

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

%d bloggers like this: