A while back we took an introductory look at responsive web design, and two weeks later some more useful techniques in responsive web design II. Since then, responsive web design has continued growing and it's use has become more widespread; resulting in a situation where it is difficult to know which resources to follow and which frameworks to use. Hopefully through this blog, you could get a feeler of what's hot and worth looking at.
Mobile First
Recently everyone's talking about mobile first, but what does it mean exactly and how do you design your website mobile first? The term mobile first was first coined by Luke Wroblewski and refers to the web design philosophy that prioritizes the mobile context over the desktop. Ordinarily in the past, a website was built by creating the desktop version and then adding media queries to adjust the design and hide/resize/transform elements accordingly. This is known as Gradual Degradation and its obvious flaw is that when designing the desktop version, one might include all sorts of fancy design tricks, which when scaled down onto smaller viewports might no longer be feasible and the mobile website no longer resembles the original design.
The opposite of this is Progressive Enhancement, the same technique used when adding JavaScript functionality to a page. Progressive Enhancement states that you should begin with the very basic core functionality, and add upon that based on the device/browser's capabilities. When speaking about mobile first, progressive enhancement means that we will first build the core functionality of the website, i.e. to deliver content. We will then add presentation and styling and finally animations and the other fancy stuff; which albeit nice, are not necessary for the user use your website and read the content.
The below image from Brad Frost sums it up nicely:
In terms of code, to develop mobile first simply means using the media query min-width instead of max-width:
<link rel="stylesheet" href="desktop.scss" media="screen and (min-width: 768px)" />
Responsive Images & the Picture Element
Since the very first days of responsive design, one of the major hurdles was delivering adequetly sized images to the client. Since then Retina displays have come along, creating an even greater pandemonium for web developers. If you have already read the great article: http://ericportis.com/posts/2014/srcset-sizes/ then you should already know this, if not, read on.
The easiest (and lousiest) fix for responsive images is to use a single image and have it's height set to "auto" to maintain the correct aspect ratio as its width varies. The obvious flaw with this solution is which image should be used. Should it be a massive 1920px width, 200KB+ image even on mobile screens with 3G connections; or should it be a 640px width, 30KB image which looks stretched and pixelated on a MacBook Pro with Retina display (2880×1800)?
The correct approach would be to deliver different images based on the browser's viewport, therefore if viewing on a small viewport, the smaller image could be used and on a larger viewport the full-HD image could be used. Unfortunately, whilst it might sound simple, choosing which image source to use is extremely tedious and difficult to maintain. The same applies if using the HTML5 picture element, as shown in the below example using 3 different image sizes:
<picture>
<source src="large.jpg"
media="( (min-device-pixel-ratio: 1.5) and (min-width: 20.001em) and (max-width: 35.999em) ) or
( (max-device-pixel-ratio: 1.5) and (min-width: 120.001em) ) or
( (min-device-pixel-ratio: 1.5) and (min-width: 60.001em) )" />
<source src="medium.jpg"
media="( (max-device-pixel-ratio: 1.5) and (min-width: 20.001em) and (max-width: 35.999em) ) or
( (max-device-pixel-ratio: 1.5) and (min-width: 60.001em) ) or
( (min-device-pixel-ratio: 1.5) and (min-width: 10.001em) )" />
<source src="small.jpg" />
<!-- fallback -->
<img src="small.jpg" alt="A rad wolf" />
</picture>
The solution is the srcset attribute (which is still in the process to be recognized by all browsers) which takes a comma-separated list of URLs and it's respective width; therefore
srcset="large.jpg 1024w,
medium.jpg 640w,
small.jpg 320w"
would translate to using the large, medium and small image for viewports that have a minimum width of 1024px, 640px, 320px respectively. Finally we need to take into account how large the image would display on the viewport (2x, Retina...etc). This is done using the sizes attribute, where we pair the media query and the respective width, so that the browser goes through each media query until it matches one; when it does it will use the width as the image's rendered width on the viewport.
sizes="(min-width: 36em) 33.3vw,
100vw"
For the above example, when the viewport's width is larger than 36em (for example on your desktop); the image will take up one-third of the viewport's width (possibly to show three images near eachother); otherwise for smaller viewports (possibly mobile devices) the image will take up the full width of the viewport.
That's all for today, I hope you learn something new, as did I. In the coming weeks, we will be developing another responsive website for which we have been given permission to document the entire process; so hopefully we will be giving you some great insights.
Till then, take care of yourselves!