Sunday, April 29, 2012
RESPONSIVE WEB DEVELOPMENT TUTORIALS (PART 4)
A relatively new part of the CSS specification, media queries are undoubtedly the most exciting aspect of responsive web design and an area ripe for further experimentation.
Having accepted the need for adaptive layouts, some have seen media queries as a means to retrofit adaptive layouts on to existing fixed-width sites. Among those who have embraced responsive layouts, many have done so from the perspective of the desktop, hiding content and features as the viewport narrows.
Throughout this tutorial, we’ve taken an alternative, mobile first, approach. Now, as we look to include media queries, we can think about features as screen real estate increases, safe in the knowledge that the markup and design underpinning our site provides a respectable baseline.
Today, we will move beyond our pattern portfolio and build the individual pages required for our website. In doing so, we will see how media queries are constructed, and implement them in a truly responsive way.
With the components in our pattern portfolio complete and working outside the confines of any layout, it’s time to move them into the different pages that make up our site.
We’ll start with our homepage. From the desktop-orientated design, we can see that in wider viewports our layout should appear as follows:
Our homepage is composed of a header, main navigation and footer, with the content area divided into two columns: the main column taking up three quarters of the width while the complementary column takes up the remaining quarter
Taking measurements from our design, we can describe the document area in CSS as follows:
As we learnt in , we’re using the following formula to calculate the percentage width of these columns:
When we resize our browser, we’ll see that our desktop layout scales from the smallest size screen to the largest. Of course, at small sizes the columns are too narrow and line lengths so short that the content is hard to read. We only want this layout when there is enough space available for it to work.
This is where media queries come in. Assuming that this layout should only take effect when the browser is wider than 768px, we can add the following CSS:
Now, when the viewport is narrower than 768px, everything inside the media query will be ignored. It will be ignored by any browser that doesn’t support media queries too.
To understand what's happening here, let's look at how a media query is constructed. We can split it into two parts:
· The first part of a media query is the . You may recognise this syntax if you’ve ever included print styles in your CSS. You may also recognise the type name from the attribute on the element. That is because both accept the found in the CSS 2.1 specification.
· The second part is the . This includes the to be queried (in this case the minimum width of the viewport) and the corresponding to test for (768px).
When we talk about responsive web design, there’s a tendency to focus on width, but there are other features we can test for too:
· and These allow us to query the width and height of the viewport (i.e. the browser window).
· and These allow us to query the width of the entire display. In my experience, it’s usually more sensible to base layouts on the viewport rather than the display.
· You can immediately think of the possibilities here; think of apps that show different content based on the orientation of your phone – the same is possible on the web.
· This allows us to adapt layouts based on the ratio of the browser window…
· …and this allows us to do the same based on the device aspect ratio. Owen Gregory wrote last year that explored how we can use this query to tie our designs to the devices they appear on.
· We can also test whether a device has a monochrome display or not. Imagine how useful this would be if Amazon’s e-ink Kindle devices didn’t lie and report their screens as colour!
The final part of our query is possibly the most useful. By using , we can test for multiple features in one query. For example:
As you can see, media queries can help us build fairly compelling experiences – and I’ve only touched the surface. If you’re looking for some light bedtime reading, you could do worse than to which describes all the features we can test for.
Even though we’ve included media queries in our CSS, if we view our site on a mobile device, you’ll notice that our site is still being rendered as if the display was wider than 768px.
Our website doesn’t appear responsive yet, even though we’ve added media queries to it
To understand why this is happening, we need to take a brief history lesson.
When the original iPhone was announced in 2007, one of its big selling points was the ability to browse the 'real web', even if that meant fixed-width desktop-orientated sites that needed to be squashed down to fit on its small screen. The iPhone was able to do this by reporting its display as being 980px wide, before scaling web pages down to fit its 320px-wide screen.
But the iPhone was introduced before the advent of responsive design. Now that authors are designing sites designed for mobile, this feature is less useful. Thankfully, Apple included a means of bypassing this behaviour, and since it’s been adopted by other manufactures, it has become almost a standard. It simply involves adding a single element to our markup:
The correct layout appears once we’ve added the viewport meta element to it
Let’s return to our media query:
Values at which a layout adapts are commonly referred to as breakpoints. If you recall, in I said that using pixels is an indication of unresponsive thinking, yet here I have chosen 768px, probably because it’s the width of a familiar device.
Instead of choosing breakpoints based on the characteristics of popular devices, it can be more effective to look at values derived from our content, for example, comfortable line lengths for reading or the maximum size of an image.
With our type being sized using ems, it seems sensible for our media queries to use ems as well. In fact doing so has an additional benefit. When a user resizes text in the browser, pages will adapt to use smaller breakpoints. Not only will our website adapt based on the size of the viewport, but the size of the font too.
While our design may provide some indication of possible breakpoints, often the best way to choose them is through experimentation. By adjusting the width of the browser window, I’ve decided that 800px is a good width at which to swap to a more complex layout.
How do we 800px express in ems though? Again, we can use our formula, but what is the context? When calculating ems for media queries, the context is always the browser’s default font size . This default is typically 16px, which gives us:
We can now update our media query like so:
You will remember that in we styled our thumbnails to be responsive. Yet once the images within these thumbnails reach their full width, an area of white space appears to the right of each image. Again, media queries allow us to fix this.
Here is our original CSS:
The point at which this white space appears is just as the browser grows wider than the 560px. We’ll choose this value at which to swap to showing three thumbnails per row. We can do that by adding the following CSS:
Note that we don’t need to rewrite all the styles required for the thumbnail inside this media query, only the parts we wish to adapt.
Viewing this change in the browser, you’ll note that there is no margin to the right of every second thumbnail. This is because the following CSS rule still remains active:
We need to modify the CSS within our media query to reset that value:
When creating media queries, always be aware of inheritance issues like this.
It’s important to think about media queries not just in terms of width, but other variables too. For example, the video on our media item page is partially hidden when the viewport height decreases. We have the technology:
I’ve even included an orientation query to finesse this behaviour further.
We can follow a similar approach for the other parts of our design, swapping in a larger version of the header and moving the navigation links to the top of the page once space becomes available.
And there we have it! We’ve built a responsive website – and with a day to spare! Well, not quite. Flexible layouts, images and media queries is only the start of the responsive design process.