Category Archives: Design

Mobile vs Retina


While the web is certainly in a state of constant evolution, a seemingly pivotal transition period seems to be underway. One of the last more significant transitions was going from dialup to high-speed broadband during the early to mid 2000’s. That evolution allowed higher bandwidth sites like Flickr and YouTube to flourish.

The latest evolution of the web does not come from the web itself, but rather the devices that we use to view it. Well, there are actually two parts to this evolution: mobile and Retina Displays (high pixel-density displays). And they seem to be, at least temporarily, at odds with eachother—more about this conflict later.


Before Apple unveiled the iPhone back in 2007, mobile browsing of the web was, in hindsight, a total joke. Now, browsing the web on a mobile device can be an equal, if not superior, experience compared to on a laptop or desktop.

So, designing for the web is now a bit more complicated. It’s vital for designers to create sites that perform well on all types of devices. This has led to creating mobile versions of websites and more recently, responsive websites. ((These are huge topics and we plan on sharing some thoughts regarding responsive sites in the future.))

Retina Displays

Without going into too much detail, here is a brief visual overview of what a Retina Display is:

Pixel Density

It’s really pretty simple. Retina displays basically have 4 pixels jammed into the space that used to take up one pixel. This makes for really beautiful screens.

retina display diagram 1

Physical Image Size

The same size image on a retina display would be half the physical size of the same image displayed on a non-retina display. To “counteract” ((I say counteract because without scaling 2x, any images used for navigation would probably be too small to be usable. Also, scaling 2x presents the image more than likely closer to the creator’s original intent.))  this effect, the device’s operating system automatically doubles the scale of images (and text).

retina display diagram 2

The funny thing about retina displays is that when they display images ((Notice I mention images—as in static images. Videos, because they’re “moving pictures” don’t look nearly as bad)) that are not “retina” quality, the images look terrible.

Apple popularized the Retina Display ((Apple has labeled their high pixel density screens Retina Displays. That term, while really only refers to Apple’s devices, seems to be sticking. So, I’ll be using the term “retina display” in a more generic sense—say, anything with more than 220 pixels per inch. Sorry Apple.)) with their iPhone 4. Retina Displays are now availible on iPhone, iPad and most recently available on a MacBook Pro. HTC, LG, Motorola Mobility and others have followed suit.


There are already several solutions to serve up high-resolution images to retina display devices. We even came across this which is very interesting, but seems a bit hack-y in execution.

At odds

The conflict between mobile and retina goes back to bandwidth. Mobile devices are increasingly showing up with retina displays. But for images to take advantage of retina displays, they must contain more pixels. More data. More kilobytes—megabytes even. This is a nightmare for the seemingly struggling carriers, and data plans they offer to the penny pinching consumers.

Our attempt to add to the solution

We thought we could add to the solutions ((We are using retina.js to serve up @2x images to screens with a 2x CSS pixel ratio and non-retina images to screens with a 1x CSS pixel ratio)) mentioned above by letting the user decide whether or not to display retina images. We present the user with the ability to toggle between retina and non retina images. With 4G/LTE still sparse and with limited data plans we decided to make the default set to show non-retina images. A simple toggle and the page refreshes with beautiful retina images.

You may notice an actual difference in the content of many the images—mainly images in projects tagged with web. Many of the sites we have designed are built at a static page width of 960px. So when we want to show these as retina images the 960px width doesn’t fill the entire frame. So you’ll just see a bit more background color. This just goes to show that the 960px width page is or is soon to be dead. #responsive

Still mobile

Apple’s has indicated with it’s latest MacBook that not only will our smaller devices sport Retina Displays, but, now, our primary workstations will too. The new MacBook is still very much a portable machine. So, bandwidth can be an issue especially if you’re using your smart phone as your internet connection.

When Apple starts rolling out desktop workstations with retina displays, we might have to reconsider our approach. But for now, we think it’s a dandy solution.

What do you think?

A Good Design Philosophy

Pinterest’s Founding Designer Shares His Dead-Simple Design Philosophy

Stop thinking about design in terms of wire frames or visual style; it is about the product as a whole. Designing is figuring out the purpose of your product and how you orient everything else around it. And that means that everyone within a company plays a role in the design process. And thatmeans that everyone in a company needs to learn design literacy. It’s a hard task.

This is a concept that we can’t stress enough to our clients. As more companies with strong design sense (Apple, Pintrest) become wildly successful, this concept becomes easier to justify.

Graphic design can change your life

Erik Spiekermann talking about graphic design, more specifically, type.

I found myself very inspired by this video. I especially like the part where Erik talks about government using poor design (tax documents, etc.) to separate us from the government by making us stupid—”we don’t understand so we do what we’re told.” I think there is some serious truth in that.


The Future for Web Design?

If you follow Smashing Magazine, as I do, then you are probably familiar with last week’s highly commented articles debating what the future might have in store for web designers.

For your reference:
Does The Future Of The Internet Have Room For Web Designers? (original article)
I Want To Be A Web Designer When I Grow Up (follow up article)

Cameron Chapman suggests that due to the recent surge of mobile apps and other content curators (Google, Twitter, Facebook) the future for web designers is glum and that demand for web designers will wane.

It is an interesting topic and I wanted to add to the discussion with some quick thoughts:

Cameron might have had better luck with a slightly modified title: “Does the Future of the Internet Have Room for Web Design?”

Consumers will go where the best experience is. Look at the movie industry. Consumers found a better experience watching movies at home on their large HD screes, Blue Ray players, and Dolby surround sound. Theaters fought back with 3D… and now with 3D tvs at home, the battle continues. If you want to attract consumers to your website, create a better experience.

Generally, a good designer transcends multiple mediums or will evolve as necessary. If you consider yourself solely a web designer the possibility does exist that demand for you will disappear (see: typesetting).