The end of sprites; the rise of SVG

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.

More


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.

More


Type Nerds

Type Nerds

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.

More


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.

More


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.

More


The best of active websites of the early graphical internet

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!.

More


Retina

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

More


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.

More


Inventing the Future

Inventing the Future

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.”

More


Vitsœ online archive

Vitsœ online archive

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

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


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

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.”

More


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.

More


Pulse redesign

Pulse redesign

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!


Testing retina graphics on non-HiDPI displays

If you have OS X Lion installed, there’s a small trick that will allow you to switch to HiDPI resolution display modes. It doesn’t work on the MacBookAir because the screen is too small and the resolution will drop below the minimum required resolution for HiDPI. It works on a MacBook Pro but the maximum HiDPI resolution you can get is 720×450. However if you are on an iMac or have a display with higher resolutions, then this trick should do the trick.

More


Creating a tribute to Arnaud Mercier

Creating a tribute to Arnaud Mercier

In memory of Arnaud Mercier who passed away on the 26th of September 2011, AREA 17 launches a permanent online exhibition dedicated to his work.

Last year when our dear friend and collaborator passed away, we decided to do a tribute to him and his work. There was a lot of information about Arnaud Mercier on the web, but there was no place to see all of his work in one place. We wanted to gather all of his designs to show the breadth of his work and give people a chance to get to know the designer a bit more on a personal level.

More