dConstruct and Responsive Design

We’re heading down to Brighton for dConstruct this Friday and we’re rather excited (more details on what we’re doing down there are over here). We’ve got a stall, a sketch artist and two bloggers heading along to cover the event. However, we’ve been spending a fair amount of time on the dConstruct 2011 site over the last couple of days and absolutely love their implementation of responsive design for this year’s event, which was designed by Paul Lloyd from Clearleft and Fontdeck.

We’ve had a dive into the code and the techniques they use are rather simple, yet brilliantly effective. Basically, they all hinge on three basic principles:

Images as percentages

On a very basic level, each of the images contained within the speaker-lineup section (the area on the left) are scalable thanks to percentage widths. That is, the overall area is tagged as a section, with <a> tags, and <img> tags within like so:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

What this does is makes it easy for the images to scale within their section. As the screen reduces in size, the images resize in proportion. This is fairly basic in terms of responsive design, and is one of the first steps with working with images. However, once the screen gets down to a certain size, you’re going to want to reposition your elements, as opposed to just resizing them. That’s where @media queries step in…

@media queries

The next step to making the design responsive is to reposition elements based on how big the screen is. This is done easily through the @media queries in CSS. The interesting thing that the dConstruct guys have done is to not target different devices, but just different screen sizes, which works well for the site and doesn’t result in a ridiculous amount of code depending on whether the user is using a screen, a mobile device, a tablet or futuristic projector glasses.

Basically, the relevant css, with regards to the different sections, are placed within @media queries like such:

1
2
3
4
5
6
7
8

@media all and (max-width: 60em) {
.speaker-lineup {
width: 50%;
}
.other-section {
width: 50%;
}
}

which takes the width of the page, and resizes the relevant sections to accommodate. Simple yet effective. However, the thing that got my heart racing (maybe I’m a little over-excited) was the way that the images stack when you resize in a stacked, pyramid fashion…

nth-child selector

I haven’t been playing with responsive design for long, so I haven’t come across nth-child selectors all that often. In a nutshell, the nth-child selector within css is a tool that uses a simple formula to target particular instances within your html (if you want to read more about it then look at Chris Coyier’s brilliant article here). Within this you can target certain instances of an <a> element, for example, to resize them all appropriately. In the case of the dConstruct site, the markup looks like this:

1
2
3
4
5
6
7
8
9
10
11

@media all and (max-width: 30em) {

.speaker-lineup a:nth-child(1n+0) {
width: 50%;
}
.speaker-lineup a:nth-child(1n+3) {
width: 33.3333%;
}
.speaker-lineup a:nth-child(1n+6) {
width: 25%;
}

What’s happening here is that it’s selecting the first two (1n+0) and sizing them at 50% so they sit alongside nicely. It then takes the next three (1n+3) and sizes them at 33.3333% to sit three alongside, and finally the next 4 (1n+6) and sizes them at 25%.

This is all rather easy, but when put in to practice you can create some really nice fluid designs. That, coupled with the lovely mobile-like icons for navigation once you go below a certain display size. Anything else we’ve missed? Let us know in the comments and see you at dConstruct!

If you want to find out more about Responsive design then check out Responsive Web Design on A List Apart and Hardboiled CSS3 media queries by Andy Clarke