Responsive Web Design

Est. Reading Time: 2 minute

Today I decided to devote some time to learning what exactly this responsive web thing everyone is talking about is.  I found the perfect article on nettus about the topic.

The video broke down the mysterious new technology into human language and then shows some good resources and examples of how to implement it.   This video was so good that I even did a little test driving on one of my current projects and it worked like a charm.  Sadly this new technology does not work in IE8 and below but there are some solutions out there that claim to allow backwards compatibility.

One of the most important things to think about with this new way of handling different screens is how modular is your code?  It’s also very exciting to me personally given I have always been a big supporter of best practice and developing the right way with good clean hack free code and this will push others in the same direction if they want to keep up with the times.  Your code needs to be solid and clean enough to be completely detached from any presentation layers and remolded as needed.  This means no inline styles, no tables for layout, no outdated font or other tags, and developing with separating content and presentation in mind.

It’s an exciting step forward and I am glad I got past my fear of the unknown and seemingly impossible to learn that responsive web is not scary at all.  In all truth it’s one of the simplest things I’ve learned to date and it uses what you already know about CSS.  The more complicated parts of responsive web come with the UI and deciding what viewers experience for each device/screen size/orientation.