The Current State of Design Leadership

Jan 28th, 2016 · The Industry

The Industry

How to Get Funded Without a Working Product

March 13th, 2015

Self Published

How to Hire a Designer & Build a Design Team

August 12th, 2014

Self Published

14 Things Learned Designing at Disqus

May 13th, 2014

Self Published

The Start of a More Consistent iOS Design

May 10th, 2013 · Medium

Medium

Savoring First Experiences

April 2nd, 2013

Self Published

How to Create a Responsive SVG

February 3rd, 2012

Self Published

The Pixel Density Race

August 16th, 2011

Self Published

Responsive Design: A New Era

July 27th, 2011

Self Published

This article was written in reference to an old version of this site.

Going "responsive" wasn't easy, I'm not going to lie. The idea of building a website based purely on percentage widths and scaling content areas was foreign to me, especially when combined with very little documentation on media queries and only a handful of real-world responsive design examples.

Responsive layouts start with the initial wireframe and framework. The majority of the content containers utilize fluid widths and images or content that can easily resize. Since I chose to build everything, and I'll repeat: everything out of CSS3, my content areas can scale fairly easily. The new box-shadow, border-radius, and column-count properties are lifesavers when building flexible layouts. For standard images and photos, I cropped or resized their parent containers appropriately. As for illustrations, I use a special recipe.

The Definition of Responsive Design
The Essence of Responsive Design

Every chef has a secret ingredient, mine is SVG. In today's world, most illustrations can easily be exported to the vector SVG format. This allows the browser to scale the graphics indefinitely (as demonstrated on the charts area of my home page). Most importantly, the file size of an SVG graphic is usually much smaller than the same graphic in a typical rasterized format. I certainly believe SVG will become an extremely popular alternative to rasterized illustrations in the coming years. Unfortunately, at the time of writing, there are major inconsistencies accross browsers displaying certain SVG elements--but I can only imagine this getting better over time.

After transitioning to responsive design, I never want to look at general web design the same way again. The first time was difficult, but once the fundamentals are understood, you'll never want to go back. Many designers may find building their first responsive design an easy task, but I didn't want it that way. There's more to the picture than just making websites that always fit the viewport. Now content can be presented in ways never imagined before. For me, building a responsive website was learning web design all over again. Not in the physical sense, but rather the philosophical approach. That's why over two hundred hours were spent on this design.

(Of course, I would have spent many more hours if it weren't for the generous web design community.) From the talented Ethan Marcotte to the ingenious Trent Walton, many brains have inspired my design through their writings, sharing code, or just by inspiring me. Wrapping up my first journal entry, I must thank the following people:

Some of you may have never met me in person, yet inspired me in ways you probably never imagined. After many years of studying your work and stalking your Twitter, I owe you a special thanks. You are all truly amazing.