I Have No Idea What I'm Doing with Responsive Web Design

blog_responsive

Over the past few months I’ve had the privilege of spending some quality time with some of the web’s most talented designers. Whether over Skype, on the Happy Monday podcast, or on the upcoming Treehouse Chat show, I’ve been listening hard to the different angles and strategies revolving around Responsive Design. I’d like to share some of those insights with you now.

We’re All Figuring This Thing Out

I’m fortunate enough to co-host a podcast with the lovely and talented, Sarah Parmenter. Last week she was telling me about her experience at the annual Responsive Day Out conference that she had attended that day with the likes of Elliot Jay Stocks, Laura Kalbag, Mark Boulton, Jeremy Keith and more. Essentially, these were some of the most well-known designers on the web, and there was one underlying theme that permeated the entire conference: We’re all figuring this thing out.

responsivedayout

I say that, to say this: Remember to keep your head up and in the game when it comes to Responsive Design because it can get complicated very quickly. There is no stopping this direction of the web and there is no denying that it is the hardest stage we have faced yet. But we can all take solace in the fact that if the web’s most talented people are fighting for their lives, then it’s okay if we do too.

That being said, let’s look at how we can tackle this Responsive beast.

Pick It Apart & Go One Element at a Time

When looking to design responsively, we tend to take on more than we can chew. If you’re looking to build out a new Responsive site, break it down into elements that you can master one-by-one. If you need to try using SVGs for the first time, start by exporting your logo from Illustrator as an SVG and open it with a code editor to remove the built-in width and height dimensions.

If you’ve decided on using a Responsive navigation, just isolate your navigation and focus on getting your “hamburger”, or 3-line navigation, working properly through JavaScript. If you’re looking to perfect your video, typography or images, just start by mastering Fitvids.js or Fittext.js, and take it one step at a time. That is how you eat an elephant after all, and Responsive Design is exactly that.

Write About It with No Shame

Another key point that I keep hearing over and over again from the people I respect in this space, is that writing about your experiences is the best way to work through your own challenges. The caveat here is that you have to be completely unashamed about being wrong. No one has all of the answers and most designers aren’t judging because they have the same challenges, so there is really nothing to fear.

The truth is that we are part of the best industry in the world and if you approach your writing and learning like this, you’re more likely to find someone willing to help you work through things. Try it; next time you’re stuck on something, write about it and post it on Twitter. You’ll be amazed at the number of good people willing to help.

paravel

Follow Paravel

There are many different designers that I would encourage you to follow to help you on your Responsive journey, but I think they all would agree with me that there is one group of three chaps that you absolutely must follow: Paravel.

Trent Walton, Dave Rupert, and Reagan Ray have single-handedly led the charge for Responsive Design. They were the ones that created Fitvids.js, Fittext.js, and Lettering.js with the help of our friend Chris Coyier. They recently redesigned Microsoft.com and many other Responsive sites, and they’ve been paramount in identifying, working through and writing about the challenges of Responsive Design when it matters most.

What It All Means

One day we’ll look back at this age of the web and be proud that we had the opportunity to be pioneers in this space. We don’t have it all figured out, but that is the beauty of it. Part of our journey is that we will never know it all and that hunger for knowing more will drive us throughout our careers. Learn everything you can, but more importantly, put it into action. Write about your experiences and let the open and collective web help you figure it all out. We are in this together and we need to have all of your voices heard.

Happy designing.

Comments

18 comments on “I Have No Idea What I'm Doing with Responsive Web Design

  1. excellent post and the encouragement to take on one element at a time is right on. thanks

  2. After scratching my head through a third iteration of a responsive redesign for our website and thinking “I’m not sure how this is all going to work but I hope I can figure it out”, I feel like you’ve just given me a hug. Thanks.

    • Topher, if you haven’t already, you need to watch the Team Treehouse Responsive Web design videos. They make some very good points, and bring up very good techniques on this subject. Especially if you are (which you should) switching to EMs from Pixels.

  3. Thank you for this Josh. I firmly believe that there is no “true” professional in Responsive Website Design. Although there may be icons that are good at it, I am sure and will always believe that there is someone out there that is better. It’s always easy to follow a few firms, agencies, or blogs here and there to make sure you are kept up-to-date with the latest techniques and standards. But, you will never learn anything if you never do it. We learn best when we make mistakes, so let’s make some mistakes, eh?

  4. It has been so long since I wanted to start blogging and I have just been scared of being wrong! I bust start – thanks for the great post

  5. Occasionally we need that reminder that no one has it all figured out. Assuming we do is one way to truly defeat ourselves in this industry. I completely agree with tackling one element at a time, and that’s the reason I adopted a component-based design & development approach. I work from parts to build a cohesive whole, like fitting together pieces of a puzzle.

  6. nice post love to read this

    If you are looking for the best custom flags in the market, we can assist you on this matter. We assure to provide quality and affordable flags that you need.