Building the dConstruct 2015 site

I remember when I first saw Paddy’s illustration for this year’s dConstruct site, I thought “Well, that’s a design direction, but there’s no way that Graham will be able to implement all of it.” There was a tight deadline for getting the site out, and let’s face it, there was so much going on in the design that we’d just have to prioritise.

I underestimated Graham’s sheer bloody-mindedness.

At the next front-end pow-wow at Clearleft, Graham showed the dConstruct site in all its glory …in Lynx.

http://2015.dconstruct.org in Lynx.

I love that. Even with the focus on the gorgeous illustration and futuristic atmosphere of the design, Graham took the time to think about the absolute basics: marking up the content in a logical structured way. Everything after that—the imagery, the fonts, the skewed style—all of it was built on a solid foundation.

One site, two browsers.

It would’ve been easy to go crazy with the fonts and images, but Graham made sure to optimise everything to within an inch of its life. The biggest bottleneck comes from a third party provider—the map tiles and associated JavaScript …so that’s loaded in after the initial content is loaded. It turns out that the site build was a matter of prioritisation after all.

http://2015.dconstruct.org/

There’s plenty of CSS trickery going on: transforms, transitions, and opacity. But for the icing on the cake, Graham reached for canvas and programmed space elevator traffic with randomly seeded velocity and size.

Oh, and of course it’s all responsive.

So, putting that all together…

The dConstruct 2015 site is gorgeous, semantic, responsive, and performant. Conventional wisdom dictates that you have to choose, but this little site—built on a really tight schedule—shows otherwise.

Have you published a response to this? :

Responses

Albert de Klein

RT @sil: A sensible approach to building things. adactio.com/journal/9430 Good one @adactio, and if you’re not building things this way, you’re wrong.

Jeremy Keith

RT @sil: A sensible approach to building things. adactio.com/journal/9430 Good one @adactio, and if you’re not building things this way, you’re wrong.

JARBARSCRIPT

RT @sil: A sensible approach to building things. adactio.com/journal/9430 Good one @adactio, and if you’re not building things this way, you’re wrong.

David G. Smith

RT @sil: A sensible approach to building things. adactio.com/journal/9430 Good one @adactio, and if you’re not building things this way, you’re wrong.

Rich Higgins

RT @sil: A sensible approach to building things. adactio.com/journal/9430 Good one @adactio, and if you’re not building things this way, you’re wrong.

Shane Hudson

RT @sil: A sensible approach to building things. adactio.com/journal/9430 Good one @adactio, and if you’re not building things this way, you’re wrong.

Roberto Abizanda

RT @sil: A sensible approach to building things. adactio.com/journal/9430 Good one @adactio, and if you’re not building things this way, you’re wrong.

Jude Gibbons

@sil @adactio Why would you do it any other way?! Beautiful elegant site; different on Android 2.3 but still works & who’s going to compare?

23 Likes

# Liked by Peter Gasston on Tuesday, August 25th, 2015 at 8:23am

# Liked by Aakash Goel on Tuesday, August 25th, 2015 at 9:07am

# Liked by Tom Warne on Tuesday, August 25th, 2015 at 9:07am

# Liked by JARBARSCRIPT on Tuesday, August 25th, 2015 at 9:07am

# Liked by David Attrache on Tuesday, August 25th, 2015 at 9:07am

# Liked by Lakshan Perera on Tuesday, August 25th, 2015 at 9:07am

# Liked by James Mellers on Tuesday, August 25th, 2015 at 9:07am

# Liked by Andrew Jones on Tuesday, August 25th, 2015 at 9:19am

# Liked by David G. Smith on Tuesday, August 25th, 2015 at 9:19am

# Liked by Neil S Jones on Tuesday, August 25th, 2015 at 9:53am

# Liked by Ethan Marcotte on Tuesday, August 25th, 2015 at 9:54am

# Liked by Anders Ringqvist on Tuesday, August 25th, 2015 at 10:08am

# Liked by Damian Walsh on Tuesday, August 25th, 2015 at 11:01am

# Liked by Jörg Hambuch on Tuesday, August 25th, 2015 at 11:27am

# Liked by Matt on Tuesday, August 25th, 2015 at 1:17pm

# Liked by Seth Blanchard on Tuesday, August 25th, 2015 at 1:28pm

# Liked by Marc Drummond on Tuesday, August 25th, 2015 at 1:43pm

# Liked by Sam Nabi on Tuesday, August 25th, 2015 at 2:02pm

# Liked by Michael Warkentin on Tuesday, August 25th, 2015 at 2:03pm

# Liked by Christopher Janzen on Tuesday, August 25th, 2015 at 2:34pm

# Liked by Andrew Woods on Tuesday, August 25th, 2015 at 2:56pm

# Liked by vollepeer on Tuesday, August 25th, 2015 at 8:43pm

# Liked by Matthias Beitl on Wednesday, August 26th, 2015 at 5:11pm