Categories
Blue Beanie Day books Browsers creativity CSS CSS3 Design Designers DOM DWWS E-Books editorial Happy Cog™ HTML HTML5 Ideas industry tweets twitter Voting W3C Web Design Web Design History Web Standards webtype XHTML Zeldman

Blue Beanie Day Haiku Contest – Win Prizes from Peachpit and A Book Apart

ATTENTION, web design geeks, contest fans, standards freaks, HTML5ophiles, CSSistas, grammarians, bookworms, UXers, designers, developers, and budding Haikuists. Can you do this?

Do not tell me I
Am source of your browser woes.
Template validates.

Write a web standards haiku (like that one), and post it on Twitter with the hashtag #bbd4 between now and November 30th—which happens to be the fourth international Blue Beanie Day in support of Web Standards.

Winning haikus will receive free books from Peachpit/New Riders (“Voices That Matter”) and A Book Apart.

Ethan Marcotte, co-author of Designing With Web Standards 3rd Edition and I will determine the winners.

Enter as many haikus as you like. Sorry, only one winning entry per person. Now get out there and haiku your heart out!

See you on Blue Beanie Day.

P.S. An ePub version of Designing With Web Standards 3rd Edition is coming soon to a virtual bookstore near you. Watch this space.

Categories
Accessibility Adobe Advocacy Apple Applications apps architecture art direction Authoring Best practices business development E-Books editorial Flash Formats Free Advice glamorous HTML HTML5 industry ipad iphone Publications Publishing Responsibility Standards State of the Web The Essentials W3C Web Design Web Design History Web Standards

iPad as the new Flash


Jeffrey Zeldman Presents

iPad. Never have so many embraced a great product for exactly the wrong reasons.

Too many designers and publishers see the iPad as an opportunity to do all the wrong things—things they once did in Flash—without the taint of Flash.

In the minds of many, the iPad is like Flash that pays. You can cram traditional publishing content into an overwrought, novelty Flash interface as The New York Times once did with its T magazine. You may win a design award but nobody will pay you for that content. Ah, but do the same thing on the iPad instead, and subscribers will pay—maybe not enough to save publishing, but enough to keep the content coming and at least some journalists, editors, and art directors employed.

It’s hard to argue with money and jobs, and I wouldn’t dream of doing so.

Alas, the early success of a few publications—publications so good they would doubtless survive with or without iPad—is creating a stampede that will not help most magazines and interfaces that will not please most readers.

Everything we’ve learned in the past decade about preferring open standards to proprietary platforms and user-focused interfaces to masturbatory ones is forgotten as designers and publishers once again scramble to create novelty interfaces no one but them cares about.

While some of this will lead to useful innovation, particularly in the area of gestural interfaces, that same innovation can just as readily be accomplished on websites built with HTML, CSS, and JavaScript—and the advantage of creating websites instead of iPad apps is that websites work for everyone, on browsers and devices at all price points. That, after all, is the point of the web. It’s the point of web standards and progressive enhancement.

Luke Wroblewski’s Touch Gesture Reference Guide gives designers plenty of ammunition to create dynamic user experiences that work on a wide variety of mobile phones and devices (including iPad) while these same sites can use traditional desktop browser effects like hover to offer equally rich experiences on non-touch-enabled browsers. Unless your organization’s business model includes turning a profit by hiring redundant, competing teams, “Write once, publish everywhere” makes more economic sense than “Write once, publish to iPad. Write again, publish to Kindle. Write again, publish to some other device.”

I’m not against the iPad. I love my iPad. It’s great for storing and reading books, for browsing websites, for listening to music and watching films, for editing texts, presentations, and spreadsheets, for displaying family photos, and on and on. It’s nearly all the stuff I love about my Mac plus a great ePub reader slipped into a little glass notebook I play like a Theremin.

I’m not against iPad apps. Twitterific for iPad is by far the best way to use Twitter. After all, Twitter is really an internet service, not a website; Twitter’s own site, while leaps ahead of where it used to be, is hardly the most useful or delightful way to access its service. Gowalla for iPad is my constant companion. I dread the idea of traveling without it. And there are plenty of other great iPad apps I love, from Bloom, an “endless music machine” by Brian Eno and Peter Chilvers, to Articles, which turns Wikipedia into an elegant reading experience, to Mellotronics for iPad, an uncannily accurate Mellotron simulator packed with 13 authentic voices—“the same production tapes featured on Strawberry Fields Forever” and other classic tracks (not to mention tracks by nouveau retro bands like Eels).

There are apps that need to be apps, demand to be apps, and I admire and learn from them like every other designer who’s alive at this moment.

I’m just not sold on what the magazines are doing. Masturbatory novelty is not a business strategy.

Categories
Accessibility Adobe Advocacy Apple Applications apps architecture Authoring Best practices Browsers business Code content strategy CSS3 Design Designers development editorial Happy Cog™ HTML HTML5 industry javascript Platforms Publications Publishing Real type on the web Standards State of the Web The Essentials The Profession W3C Web Design Web Design History Web Standards webfonts webtype Zeldman

The future of web standards

Jeffrey Zeldman on the future of web standards.

“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?”

The Future of Web Standards by Jeffrey Zeldman

Originally written for .net magazine, Issue No. 206, published 17 August in UK and this month in the US in “Practical Web Design” Magazine. Now you can read the article even if you can’t get your hands on these print magazines.

See also: I Guest-Edit .net magazine.

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 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
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 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
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

Categories
A Book Apart A List Apart Accessibility An Event Apart Design industry interface Interviews ipad iphone people tbws The Big Web Show User Experience Zeldman

Episode 9: Web Standards

Today at 1:00 PM EDT, join Dan Benjamin and me live as we interview designer, developer, author, lecturer, and bon vivant Ethan Marcotte (bio | blog | Twitter) for Episode 9 of The Big Web Show.

Ethan is the author of an upcoming A Book Apart treatise on responsive web design; my co-author on Designing With Web Standards 3rd Edition; and the co-author with Dan Cederholm of Handcrafted CSS: More Bulletproof Web Design.

Join us for a lively discussion as we talk about designing and coding for the likes of the Sundance Film Festival and New York Magazine, and the joys of responsive web design, working remotely, and swearing profusely on Twitter. We may even get Ethan’s take on Microsoft’s dazzling new IE9.

As always, watch and participate in the live broadcast by tuning to live.5by5.tv at the appointed time.

A few hours after the taping, the permanent, edited video and audio podcast will be available for your bliss at 5by5.tv/bigwebshow/9 and via the iTunes Store (iTunes audio feed | iTunes video feed).

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.

Categories
Browsers Curation Design industry Web Design Web Design History

Bit o’ nostalgia for the old folks

Thanks, Mr Sippey!


Categories
Advertising bugs Google Images industry Microblogging war, peace, and justice

When Ads by Google Go Wrong

When Ads By Google Go Wrong

When Ads by Google Go Wrong


Categories
Community Design industry Micropublishing twitter

Twitter Top 140

“Here it is, our next Web Trend Map. No Metro lines, no URLS. This time, it’s the 140 most influential people on twitter, sorted by #name #handle #category #influence #activity. Plus: When they started tweeting and what they first said. …”

Where does the data come from?

“We analyzed the data in our Web Trend Engine (30gigs), got a sneak peek into the top 100 list from the Max Planck Institute PDF Twitter research team (200KB), we talked to Twitter directly, and we asked our audience to make sure that we get international tweeters in there as well.”

iA » Cosmic 140—Final Beta

%d bloggers like this: