Skill level: intermediate

A bit of history

Responsive Web Design (RWD) is not a new concept. If you’ve ever visited a website on your mobile phone/tablet, chances are that same website looks very different on a laptop or desktop computer. Ethan Marcotte originally coined the term Responsive Web Design back in 2010 in Issue 306 of A List Apart ¹. He introduces the concept of becoming responsive, which essentially means adapting the layout and ordering of content to best fit the device.

Earlier this year Google announced some changes² to their ranking system, penalizing sites that weren’t mobile-friendly. They warn against mobile apps or limited versions of the desktop website, and favour a fully responsive solution (not limiting content or functionality.)

Since Marcotte’s original article, modern devices continue to enhance their screen resolution (or pixel density). The iPhone 6, for example, now ships with a 4.7” or a 5.5” screen (iPhone 6 and iPhone 6 Plus, respectively.) The lowest common denominator for mobile phones is 320px by 480px. The iPhone 6 now increases that to 375px by 667px, while the iPhone 6 Plus is bigger yet, measuring 414px by 736px.

How this impacts your website

So what does this mean for web designers and digital marketing professionals? It means that one size no longer fits all, and we need to take into consideration width/height, device orientation and resolution. Chaining media queries together (as below) would target the majority of smartphones (in Apple’s case, iPhone 3 to iPhone 6 Plus) specifically when in landscape orientation.

<code>

     @media only screen

         and (min-device-width: 320px)

         and (max-device-width: 736px)

         and (orientation: landscape) { }

</code>