Web Standardistas - HTML and CSS Web Standards Solutions

September 2012 Archives

Scrollbars Through History

Scrollbars Through History [Detail]

Three decades of scrollbars in one handy PNG. What’s interesting to note are how similar (though differently handled) the beginning and end points are.

Beginning with Xerox Star’s flat, utterly two-dimensional abstraction, the journey of scrollbars through history is a parabola of progressive extension into three dimensionality, reaching an apogee of 2001’s candy bar Mac OS X with its shiny, blue depth, before returning to the flatness of Mac OS X Lion’s restrained, once again monochromatic approach.

A fascinating journey and one which, in a microcosm, shows the evolution of UI thinking over the years.

[Via Mr Gruber.]

1348752300 · Christopher Murphy · Follow Us on Twitter

Your Very Own Army

human.io [Detail]

File under extra-pinch-of-nerdery required: human.io is an interesting looking framework built to allow you to create applications – with just a few lines of Python – which allows you to create and manage micro-tasks to be carried out by your “army of followers” who will receive instructions via their iPhone or Android device, and (hopefully) obey your every whim.

If you have your eyes on becoming a megalomaniac despot with a troop of helpless serfs under your command, you better start learning some Python, pronto.

1348745640 · Nicklas Persson · Follow Us on Twitter

Source Code Pro

Source Code Pro [Detail]

Hot on the heels of Source Sans Pro, the fine folks at Adobe have now released a companion monospaced variant, Source Code Pro, and it’s lovely. Writing at Typblography, Paul D. Hunt - the typeface’s designer - states, “As with Source Sans, I sought to distill each letterform to its simplest form….” The result is an elegant, legible monospace that’s free to download from SourceForge.

Like Source Sans Pro, Source Code Pro is also available through Typekit, Google Web Fonts and Adobe’s recently announced Adobe Edge Web Fonts service so it’s easy to serve in a web-based context.

On the release of Source Sans Pro, we wrote, “It’s nice to see a company of Adobe’s size open sourcing what would otherwise be a valuable source of income. Hats off to them.” It’s great to see this spirit is continuing. Hats of again.

1348662780 · Christopher Murphy · Follow Us on Twitter

Adobe Edge Web Fonts

Adobe Edge Web Fonts [Detail]

In an interesting new addition to the free web fonts landscape, Adobe – which recently acquired Typekit – announces Adobe Edge Web Fonts, “A vast web font library made possible by contributions from Adobe, Google and designers from around the world.” Powered by Typekit, ensuring a robust and distributed delivery underpins the platform, Adobe state that the initiative is intended to ‘improve the web’, as they put it:

Adobe Edge Web Fonts aim to improve the web by enabling more web font adoption.

If you’ve been reluctant to dip your toe in the water of rich web typography due to cost, you no longer have any excuses. Give it a whirl.

1348661460 · Christopher Murphy · Follow Us on Twitter

Pocket Guides

Pocket Books [Detail]

We’re delighted to announce that we’ll be partnering with Five Simple Steps on their forthcoming Pocket Guides series. Our first contribution to what looks set to be an exciting new Five Simple Steps venture, is a little tome titled ‘The Craft of Words’, which will examine words as a design element and how writing shapes users’ experiences.

As the folks at Five Simple Steps put it:

Pocket Guides are concise ebooks, focusing on specific and timely aspects of web design and development, each written by experts in the industry – and all for the price of your favourite coffee.

Short, smart and quick to download, they’re the perfect way to fit a little burst of knowledge into your process, whether that’s picking up a new skill, learning a new technique or familiarising yourself with the latest developments. Each book will be available to download in PDF, ePub and mobi formats to suit all screen sizes, making them easy to pick up and read wherever you are.

All our authors are handpicked for their knowledge and experience, so you can be confident that what you read will be useful, practical and applicable to web design right now.

We’re happy to say that this is just the first in an ongoing series of ebooks we’ll be partnering with Five Simple Steps to publish. As anyone who has attended a conference we’ve spoken at recently knows, we’ve been working on a similar series of short, focused ebooks under the banner Standardistas Singles, we’re happy to say, that we’ll be partnering instead with Five Simple Steps to publish these ebooks from here on.

We’ve a great deal of respect for Five Simple Steps, their values and approach and we’re looking forward to working with them to share our writing a little more widely. Watch this space for future publications (not least on the topic of typography, a subject that’s dear to our hearts).

The first five Pocket Guides - which include books by Brian Suda, Tim Bown, Rachel Andrew and Joe Leech – will be published by Five Simple Steps in January 2013, you might like to put a little note in your calendars now so you can pick them up when they’re hot off the digital presses.

1348613760 · Christopher Murphy · Follow Us on Twitter


simpl.info [Detail]

In a time where the sheer proliferation of information can become blinding, it is a relief to find resources which aim to be simple rather than complicated.

Following that very philosophy, the folks over at simpl.info have started a nice little page that should come in handy if you’re looking for the solution to a HTML, CSS or JavaScript problem. Nice (and simple).

1348102380 · Nicklas Persson · Follow Us on Twitter

Typographische Monatsblätter Archive

TM RSI SGM 1960-90 Research Archive Beta [Detail]

In a comprehensive feat of typographic and archival endurance, Louise Paradis, along with the guidance and support from friends and staff at the ECAL/University of Art and Design Lausanne, has launched the Typographische Monatsblätter Archive, an impressive and extensive archive dedicated to celebrated Swiss typography journal Typographische Monatsblätter.

The archive, which focuses on the years 1920-90, gathers three decades of typographic research and inspiration from one of the pinnacles of contemporary typographic publishing. Featuring stunning covers, typeface identification and interviews with many of the magazine’s contributors, it’s a resource you can find yourself investing hours in exploring.

Searchable by cover, issue, designer and interview, Typographische Monatsblätter Archive is a comprehensive archive that you’ll find yourself returning to again and again whenever the need for a little typographic inspiration arises. Stunning.

[Via Mr Weston.]

1348077180 · Christopher Murphy · Follow Us on Twitter

Refresh LX

Refresh LX [Detail]

It might have outwardly appeared that we’ve eased off the gas since our recent (and thoroughly enjoyable) A Dozen Questions… interview with the talented Mr Marcotte. That would, however, be an inaccurate picture of affairs. Like the elves that tirelessly slave away in the poor old shoemaker’s workshop, we’ve been hard at work on a new, and we think, exciting workshop on Crafting Typography which we’ll be delivering for the very first time at Refresh LX, Lisbon.

In addition to our workshop, we’re delighted to announce that we’ll be delivering a keynote on a complementary typographic theme, titled Typographic Pasts and Presents. Together our keynote and workshop present a holistic view of the wonderful opportunities that rich web typography offer as we move forward, whist not forgetting lessons we might learn from the past.

Our keynote contextualises the exciting typographic landscape we now inhabit. Whilst its tempting to think of this landscape as a new and undiscovered land, it is – in fact – a land of opportunities that has been comprehensively mapped before. We journey through the past, cross-referencing to the present, discovering design patterns and approaches that – thanks to the possibilities rich web type offers – allow us, as designers, to once again rediscover timeless design qualities, creating works which sit outside of time.

Where our keynote explores typography in relation to the past, our workshop explores typography in relation to the future. We’ve put together a comprehensive and very much hands-on workshop that covers everything you need to know to create typographically rich and inspiring designs here and now, complete with a full package of comprehensive workshop files, clearly organised and structured with extensive additional post-workshop reading to help participants broaden their knowledge.

In the spirit of sharing that characterises our medium we’ve shared our workshop plan which provides a detailed outline of what we’ll be covering. We plan to publish future workshop outlines in a similar manner, in the hope that they might offer other educators fuel for thought.

We’re honoured to be joining a great line up including: Jeffrey Zeldman, Josh Clark, Mark Boulton, Sarah Parmenter, Tantek Çelik and Simon Collison, to name just a handful. We’re sure, like the last time we were in attendance in Portugal, it will prove all round fun’n’educational’games and we very much hope to see you there. Do come and say, “Hello!”

1348021800 · Christopher Murphy · Follow Us on Twitter

A Dozen Questions for Mr Marcotte

Ethan Marcotte [Detail]

Ethan Marcotte is a designer, developer, writer and speaker who, amongst his many and considerable achievements, is perhaps best known for coining the term Responsive Web Design. He lives and works in Boston.

A man of many talents, Mr Marcotte has authored a number of books, including: the excellent Responsive Web Design, the definitive book for anyone interested in embarking on a responsive journey; Designing With Web Standards, co-authored with Jeffrey Zeldman; and Handcrafted CSS, co-authored with Dan Cederholm. A regular contributor to A List Apart, Marcotte also speaks at conferences internationally, spreading the responsive word far and wide.

We asked Mr Marcotte a dozen questions.

Unstoppable Robot Ninja

Where did you learn your craft?

I’m still learning, frankly. I started designing for the web over (Oh, God!) fifteen years ago, mucking around with HTML and a questionably–obtained copy of Photoshop in my college dormitory.

Web design really started as a hobby for me – a thing I tinkered with when I was avoiding homework – but it eventually became a bit more than that. After school I got my first studio job, working alongside some of the most creative, talented people I’ve ever met, and was thoroughly hooked at that point.

Who inspires you?

My wife, Elizabeth. She’s funnier than me, smarter than me, and more talented than me by miles.

What are your influences?

Blame my lack of formal training, I guess, but I’ve always, always loved a good movie poster. In my office I have prints of Schlutz–Neudamm’s Metropolis, Jim Pearsall’s Chinatown, Saul Bass’s Vertigo one-sheet, and John Alvin’s Blade Runner. I could stare at those for days.

Ethan Marcotte - Responsive Web Design

Responsive Web Design has become part of the establishment since the phrase was coined back in 2010. What do you feel are the biggest challenges facing RWD today?

There are plenty of technical challenges, but we’re fortunate to have folks far, far smarter than I working on them. Advertising is one of the thornier issues out there, but the likes of Mark Boulton and Roger Black are chatting about the challenges it, and other factors, pose in great detail. Performance is (and should be) a concern of every responsive–minded designer; fortunately people like Filament Group and the BBC are guiding us through some of the challenges.

Generally speaking, though, I get the sense that the biggest challenge for many getting excited about responsive web design is this: “Where do I begin?” We’ve been designing with a rather fixed view of the web (no pun intended) for some time now, and our process is just starting to break out of it. That’s the discussion I’m really interested in: How do we really design for a completely flexible design medium?

Looking forward, what lies beyond RWD?

Man, I don’t know. I rarely know what the web’s going to be in a few day’s time, much less a month or two down the road.

I will say that, in my own practice, I’ve found the way I work is changing. The people I work with realise the web has moved beyond the desktop, so my process has been changing, too. Much less formal, with an emphasis on prototyping, sketching, and revisiting old ideas as we test them. It’s a bit scary to toss out old, trusty methods, but it’s liberating, too. Y’know. When the crying’s stopped.

That said, I don’t think I’m the only one realising we need to change the way we work; if anything, things are going to start shifting more quickly. I mean, by a large, large margin, the next wave of urbanisation will be happening in the ‘developing world’. What does that mean for us, and our assumptions about what’s most valuable for our audiences?

I have no idea, but it’s going to be a wild ride.

As well as coining the term Responsive Web Design you’ve made great efforts in establishing a discourse for the humble animated GIF, which has seen a resurrection in popular culture after a decade of decline. What, in your opinion, is the allure of the GIFa?

Man. Everyone’s going to have a different answer for that question.

For me, GIFs are like this imperfect little emotional shorthand. I started using them on Twitter, where character counts make every letter dear, as ‘current status’ updates. (Which have apparently turned into a thing.) It’s much easier to point to something like this when you’re having a crap day than, you know, starting a Blogger account and openly moaning for paragraphs on end.

So yeah, my love of GIFs isn’t exactly the most… elevated form of expression, but GIFs have recently become a real art form: Gustaf Mantel’s IWDRM; Kevin Weir’s Flux Machine. Even something as simple as a little background animation can make an otherwise straightforward GIF feel poignant, almost touching. For a file format that, well, was born out of an accidental hack, I love that it’s both ‘high’ and ‘low’ art at once.

'Excellent!' I cried. 'Elementary,' said he.

Language clearly matters to you – we particularly enjoyed your lesson in the latest issue of The Manual – yet language is often overlooked as a design element by many. How might we open the eyes of the masses to the wonderful opportunities that language offers?

I don’t know if I’d be in this industry if I hadn’t found Scott Andrew LePera’s blog and, through it, Zeldman’s. Hell, the only reason I got interested in that whole ‘web standards’ thing was because Jeffrey was writing about it so impossibly well. For me – and, I think, for a few other people – he elevated CSS and HTML out of talk of curly braces and angle brackets and into an imperative, using nothing but some of the finest language I’ve ever read. Hell, there wouldn’t have been any of this ‘responsive web design’ nonsense without John Allsopp’s A Dao of Web Design.

Words can linger, they can wound; they can exhort or incite. Read anything written by Erin Kissane, Mandy Brown, or Paul Ford, and try not to feel inspired to write something of your own.

You’ve been cultivating your profile on Twitter since 2006, and fit the demographic of the early geek adopter perfectly. Twitter is a very different place than when you joined nearly six years ago, have the moves towards a more controlled, homogenous Twitter experience made you feel different about the platform?

Well, I don’t presume to speak for other early Twitter users, but my sense is that there’s a kind of cautious concern as we wait to see what happens next.

Twitter is, understandably, moving to make this wonderful thing they’ve built profitable, but I hope it doesn’t come at the expense of the openness and flexibility that made Twitter great in the first place. If there ever comes a time I can’t use, say, Twitterrific or Tweetbot to read posts as I want to, I’m not sure I’ll be as excited about it as I used to be.

But! Twitter employs some of the finest people I know, who care about Twitter as deeply as I do. I’m honestly looking forward to seeing what they do next.

You describe yourself as a true renaissance man: web designer, developer, speaker and author. If you had to pick just one, which would it be?

If the web went away tomorrow, I’d move into the hills of Vermont and write. Every day I don’t write something down – and there’ve been more of those recently than I’d like – I miss it.

(Did I really use the phrase ‘renaissance man’ to describe myself? Really? Could one of you two fine gentlemen punch me, please?)

MFA Interaction Design

What’s your favourite typeface?

Hmm. I don’t think I have one favorite. Lately, I’ve been circling around TypeTogether’s Abril for display, especially the heavier italics. I’m also a sucker for a good, geometric sans, and can’t stop drooling over Process Type Foundry’s Colfax.

What’s your favourite plain text editor?

For work, I’ve been using TextMate since it was released, and love it; it’s just as good as Allaire HomeSite, my lost love and The Editor To Which All Other Editors Should be Compared. I’ve recently switched over to the TextMate 2 alpha, since it’s now seeing a flurry of development, and it’s been fantastic.

For writing? All I need is SimpleNote/Notational Velocity, and I’m happy.

What’s your favourite tea?


1347555540 · Web Standardistas · Follow Us on Twitter

Menu Please, Maestro

Maestro – Beautiful Menus That Work Great, on Screen and Paper [Detail]

Menu Maestro is a promising new web service for restaurants from one of our talented graduates, Mr. @armstrong (who, contrary to popular conviction, hasn’t been to space).

The concept is simple (as the best ideas often are), attempting to solve a small, but niggly problem: restaurant websites seem completely incapacitated when it comes to sharing their menus online in a decent, easy to read fashion.

Here’s hoping the product is successful and gets buy-in from restaurants, it would certainly take away some pain and add an equal amount of pleasure to anyone needing to quickly check a menu on the move.

1347413940 · Nicklas Persson · Follow Us on Twitter

@standardistas: Follow Web Standardistas on Twitter.