The end of sprites; the rise of SVG

SVG markup

About a year ago, Ned proposed the idea of switching our method of displaying icons and other small graphics in websites that didn’t use sprites. He suggested we used individual SVGs instead.

At the time we were making sprites and had become become quite adept at building them; though they were a constant source of frustration. In the middle of 2012 Apple released the Mac Book Pro with a Retina screen, which added new impetus to seek out ways of making sprites appear sharp on high resolution screens. Our first solution was to make double size sprite files and resize them with CSS for high resolution screens. This solved the problem; but gave us more problems. Now we had two sprites to maintain and more frustration.

So an SVG solution was worth seeking out.

Ajax Pinterest Buttons

It turns out re-rendering or rendering ajax’d into place Pinterest buttons is quite straight forward. Not that you can find this in the Pinterest docs…

Update the way you include the Pinterest js:

<script defer="defer" src="//assets.pinterest.com/js/pinit.js" data-pin-build="parsePins"></script>

The defer defers loading of the script until after the page has loaded. The important bit is the data-pin-build attribute. This makes the pinit.js expose its internal build function as parsePins on the global window object.

And then to use:

// parse a DOM element
window.parsePins($("#element")[0]);

// parse the whole page
window.parsePins();

The function is looking for a DOM node and not a jQuery object which is an array like object; so selecting the DOM node the jQuery object wraps is needed.

And thats it.

Forward MoMentum

Chicago White Stockings, 1885

The top four things that Movember did/does right.

There’s a chill in the air, the leaves have changed and flannel is once again the fabric of choice. Clearly, that means that another Movember is upon us. These days, Movember requires little explanation (unless you’re my parents). But for the sake of recap, here’s the quick and short:

One night in 2003, some friends in a Melbourne pub were discussing the age-old decorative facial styling known as the mustache. (By the way, it is old indeed, with the first visual recording of the cropped growth being a portrait of an Iranian horseman from 300 BC!) These two blokes wondered about the dip in the mustache’s popularity, and settled to grow some themselves.

Kohana workaround to side-step debug information in production

Kohana provides a nice exception handler (and an error handler that transforms errors into exceptions using PHP’s ErrorException class) which displays all kind of useful information in a development environment.
In addition to the error/exception related information, you also get environment-specific information that can help you troubleshoot your application : path of your application, php extensions, server software, and so on. Of course, it is always bad to display this kind of information on a live website.

As an interactive agency, it goes without saying that we love all things digital and all the possibilities that the Internet affords. But as designers, we can’t help but also love print. So we’re really psyched to see a growing interest that brands have in publishing their own magazines.

This article asks whether “print is the new black” since it seems that more companies are looking to create niche magazines with bona fide editorial content as a complement to digital marketing and in lieu of more traditional forms of “disruptive,” outbound TV and print marketing.

While being reported as a trend, this analog version of what digital marketers call “content marketing” is what the print industry has always referred to as custom publishing. It’s been around for while. Apparently, farming equipment maker John Deere has been publishing a quarterly journal about agriculture called The Furrow for over 118 years! Who knew?

Demo: Dynamic Device Wrapper

Playing around with some marketing page concepts and came up with an interesting way to display content on multiple devices with one element in the markup. Check the demo here.

Inspired by device-loop from slid.es.

Decision Fatigue and UX

I just recently came across a really nice article by The Atlantic about decision fatigue. This is the concept of a person trying to make a decision between more options than their brain can process – resulting in no decision at all. Read it here. Among the great comparisons to real life, I think the following principles referenced from the psychologist Sheena Iyengar can be used as an excellent UX tool.

photo © flickr user needtoptic

Last weekend a few of us checked out an exhibition called Pencil to Pixel, a showcase of rare finds from the Monotype type Foundry’s archives. We were educated by a type designer currently working at Monotype about the history of the foundry, advancements in type design & reproduction over the years, and some stories about printers and type designers of the past. A few exciting points were the original “sketches” Eric Gill gave to the designers at Monotype of his now robust Gill Sans, a case of goodies by the designers at ITC including a tissue sketch by Herb Luballin, and a demonstration of some new advancements in web typography by Typecast.

Excuse me, does my font look big?

If you’re an internet denizen or professional, you may have noticed sites throwing away the standard size 13-16pt native font in exchange for a much larger, in your face, type size. Showing up sometime around mid last year, this bold statement is still mostly championed by independent design blogs and small agency websites – and seems to be growing. As a UX and readability obsessor, I am thrilled! Before getting into why, here is a brief background.

Today I learned: you can have paletted PNG files with 8-bit alpha

For years I’ve been saving out graphics for websites as either 8-bit PNG or 24-bit PNG. Photoshop always gave me just those two options and so I assumed they were the only two options; if we needed fully transparent backgrounds we used 24-bit and if we didn’t we used 8-bit. IE6 had trouble with 24-bit PNG with the alpha channel so we often just fell back to 8-bit with 1 colour transparent backgrounds. And thats the way things where.

The best of active websites of the early graphical internet

So recently I’ve seen a bunch of tweets/blogs touting the end of skeuomorphic design and the rise of flat design. Also a bunch of tweets/blogs using the word skeuomorphic, which previously I’d never seen and consequently had no idea what it meant. And then I saw this website: {404} PageFound!.

Retina

Is it time we build websites for retina displays first and then, maybe, optimise for sub-retina displays afterwards?

To lightbox, or not to lightbox

Much to my annoyance, lightboxes have become pretty ubiquitous on the internet. I’m bored of seeing them and bored of making them. And the more I use my phone for viewing websites, I’m frustrated that the vast majority of sites use them regardless of the device accessing the site.

For Facebook Stories I decided I would act upon my frustrations. When building the site I included simple conditionals in the JavaScript that enabled the lightbox, based on screen size and if the device was a touch screen.

Star Wars: The Clone Wars

This week saw the Clone Wars animated series air its 100th episode. Much has been written about this series; after the mixed reactions to the prequel trilogy this series has given new life to the franchise to viewers young and old.

Project kick-offs: agenda, scope, team, emotions

A few you must wonder what us Producers do all day as we hit our keyboard keys, talk on the phone and go in and out of meetings. There’s more to our fancy Gantt chart timelines and chasing you to do your timesheets — I promise! I plan on sharing a series of posts on OC that capture a Producer’s life behind the scenes. Enjoy post #1.

Design duo Berger & Föhr state their stance on skeuomorphic design in the digital space in a blog post titled “Nobody Covets a Fake”.

A noteworthy excerpt:

“In order to create new things of new value, we must move forward in step with our technology, informed by the past, but not reliant upon it. Nostalgia has its place, but it is not in the artificial representation of natural materials and physical things (i.e., cotton, leather, steel, or wood) within a UI, or any product for that matter. The material characteristics of a product’s medium should be appreciated for their natural attributes. Similarly, we should not limit our potential in the area of UI design by responding to constraints of the physical world – nonexistent in the digital.”

Syncing Data Between Web Services

Why build something when their is a web services for it? Over the years, more and more web services have offered the ability to add functionalities to the apps we create so that we can focus on the core business. But in doing so, we often find ourselves in a situation where our data is spread across multiple services.

Syncing data manual is tedious and doing direct API integration takes time away from working on the core services of the apps we create. And when we want to sync data between two web services, direct integration is not an option. Until now….

This is your brain

I just discovered this gaming site that intends to improve your brain health and performance. According to the website, “Lumosity partners with researchers at Berkeley, UCSF, Harvard, and Columbia, among other prestigious universities. We also work with numerous health care organizations to provide cognitive training services.”

Vitsœ, a modern furniture company best known for it’s work with Dieter Rams, recently launched an online archive. The tumblr site showcases photographs, catalogs, invitations and promotional items.

Check it out!

Data visualizations reinterpreted – with Peter Saville

Joy Division’s “Unknown Pleasures” cover

Peter Saville talks about Joy Division’s “Unknown Pleasures” cover.
http://vimeo.com/51365288

Scrum vs. Waterfall

This is a post that I published on my (now defunct) personal blog a while ago. It’s a general comparison of some concepts in Scrum and their equivalent in a traditional project management workflow. I’ve intentionally avoided mentioning the advantages or disadvantages of either — you can make up your own mind about that.

Is the onslaught of grid-view feeds destroying user experience as we know it?

Love it or hate it, today eBay is supposed to roll out the v1 features of “the new eBay.” Below is a screen grab of their new feed, allowing users to quickly browse a Pinterest-like personalized feed of items based on categories/items/etc they’ve subscribed to.

Though Mashable reported it’s live, I’ve logged in but it doesn’t seem to be available to me just yet. However, I really only need to see the images to realize “right, I get it.”

Email templates vs. Energy

The English chain restaurant Pizza Expresshas long been praised for its email campaigns (well for at least over a year now, so file this under “not new news”). The praise comes largely because of how the emails appear with images disabled. From my understanding of how email is read these days, images being disabled is an increasing problem.

There’s a new Pulse in town and it looks pretty good with news reimagined by none other than Internet Explorer.

Looks like “Tablet Web” is the new black. Sometimes it is overdone and becomes a crazy experience (too much cool) but in some cases it is just enough and the user experience is focused and simple. What I love most? No right column for the sake of right columns!

Optical Cortex

Optical Cortex
The inner workings of a digital product agency

The end of sprites; the rise of SVG

Ajax Pinterest Buttons

Forward MoMentum

The top four things that Movember did/does right.

Kohana workaround to side-step debug information in production

The future of print is (already) here

Demo: Dynamic Device Wrapper

Decision Fatigue and UX

Type Nerds

Excuse me, does my font look big?

Today I learned: you can have paletted PNG files with 8-bit alpha

The best of active websites of the early graphical internet

Retina

To lightbox, or not to lightbox

Star Wars: The Clone Wars

Project kick-offs: agenda, scope, team, emotions

Inventing the Future

Syncing Data Between Web Services

This is your brain

Vitsœ online archive

Data visualizations reinterpreted – with Peter Saville

Scrum vs. Waterfall

Is the onslaught of grid-view feeds destroying user experience as we know it?

Email templates vs. Energy

Pulse redesign