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.

Comments

4 responses to “Responsive Web Design MVP”

  1. J# Avatar

    @pwcc I totally agree but feel like I’m out of the loop. What sort of things are people calling necessary for responsive as well as this?

  2. Peter Wilson Avatar

    @joshsharp Seeing more about JS: conditional loading, fancier menus and the like. The assumption all people have smartphones ‘cos devs do.

  3. J# Avatar

    @pwcc ah sure. yeah, that’s not great.


  4. Just read this interesting piece from my friend Peter Wilson. Pete is a real expert when it comes to CSS/front-end, so it’s neat to see his contemplative thoughts on the meaning of responsive web design.

    Ethan Marcotte’s original definition of responsive web design still holds. Tools, JavaScript and pre-processors take you away from RWD.

    Source: Responsive Web Design MVP – Peter Wilson
    Share this:Click to email this to a friend (Opens in new window)Share on Facebook (Opens in new window)Click to share on LinkedIn (Opens in new window)Click to share on Twitter (Opens in new window)Click to share on Google+ (Opens in new window)Click to share on Pocket (Opens in new window)

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.