SVG Land

I love the possibilities of SVG.


And in the current landscape of mind-blowing retina displays, we can’t ignore them. Chris Coyier gives a great overview of using them; I used his technique recently in a project. It worked great! I highly recommend it.

Also be sure to check out Kyle Foster’s SVG workflow video if you’re setting all this up for the first time.

Defining Front-End Development

The Range

Front-end development. What is it? Not all code running in the browser is “front-end code” anymore. It’s become blurry and difficult to assess what a front-ender should be responsible for in 2016. Single-page apps have joined so many coding technologies together that we need something to help us understand the division of who-does-what.

On the one hand, there is still a lot of design and user flow to consider. And on the opposite side, we still need servers that retain our data. In between, Angular and other JavaScript frameworks have been doing more and more dynamic tasks: Like taking that data and using API’s to push it to the browser (a la JSON).

That’s when I came across this article early this year. It has a fantastic visual showing the range of modern web responsibilities, and as the author states:


almost all developers occupy some contiguous segment of this continuum


I love this explanation. Bravo, Matt. Bravo. Thanks for breaking it down for us.

A Monk-y Spring


I had the opportunity of working with the team at MonkDev (Monk Development) this Spring of 2014. MonkDev builds sites mostly for nonprofits and churches. I was really impressed by the sense of camaraderie and expertise at Monk.

Some of the sites I worked on this Spring:

jQuery & the Future of JS

jQuery & the Future of JS

How awesome is John Resig…seriously?

jQuery has been a go-to for me for a handful of years now as a UI designer…but will it continue to charge forward into the web future? It certainly seems that way…and as we watch Flash fading into obscurity in this new era, we are seeing a JavaScript dominance that shows no signs of stopping. Try it out if you haven’t before! It’s pretty easy to jump into: Code School – Try jQuery.

What about Vanilla JS? If you’ve used it in the past, you know it has it’s own idiosyncrasies. But it’s still holding it’s own; here’s a case study: Ditching jQuery for Vanilla JS.

I also recommend checking out CoffeeScript for some pre-processing cleanup for your JS. Some really cool stuff there.

International Comfort Products: Product Guides

International Comfort Products: Product Guides

Residential & Commercial Product Guides

International Comfort Products (ICP), LLC designs, manufactures and markets millions of residential and commercial heating and cooling systems for property owners around the globe.

This project centered around taking ICP’s print catalogs online. There were 6 brand catalogs to move to a digital medium…and the guide sites had to be responsive.

Site created by: The interactive team at GS&F.

The 6 ICP Product Catalogs:

Sublime Text

Sublime Text

Sublime Text

This code editor is the best web design/dev tool I’ve picked up during the last 6 months. I’m amazed at how light it feels and how powerful it is. You can code in multiple web languages and there are plugins, bundles and packages you can install to take it further.

Dreamweaver was my code editor of choice for years, but I had to say goodbye after meeting Sublime.

Sublime Site

Applebee’s Ultimate Tailgate Sweepstakes

Applebee’s Ultimate Tailgate Sweepstakes

Ultimate Tailgate Sweeps!

The Ultimate Tailgate Sweepstakes was held in Middle Tennessee & Kentucky in the fall of 2013 during football mania. The grand prize? A fully-catered tailgate party for 100 people…not bad. The contest webpage highlighted local Applebee’s Facebook pages with links that led users to go and enter their name in the running…

Pixelmator VS Photoshop

Pixelmator VS Photoshop

I’m not ready to do a full writeup on this, but at first glance I like what I see in Pixelmator. As a web designer who’s been using Photoshop for years, I like the feel of Pixelmator. It feels very much like a native Mac app, and is easy to ramp up on. Can it soar to the heights of Photoshop’s finesse and complexity? Not exactly. But it can do about 80 to 90% of what you can do in PS, and at the price you have to pay now for a monthly Adobe subscription; I say: Bring on the alternatives.