Categories
A List Apart CSS CSS3 Design Publications Publishing Responsive Web Design spec Standards State of the Web Web Design Web Design History Web Standards

CSS3: Love vendor prefixes, resize full-screen backgrounds

A List Apart Issue No. 309. Illustration by Kevin Cornell.

Learn to love vendor prefixes and create full-screen backgrounds that resize to fit the viewport in Issue No. 309 of A List Apart for people who make websites:

Prefix or Posthack

by ERIC MEYER

Vendor prefixes: Threat or menace? As browser support (including in IE9) encourages more of us to dive into CSS3, vendor prefixes such as -moz-border-radius and -webkit-animation may challenge our consciences, along with our patience. But while nobody particularly enjoys writing the same thing four or five times in a row, prefixes may actually accelerate the advancement and refinement of CSS. King of CSS Eric Meyer explains why.

Supersize that Background, Please!

by BOBBY VAN DER SLUIS

Background images that fill the screen thrill marketers but waste bandwidth in devices with small viewports, and suffer from cropping and alignment problems in high-res and widescreen monitors. Instead of using a single fixed background size, a better solution would be to scale the image to make it fit different window sizes. And with CSS3 backgrounds and CSS3 media queries, we can do just that. Bobby van der Sluis shows how.

Illustration by Kevin Cornell for A List Apart Magazine.

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 Accessibility E-Books Platforms Publications Publishing

So you want to be an epublisher

You scream, I scream, we all scream for epubs. As with all internet bounty, it’s even more exciting to produce than to consume. So after you’ve glutted yourself on all those free Jane Austen novels and children’s books, and gone into hock re-creating your library on iPad, why not give something back by doing a little writing yourself?

What to write about, how to ensure quality, and how to identify and market to an audience are beyond the scope of this little post, but we can point to some dandy resources that tell how to create and test your epub. So let’s go!

Our first two resources come from Adobe and tell how to set up an Adobe InDesign file to produce a proper epub. There are other ways of creating an epub—for instance, you can author it in valid HTML, zip it up, and convert to epub using the BookGlutton API. For many readers of this site, that’s all you need to know.

But if you are a graphic designer or book designer, or if epub is only one format you are publishing to (i.e. if you are publishing traditionally printed books that double as epubs), then the next two resources are exactly what you need:

  1. Exporting epub from InDesign (PDF) – wonderfully compact and helpful
  2. Producing ePub Documents from InDesign – Digital Editions – a bit dry but useful; best viewed via the Readability bookmarklet from our friends at Arc90

Once you have your pub, you want to know that it is valid. Any of the following services will help there:

If the tests identify errors, you’ll need to go back into InDesign, fiddle with settings, re-export, and re-test. Once your epub validates, it’s time to go to market: How to sell your eBook via Amazon and the iBookstore. Good luck, and enjoy!

Categories
A Book Apart Code Design HTML HTML5 Publications Publishing writing

Real Publishers Ship

Jeremy Keith

Yippee! Jeremy Keith’s HTML5 For Web Designers (A Book Apart, 2010) ships Friday.

In this brilliant and entertaining user’s guide, Jeremy Keith tells web designers what they need to know about the web’s new markup language—and the first version of HTML designed for a web of applications, not just documents.

Photo: Jason Santa Maria.


Categories
Design New Riders peachpit Publications Publishing Standards State of the Web Translations Web Design Web Design History Web Standards Zeldman

Web Standards Italian Style

Sviluppare Siti Con Gli Standard Web: Designing With Web Standards, 3rd Edition, Italian translation.

Sviluppare Siti Con Gli Standard Web: Designing With Web Standards, 3rd Edition, Italian translation.

Shop for it.

Prefer English?


Categories
Design downloads E-Books Layout Publishing Standards State of the Web Typography Usability User Experience UX

Battle of the e-Book readers: Stanza vs. iBooks

A Scandal in Bohemia, by Conan Doyle, as viewed in Stanza.

Above, page one of “A Scandal in Bohemia,” the first story in Sir Arthur Conan Doyle’s Adventures of Sherlock Holmes, as seen in Stanza, a free reader for iPad and iPhone. Stanza has a simple interface for finding, buying (and downloading free) e-books.

Stanza lets you control font size and choose from a number of templates offering a useful variety of foreground and background color and contrast. As the screenshot shows, it also lets you set text ragged right, which is the most legible setting for onscreen text.

Below, the same page in iBooks, the reader that comes with iPad. As one would expect from the company that brought us iTunes, the iBooks application has a slick interface for buying (and downloading free) e-books. But as a reader, it is currently less feature-rich, and thus less usable and less pleasing, than Stanza.

A Scandal in Bohemia, by Conan Doyle, as viewed in iBooks.

In iBooks, one cannot turn off full justification. While full justification is lovely in carefully produced printed books, it has a long history of bad aesthetics and poor usability on the screen. Given a sufficiently wide measure, full justification can be used onscreen for short passages, but it is inappropriate for anything beyond a paragraph or two.

Combine full justification with a single high-contrast template, and you have a reader that is better to look at than to read. Indeed, the 1.0 version of iBooks seems more like a flashy demo intended to wow potential iPad purchasers in the store than an application designed to provide book lovers with a viable alternative to print.

One suspects that future upgrades of iBooks will address these concerns. Meanwhile, if you intend to do serious reading on your iPad (or iPhone/Touch), download Stanza for free from the iTunes store.


Addendum: One wonders what will become of Stanza given Amazon’s ownership of the parent company. More here. Best scenario: the Kindle reader incorporates excellent Stanza features, while Stanza continues to operate as an alternative to Kindle, iBooks, et al.


Categories
A Book Apart Collectibles Free HTML5 Publications Publishing

Win A Book Apart

HTML5 For Web Designers

Now through May 27, when you use Gowalla on your iPhone, Android, Blackberry, Palm Pre, or iPad to discover and share places with your friends, you might win a copy of Jeremy Keith’s HTML5 for Web Designers.

How it works couldn’t be simpler. If you aren’t already a player, download Gowalla. Then, when using Gowalla to check into a location, if you find the HTML5 for Web Designers book item, just add it to your collection. On Thursday, May 27, ten random people who picked up copies of the item will be chosen to receive the actual book.

Happy hunting and good luck!


Categories
Announcements Applications Code Design development editorial Education HTML HTML5 industry Jeremy Keith Publications Publishing Web Design Web Design History Web Standards Zeldman

HTML5 For Web Designers

HTML5 For Web Designers, by Jeremy Keith.

WHEN MANDY BROWN, Jason Santa Maria and I formed A Book Apart, one topic burned uppermost in our minds, and there was only one author for
the job.

Nothing else, not even “real fonts” or CSS3, has stirred the standards-based design community like the imminent arrival of HTML5. Born out of dissatisfaction with the pacing and politics of the W3C, and conceived for a web of applications (not just documents), this new edition of the web’s lingua franca has in equal measure excited, angered, and confused the web design community.

HTML5 For Web Designers

Win free copies of HTML5 For Web Designers on Gowalla!

Just as he did with the DOM and JavaScript, Jeremy Keith has a unique ability to illuminate HTML5 and cut straight to what matters to accessible, standards-based designer-developers. And he does it in this book, using only as many words and pictures as are needed.

The Big Web Show

Watch Jeremy Keith discuss HTML5 with Dan Benjamin and me live on The Big Web Show this Thursday at 1:00 PM Eastern.

There are other books about HTML5, and there will be many more. There will be 500 page technical books for application developers, whose needs drove much of HTML5’s development. There will be even longer secret books for browser makers, addressing technical challenges that you and I are blessed never to need to think about.

But this is a book for you—you who create web content, who mark up web pages for sense and semantics, and who design accessible interfaces and experiences. Call it your user guide to HTML5. Its goal—one it will share with every title in the forthcoming A Book Apart catalog—is to shed clear light on a tricky subject, and do it fast, so you can get back to work.


4 May 2010
Jeffrey Zeldman, Publisher
A Book Apart “for people who make websites”
In Association with A List Apart
An imprint of Happy Cog

The present-day content producer refuses to die.

And don’t miss…

Categories
Authoring books Community Compatibility content Design development E-Books editorial ipad iphone Kindle Layout Publications Publishing Tools Touchscreen type Typography webfonts

More Mod on the Digital Book

Embracing the Digital Book by Craig Mod.

A Reading Heatmap: Key passages illuminated by layering all readers’ highlights for the same text.

LAST MONTH, he wowed us with Books in the Age of the iPad, a call to make digital books as beautiful as printed ones. This month, Craig Mod is back with Embracing the Digital Book, an article (or blog post if you must) that begins as a critique of iBooks and Kindle and moves on to discuss the e-reader of our dreams, complete with reasoned social features:

I’m excited about digital books for a number of reasons. Their proclivity towards multimedia is not one of them. I’m excited about digital books for their meta potential. The illumination of, in the words of Richard Nash, that commonality between two people who have read the same book.

We need to step back for a moment and stop acting purely on style. There is no style store. Retire those half-realized metaphors while they’re still young.

Instead, let’s focus on the fundamentals. Improve e-reader typography and page balance. Integrate well considered networked (social) features. Respect the rights of the reader and then — only then — will we be in a position to further explore our new canvas.

Embracing the digital book — Craig Mod


Categories
Acclaim Formats Publications Publishing SXSW

Should Publishers Attend SXSW?

In Should Publishers Attend SXSW?, Lorraine Shanley of Publishing Trends answers her own question this way:

Yes, because sxsw offers a chance to see options for the future—amazing gaming, interactive software, inventive marketing, creative content development and deployment. But as Will Schwalbe … said, “If publishers come to sxsw to create their own sessions track, they’ll learn nothing. If they come to attend panels on subjects about which they know nothing, they’ll learn an enormous amount.”

The PDF version of the April issue includes additional SXSW coverage (with nice things said about our panel and A Book Apart), data on how different generations find books, search engine conversion strategies, and more.

Download PDF.

Categories
content content strategy Marketing Publications Publishing

Content wants to be paid for

Content wants to be free like communism works, like sex is just for fun, like a few days of snow disprove global warming. That the web’s existence makes all content free is a Brooklyn Bridge most of us have bought, but it just ain’t true, as Erin Kissane makes clear in Content is Expensive at Incisive.nu.

Go there, read it, and understand why (just like newspaper reporting and books) web content costs money and must be paid for or subsidized. Either that or it must serve some secondary benefit that brings in the bucks: for instance, a free web design blog might lead to paying web design gigs for its author, or so they say.

Then read Part Two: Paying For It, where Kissane considers each of these methods of subsidizing content “and how they relate to our work as content and editorial strategists.”

(Of course there will always be web content that is purely a labor of love. That is why we love the web. And it’s kind of sad, quite frankly, that you almost can’t write “Shit My Dad Says” or create a LOLcats page purely out of love any more; that even stuff tossed off as a laugh ends up being “monetized.” By the way, whoever came up with that word should be deathetized by beatingization. But I digress.)

Categories
A List Apart content strategy data Publications Publishing Stats

A List Apart: Just the Stats

Continuing with our “data, and what we can learn from it” theme, here are A List Apart‘s four most popular individual pages this week (excluding the home page, with 178,270 page views). Pay particular attention to the publication dates:

Article Page Views This Week
Flash and Standards: The Cold War of the Web by Daniel Mall, MARCH 9, 2010 41,035
Drop-Down Menus, Horizontal Style by Nick Rigby, JUNE 29, 2004 40,683
CSS Design: Taming Lists by Mark Newhouse, SEPTEMBER 27, 2002 37,867
[Articles Index Page] 34,630

What do these stats tell us?

For one thing, they tell us that for every reader who viewed A List Apart as a topical periodical publication—that is, for each person who read one of its latest articles—there were two readers who used the magazine as a source of evergreen web design and development content.

Put another way, for every person who uses A List Apart like a magazine or blog, there are two who use it as an encyclopedia of best practices in coding and design.

We’re looking at only seven days worth of statistics, here, but the pattern is consistent from week to week. What it tells the editors is that we’re not in the quick-hit eyeballs and ad sales business (but we knew that), we’re in the professional education business. It reminds us, if we needed reminding, that the mission stated on our Contribute page is still true:

We want to change the way our readers work, whether that means introducing a revolutionary CSS technique with dozens of potential applications, challenging the design community to ditch bad practices, or refuting common wisdom about, say, screen readers.

As we go about soliciting and reviewing potential ALA content, we must keep uppermost in our minds how people use our site, because its value lies in the hardiness of our best articles. Web professionals trust us to have the information they need to do their jobs better and deliver the best possible experience to their clients’ customers (and thus the best value to their clients). These stats reinforce what we already know, and help us stay true to our core purpose and values.

This emphasis on the evergreen over the topical also helps us as we strategize means of deepening our relationship with the web design community and add or change features to do so.

I’m barely scratching the surface of what the data tells us, but the little I have teased out so far is already very useful—and that’s the point. The more you look, the more you can learn. What’s in your logs?


Categories
"Digital Curation" Advocacy Authoring books business Community content content strategy copyright creativity Culture Curation Damned Fine Journalism democracy Design downloads E-Books Education ethics glamorous Google Ideas industry Little People Luls Microauthoring Publications Publishing Respect social networking Standards State of the Web The Essentials The Profession theft writing

Crowdsourcing Dickens

As an experiment in new new media thinking, I recently crowdsourced a new new literature version of Charles Dickens’s musty old old old lit chestnut, Great Expectations—the familiar tale of Pip, Ms Havisham, the convict Magwitch, et al.

Creative excellence and spin-worthy results required a pool of 10,000 people who had never read Great Expectations. Fortunately, I had access to 10,000 recent American college graduates, so that was no problem.

To add a dab of pseudoscience and appeal obliquely to the copyleft crowd, I remixed the new work’s leading literary themes with the top 20 Google search queries, using an algorithm I found in the mens room at Penn Station.

The result was a work of pure modern genius, coming soon to an iPad near you. (Profits from the sale will be used to support Smashing Magazine’s footer and sidebar elements.)

Gone was the fusty old title. Gone were the cobwebbed wedding cake and other dare I say emo images. It was goodbye to outdated characters like Joe the blacksmith and the beautiful Estella, farewell to the love story and the whole careful parallel between that thing and that other thing.

Gone too was the tired old indictment of the Victorian class system, and by implication of all economic and social systems that separate man from his brothers in Christ, yada yada. As more than one of my young test subjects volunteered in a follow-up survey, “Heard it.”

In place of these obsolete narrative elements, the students and the prioritized Google searches created, or dare I say curated, a tale as fresh as today’s algorithmically generated headlines.

The results are summarized in the table below.

Old Great Expectations New Great Expectations
On Christmas Eve, Pip, an orphan being raised by his sister, encounters the convict Magwitch on the marshes. n/a
The convict compels Pip to steal food from his sister’s table, and a file from her husband the blacksmith’s shop. Pip thereby shares the convict’s guilt and sin—but his kindness warms the convict’s heart. Guy on girl
Pip’s sister, Mrs. Joe, abuses him. Her husband loves Pip but is unable to protect him or offer him a future beyond blacksmithing. Girl on girl (multiple entries)
Pip meets Miss Havisham, an old woman abandoned on her wedding day, who sits in her decrepit house, wearing a yellowing wedding gown, her only companion the beautiful and mysterious girl Estella. Pip falls in love with Estella, but Miss Havisham has trained the girl to break men’s hearts. Guy on guy
Pip visits Miss Havisham until his apprenticeship with Joe the blacksmith begins. Pip hates being a blacksmith and worries that Estella will see him as common. Two girls, one guy
Mrs Joe suffers a heart attack that leaves her mute. A kind girl named Biddy comes to take care of Mrs Joe. After Mrs Joe’s death, Biddy and Joe will marry. Meanwhile, Pip comes into an unexpected inheritance and moves to London, where he studies with a tutor and lives with his friend Herbert. Dragons
Pip believes Miss Havisham is his benefactor and that she intends him to marry Estella, whom he still adores. Day by day, Estella grows more cruel. Pip never tells her of his love for her. Wizards
One stormy night, Pip discovers that his benefactor is not Miss Havisham but the convict Magwitch. The news crushes Pip, but he dutifully allows Magwitch to live with him—worrying, all the while, because Magwitch is a wanted man who will be hanged if discovered. Explosions
Miss Havisham repents having wasted her life and perverted Estella. She is caught in a fire. Pip heroically saves her but she later dies from her burns. Soon afterwards, Pip and Herbert try to help Magwitch escape, but Magwitch’s old enemy Compeyson—who happens to be the man who abandoned Miss Havisham at the altar—betrays Magwitch to the authorities. Magwitch and Compeyson struggle. Compeyson dies and Magwitch is taken to prison. Gunfights
Pip now realizes that Magwitch is a decent man and tries to make Magwitch’s last years happy ones. He also discovers that Magwitch is Estella’s father. Magwitch dies in prison shortly before he was to be executed. Pip tells the dying Magwitch of his love for Estella. Fistfights
Pip becomes ill and is nursed back to health by Joe, whom Pip recognizes as a good man in spite of his lack of education and “class.” Pip goes into business overseas with Herbert. Eventually he returns to England and visits Joe, who has married Biddy. They have a child named Pip. As the book ends, the middle-aged Pip makes one last visit to Miss Havisham’s house, where he discovers an older and wiser Estella. There is the implication that Pip and Estella may finally be together. Anal
Categories
Design links Publications Publishing

Book By Its Cover

Book By Its Cover is a glorious new blog devoted to the beauty of books.