The Colorzilla gradient editor is a visual gradient editor like you might find in Photoshop or Pixelmator. Once you’ve specified your gradient, you see an HTML preview plus CSS style rules to create that gradient in modern browsers, and a reasonable approximation using IE’s filter syntax.

Click and draggy

A new checkbox toggles IE 9 support. Selecting this option includes a base64 encoded SVG background image along with the rest of the browser gradient definitions. In order for this to work properly it is necessary to include an IE9 specific style rule (in a conditional stylesheet) which disables the filter definition for legacy versions of IE. An example of this style rule is included in the application.

Click the box for IE 9 support

I have to confess that I’ve been using this tool in lieu of my own script. There are a few reasons.

Pros

Having the SVG definition pre-built and available right in-line removes dependencies on JavaScript and means there’s no extra HTC file to keep up with. Additionally, since there’s no scripting involved, there’s no possibility of collisions with your any scripting in your application.

If one wanted, one could just use the SVG definition and remove all the other gradient definitions (except of course the filter rule). Any browser which supports CSS3 gradients will support an SVG background image. This would let you clean out redundant, browser specific style rules in all your gradient styles.

This technique is reasonably future proof, as it uses standard HTML and a standard SVG. If IE 10 fails to support gradients, this technique will still work.

I have no idea if my HTC script will work on the new mobile IE on Windows Phone 7and (hypothetically) Windows 8. (If someone wants to give me a free Windows Phone, I’ll be happy to test.)

Cons

If you’re using CSS3 gradient definitions, it’s technically possible to tweak or edit them “by hand” without using a special tool. To make any changes to an encoded SVG image you’ll either have to decode, edit, and re-encode or you’ll have to create a new image from scratch. If you’re using a tool like the Colorzilla gradient editor, this isn’t a huge problem – but it’s still an extra step.

Since the SVG gradient is encoded inline in the main stylesheet, all browsers must download this image whether they use it or not. So in a way you’re punishing all users for IE 9’s sins. My dynamic solution targets IE 9 specifically.

It is possible that one day this tool will simply disappear. If that happens, then designers and developers might be scrambling for a replacement.

I recommend

I recommend using Colorzilla’s tool over my script for supporting IE 9 gradients. In practice, I find it’s simply far easier for me to just define a gradient and copy/paste the generated CSS into mine, and follow up with a little clean up once the design is settled.

I’m happy with my script, and there may be cases where it’s preferred (smaller download sizes, targeting only modern desktop browsers, etc) but I think the Pros of using Colorzilla’s tool outweigh the Cons.

Without a winking smiley or other blatant display of humor, it is impossible to create a parody of fundamentalism that someone won’t mistake for the real thing.

This article “Typekit: Remaking the Matrix” was linked around yesterday by people I respect.

A lot of dumb things are published on the internet, and generally, I like to let stupid dogs lie. But this was so blisteringly dumb and so arrogantly offensive I could not leave it be.

I am unsure if the piece is serious. It could very well be a masterful satire, but I really can’t tell. The rest of the blog doesn’t look like satire, the blog which links to the piece doesn’t treat it as satire, the comment section of the piece seems to be serious, but none of that means it isn’t a satire. I hope it’s a satire.

After a long digression and some fawning over Typekit and Apple, the author gets to his point.

But what if giving is only half of what Typekit could do to remake the web? What if they did something never attempted in the font world?

I’m talking about taking away ugliness.

And a paragraph later…

In the same way, I am proposing that Typekit buy a typeface for the purpose of taking it off the market.

He is suggesting that Typekit buy the typeface Comic Sans only to destroy it. This will, apparently, make the world a better place.

He outlines a specific plan for eliminating Comic Sans from the earth by beginning with the following.

Buy the exclusive rights to mediocre fonts of bygone times (Comic Sans, in this example, but also think Arial, Papyrus, Curlz, Jokerman … anything that would send small churches scrambling for replacements for their weekly announcements) and take them out of commission for good. This would effectively ban computer companies from including them in their operating systems going forward, thus ridding culture of some of its typographic mediocrity.

The days of small churches oppressing us all with their poorly designed newsletters will finally be over.

A quick defense of Comic Sans

Comic Sans was designed to be used in software for children, and it’s entirely appropriate for that purpose. If you have a cartoon character teaching you about the alphabet, you don’t have the cartoon character speak in Helvetica.

Besides, there is no font more laden with irony.

You mad bro?

Comic Sans is a light-hearted, jokey typeface intended for small blocks of text in casual contexts. For children. The problem comes in when people use Comic Sans in inappropriate settings or in inappropriate ways. The coworker who writes all email in Comic Sans all the time, or the administrative assistant who pens a company-wide memo in Comic Sans are common examples of Comic Sans done wrong. In the first case, you just roll your eyes quietly at your desk and delete the email. In the second case, a learning opportunity has presented itself.

The problem of misuse is not unique to Comic Sans. I worked with an architect years ago who preached a “Helvetica” mentality. All Helvetica. All the time. For everything. Kids fresh out of design school, especially after seeing the great Helvetica documentary, have the same problem. Corporations are lazy and conservative and use Helvetica for everything as well. People love Helvetica. To death.

The problem with burning books, is you can’t ever be sure you’ve burned them all.

If you overlook the morally abhorrent idea of buying a piece of culturally significant design work and destroying it so no others can use it again – there’s a bit of a practical problem with the author’s scheme.

Destroying one “bad” typeface in no way ensures that people won’t just use another bad typeface. The author himself links to alternatives for Comic Sans that are “better”. Whether or not these are actually better is irrelevant. If Comic Sans is removed and replaced with another casual typeface, what will prevent the church ladies from overusing and abusing that typeface? Will removing Comic Sans prevent interns from sending memos in Marker Felt?

Clearly destroying Comic Sans is not enough. All casual fonts must either be destroyed or placed under close scrutiny, to be used only by design professionals who have passed through several stages of review and approval.

It’s not for sale

Comic Sans is owned by Microsoft. The author’s scheme has Typekit purchasing “exclusive rights” to Comic Sans for somewhere between one and ten million dollars. From the “Counterarguments” (read: straw men) section of the article:

Yes, it will cost maybe between one and ten million to make it worth a company’s while to take just one typeface off the market.

Comic Sans is in use on a huge number of computers, both Macs and Windows PCs and probably a fair number of mobile devices as well.

Some googling tells me that there are approximately 1 billion Windows PCs in the world today. If the license fee collected for Comic Sans was 1¢ for each copy of Windows, that would be the author’s max $10,000,000 asking price. This doesn’t include Macs, Windows Mobile Devices, or other licensees. I’m pretty sure Microsoft plans to continue selling Windows. Why would they give this money fountain away, especially to someone who intends to destroy it?

I imagine the founder of Typekit strolling into the Redmond campus of Microsoft, handing a giant cartoon sack of money to Steve Balmer who concedes “well, we don’t really want to sell the rights to our intellectual property, but you do have a giant sack of money so I guess we have to”.

Portrait of the author

What kind of company is Typekit anyway?

The author appears to be very fond of Typekit. I am too. They do great work and they deserve heaps of praise and some of your web-design budget.

At the end of the article the author writes:

Getting rid of Comic Sans would be big. This act of removal would distinguish Typekit as a company willing to put themselves on the line for excellence and beauty. In a very real way, they would be remaking the world.

In a very real way, Typekit would be putting themselves out of business. This silliness betrays the author’s fundamental misunderstanding of what Typekit does.

In the past few years all major web browsers have enabled support for embeddable typefaces. So, much like the way a web page can include a picture, a web page can now specify the exact typeface(s) to be used. This means you can have a professionally typeset web page. Like pictures, typefaces are linked to web page and downloaded for use in displaying the page. It works really well.

The problem with this is digital typefaces are tiny software programs which are licensed by publishers (often called foundries in a throwback to the old days when type was made of cast lead). When you view a web page on your computer, your computer downloads a copy of everything (more or less) used to build that web page. If a licensed typeface is attached to the web page, you now have an unlicensed copy of that typeface. Congratulations, you’re a pirate!

Typeface publishers make money by licensing their typefaces – so they were understandably not to thrilled with the idea of people slapping an $800 typeface up on the web to be downloaded by anyone. Typekit came along and invented a reasonably secure way to deliver typefaces to web pages so that they can’t be easily pirated. Typeface publishers license typefaces to Typekit, who then licenses typefaces to web designers or companies or whomever.

Typekit is a service provider and a middle man. They provide technical expertise and a means for typeface publishers to satisfy customer demand without sacrificing control of their intellectual property.

For clarity: Typekit provides a mechanism to secure intellectual property, not destroy it.

So. Now imagine that Typekit, which has earned all this good will in the industry, has the faith of major type publishers, and the praise of wed developers everywhere, now chooses to seek out and destroy a typeface. What does a typeface publisher think in this situation? Do they think “well, I hate Comic Sans too” or do they think “these guys can’t be trusted”?

Hint: It’s the second one.

The author includes this false equivalency in the comments beneath the article.

Typekit has even gone so far as to make display faces unavailable for paragraphs in the Customize section of WordPress — they won’t let you use an inappropriate face for your needs. Really now, how different is that from what I have suggested here?

Really. How is quality control of software and service any different from permanently destroying a bit of culture so that no one else may use it appropriately, well, or otherwise.

This kind of thinking is how gated communities are born.

Accentuate the positive.

Instead of assuming the author aspires to be an amoral design autocrat, I choose to assume that the article is a work of satirical genius. That the author is a modern day Swift for the design community. To seriously suggest a business destroy itself by buying up a typeface, only to destroy it, for the purpose of protecting the world from its misuses — hilarious.

I say bravo.

Architecture firm – ai3 – has remodeled their office to look like the interior of a television space ship. Fancy.

2001 A Space Odyssey + Star Trek = ai3′s SuperGroup Office – Core77.

If you’re using a modern browser, try resizing your browser window to roughly the size of an iPhone. The layout will reformat based upon the screen size. This is a super neat-o method to deliver a website to desktop and mobile users without having to develop two different sites. Clever.

http://kilianvalkhof.com/2010/css-xhtml/how-to-use-rgba-in-ie/

Editions will integrate somewhat with your Facebook account and your iCal calendar to present a quick “week ahead” view in each edition. This is an odd feature and it seems tacked on. Facebook junkies will simply go to Facebook before loading some other app. Likewise, if someone actively schedules their life with the calendar app, they’ll open that before reading the news. I believe the idea is to have each digital magazine seem as if it were made just for me, as if a publisher went to the trouble of personalizing a print magazine for me. It doesn’t come across that way though. The app is just reading the calendar database and hitting Facebook’s api. This is not welcome nor useful. The app also supports sharing links to articles via Facebook, Twitter, etc. as you would expect.

The app is very similar to Flipboard in terms of layout, design, and function. Like “lawsuit” similar. Articles are algorithmically laid out into boxes with headlines, and an image from an article is dropped onto the page. The app is handsome, but the “it looks just like a magazine, but it’s digital!” design approach is tiresome.

Rich mahogany pixels

Curation

When you first launch the app you customize the look of the “magazine” by choosing a masthead color, default sections to appear in your magazine, and font size. Then the app builds up a collection of article links, summaries, and headlines including some images from each source. Most articles are a summary with a tappable headline which links to the main article in an in-app web view (more on this later). Some articles are “features” which means the full article is available in-app to read. Both linked summaries and full articles may be shared or curated.

Launching the full web view of a feature article or summary reveals a curation toolbar above the web page. The toolbar has these sort of clickable “tag” widgets – very much like how some blogs “tag” posts with single word descriptors which link up similar posts. Each tag widget has a check mark (I like this) and an X button (I don’t like this). Clicking the check tells the app “more like this please” and clicking the X tells the app “no thank you”. These ‘votes’ are considered the next time the app auto generates an edition. These features seem to work well, as I’ve seen no more articles about that British woman named Kate and the boy she’s marrying.

Curation controls

In addition to topic tags, the source of the article (e.g. the website) can be checked or X’ed and similarly the app will either ignore that source in the future or include more from that source in the future.

Reading experience

Browsing through a magazine within the app works well enough. Swiping between pages is responsive. Tapping a persistent tab at the bottom of the screen reveals controls and settings. Two navigation controls allow browsing quickly between sections and articles. The application only supports portrait orientation, which I think is fine for a reading focused app. Most reading apps with a landscape orientation have a wonky two or three column layout that is not well suited for reading.

Edition’s featured articles have a strange user interface. Instead of breaking the article over several virtual pages, the article has a sub-window which holds the full text of the article. If you swipe left and right on the text, the article advances a ‘sub page’ – if you swipe left and right on the title of the article, the page changes. If you are swiping sub-pages, and reach the end of the sub-pages, then the page changes. This is more than a little awkward. You can be paging through the application, only to find yourself “stuck” on a feature article.

Sub page scrolling

Linked article summaries open in a web view with curation controls, as I mentioned above. This works reasonably well, though the animation of the controls (opening and closing the “drawer” the sit on) is sluggish to move and slow to respond. The web view sits under this drawer. Even when closed the web page feels cramped and too small.

Clicking links within this web view opens yet another web view on top of this web view, this time with a thin black control bar. If you tap “Close” both web views are closed and you return to the magazine page you were on. If you tap the “back” button, the original web page opens in the new web view. Basically if you click a link in an article, there’s no way to get back to the curated web view without starting over.

What do I do here?

Reeder web view

Compare this to the simple inline web view in an app like Reeder. It’s clear in Reeder which control takes you back to your RSS feed, which controls navigates the web pages you are currently viewing, and which controls take you out of the app. Partly this is because Reeder uses more standard iPad controls, so it’s more consistent with other apps on the device. But more so it is because the controls are just laid out clearly intelligently (e.g. the ‘return to rss feed arrow’ is on the left, closest to where you came from).

Conclusions

Meh.

This app suffers from the same problems as most magazine apps have. Wonky navigation, slavish devotion to simulating a paper magazine, and bolted on ‘interactive’ features. There are some steps in the right direction though. The relatively small download size is welcome. Compared to a Kindle or iBooks eBook, it’s still painfully slow, but it’s far better than the 400MB mega magazines from Conde Naste. Since all the text is gathered from the web and not a digital picture of text, it’s generally responsive and fast. For some reason they’ve disabled text selection in ‘browse’ view, but you can select and copy text when viewing an article in the inline web view.

I haven’t done enough reading to honestly say how well the curation feature will work long term – but I think it’s a smart idea and has potential. One of the accidental features of a real magazine or newspaper is the serendipitous opportunity to stumble into an article or topic you might not have otherwise. The way this app goes out and finds stuff for you to read brings that opportunity to web browsing, and that’s interesting. But I don’t know if it’s better than following a community website like Metafilter or Reddit where random contributors contribute randomly (brought to you by infinite internet monkey solutions).

There seems to be no way to delete editions after they are downloaded. I’ve used the app off and on for four days, and I have four ‘editions’. I’m not sure if the app automatically deletes them after a while or if they just continue to pile up. Does it stop at 7? 30? Never? Will my iPad eventually only contain Editions by Aol?

The app is a free download; the content is free; one can only assume they will start filling the app with advertising or selling user’s browsing data and zip code to marketers.

Editions is a Flipboard knock-off that doesn’t work as well as Flipboard nor does it replace an RSS app. It gets in the way of reading the web more than it encourages it. It’s possible that over time their curation algorithm will become fantastic and it will be worth a second look.

Then go read this: Until Gotham No Longer Needs Batman

I’ve worked on similar ends of both points of view and both articles make valid points. I would only add two:

1. Not everyone can or should run their own business.
2. Not everyone wishes to run their own business.

The styling is minimal. The only UI elements that are boldly colored are ones that require a mouse click. Everything else is either grey or subtly colored. This emphasizes user content over everything else, making it far more pleasant to read compared to facebook or twitter’s web site (I tend to read twitter using the Twitter client for Mac or iPad, or Tweetbot on the iPhone).

One thing that stands out though is that Google+ (from now on I’m typing that as G+ because I’m lazy and I want to start a trend of laziness) is that privacy control is baked right into the interface in a very user centered fashion. Facebook, in comparison, hides privacy settings, beyond facebook’s preferred defaults, behind a byzantine set of user operations.

Sharing content

Post visibility is visible when you post.

In G+ when you share something, the visibility of that thing you’re sharing is immediately visible to the user. That is, when I share something I can see who will see it as I type. This means a casual glance is all I need to verify that I’m not broadcasting something embarrassing, private, or uninteresting to the wrong people. This seems like a pretty obvious design choice. Compared to facebook’s implementation though it’s refreshing.

When you post an item to your newsfeed in facebook, visibility settings are hidden under a drop-down menu. You can’t see what the settings are unless you click it. If your settings are different from the default (i.e. “custom”) you have to select “Custom” to see what your settings actually are or to change them.

Adding people to a post

G+ shows you immediately who you’re broadcasting too, and makes changing the settings much faster. Firstly restricting the post is far easier, because all you must do is click the ‘x’ on the social circle you want to remove. Sharing with a broader audience (the more dangerous option) requires selecting “Add more people” and choosing social circles, extended circles, or public from a menu.

Post visibility is hidden

Once you’ve delved into the custom post settings on facebook, you have the option to make your new settings the default – so your choice will be invisible to you on your next post, because you will again have to click the privacy menu, and click “custom” to see our settings. In G+ there is no default, it simply uses the settings you applied in your previous post for the next post. Because these settings are immediately visible you can change them if needed, or not.

Customizing post security requires a second window

Privacy settings management

Facebook places privacy settings under the Account menu in the upper right corner of the page. If the privacy settings management tools were good this would be a good decision with all privacy issues handled in one place. Unfortunately the tools are (probably deliberately) obstuse.

Four bad choices

Editing privacy settings in facebook presents you with an incomplete tabular grid of settings that looks like a feature comparison chart for crappy enterprise software. You have the option of selecting “Everyone” (no privacy), “Friends of Friends” (effectively no privacy), “Friends” (some privacy), “Recommended” (let facebook do what it wants), or “Custom”.

Cryptic options

Selecting custom presents you with a long list of options with menus that must be selected individually (there’s no way to set several options at once). In some cases facebook links to yet another privacy tool to make settings for a different thing.

I believe that this is purposefully done to discourage privacy management.

Edit privacy settings inline on your profile

G+ also has a privacy settings management page. This page describes and links to privacy management tools throughout G+ and your Google account. In most cases privacy settings are integrated into the editing interface of anything you can edit. So if I am on the G+ privacy page and I select “Edit network visibility” I am directed to my profile page, which is switched into edit mode, and the section of my profile which indicates network visibility is activated. When I save these settings, I’m left on my profile to continue editing. When editing anything in my profile I can set the visibility of that particular bit of data as I am editing it. This works well with most things..I find managing privacy settings in G+ photos to be a little wonky as you are bounced over to Picassa to do so. Additionally your G+ profile page has a place for scrapbook photos which are visible to to the public. This cannot be changed.

Lists and circles

Facebook allows you to create lists of friends, G+ uses social circles. Facebook friends are all dumped into a big arbitrary friends list. You can create new lists from this main list by entering a list name and selecting a batch of friends. The interface for this is fidgety and obviously not intended for regular use.

Edit friend lists in a tiny modal window

G+ offers something similar in the form of social circles, represented by literal circles. You add a user to a circle by clicking and dragging them into the circle. You can remove a user by dragging their icon from the circle or by clicking the circle to “open” it and managing it from there. The circles interface is far more intuitive and invites customization and reorganization.

Facebook lists are nearly invisible until you make an effort to review your friends or dig into privacy settings. G+ circles are a top level feature, placed on equal footing with your news stream, photos, and your profile.

Patterns emerge

G+ is new and may completely change by the time it’s released to the general public. But now at least facebook and G+ have much in common.

Facebook and G+ seem to offer very similar privacy features. In both you can manage your list of contacts or friends into groups and control who sees what.

G+, places all of this interaction in the forefront and integrates it cleanly into each interaction. Facebook obfuscates these tools behind multiple menu options, hidden menus, and tiny modal windows.

The G+ approach makes facebook appear to be hostile to user’s privacy needs. I suspect that facebook is actually hostile to user’s privacy needs. Even if it isn’t the effect is the same.

Wunderlist application icon for Mac OS

Wunderlist is a free todo list application – or suite of applications – which launched recently for Mac OS, Windows, iPhone, iPad, and Android. They also provide a very nice web client client.

The A-Number-1-killer feature is free cloud syncing between all versions. This means you can install Wunderlist on your Mac at home, your PC at work, and on your smartphone and manage the same todo lists from everywhere.

Real world weekend usage

I used Wunderlist over the weekend to get the chores done. I used the iPhone and Mac desktop version. I loaded the iPad version just for reference but didn’t have a real occasion to use it.

As I said above, the killer feature is syncing between all devices. I wrote up a quick todo list on my computer, picked up my phone, launched the app, and there was my todo list. Throughout the day I checked items off the list, and added new items. There’s nothing to complain about or to write home about here. Checking items off your list works as you’d expect. No surprises, good or bad.

Wunderlist Desktop for Mac

All versions of the app use a very similar user interface so there’s really no learning curve. The app is geared towards simplicity. Each todo item can have a task label, a priority marker (e.g. flagged as important), a due date, and notes. Wunderlist focuses on simplicity and not features or robust editing. Notes are only visible through a secondary interface – I think this intentional. If your todo list relies on items with lot of detailed notes perhaps you need to rethink the items in your todo list. Wunderlist encourages users to think in small discreet tasks and not in big long paragraphs. If you’re a hard-core GTD person, you might find this very appealing. I prefer a bit more flexibility.

Wunderlist has quick-access date based filters arranged in a sort of tab bar along the bottom of the interface. You can quickly select overdue items, items due today, and so on with these filters. Things does something similar. Things additionally features a clickable list of “tags” on top of the task list. This enables marking related tasks with the same tag for more organization. For example you can tag all of your phone call tasks “phone”. When you sit down to make all of your phone calls, click the ‘phone’ tag and see only tasks related to phone calls. Wunderlist has no meta-organziation features like tags or categories. I’m not sure that this is a drawback. Sometimes limitations can help focus. If you are disorganized and trying to be organized, less features may be better.

Wunderlist has the ability to share task lists via email. The desktop version creates a plain-text email. The iPhone and iPad version sends an sign-up invitation if the email address you specified wasn’t in your contact list. The desktop version of Wunderlist will also publish a list to something called “CloudApp”. CloudApp is apparently an HTML version of your list on a web page that can’t be edited. It also gets deleted after 30 days.

Miles and miles of styles

The buzz surrounding Wunderlist has included much praise for its user interface design. I think this is misplaced.

iPhone lists view

Wunderlist looks great. The application interface is beautifully styled but the interface design itself is not revolutionary or even remarkable. It’s a todo list. There’s a list of lists (like a list of mailboxes in your email) and your current todo list. This isn’t innovative, it’s obvious.

The user interface isn’t bad – it’s just OK. The application’s styling is very appealing though. For example, you can choose different background images for your window. The default is a hardwood floor pattern, but there’s a dozen to choose from. This doesn’t help you edit tasks in any way, and your background setting isn’t synced from device to device, but personalization is fun and it’s a nice feature.

iPad interface, in handsome wood grain

Portrait view of list, in stunning slate

Things and Omnifocus outshine Wunderlist in terms of utility, speed of data entry, and task management. Of course these apps aren’t free.

Flaws and minor issues

Wunderlist is very new software, so some or all of these items may be fixed rapidly.

After a few uses on my iPhone, Wunderlist bugged me to rate the app in the app store. That’s obnoxious.

There is no way to select or edit multiple todo items in a list. Let’s say you’ve made a long todo list for the day and suddenly your plans have changed. You can’t just clear out your todo list, you have to delete or check off each individual item.

The web version of the application allows you to login with Facebook or an email address. If you first create an account with your email address (and this email is known by your Facebook account) you can bind the two together and login with Facebook while using the web version.

The wonky About Us menu

If you create an account with Facebook alone you will not be able to login to the iPhone, iPad, or desktop version. (I was not able to test an Android device or on Windows). In order to login with this account without Facebook access, you have to have to request a new password. At this point logging in with Facebook is useless. Facebook provides tools for mobile developers to login via Facebook connect, so it’s odd they’ve included the feature on the web version and nowhere else.

There is plenty of online documentation for Wunderlist – but it’s accessible through the ‘About Us’ menu instead of the main help menu. If you choose ‘Help’ you get no help at all.

No help for you

Syncing is sometimes flakey. The iPhone version of the application uses the ‘pull down to refresh’ trick popularized by Tweetie – but it’s not obvious at all. Adding to the confusion, the main view of all your lists has a manual refresh/sync button – but there is no such button when viewing a list. When reopening the app on my iPhone, on a list detail view, the list does not seem to automatically refresh even though the network indicator is spinning. A manual refresh does work however.

The verdict

The todo list operations of the various Wunderlist apps work well enough. The only thing that makes this app really worthwhile is syncing between multiple devices, computers and the web.

Wunderlist is very handsome but its lack of features prevents it from being very useful – at least for me. This app is just a glorified grocery list and I already have Evernote on my desktop, phone, and the web.

I may keep Wunderlist around for quick and easy grocery lists and the like, but I don’t see using it full time for task management. After my weekend of deliberate experimentation I forgot I had it installed.

However it is useful for quick, small todo lists – and if your needs are simple Wunderlist may be perfect.

Obvious comparisons

Speaking of Evernote, it’s hard not to make compare Wunderlist and Evernote. Evernote has the same critical features: Device to web syncing and multiple device support (plus web). Evernote is focused on “notes” – which of course can be anything. Todo lists, archived web pages, documents, voice memos, actual ‘notes’, whatever.. The robustness of Evernote lends itself to all manner of uses. Their developer API also makes it a robust platform that supports other applications.

Evernote’s style leaves something to be desired (I would argue Evernote for iPad is better designed than their desktop client or iPhone client)

What’s their angle?

I decided to try out Wunderlist due to buzz on the internets. After discovering that Wunderlist and the syncing services were all free I got a little suspicious. Evernote has a free version – it is ad supported on the desktop and places some monthly limits on usage. The paid version has no ads and no limitations. This is a clear business model. What are they doing with Wunderlist?

It’s an advertisement

Wunderlist is produced by 6wunderkinder. This shop recently received venture capital funding and needed a way to make a big splash and draw attention to their work.

Wunderlist is an advertisement of their capabilities, their style, and a good excuse to attract people to their website where they drop hints about an upcoming productivity suite.

As an application Wunderlist is OK but not stellar. It’s a fantastic business card.

The technology

Wunderlist is developed for many platforms through the use of Appcelerator Titanium. Titanium is a cross platform application development suite which targets mobile (iOS and Android) and desktop (Mac OS and Windows).

For iOS and Android Titanium cross compiles JavaScript to native code for use on each platform. Titanium provides global JavaScript objects (like the document object when in a browser) which translate to native UI widgets and features. So if I specify a Titanium.UI.TextField in my JavaScript to create a text field, Titanium will compile that down to an intermediate format and then cross compile that to a format suitable for the device you want to run your code on.

This is a pretty impressive technical feat. The end result wouldn’t be appropriate for something like a high performance game, but is probably fine for many business type applications (and todo lists).

On the desktop Titanium does something a little different. The desktop version of Wunderlist is basically a tiny website running inside a little box. This box has a little tiny version of a browser (WebKit in Safari and Chrome) and a
few extra goodies. This is why the web version of Wunderlist and the desktop version of Wunderlist look identical. They are.

I have the first dual iPhone/iPad application but it is lackluster. It’s not bad it’s just not particularly good. The original app let you buy one issue at a time at silly prices and would let you re-download any issues you had purchased onto multiple devices. In landscape orientation a magazine was presented as a flip book or slideshow – basically just pictures of two-page spreads in a long horizontal line. In portrait mode you swiped horizontally through the articles, tapping a ‘Go’ button to open each, and then scrolled a text window up and down for each article. If an article had images or other media – these were presented at the top of the screen. Tapping a picture, for example, would launch a slide show.

The reading experience was a little poor. Long articles had to be scrolled through vertically with no pagination. This effectively no better than reading a web page. Flipping through the articles in portrait mode presents you with a big teaser image and a headline (interspersed with reproduced ads from the print magazine). Getting from one article to the next required tapping the screen to bring up controls, hitting a back button, and then proceeding to the next article. The entire navigation experience was fidgety and labor intensive.

Oh, it also crashed a lot.

The updated Vanity Fair application for iPad is solid improvement.

The main selling point is that this application now uses Apple’s subscription API with reasonable pricing and provides access for existing print subscribers, at least it’s supposed to. The application has been given a design and UI overhaul and it’s much more usable and much nicer to read.

The app is free to download. One month subscriptions, automatically renewing, are $1.99, one year subscriptions are $19.99, and single issues are still ludicrously priced at $4.99 (of course you could subscribe for a month and cancel, but shhh. don’t tell anyone).

This version of the app is only for iPad, so no reading tiny magazines on your phone.

The good

Detail of the launch screen

Full page "glossy" ads sure beat web banners

The new Vanity Fair app looks great. Even the startup screen is inviting. The original startup screen was a cryptic white window with an ominous logo. The new screen features a VF logo-based pattern with subtle shading. The screen looks like the inside of a box that you’re about to fill with expensive presents. All of the content has been designed to fit an iPad screen in landscape or portrait orientation. They’ve done away with trying to give you a tiny picture of the printed page. The content has been arranged in such a way that if you rotate your iPad in the middle of an article, the layout changes, but you don’t lose your place. This is an important detail that many other magazine apps overlook. For example, the Wired magazine app was more or less just a picture of each page of the magazine, slightly squished. This required pinching and zooming all over the place to read an article. With my bleary computer-addled eyes I can read the Vanity Fair app at almost arm’s length.

Full screen view of content library

Grid view of the library

The user interface is reserved, well structured, and clear. There are no silly features like cover-flow or zoomy animations. Upon launch there is a library view of the magazines you have downloaded. The app includes a short, free sample magazine with a few articles and some pretty pictures of Marilyn Monroe. This library screen supports two views; a small thumbnail view, arranging magazine covers in a grid with buttons to read or buy; a large full screen view with large images of covers, which is navigated by swiping left and right. In both of these views switching to landscape orientation changes the covers into a cover-and-table-of-contents. From this screen, simply tap a cover to view the magazine.

Each magazine opens quickly and navigates smoothly. Overall the app is fast even on a first generation iPad. Navigation is far more obvious. Once you have opened a magazine in the app, you swipe left and right to navigate, and swipe up and down to read an article. All the articles are paginated vertically which means a small little swipe of your thumb will advance you to the next page. Articles which are longer than one page all feature small visual cues that there is more content below the fold. Usually in the form of a double arrow, also graphic elements sometimes strategically bleeds up from the page below.

The UI within a magazine is straightforward. Tap the page and a toolbar appears on the top and bottom. The bottom tool bar has a big scroll bar for scrubbing through all the articles and two buttons to switch back and forth between your library and the currently opened magazine. On the top toolbar is a home button, to return to your library of magazines, a back button for when you’ve followed a link (like from the table of contents), a table of contents button (which opens in a scrollable popover), the title of the current magazine (a tap on this takes you to the cover), and a browse button. The browse button activates a birds-eye browse mode for each magazine, showing you all articles and ads zoomed out and arranged horizontally. In this display you can see the relative lengths of each article – long articles are taller than single page ads and short pieces.

The bird's eye browse view

The bad

All magazine pages in the app are actually PNG images. Every single page. This means that a single magazine can end up being hundreds of megabytes of data. Downloads can take a long time. They have done a good job making the images sharp and clear. Good graphic design and large type sizes also help, but there are places where the text looks a little mushy around the edges.

The page images are almost all at screen resolution – 1024px x 768px. there are a few oddball long form pages which feature info graphics or tables or other things that don’t break over a page easily. This means there’s no extra resolution to zoom into. Zooming is not enabled for these pages unless you enable accessibility zooming on the iPad. When you do zoom in on a page in a magazine – you get blown up too small image blocky pixel text included. Since there is no text in a PNG image, the magazine can’t be searched, one can’t copy out text for reference or quotation, and the brilliant built in VoiceOver screen reading feature can’t read the page aloud. This app was not built with accessibility in mind.

I’ll cover more on the problems with PNGs in the technology section below.

Detail of the interactive features

Interactive features are superimposed over each page. This gives the appearance of having slideshows and videos inline in the page, which is nice, but standard iPad features like swiping to navigate, zooming in on an image, or letter-boxing and pausing video are not supported. Some images have pinch-zoom capability but not all. The ones that do have instructions next to the image.

Each issue includes an instruction page

Links to external websites, or social networking features like posting an article to twitter are indicated through custom icons. The icons look nice enough, but it isn’t really clear that they are tappable (because they’re not, they’re just part of the PNG page, there is an invisible hotspot over the image.). Some pages have social features. Some don’t. It appears that only articles which are also published on the Vanity Fair web site are shareable. This is understandable restriction, but the implementation is weird. The placement of the icons varies per article. Sometimes it’s at the top, sometimes not. The actions aren’t available on every page. Therefore if you’ve finished an article and you want to tweet it to your followers, you have to scroll up to find the button on the page someplace. A consistently placed sharing UI for each page (a toolbar item, for example) could solve this problem by opening a menu of sharing options for the article. When an article is not available for sharing the UI would be inactive.

These interaction features all feel bolted on and unsatisfying. The previous version of the application did a better job with this by linking to slideshows in standard iPad photo controls and using a standard video player for included videos.

While I love the bird’s-eye browsing view so far (I like the visual overview of the whole magazine and the article length) if you swipe past an article you’ve already read and scrolled to the bottom – the browse view keeps the article in the scrolled-down position, hiding the masthead of the article. I realize the app is trying to help preserve my reading state (i.e. keep up with where I left off with each article) but it’s not relevant in this view.

Non technical problems

As a subscriber I’m able to download each new issue as they become available. At the moment though, there’s no way for me to browse back-issues that I received over the course of my subscription. I can understand that from a business perspective, but there’s also no way to buy back issues either.

I’m sure they haven’t digitized their entire collection yet, but should they have the last year or so that they’ve published digitally. Vanity Fair provides no way to migrate issues from the old app to the new app. This means you have to keep around that old app if you want to read those old issues. I understand that the old issues would have to be converted to the new format, and I recognize there are probably business reasons for not doing that, but as a pretty loyal customer, it sucks.

The library view in the application, which shows all the magazines you’ve downloaded, features a big, ugly banner ad inviting you to subscribe. Fair enough, it should at least be handsome though. Once you’ve subscribed that silly ad doesn’t go away. This ad only shows up in the thumbnail view. I use the full screen view.

The ugly

Connecting my subscription, my vf.com account, and the iPad app was like passing kidney stones. I followed the in-app instructions to connect my iTunes account to my subscription. This involves filling out some information in a web form (this opens in a little web view from within the app) that is used to locate your account. You can search by your mailing address, your account number (if happen to have a mailing label around the house), or by logging in with your vf.com account.

The system found my account without a problem…but then nothing happened. Nothing continued to happen. So I signed out and tried again. This time it told me my account was already in use. So I signed in again. Nothing happened some more. I tried logging in at vf.com. I updated my profile. This it the only thing you can do at vf.com. Nothing continued to happen on my iPad. I found the subscription management link, which took me to another Condé Nast site. I tried logging in there with my vf.com account. This didn’t work. I tried searching for my account by address. This worked. I tried to set up the subscription account with my vf.com username and password. That didn’t work. My email was already in use. No matter. Let’s check my subscription. Aha! The print subscription was expiring this month, so of course the iPad has no magazines for me to download because I have none “left” in my subscription. If the iPad app had told me this….I could have just bought a subscription 30 minutes ago. OK. I renewed the print subscription, went back to the iPad app. Nothing continued to happen. It wasn’t finding my account anymore. BLARG. I cancelled my subscription, and signed up on the iPad. Now both the iPad is downloading issues, and the subscription site says I’m up to date.

I am a persistent nerd. I was determined to beat this problem so I could read my stories on the train to work. Regular people are not me. Regular people will give up immediately.

The verdict

This app is a pleasure to use and read from, barring some of the issues I stated above. I hope they continue to make improvements and perhaps move away from publishing the magazine as a giant stack of images.

The subscription linking mess is terrible. Knowing what I know now, I’d have saved myself an hour of anguish and just purchased the subscription on the iPad right away. My time and mental health are far more important than $20 and I like the content enough to pay twice. If the subscription linking process isn’t fixed, I doubt they will gain many readers.

The technology

Condé Nast is using Adobe’s Digital Publishing Suite to build this app. This is a combination of development software and distribution services that integrate with other Adobe products, primarily InDesign CS5.5.

Based on the sales copy it looks like the publisher creates content in inDesign then migrates it to a ‘folio’ file format via tools added on to inDesign and then is finally published to Adobe’s service for distribution.

The ‘folio’ format appears to be a container format which holds PNGs, PDFs, or HTML files and supplies an interactivity layer. Folio files are viewed by Adobe’s “ContentViewer” which is available for iOS and Android. Adobe provides a service which allows a publisher to create a somewhat customized, branded app that can be distributed through Apple’s app store or Android Market.

Adobe provides the integrated toolset (their customers are probably using InDesign already) and the distribution mechanism and then charges per issue for distribution. This is apparently not cheap.

I can imagine Condé Nast probably needs a technology partner to help move to digital publication. I’m sure they have many bright designers and artists, and probably a good technology team managing their web sites. Keeping a stable of really good iOS developers in house is probably not cost effective, and going on their own is risky. Partnering with Adobe, though, seems like letting the fox into the hen house.

Those PNGs

From Adobe’s site, it looks as though their folio container format can work with multiple types of content:

• Create, manage, and share .folio files from within InDesign CS5.5 using the Folio Builder panel included in the Folio Producer tools.
• Create publications using PNG, PDF, or HTML file types.

The Vanity Fair team has chosen to go with PNGs. I noted above that this is not ideal. In addition to the usability concerns, download size, lack of search-ability, etc, screen resolution PNGs are not very future proof. For example, we won’t see a “Retina Display” iPad this year or even the next. But we will someday. When that day comes, every back issue will look like a blurry photocopy. If the content were created as HTML or PDF it could scale to fit the screen or even be converted to some other format for sharing, archiving, or printing.

I don’t want to blame Vanity Fair too much though. I wouldn’t be surprised if the PDF option creates absurdly huge files, and the HTML option looks terrible.

Speaking of an HTML version, a demo

All this thinking about deploying magazines to a tablet reading device in a friendly format got me thinking about how much one could actually accomplish with plain old HTML.

I took the main copy of this article and converted into a single page article here.

I took the original HTML, stripped out everything that wasn’t the article, and wrote a custom stylesheet. I’m using Google web fonts which are reasonably close to what you’d find in a print issue of Vanity Fair:

• Old Standard TT
• Didact Gothic

These are, of course, cheapo-free web fonts and a quality publishing house like Condé Nast would, of course, license proper fonts.

The demo is formatted to fill the screen on an iPad, so it looks very much like one of the pages from the app – except it’s HTML text that could scale if needed, be indexed and searched, and even printed out for a cave man to read.

The CSS used is all standard, excluding a few media queries targeting mobile safari for the iPad, so this looks pretty good on most browsers even IE 7 and 8.

Links

I’ve been following the iPad magazine thing for a while, here are some more articles on the subject:

• Highly readable web templates
• Oliver Reichenstein at iA has had a lot to say about iPad magazines and the interaction design of reading apps
  • iPad: Scroll or Card?
  • WIRED on iPad: Just like a Paper Tiger…
• Khoi Vinh doesn’t like eMags or iMags
  • My iPad Magazine Stand
  • More on iPad Magazines
  • iPad Magazines Go to ’11
• Condé Nast hates Terry Chay (Similar subscription woes)