Branding
Digital Marketing
IT Services
Web & App DevResponsive Web Design and Retina Displays
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 1. 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 changes2 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>
You can further add media queries for device resolution to target specific devices. The latest iPhone 6 Plus actually displays the tablet version when in landscape orientation in many cases, adding an extra level of testing. This article3 covers the evolution of the iPhone screen and how it impacts the rendering of your website assets. But even with a modified layout to cater to high-pixel-density devices, you may find that your images appear pixelated or blurry.
Recommendations
One solution is to produce a graphic twice the size as displayed, resulting in a perfectly crisp rendering for retina displays. The downside is that users on normal displays are now downloading not double, but almost quadruple the file size. For this reason, it is crucial to consider both your target audience’s bandwidth as well as the most common device resolution(s). This article4 discusses alternatives to the @2x solution, such as averaging between normal and retina displays with the @1.5x solution (demo experiment5). Designer Louise-André has a great walkthrough6 to convert units and ruler to points and increase the default print resolution in Photoshop (a must read!)
Whenever possible, use CSS3 to produce your designs in vector (which scales infinitely) and use scalable vector graphics (SVG) or icon fonts to future-proof your designs for generations of retina displays to come.
Reference Links:
1. http://alistapart.com/article/responsive-web-design
2. http://googlewebmastercentral.blogspot.ca/2015/02/finding-more-mobile-friendly-search.html
3. http://www.paintcodeapp.com/news/iphone-6-screens-demystified
4. http://alistapart.com/article/mo-pixels-mo-problems
