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.
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.