This is a very exciting time for the web.

People are designing using new and innovative techniques, websites are evolving from "eye-candy with a little bit of content" to content-focused, device-agnostic experiences. UX has erupted and spilled over to the web, and while others may argue, I say it is for the best.

Lately, I have been tackling an almost excessive amount of projects. I've redesigned my personal home page, started a tumblr, redesigned that same tumblr with my first ever theme (and made it responsive), created a type project based on lyrics from my favorite songs, and designed a custom iphone theme called CATALYST. Point being, there are so many options in our fields that, in my opinion, it is almost ignorant not to experiment. This is one reason I love side projects: they're great for experimenting.

Recently, I have spent a good amount of time working with a new(ish) technique in web design called Responsive Design. (If you haven't heard ot it, I refer you to Ethan Marcotte's article and book, via A Book Apart)

I decided to answer the requests that have started to come in to me from twitter. A lot of people are trying to get a grasp on CSS3, HTML5, progressive enhancement, and more, and can't really understand how to put all of these things together. I'm going to give a quick list of the tools / plugins / scripts / frameworks that I use as my standard "project starter."

Frameworks

Frameworks have been popping up like weeds lately, and I am not really a fan. When I started with responsive design, several months ago, I took a very research/results driven head-first dive into the frameworks that were making headlines in the design world. I compiled a short list of the note-worthy frameworks, downloaded them and started to use them to rebuild relatively simple modern websites. (Method&Craft, A List Apart, my own site)

After testing all of these frameworks out, there were some immediate (and massive) flaws that appeared. Some of these so-called "responsive" frameworks didn't take into account the layout change needed when breaking barriers like tablet -> mobile devices, and so on. Naturally, a three column layout can't stay a three column layout when brought down to 400px wide mobile view. One could even argue that the 768px wide tablet view shouldn't even have three columns. Needless to say, noticing issues like this made my decision exceptionally easy. In the end, the only framework that stood up to all of my tests was the 1140 Grid System. It was simple, practically barebones, but still robust enough in its handling of media queries and its inherently responsive nature.

Once the framework was in place, it was time to move forward with other additions. My go to pieces:

  • FitText - Allow headlines to keep their form within fluid grids
  • UserAgent - UA is a little controversial because of future-proofing (or lack thereof) Either way, I love it for small tweaks.
  • FlexSlider - Fantastic responsive jQuery slider with touch control on mobile devices

Responsive Design

I'm a huge advocate for responsive design. After reading Ethan's article late last year, I immediately jumped on the techniques he posted. It was (is?) extremely experimental because of the use of css3 media queries, and the ever changing device landscape. Now, the media queries are more widely supported, along with the js fix for older browsers, so there is no real reason not to attempt it.

For me, the only real question is whether to work mobile-first or start with the desktop and scale down for mobile devices? I don't think there is a definite answer. Each project has its own use-case and will have a unique workflow. A dominantly text based site, much like this blog, doesn't need to be mobile first. Everything on this blog, with the exception of the top image, is done with code and therefore there is no load strain for mobile devices vs desktops. Of course, there are very few sites that will fit into this category, and that is where the mobile-first methodology comes into play. Luckily, there is another A Book Apart title that you can add to your arsenal: Mobile First by Luke Wroblewski.

Photography

Last part of this incoherent rant is about photography. I have loved photography since I was in 5th grade, but it took about twenty-two years of my life to make it more than a hobby (Manik Rathee Photography). I also am a HUGE advocate for iphoneography. I believe that the best camera is the one you have on you - and what do you have on you 98% of the time? (All percentages and statistics in this post are made up.) Your phone.

Anyway, this was a pretty solid intro into what I have been working with lately. Expect future posts to have some semblance to organized thoughts, instead of incoherent ramblings. (See above. All of it. The whole thing.)

Happy Holidays.