Web Standardistas - HTML and CSS Web Standards Solutions

July 2013 Archives

Emoji Tracker

Alt [Detail]

Say, “Konnichiwa!” to Emoji Tracker, a tracker that keeps pace with realtime Emoji use on Twitter. The Heart is, perhaps unsurprisingly, permanently at number one, though we’re all for Mr Gruber’s challenge to, “Get PILE OF POO into the Top 25, where it belongs.”

As its creators put it:

Emoji Tracker is an experiment in realtime visualisation of all Emoji symbols used on Twitter. It updates at the speed of updates on Twitter in realtime, and thus contains rapidly updating visuals that may possibly cause problems for those sensitive to such things?

We couldn’t get its ‘Epilepsy Warning’ button to work, so should you be worried about the impact of realtime Emoji updates on your health, steer clear. Don’t say you haven’t been warned.

1375200060 · Christopher Murphy · Follow Us on Twitter

Meet Ember

Ember [Detail]

Meet Ember, your digital scrapbook, courtesy of the talented team at Realmac Software. As LittleSnapper aficionados, we were delighted to have the opportunity to beta test Ember while it was in development and we can definitely say it’s a real beauty.

Like LittleSnapper, Ember allows you to take screenshots - full-screen, timed full-screen, area (more on that in a moment), and windows - that’s just the beginning, however.

In addition to Safari and Chrome extensions, Ember has its own built-in browser, which makes snapping areas of web pages even easier. Its ‘smart element detection’ feature automagically suggests areas to snap as you roll over a page. Click to select an area, adjust your selection if needed, snap, save it to your library. Seamless. Ember’s browser is fully resizable, including handy presets for Apple devices so you can snap responsive websites at device-specific widths. Nice.

What’s that you say? You want subscriptions? You’ve got ‘em.

Ember’s Subscriptions feature allows you to subscribe to your favourite web sites or, should you ‘Need Inspiration?’, choose from one of Ember’s carefully filtered suggestions, making it easy to collect all manner of inspiration from Dribbble, Pttrns, IICNS, and a host of others. As a means of gathering visual inspiration and scrapbooking, Ember’s Subscriptions are simple and intuitive and ensure you’ve no shortage of visual material for your scrapbooks.

Where Ember comes into its own, however, is in its intuitive approach towards organising your Collections.

Regardless of where your images are sourced - dragged and dropped into Ember, captured to your library via screenshots, added via browser extensions, or gathered via Subscriptions - Ember ensures the process of organising your Collections is effortless. Gather related images into Collections, apply tags to your images, and – best of all – build Smart Collections based on tags and other metadata in your library. Ember’s Smart Collections intelligently organise your images, making it easy to gather project research, client screenshots, inspirational finds, or anything else you care to imagine. As the Realmac team put it:

Ember is more than just a beautiful design: we’ve worked to make it smarter than ever, with dozens of small touches that make you more productive.

This only scratches the surface. If your workflow in any way involves visual research, you’ll find Ember indispensable. We’d urge you to take a look, we’re sure you’ll find it as invaluable as we have.

1374806760 · Christopher Murphy · Follow Us on Twitter

Double Negatives and Dark Patterns

90 Percent Of Everything [Detail]

Harry Brignull walks through The Slippery Slope of dark patterns, highlighting some rather depressing – and intentionally misleading – user interface patterns designed very, very well to mislead and misdirect.

A, “paraphrased transcript of [his] talk at SMX Munich 2013,” it includes a particularly disingenuous example by none other than… Apple. Oh dear, how depressing.

[Via Mr Shiflett.]

1374791340 · Christopher Murphy · Follow Us on Twitter

Element Collages

Element Collages [Detail]

It’s safe to say that we’ve proven to be extremely late to the Element Collages party. (A mere eight months late, but – as they say – better late than never.)

Riffing on Samantha Warren’s Style Tiles (which we’ve been pointing our students towards for some time now), Dan Mall suggests Element Collages as a means of sparking a conversation with clients. As he puts it:

When talking about design with my clients, I like to have as much visual fodder as I can, in order to ensure we’re talking about the same thing. My version of Style Tiles integrates my love of collaging for a different type of execution I call an ‘Element Collage’. That particular phrase creates an expectation that what we’re looking at isn’t a final design but rather an assembly of disparate pieces without specific logic or order.

We love the idea and we’ve duly added Element Collages as a methodology to next year’s teaching resources. While you’re taking a look, you might also want to take a short detour over to http://rif.superfriend.ly, where Mall and the SuperFriendly team have shared their behind-the-scenes process on the evolution of their work for Reading is Fundamental. Great work and, as ever, it’s great to see respected designers sharing their process.

1374786840 · Christopher Murphy · Follow Us on Twitter


The Unlikely Evolution Of The @ Symbol [Detail]

We’ve always been fascinated by the history of the medium we’re working in, so it’s no surprise to discover that we thoroughly enjoyed The Unlikely Evolution Of The @ Symbol (when, indeed, we discovered it).

As its title suggests, a wonderful post charting the evolution of the @ symbol, its author John Brownlee, explores the history of @, from a symbol at the service of bookkeepers for hundreds of years, to a pivot in 1971, when it evolved to find itself – literally – at the heart of email.

As Brownlee puts it:

In 1971, however, a keyboard with a vestigial @ symbol inherited from its typewriter ancestors found itself hooked up to an ARPANET terminal manned by Ray Tomlinson, who was working on a little program he’d come up with in his goofing-off time to send messages from computer to computer. Tomlinson ended up using the @ symbol as the fulcrum of the lever that ultimately ended up lifting the world into the digital age: email.

And so it remained, for decades (a considerably shorter span of time), before, in 2006, Twitter launched and, once again, @ began a new life, organically evolving into the accepted reply mechanism for @twitter and, ever-evolving, slowly, but surely making its way to Facebook, Flickr and… everywhere.

All told, a thoroughly enjoyable read. Thank you, @drcrypt.

1374786060 · Christopher Murphy · Follow Us on Twitter

2013 Freelance Rates Survey

2013 Freelance Rates Survey [Detail]

If you’re a freelance designer or developer working in the web industry in the UK, take a few minutes to complete Cole Henley’s 2013 Freelance Rates Survey. The survey is completely anonymous – “PRISM permitting,” as Mr Henley puts it – and will be compiled into a tool to help freelancers work out what they should (and could) realistically charge as a day rate.

Take a look at last year’s results, to get a feel for how your data will be put to fine use. As always, great work Mr Cole.

1373670120 · Christopher Murphy · Follow Us on Twitter

Tricky CSS Selectors Quiz

Tricky CSS Selectors Quiz [Detail]

Think you know CSS inside out? The Tricky CSS Selectors Quiz separates the men from the boys and the women from the girls.

1373424180 · Christopher Murphy · Follow Us on Twitter

The 90s Button

Rainbows and Animated GIFs [Detail]

Unleash heaven and brighten your day with a spot of instant 90s music courtesy of The 90s Button. ‘Summertime’, ‘I Need Love’, ‘Mysterious Girl’, ‘Pretty Fly (For a White Guy)’, ‘I Will Always Love You’…. Classics.

1373301840 · Christopher Murphy · Follow Us on Twitter

Cloud Typography

Introducing… [Detail]

Say, “Hello!” to Cloud.typography, H&FJ’s much anticipated entry into the wonderful world of web fonts. It’s a beauty.

As one of the few foundries that brings together an extensive and beautifully-crafted library of typefaces, a deep understanding of the challenges that screen-based typography poses, an appreciation of the web and the possibilities it offers, and – perhaps most importantly – the scale to build its own, bespoke web typography solution, H&FJ’s entry into the web type space has been eagerly anticipated.

Put simply: We’ve been waiting some time to see what Messrs Hoefler and Frere-Jones’s solution to the web typography conundrum might be. Needless to say the wait’s been well worth it.

At the service’s heart lies a marriage of, “one of the world’s most sophisticated type libraries,” with, “a powerful and intuitive web interface,” that looks set to prompt designers the world over to reach instinctively for their credit cards (don’t say you haven’t been warned).

H&FJ’s formidable library has been rethought for the screen and, as you’d expect from the two typographic titans at the heart of the company, designed and engineered to deliver the outstanding quality you’d expect at text sizes as small as nine pixels. The launch sees the introduction of more than 250 new fonts, the H&FJ ScreenSmart Collection. As they put it:

Not just fonts on the web, fonts for the web.

The ScreenSmart Collection, adaptations of H&FJ’s hardest-working typefaces, have been completely reimagined for the screen. Built for web text, they’re, “designed around the natural properties of pixels, and engineered to deliver precise results everywhere.” They’re absolutely beautiful.

At the heart of this typographic tour de force and facilitating its delivery lies, “an autonomous ‘delivery agent’ that lives in the cloud,” which, behind the scenes, undertakes what can only be described as magic. As H&FJ put it:

From its massive database of font files, each built for one specific browser and platform, the system gathers all the webfonts needed to render your palette in every environment.

It constructs an application capable of recognising requests from different browsers, that can instantly supply each browser with exactly the fonts that deliver the best experience. This application runs in the cloud, fully cached across more than 125,000 servers worldwide.

Add a line of CSS (no JavaScript required) and you’re good to go. Yippee.

When these two halves of the equation come together – beautifully optimised font families and a seamless delivery agent – the result is the web typography service one expected all along from H&FJ. A service that marries the tradition and craft of offline typography (looking back) with the opportunity and potential of online typography (looking forward). Impressive.

With entry level pricing set at just $99 per year (which includes your first five webfont packages) it’s easy to imagine we’ll be seeing H&FJ’s type everywhere (and that’s no bad thing). We’re looking forward to giving it a whirl.

1372809120 · Christopher Murphy · Follow Us on Twitter

@standardistas: Follow Web Standardistas on Twitter.