Adventures in Responsive Websites (Lessons from the Workshop)

September 28, 2012

In June, I wrote this as part of a list of things I wanted to learn next.

Adaptive/Responsive design (Experience) – I have read Ethan and Luke W’s books. I think I have a solid understanding of building a responsive site. What I need is more experience in actually building sites implementing what I have learned. As Chris Coyier has repeatedly said on ShopTalk, “Just build Websites.”

Over the last couple of months, I have gained that experience. And I wanted to take some time to share some lessons and thoughts I have as I taken away.

Embrace Fluidity

If you are going to design and/or build responsive sites, you have to embrace fluidity. We need to emerge from the age of trying to impose fixed restraints on a fluid medium. The number and variety of devices has exploded and I believe the only logical approach available to us right now is what has been coined “responsive Web design.” This approach embraces flexible systems.

Our job now is come up with a system of proportions. That is what responsive Web design is all about. (Thanks to Trent Walton and Dave Rupert for that understanding.)

Going from Pixels to Ems is Hard (But it is so worth it)

I have been building web sites for over 12 years and I have always worked with pixel values. I have resisted the advice/wisdom of people like Dan Cedarholm to switch over.

As someone who has worked with pixels for years, I can say one of the hardest things for me when I started building my first responsive site was using ems. I had the hardest time getting them to work out the way I wanted.

But this is where the responsive design formula comes in to save the day, Target/Context=Result. Horizontal margins was where I got tripped up the most. I always had to remember that the context was based on the font size of the element that I was putting the margin below.

Though making the switch to ems can be a challenge, it is one that is well worth it. Ems embraces the fluid, flexible nature of the responsive approach. We need to embrace this relative value as we move forward in building the sites of today that will continue to be friendly tomorrow.

FitVid is a Great Solution for Fluid Video Embeds

One thing you will learn as you implement responsive design is that the techniques to make images flexible (max-width:100%;) does not work with video embeds. My company uses Brightcove as our solution.

I had heard of FitVids from Dave Rupert when he spoke at the Front End Design Conference this summer. I tried it out and it works great. I was easily able to find a way to add support for Brightcove videos. It just works. Use it.

Box-sizing:border-box Is Your Best Friend

This CSS property is a must have when doing a responsive layout. In the CSS box model, padding + border + width = total width of the element. With the box-sizing property, width = the actual width of the element with the border and padding applied “inside the box.” Using this model, you can easily declare your widths in percentages and know that adding a border or padding to an element will not mess up your layout.

I have even used pixel values for padding because then I don’t have to worry about consistency between horizontal and vertical values (ems for horizontal and percentages for vertical).

Chris Coyier has written a great post over on CSS Tricks about box sizing. I know he prefers to use a method of declaring a universal box sizing property.

Responsive Image Solutions are just not there yet

This is one of the biggest challenges still to solve, delivering images to different devices taking bandwidth or high density displays into consideration. Many different solutions have been put forth but each has there own limitations. In the end, there is no one good solution to this problem yet.

Once again, I am going to refer you to Chris Coyier. He has done a great job of defining the current landscape of responsive image solutions.

Implementing Responsive Design

Tim Kadlec recently released a book, Implementing Responsive Design. In the book, Tim covers such topics as:

  • fluid layouts
  • media queries
  • responsive media
  • planning
  • workflow
  • responsive content
  • RESS – an approach to serving content progressively

I am only in the fourth chapter, but I can say that it is a great resource. I highly recommend it.

Ethan Marcotte’s book is more of Responsive Design 101. Tim’s book goes much deeper into the topic. It tackles the challenges and nuances we face in our day-to-day responsibilities.

The book does a great job of surveying the landscape of current practices in implementing responsive sites.

What are you waiting for. Go order it now.

Resources

  • Dave Rupert’s article, Five Steps to Getting Flexy in Responsive Design. This article touches on a lot of the content in Dave’s talk at the Front End Design Conference.
  • This is Responsive – Great new resource from Brad Frost highlighting patterns, news, and resources for responsive design
  • Responsive.is – One of many online tools where you can see your site in different viewports. My only complaint is that is based on Apple products. But it has one of the better interfaces of the tools I have tried. So it is a good place to start beyond just resizing your browser.
  • What to Do When You Can’t Design in the Browser – Some great thoughts from a designer about making changes to the design process that still puts a high value on the creative process.

Did I miss something? Please add your thoughts by commenting on this post.

Comments are closed.