To produce the needed base64 encoded images, I’ve been relying on a tiny little command line script to encode the image and spit out the results. While this works, it’s not particularly convenient and it’s not something I can easily share with other developers and the graphic designers on my team.

So over the weekend I built bGrounder.

bGrounder lets you upload images and convert them into CSS rules and HTML image tags with images embedded directly with data URIs. If you’re using a modern browser that isn’t Internet Explorer, you can click and drag images from your desktop right into the uploader. In all browsers you can add many images via the ‘Add images’ button (HTML5 browsers allow you to select multiple images at once).

Process each image individually or do them all at once. The resulting code appears in the text boxes below the uploader. The CSS rules specify the encoded image as a background image, using a class name derived from the file name of the image. The HTML output is a simple IMG tag with width and height set. The IMG tag is probably less useful over all – generally inline images are part of actual content of the page and you probably don’t want to completely ignore older browsers. But maybe you do. Maybe that’s just how you roll. Additionally if you reuse the same IMG tag with embedded image data, you get no benefit from caching…the browser has no way to know that two embedded images are the same (whereas a single CSS sheet is loaded once).

Share and enjoy.

Technical stuffs

bGrounder gave me a chance to play with the Silex PHP “micro-framework”. I found it very easy to get up and running with Silex, surprisingly so. I rather liked the simplicity and minimalism of defining function closures which respond to URL patterns and HTTP methods. Very tidy. My main application file was only 50 lines long, including comments and generous whitespace. (this doesn’t include the Silex library itself, or the image processing classes I wrote, but still. Short.)

This also gave me the chance to work with this jQuery File Upload widget. This set of jQuery plugins enhances an existing file input to allow for multiple uploads in old browser, creates a rich UI with progress bars, and can even support cross domain uploading. It also ships with a number of server-side implementations to help you get started. Perhaps somewhat ironically, this was more complex than the PHP framework. Once I got my head around how it worked though, it was fairly easy to customize the UI and use my own server-side upload handler.

The gist is that Adobe’s magazine app publishing platform (as well as other’s) creates a magazine by wrapping up a big stack of PNG image files in a thin interactivity layer. On the new iPad, these images will be too small to be legible. I hinted at this problem when I reviewed Vanity Fair’s iPad edition. Today each “magazine” is an enormous file (200MB to 400MB) with text that can’t be enlarged, selected, copied, exported, or read aloud by accessibility software. In order for this publishing format to work on high resolution displays, the images will have to be much higher resolution – and therefore much larger in file size. Otherwise the text will be blurry and hard to read. If you increase the size of the images making up each page, you increase the overall file size of each magazine. These things are already too big to store. I never keep more than an issue or two on my iPad. And of course, download times will increase as well.

I already find these magazines hard to read. Even my 37 year old web nerd eyes find the text in these magazines (on the original iPad) to be too blurry. Compared to iBooks, the Kindle App, or just any old web page in Safari, they look terrible (at least for reading). I came to the same conclusion that David did; they should have been using web technologies all along.

Vanity Fair has a decent web site already and they obviously have a CMS supporting it. Why not create a tablet optimized version of the site with the same content as the magazine then make that site an add-on to an existing subscription or create a partial pay-wall? That web content could be wrapped in an app and cached for offline use. Most graphics (borders, boxes, shapes, etc) could be delivered as tiny SVGs, photos could be delivered as hi-res JPGs. The end result would be much smaller than what they deliver now, but far more readable. It’s possible that they might have to sacrifice some fine layout control…but the result would be reasonably future proof content.

Vanity Fair and Conde Naste have already produced and killed one version of a magazine app. The current one is about to be obsoleted, as is all the content they’ve already produced for it. Why keep hitching their wagon to Adobe’s lame last century mentality mule?

• A Retina Display Reckoning for Magazine Publishers
• Via Shawn Blanc

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.