Blog | Eric Paul Snowden

Speaking at Pepcon in Austin on April 29th

Eric Snowden — Mon, 22 Apr 2013 18:16:11 +0000

Next Monday I’ll be speaking at Pepcon in Austin, Texas (one of my all time favorite US cities). Pepcon is a print and e-publishing conference and I’ll be talking about my transition from print to web design, why I think now is an amazing time for others to make the leap, and how I think InDesign and Behance can help. I’ll be giving the keynote talk “Creativity and Community” on Monday morning at 9am and will be around the rest of the day to talk about Behance, responsive web design or anything else people are interested in. Hope to see some of you there!

Click here for more info on Pepcon.

Click here to see the Keynote schedule.

- Eric

Meet the Team: My Interview on the Behance Blog

Eric Snowden — Sat, 06 Apr 2013 17:15:35 +0000

I was featured this week in the "Meet the Team" section of the Behance blog. Check out the full interview here.

Launching the new 99U

Eric Snowden — Tue, 26 Mar 2013 01:32:25 +0000

Last week I was part of a small team at Behance responsible for launching a redesign of the 99U website. I was lucky enough to have the opportunity to take on this redesign as my first project at Behance, and am encredibly proud of how it turned out. It is the first fully responsive website the team at Behance has produced and is full of amazing content from the 99U editors. I’m working on putting together a post on the process that went into the site, but until then you can read this short description of the redesign.

This site wouldn’t have been possible without creative input from Matias Corea and Scott Belsky, the amazing developers John Refano and Jackie Balzer, illustrations from Oscar Ramos Orozco, and the vision of editors Jocelyn Glei and Sean Blanda.

I also feel extremely honored to be featured on the masthead of the new site.

Check out the new responsive 99U website here.

My Behance All-Stars Collection

Eric Snowden — Sun, 17 Mar 2013 02:02:49 +0000

Nike, Saks, JCP, Apple, Aol, Adobe, Twitter, Microsoft, Google, Juliard, TED & HBO. Over the last few months I’ve noticed more and more work I’m already familiar with popping up on Behance.

Recent Mobile Launches from Behance

Eric Snowden — Sun, 10 Mar 2013 03:45:10 +0000

Three new projects mark the first wave of mobile updates since joining Behance as Sr Designer / Head of Mobile. We've done some exciting foundational work for the mobile future of Behance while releasing major updates for long time users of the platform.

My First Multi-Platform Project

Eric Snowden — Thu, 07 Mar 2013 06:03:21 +0000

Just found this photo from the planning stages of my first multi-platform web/app project. Most of the configurations came later, but the first two apps launched at the beginning of 2007 – back in the dark ages of devices. I think this photo was taken in 2008 when we were just starting to plan the iPhone and connected TV versions of the app. Seems so long ago…

Check out the final project here.

My Responsive Web Design Toolkit

Eric Snowden — Sun, 13 Jan 2013 21:07:40 +0000

I built my first responsive website nearly two years ago, and Responsive Web Design has matured immensely in that time. Every week there is a new tool, framework or design pattern pushing the field forward. In light of the daunting amount of information on the topic I put together my personal RWD toolkit. I’ll be updating this list over time to give a good place to start when creating a responsive website.

Apps for Designers

LiveView

Liveview broadcasts a region of your Mac screen to an iOS device so you can view your design changes on a mobile screen in realtime. Great for fine tuning spacing, contrast and font sizes on a real device.

Check out Liveview

Invision App

Invision turns flat comps into clickable prototypes. Drop images into the web app, draw hotspots and share clickable prototypes with clients. Mobile designs will automatically resize to your device and users can leave comments on your design.

Check Out Invision

Adobe Illustrator

The ultimate responsive design tool doesn’t exist. In the future there may be a tool that allows you to design with a gui, is hooked into a fluid grid and outputs a package of html & css with optimized images. Until this day arrives, Adobe Illustrator is my tool of choice.

Symbols – reuse elements throughout a design and edit elements in one location. Symbols also make collecting assets for sprite creation easy.
Artboards – create multiple canvas sizes side-by-side and to view different screen sizes in a single document.
Text & paragraph styles – a shared feature with Photoshop, but styles in Illustrator can be exported to css using the HTML5 pack from Adobe.
Vector based – you can easily create assets that can be made into SVG graphics or webfonts for crisp icons retina devices.
Output to PSD – if needed, deliver to developers using a file format they are familiar with (and often request). As long as you break apart your symbols before exporting, you should be able to migrate all of your layers to Photoshop with ease.

Check out Adobe Illustrator

IcoMoon

IcoMoon is an online app for creating custom fonts. You can select from an existing library of icons, or upload SVG images to create a custom webfont. Scale assets to any size without pixelation or worrying about backwards compatibility for SVG.

Check out IcoMoon

Reflection

Broadcast your iPhone or iPad screen to any Mac or PC. Great for screen recording or presenting an app to large groups from your device.

https://www.reflectorapp.com/

Scroll Capture

Scroll Capture takes full page screenshots from webpages on an iPhone or iPad.

Check Out Scroll Capture

Apps for Developers

Adobe Edge Inspect

Adobe Edge Inspect lets you sync Chrome on your desktop with webkit browsers on multiple devices. View a page in Chrome and it will refresh connected devices to show the same page. The system works for iOS & Android, and also lets you use the Chrome web inspector to inspect code on the device.

Check out Adobe Edge Inspect

Codekit

While Codekit isn’t specifically for Responsive Design, I use it for all of my RWD projects. Sass and Compass are built in, with js & css compressors, automatic browser refreshing and image optimization. Code faster and output smaller files for mobile. If used in conjunction with Edge Inspect, you can make changes to Sass code and have multiple devices refresh to show changes instantly.

Check out Codekit

iOS Simulator / Safari

If you don’t have an iOS device to test on, you can download XCode and use the iOS Simulator to run your web app and Safari to debug your code.

Learn More about XCode

Sauce

Sauce is a Mac App Store app for testing websites in multiple browsers and emulators, including mobile devices. There is a monthly subscription like most VM services, but it’s quick, reliable and easy to use.

Code Libraries

TouchSwipe

TouchSwipe is a Javascript library that adds touch actions like swipe, pinch and multi-touch to your html apps.

Check out TouchSwipe

iScroll 4

iScroll replaces the default scroll functionality in iOS and Android with an optimized JavaScript solution for smoother, more native feeling scrolling.

Download iScroll

FitText

FitText is a plugin that scales headlines to fill the full width any element. Make your headlines fit in any open space.

Check out FitText.js

Enhance

Enhance.js quickly loads JS/CSS files based on need. Only load files if a class is present, or an element loads, and minimize what code is downloaded on different devices.

Download Enhance

PictureFill

PictureFill is a polyfill allowing you to use the new responsive Picture element today. Serve up different image sizes for different resolutions based on a future friendly standard.

Download Picturefill

Harvey

Harvey ties your JavaScript functions to breakpoints. Execute JS code as a user resizes a screen, or to load functions only for a specific screen size.

Download Harvey

Zepto

Zepto is a minimalist JavaScript library with a largely jQuery-compatible API. The syntax matches jQuery without all of bloat for outdated browsers. Great for mobile websites and apps built in Javascript.

Phonegap

Create native mobile apps that are compatible with all major app stores (including Apple, Android & Windows) using HTML, JavaScript and CSS.

Learn more about Phonegap

Last updated 1/13/2013

Using the Behance API for my Personal Portfolio

Eric Snowden — Fri, 11 Jan 2013 05:09:43 +0000

A few months back we released an API at Behance, and it’s pretty great. Since then we’ve had a Hackathon, tons of third party developers have signed up, and I’ve watched some great things being built. I’ve wanted to get my hands dirty for a while, and this is my first sketch.

I used the API to pull my projects from Behance and displayed them as a simple responsive app on this website. All in all, it only took about a day to put this test together and I only scratched the surface of what is possible.

Check out my Behance Projects on your phone, tablet or desktop.

Click here to check out the Behance API here.

My Top 5 Blog Posts of 2012

Eric Snowden — Mon, 07 Jan 2013 04:12:45 +0000

It’s a few days late, but I refuse to be the only blogger without a seasonal “best of” blog post. Here are my top 5 blog post of 2012, pulled from Google Analytics with posts that are no longer relevant filtered out by me. Three of the five posts here outline major themes from my year – leaving Atlantic for Behance and Responsive Web Design. A post about Instagram and some advice to designers to round out the top 5.

The Trey Songz Responsive Design Process

A recap of my design process for a large responsive website. My goal with this post was to illuminate the process of creating a responsive website from a designers point on view, a perspective I’ve found lacking from most posts on the subject.

How to get Unstuck

I originally wrote this post for my former team at Atlantic Records, but never finished it. I re-edited and posted it after a similar conversation with designers at Behance. Tips for designers to get over creative blocks.

Building my First Responsive Website

This was posted at the end of 2011 (and I actually built my first responsive website in early 2011) but it was read primarily in 2012. A high level recap of how I built this website and how I optimized it for multiple devices.

Integrating Instagram into Your WordPress Blog

The title of this post says it all. A great plugin I use for incorporating Instagram photos into my WordPress blog.

Leaving Atlantic Records to Work at Behance

The last post on this list was also one of my most personal – the blog post I wrote when I made the decision to leave Atlantic Records and join the team at Behance.

On to 2013!

New Responsive Web Design and App Design Collections on Behance for inspiration

Eric Snowden — Wed, 19 Dec 2012 21:48:52 +0000

A few months ago I started two collections on Behance, one for App Design and one for Responsive Web Design. It’s been amazing seeing all of the great app work that goes under the radar (with some huge names like Twitter mixed in) and the speed of increase of responsive web design projects launching. My responsive web design collection was even mentioned in a Venturebeat article.

Check out my collection of Responsive Web Design projects.

Check out my collection of App Design projects.