Responsive Web Design MVP

This is not another responsive web design equals web design post. That particular debate is largely answered every time an m-dot link is shared on Twitter or Facebook.

Ethan Marcotte’s landmark A List Apart article defined responsive web design as having three technical ingredients:

• fluid grids
• flexible media
• media-queries.

It’s often argued that modern responsive web design requires more than these three ingredients.

In the Principles of Adaptive Design Brad Frost writes:

Of course there’s a whole lot more to creating a great multi-device [experience] than fluid grids, flexible media, and media queries. The core tenets of responsive design are obviously important, [but] those three ingredients are just the tip of the iceberg.

I saw Frost speak to this at a March 2014 workshop. It’s a question that I come back to in my more contemplative moments:

Does the Marcotte definition of responsive still hold?

I’ve come to the conclusion it does.

Media queries will eventually include container queries but on the whole, I believe the original definition will stand the test of time.

Disable JavaScript, disable plugins and the original definition of responsive web design is all you have to hold your sites together, simple HTML and CSS. And it should work.

Progressive enhancement dictates that a web site or application should work with the basic ingredients on HTML and CSS. It’s the absolute minimum a user should need to get an experience, it may not be the same experience a user gets if they enable JavaScript, have a modern browser or enabled plugins.

Should the CSS contain media queries and define flexible images, it becomes both responsive and provides the minimum experience.

The responsive web developer’s skill set

As the original definition of responsive web design holds, it follows that the minimum skills a developer requires to call themselves a developer of responsive are the skills required to produce flexible grids and images; and to implement media queries.

That’s it, a bit of HTML and CSS under your belt and you can call yourself a responsive developer.

I recommend anyone looking to enter the field today to spend some time learning and refining those skills before you expand your skillset further. Throw build tools, CSS pre- and post-processors, linters, JavaScript (amongst many more), all in the bin.

Frost is right, more senior responsive developers need to have a greater skill set than the basics. While these skills are important, cramming them in will take you further from responsive design rather than closer to it.

The effect of adding more to responsive sites has been larger downloads and slower sites. The quickest responsive design works with no more than HTML and CSS, in many ways I think it’s time to revisit 2010 and make that the goal.