SVG Rendering In Browsers

I noticed some strange inconsistencies across browsers when exporting .svg’s for a recent project. Safari renders .svg’s based on coordinates, Chrome renders vectors optically. This applies to straight objects as well as curves. For example, by default if a circle is drawn on whole pixles the shape will render with hard edges. It’s become best practice to decrease the circles height and width from the center by a few half pixels to reduce the hard edge and make the shape look optically correct on 72dpi screens. In addition to Safari and Chrome, Adobe Illustrator CS6 has trouble displaying pixel results in .svg files as well. The different vector renderings make it difficult to keep consistency in Ai and cross–browser.

Although .svg’s may lack visual consistency, their strengths aren’t necessarily in pixel-perfection on 72dpi screens. As the web moves further from static images to elements that animate, we should consider .svg’s for their real advantages; interactivity.

A Small UI Tweak Says a Thousand Words

I believe there is much to say behind every small, unannounced UI tweak a large web product rolls out. Are they correcting a mistake? Are they AB testing? Just a fidgety design team? Due to the subtle nature of these changes, we might never know – which makes speculation all the more enticing.

Navigating Stuckness

Beautiful personal essay by artist and computer scientist Jonathan Harris about getting unstuck.

“I didn’t want to sit in meetings, manage people, market products, raise money, and send emails all day. Really, I just wanted to make small, beautiful things.”

To see more of Harris’ work, visit his site Number 27.

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.

Optical Cortex

Optical Cortex
The inner workings of a digital product agency