Categories
A List Apart content content strategy CSS Design HTML Ideas industry Information architecture javascript Standards State of the Web Web Design

ALA 313: CS, CMS, H&J, OK!

Issue No. 313 of A List Apart, for people who make websites.

In Issue No. 313 of A List Apart for people who make websites: Better content management systems start with content strategy; typographically beauteous web pages may benefit from hyphenation and justification.

Strategic Content Management

by JONATHAN KAHN

Any web project more complex than a blog requires custom CMS design work. It’s tempting to use familiar tools and try to shoehorn content in—but we can’t select the appropriate tool until we’ve figured out the project’s specific needs. So what should a CMS give us, apart from a bunch of features? How can we choose and customize a CMS to fit a project’s needs? How can content strategy help us understand what those needs really are? And what happens a day, a week, or a year after we’ve installed and customized the CMS?

Published in: Content Strategy

The Look That Says Book

by RICHARD FINK

Hyphenation and justification: It’s not just for print any more. Armed with good taste, a special unicode font character called the soft hyphen, and a bit o’ JavaScript jiggery, you can justify and hyphenate web pages with the best of them. Master the zero width space. Use the Hyphenator.js library to bottle fame, brew glory, and put a stopper in death. Create web pages that hyphenate and justify on the fly, even when the layout reflows in response to changes in viewport size.

Published in: Layout, Typography


Illustration by Kevin Cornell for A List Apart

Categories
A List Apart Accessibility Amazon Apple art direction Authoring Best practices books Browsers Code Compatibility Design E-Books Formats HTML industry Layout Site Optimization The Essentials Touchscreen Web Design Web Design History Web Standards webkit zeldman.com

My other iPad is a Kindle

Zeldman.com as seen on Kindle

The new Kindle has a lot going for it. It’s inexpensive compared to a full-featured tablet computer like the iPad; you can slip it in your back pocket, where it’s more comfortable than an old-style paperback; and it includes a Webkit browser. This last point is where folks like us start to give a hoot, whether we’re fans of epub reading or not.

The flavor of Kindle’s browser concerns us because it affords us the ability to optimize the mobile viewing experience with a single line of markup. You can see this in action in the photo at the head of this article (published and discussed on Flickr).

I made no tweaks for Kindle per se; the Kindle is simply responding to a line of markup I’ve been putting into my web pages since 2007—namely, the viewport meta element, which controls the width of the viewport, thus enabling mobile devices with a limited number of pixels to focus all available pixels on your site’s core content (instead of, for instance, wasting part of the small screen on a background color, image, or gradient). The technique is as simple as web design gets:

meta name="viewport" content="width=770"

(Obviously, the value of “width” should be adjusted to match your site’s layout.)

I learned this little trick from Craig Hockenberry’s Put Your Content in My Pocket (A List Apart, August 28, 2007), which I naturally recommend to any designer who hasn’t seen it.

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.