I’ve been a vivid supporter of responsive web design approach for some time, so whenever there is an opportunity to implement it, I am all for it. About two weeks ago, I was approached at work if I could build a landing page for our new fun app, PhotoBlast. I didn’t even see the creative and had said yes as I knew I could take on something small that I will sure enjoy working on. Even though “responsiveness” wasn’t necessarily part of the scope, I made sure to make time for it, regardless the amount of time I got allocated. 🙂

Once I got to see the creative, it was quite obvious that this one might be somewhat challenging to achieve in about 20 hours all the little details but I was ready to take it on anyway.

I first had to really take it all apart to see how I could split up and mark up the content in a way that would make sense but could also accommodate all the creative directions that this one page had. Once I’ve completed with marking up the content in HTML5, that’s when I turned to my CSS file. While still keeping with “content first” concept, I went into structuring my CSS using 320 and Up approach.

This is when the real fun has begun when I got to start with the smallest screen and making decisions what will people get to see and at what dimensions or screen sizes. What truly saved my life and lot of my time was this fabulous tool called ResponsivePx that was created by no other than the talented man, Remy Sharp. He told me about it few months back when we first met during his visit to Portland; however, I wasn’t truly able to test it out until now. Oh man, and does that work like a charm!

For this project, since there were so many image elements on the page, I wanted to fit them as soon as I had the real estate for it and this was where this tool came super handy when trying to figure the “break points” for different screen sizes. I found it better to use in Chrome, as you got to have a slider to modify width and height of your screen rather than use dropdowns, which you’d have in Firefox.

Well, I am sure you get the point. It’s fun and super easy to use and maybe you’ll get to try it on your next project yourself. There are definitely many aspects that need to be considered when us developers and designers are being responsively responsible but thankfully there are so many resources out there for you to dive in and get inspired.

I find myself referring back to any of A Book Apart books that I keep religiously expanding as new ones are coming out, and I think you should too. In addition, I have attended several conferences or workshops that touch on the subject but this topic is still quite hot, so there are more upcoming ones. If you find yourself in Vancouver BC area in March or you were looking for an excuse to go there, then maybe Simon Collison‘s full day workshop on Crafting Responsive Experiences might convince you, just like 3-day Breaking Development Conference in Orlando, FL one month later – your choice.

Anyway, that’s that. So now, if you are an iPhone owner, go and download PhotoBlast from App Store and go have fun with it. Or just play with the landing page I built while dragging around the corner of your browser to see how it adapts. 🙂

Update: Thanks to Joel Shapiro, I found a video that Remy did demoing responsivepx.