Web Standardistas - HTML and CSS Web Standards Solutions

July 2011 Archives

Content Choreography in the Age of Responsive Design

Content Choreography [Detail]

In Content Choreography Trent Walton argues for a new approach to the design process in the era of responsive design, where the flat visual of yore no longer cuts the mustard. Promoting an iterative and collaborative approach to deal with this dilemma, Mr Walton states:

We’ve found that the best way forward is to pull all members of a team together to design, build, test and evaluate in multiple quick rounds… the alternative would be to create designs for every media query you plan to include.

These days, creating that flat visual is still an important aspect of the process, it’s just that it’s a much smaller aspect — it’s no longer where the design stops and the build starts, we’re beyond that point now. The phrase Content Choreography is apt, we are no longer translating static designs, we’re designing content that moves, morphs and transforms on its various stages, be it desktops, mobiles or something else entirely.

Mr Walton continues:

Balancing all of these new facets of the web designer’s role may seem overwhelming, but that’s the nature of the profession and one of the reasons why I love it. Honing the craft of content choreography will help us to orchestrate the best experience possible at any screen size or resolution.

The reason this sounds hard is because it is. But there’s some advice on how to cope with the new facets to our role, Mr Walton again:

The best thing for us to do? Practice!

Wise words indeed. And if it doesn’t make you a better web designer, it might take you to Carnegie Hall.

1311700560 · Nicklas Persson · Follow Us on Twitter

Hand Written

Writing letters was good enough for James Joyce and TS Elliot - why not us? — Adrian Shaughnessy [Detail]

Craig Oldham believes, “There’s always something nice about receiving a letter.” So do we. (Perhaps that’s why – our passion for Sharpies notwithstanding – we’re not averse to penning a frequent missive, or sketch, with a good old-fashioned fountain pen.)

Celebrating his love of the hand written, Oldham extended an invitation to some of the world’s leading designers to share a few thoughts, submitted by hand, on their own stationery. The collection – which includes contributions from, amongst others, Michael Beirut, Milton Glaser and Wim Crouwel - now numbers over one hundred and can be seen at Hand Written Letter Project.

Even better, Oldham has created a book to commemorate the project and, generously, support the National Literacy Trust. A strictly limited edition run of 175 copies documents the project, as Oldham puts it, “In its rightful analogue form.” On the book’s production values, he states:

The book has been achieved with experimental production methods and presents the letters as leaves, as close to the originals as possible. It incorporates the actual letterheads from many of the contributors alongside printed reproductions on a multitude of stocks, finishes, inserts, and bespoke sizes in this case-bound, hard-back book.

With only 85 copies available online – actually 83… we couldn’t help but pick up a couple of copies – you’d best get your order in now to avoid disappointment.

Proof, if it were needed, that nothing beats a little pen on paper.

[Via Swiss Miss.]

1311650340 · Christopher Murphy · Follow Us on Twitter

Pantone Mug Included

Web Designer [Detail]

If you’re a passionate and committed web designer with an eye for user experience and an understanding of the importance of delightful products, Mark Boulton Design are on the look out for a Web Designer.

Their definition of ‘experienced web designer’ is something we’d certainly echo (and something we work with our students to develop, to prepare them for the world of work). In addition to the expected requirements, it includes: ‘can put their thoughts into words and argue a decision’; ‘gives a damn about setting the right glyph’; and ‘gets upset with average’. Bravo.

(Unsurprisingly they’re not looking for someone who: ‘mucks about with Dreamweaver in their spare time’, or ‘is a print designer who ‘dabbles’ in web’.)

If you think you’ve got what it takes why not drop them a line. The perks include: an Aeron chair to sit on and a Pantone mug to drink from. (That and working in one of the web’s most interesting studios.)

1311360180 · Christopher Murphy · Follow Us on Twitter

The Manchester Egg

Mr Holden's Manchester Egg [Detail]

The Manchester Egg, a fine concoction of pickled egg and sausage, black pudding and breadcrumbs designed by Mr Holden is, unquestionably, a hearty commodity worthy of a gentleman without need of garnish.

[Via Mr Stocks.]

1311357180 · Christopher Murphy · Follow Us on Twitter

It's Crafty

<##> [Detail]” width=”440” height=”80” /></a></p>

<p>Combining two of the greatest pastimes known to man, video games and cross-stitching, <a href=Sprite Stitch is “a community of people dedicated to handmade arts and crafts with themes centred around the video game industry”.

Just one look at the Mario across the NES ages (revised edition) cross stitch pattern should be enough to persuade anyone to take up a new, crafty hobby.

Wonderful stuff.

1311355680 · Nicklas Persson · Follow Us on Twitter


instaport [Detail]

Chances are you’re using, or at least have heard of, Instagram, the somewhat unlikely heir of the throne once held by the mighty Polaroid camera. With a selection of novelty filters at your immediate disposal, and the inevitable social sharing built right in, it’s an iPhone app very much defining the moment.

But what if you want to retrieve all those moments and store them somewhere safe for later? That’s where Instaport comes in. It’s a fine little service built on the Instagram API, allowing you to download a .zip file of all your pictures at the click of a button, a wait, and then a click of a download link.

Useful, and delightful.

1311337140 · Nicklas Persson · Follow Us on Twitter

The Original Typeface Compendium

Favorites [Detail]

As the folks at FontShop once put it:

Since 1991, ‘the big yellow book’ has been the trusted friend of designers, typographers, advertisers, manufacturers, publishers, historians and anyone else who uses type.

FontBook is the only guide that compiles original, digital typefaces from multiple manufacturers and presents them in a systematic way. All-inclusive, with typefaces both old and new, FontBook contains all the classics of the art of printing, insofar as they are available digitally, as well as the latest font releases and extensions.

Today FontShop’s FontBook took a giant, digital leap forward. The new FontBook, now available as an iPad app, takes the original idea of the FontBook as, “the world’s most comprehensive typographic reference tool,” and updates it significantly (beyond – to be fair – what could have even been imagined when the last, physical book was published).

The new and improved FontBook – though sadly no longer a print on paper affair – is truly the definitive guide to the world of typographic opportunity.

Containing the work of over 110 type foundries and featuring 620,000 typeface specimens (yes, you read that correctly, 620,000…) the FontBook allows you to view fonts by: name, style, typographic sub-classification, designer, foundry, year of publication, or by similarity of design. (It’s truly that comprehensive.)

Presented through a beautifully designed and intuitive interface, it allows you to compile your own list of favorite fonts, and use an in-built ‘compare’ tool to test-drive fonts. As FontShop puts it, “It’s specially designed for fast, easy navigation and also works as a fun playground for finding inspiration.” (Trust us, it’s a playground indeed….)

As Fontshop put it:

FontBook is primarily an online browsing application and displays its full content only when your device has internet access through a WiFi or 3G mobile connection. However, if you have no online access, you can temporarily switch the “Include online content” setting to “off”. This will enable the app to display a reduced pool of selected content which will work offline.

This approach, of core content when offline, and enhanced content when online, works perfectly for such a comprehensive catalogue and is ideal for a catalogue that will, inevitably, be updated regularly. Fontshop state:

FontBook will be continually updated with more type specimens as they become available through new font releases and the addition of new type foundries. More features will also be added on the next version and in future updates.

Given FontShop’s track record, and passion, for keeping the FontBook current, one can only imagine what future editions hold. Suffice to say: Drop everything and get your copy now, you’ll be delighted you did.

1311297120 · Christopher Murphy · Follow Us on Twitter

FF Sero

FF Sero [Detail]

As if – given today’s other FontShop news – those FontFonters weren’t generous enough already, they’re also for a limited time, offering FF Sero Medium as a free download, so you’ve no excuse not to explore the wonderful world of Web FontFonts.

Combining the striking forms of an American Grotesque with the legibility of a Humanist Sans Serif typeface, Jörg Hemker’s FF Sero is the result of seven, painstaking years of development. The result? Classic letterforms, matured into a beautifully balanced and versatile typeface, available in eight harmonised weights. (FF Sero Extra Thin is particularly nice.)

Available for free in three formats – OpenType, Office and Web – we’d urge you to pick up a copy of FF Sero Medium today.

1311265500 · Christopher Murphy · Follow Us on Twitter

FontFont Subsetter

FontFont Subsetter [Detail]

Continuing the FontFont theme… If you’re already using Web FontFonts (or considering the possibility) the fine FontFont folks have created just the tool for you. The FontFont Subsetter, enables you to optimise your web FontFonts in three easy steps, better still, it’s free. As the FontFonters put it:

Web FontFonts speak many languages, but most of the time you only need a select few. Removing the letters you don’t need can greatly reduce the font file size to make your websites faster, optimize bandwidth usage, and reduce high-traffic costs.

Naturally one additional benefit of smaller Web FontFont file sizes is a better user experience, always a good thing.

The process is simple: upload a Web FontFont; reduce or customise the FontFont; and, finally, download the optimised Web FontFont. Thank you, again, FontShop.

1311259200 · Christopher Murphy · Follow Us on Twitter

Web FontFonts Now Even Better

Big News for Web FontFonts

In case you missed the Webfont Wednesday announcement by the folks at FontShop, yesterday was big news for Web FontFonts. The biggest news which will doubtless have designers rejoicing, is the news – big news – that all Web FontFonts now include Comp Fonts. As FontShop put it:

We know that during the design process it may be necessary to create page layouts of the proposed design using applications that don’t support WOFF/EOT fonts. For this purpose, Web FontFont archives now contain corresponding TrueType-flavored OpenType fonts for the offline design phase.

Hallelujah! You may recall that Elliot Jay Stocks wrote about precisely this problem back in March 2011 when, writing on the tricky topic of Using Web Fonts in Desktop Design Apps, he stated:

One particular problem is that there is currently no way to create a design in a desktop application like Photoshop using fonts licenced for web use. Or, to put it another way: “I don’t want to buy an expensive desktop licence for a font family I only want to use on the web!”

It seems the folks at FontShop were listening (as – it has to be said – they usually are).

This is a welcome development and once again shows FontShop blazing a trail towards a truly exciting web type world, putting in place the pieces that ensure the use of web fonts is a seamless experience with one, common goal: improving web typography. FontFont’s new EULA, which licenses bundled TrueType-flavoured OpenType fonts for the offline design phase, is precisely the sort of forward-thinking approach towards font licensing that’s been needed to recognise the hybrid - on- and offline - nature of the design process many web designers use.

That, however, wasn’t all FontShop announced. In addition to the inclusion of Comp Fonts, the company have been hard at work on improving a number of other aspects of WebFontFonts….

Attentive to detail as ever, FontShop have reworked their Web FontFonts to ensure smaller file sizes (helping to address file size and reduce download time, one of the remaining issues with serving web fonts). They’ve also added optimisation for Microsoft’s rendering API DirectWrite and improved vertical metrics for consistent baseline positions in all browsers.

Last, but not least, typographic purists can now choose between Oldstyle Figures and Proportional Lining Figures in a number of the new, improved Web FontFonts – a welcome addition indeed.

If you’re considering taking the Web FontFont plunge – and if you’ve a new project on the go, you should – don’t forget FontShop’s FontFonter, perfect for finding a little FontFont inspiration. There’s never been a better time to put Web FontFonts through their paces.

All that remains to say is, “Thank you FontShop.” The world of web fonts is moving ahead swiftly and, thanks to a forward-thinking approach towards web fonts and font licensing, the future looks bright.

1311258240 · Christopher Murphy · Follow Us on Twitter


FontBook [Detail]

Forget what those pesky Gideons are peddling, the FontBook is the true bible and the undisputed fount of all wisdom. Good news for believers, the all-new version is out today, the 21st day of July in the year of our Lord 2012.

Get yours before they go.

1311229080 · Christopher Murphy · Follow Us on Twitter

NASA 1976 Identity Guidelines

NASA [Detail]

A graphic designer based in London working for Wallpaper*, Tim George has uploaded a tantalising series of scans from the NASA 1976 Identity Guidelines. Though there are just a few images, they offer a brief and beautiful glimpse of a bygone era.

Antonio Carusone, of AisleOne, also offers a glimpse, stating:

Created by design firm Danne and Blackburn in 1975, this manual outlines the proper use of, in my opinion, one of the best brand identities of the last century.

As Carusone puts it, “The hunt has officially begun….”

[Via Mr Kottke. (Via Mr Carusone.)]

1311218880 · Christopher Murphy · Follow Us on Twitter

Shading with CSS

Shading with CSS [Detail]

Inspired by a sign painting workshop at TypeCon 2011, Tim Brown – resourceful as ever – has been hard at work crafting some fine examples of Shading with CSS.

If you’ve never heard of a drop shade, relief shade, close shade, or printer’s shade, we’d urge you to polish up on your ‘heirloom terminology’ (a term, we believe, just coined by Mr Brown) and take a look. As he puts it:

Heirloom terminology like this helps us remember where we came from. Although browsers have only just begun to support CSS3, graphic design mechanisms like text shadows aren’t a new thing. We have boundless precedent on which to rely, if we know where to look for inspiration.

Inspiring as ever, you can see the various shading techniques explored on a sample page designed by Mr Brown to accompany the post. Great work.

1311182700 · Christopher Murphy · Follow Us on Twitter

New Adventures 2012

New Adventures 2012 [Detail]

If you missed Mr Simon Collison’s excellent New Adventures in Web Design earlier this year you missed a real treat and you really owe it to yourself to attend Version 2.0 at The Albert Hall in Nottingham, from 18-19 January, 2012.

We’re delighted to be joining a stellar lineup including Messrs Koczon, Manson and Walton, not to mention Ms Naomi Atkinson and Ms Denise Jacobs. (As if that wasn’t enough to tempt you, Messrs Bodien, Chimero, Mall and Schmeisser will also be in attendance, imparting their ever valuable words of wisdom.)

We’ll be running a new and improved version of our Paper is Your Friend workshop, first delivered at Build Conference 2010 and now in its third, even better incarnation.

Delivered in the tried and tested Standardistas’ style®, we’ll explore the importance of paper prototyping as a critical, though often overlooked, stage in the design process. We’ll explore a number of questions, including: How do you get ideas in the first place? How do you capture these ideas and turn them into real, tangible design prototypes? (and) How do you create original designs that that aren’t mere carbon-copies of the most recent (1% noise) design trends.

There are just a handful of workshop passes left (and not too many conference passes). So we’d urge you to get your skates on and register now. We look forward to seeing you there.

1311180540 · Christopher Murphy · Follow Us on Twitter

Happy Tenth Birthday

BBEdit 10 is here!

The text editor of choice we swear by - BBEdit - has just reached it’s tenth birthday. Designed by the fine folks at Bare Bones, version ten is a winning combination of new features offering, as the Bare Bones folks put it:

A hundred new things. Forty bucks. Really.

Though BBEdit’s suggested retail price is $49.99, the kind folks at Bare Bones are offering it at a special introductory price of $39.99 until October 19, 2011. We’d urge you to download a trial copy and give it a whirl. We’re sure you won’t be disappointed.

Happy birthday BBEdit.

1311179100 · Christopher Murphy · Follow Us on Twitter

@standardistas: Follow Web Standardistas on Twitter.