Feed Me

The MacBook Pro with Retina Display changed more than your appetite for resolution; it will change the way many people view the web. Because its resolution (around 300 dpi) is so much higher than most (72/96 dpi) screens, many websites will either look too small or many sites will begin to get fuzzy looking. (example below)

There’s a few ways to compensate. The way that will be discussed here is to use .svg for images where possible. SVG or Scalable Vector Graphics have been around since 1999 but have limited adoption for web use until recently. As usual, Internet Explorer lags in adoption, but the good news is that according to wikipedia, IE9 supports the basic svg feature set.

UPDATE:  added .png example – thanks for the suggestion Chris!

These two images are both generated from Adobe Illustrator. The one on the left is our rusty-dusty .jpg format, the middle a transparency supporting .png while the one on the right is an crisp and smooth and transparency supporting .svg. What? You say they look the same? We say, right you are!

But wait and see what happens when you start to scale the exact same files.

     
Fuzzy Wuzzy was a jpeg (or png).

The imagse on the left and in the middle is what your website will look like on a HiDpi screen like the Retina, whereas if you use .svg icons, navigation elements, and other graphics your site can stay clean, large and crisp.

And, because I love you and don’t want your websites to gain any weight, check out the file size on these images.

40px by 68px JPG: 4,329 bytes
40px by 68px PNG: 937 bytes
40px by 68px SVG: 1,273 bytes

You may be saying, but that’s barely a 4k footprint for file size for a .jpg That’s true. However the beauty of the .svg is that you can scale the dimensions indefinitely and it still maintains it’s original file size.

1000px by 1700 px JPG: 134,505 bytes
1000px by 1700 px PNG: 49,075 bytes
1000px by 1700 px SVG: 1,273 bytes

There’s a lot we could talk about to properly prepare svg files and how it will affect your website of the future. Feel free to reach out in the comments below or @stotion on twitter.

Protip: As of the writing of this post, WordPress doesn’t natively support the .svg file format. So, like the Zelda guru says “It’s Dangerous To Go Alone, Take This …  SVG Plugin”

Yesterday, Chris gave a great presentation about the new navigation on the Apple.com navigation menu at Eli Kirk (where we’re coworkers constantly tweaking the web).  It’s sporting a svg sprite with subtle dimensionality effects. It’s a well-crafted and not-too-hard-to-recreate example.

Liquipel technology is easy to love; and it’s been a blast showing off it’s capabilities. Soaking your iPhone (with no case) in water with no damage to the device tends to surprise people. Not only has demonstrating the water safe technology been fun, but developing the Liquipel brand energized me every time I got to work on it. Everything ranging from logo design, website, CES display strategy, package design, photography and large environmental displays.

Here’s a few of the things I got to work on.

Download vector version of Liquipel logo here

Props to them for their nomination for an Edison Award 2012 and for the display at CES.

Designed while at Eli Kirk

Photography: Stotia

A great collaboration between Shawn Murdock and myself. This time he was the design lead and I did the flash creation. This site uses some nice and fancy flash actionscripting to keep the motion smooth, custom right click navigation and SEO strength too.  You should check it out to see the sweet transitions.

Details:
Design: Shawn Murdock
Flash Development: Seth Taylor
Time to complete: 2.5 weeks
Software: Flash CS3, Caurina Tweener Actionscript Class, Smultron

Responsibilities: Photos and site design

Home page design

It was a pleasure to work with Aspen Cove / Mark Nelson. Beautiful location for a cabin in Utah. Photos shot with Canon 5D Mark II.

My responsibilities were logo creation, product design, photography, website design, interaction, and managing the shopping cart coding and some training.