A new website for dConstruct 2014

dConstruct 2014 has a new website. Huzzah!

When I announced the original website two months ago, I was very, very excited about the line-up, but I was less excited about the design of the site itself. To be honest, it was a somewhat rushed affair. It did the job but it didn’t have much pizzazz. I had some design direction—colour, typography, texture—courtesty of Mikey, but I didn’t push it to do anything very interesting.

dConstruct original 320 dConstruct original 600 dConstruct original 768

So Mikey took some time to iterate and revise, and he came up with a gorgeous new design. I think this does a much better job of capturing the spirit of dConstruct.

As well as a revised colour palette and lusher textures, there was also opportunity to do something quite playful in the masthead. Making sites for our own projects always presents a nice opportunity to try out some whacky stuff that we might not get a chance to do on client work.

In this case, the plan was to play with the theme of this year’s dConstruct—Living With The Network—and use it as part of the visual design, literally networking up parts of the interface.

It was a nice chance for me to play around with canvas. But I didn’t dive into code straight away. I had a think about how I could add this an enhancement to the responsive layout.

My plan was to generate a canvas element under the existing elements in the header using z-index to keep them separated while maintaining the appearance of having everything connected up.

Sketching before coding

It worked out pretty well. But I wanted to push it further. How about making it an interactive element that responds to the user?

I know, I know. It’s very silly and frankly a bit wanky, but y’know, it felt like it would be nice and playful.

I had no idea how to do it though. At an internal code review here at Clearleft, I demoed what I had so far and asked for advice. The general consensus was that I should probably be using SVG rather than canvas for making interactive graphical elements. They’re probably right, but I distinctly remember learning about hit detection and mouse events in canvas during Seb’s excellent Creative JS workshop.

So I stuck with canvas and fiddled around with numbers until I got to something that felt lke it reacted nicely to hover events (or touch/clicks if hover isn’t available …or even if it is). requestAnimationFrame was a godsend when it came to getting smooth animations.

Have a play with it. It’s hard to miss. It’s not exactly a subtle easter egg.

The content of the site remains much the same. While I was disatisfied with the original visual design of the site, I’m still pretty chuffed with the copy.

One small change I made was to give the code of conduct its own page (and expand on it a bit). Previously it was included with terms and conditions but there was a good chance that it could’ve been overlooked there.

Anyway, I hope you like the new site. I think Mikey did a terrific job with the design and it was a lot of fun to put together …especially the silly wanky bit. The only slight disadvantage is that the page weight comes in slightly larger than the previous design. But I’ll keep optimising to see if I can shave off some bytes here and there.

Device testing dConstruct Device testing dConstruct

Oh, and you might notice one significant change on the home page. In addition to the speakers that are currently listed, there’s an addendum that reads “…and more”. That’s because the line-up for this year’s dConstruct, awesome as it is, is not yet complete. It’s going to get even better.

If you don’t have your ticket to this year’s dConstruct yet, what are you waiting for?

See you on September 5th.

Have you published a response to this? :

Responses

Tom Kiss

@adactio Sorry Jeremy but your canvas has visual bugs on wide viewports, and occasional code bug “undefined property ‘left’ of undefined”

# Posted by Tom Kiss on Wednesday, July 2nd, 2014 at 4:30pm

Jeremy Keith

@tomkiss Ah, I was trying to figure out why that was only showing up sometimes. Thanks for the heads-up. I’ll get on that.

Tom Kiss

@adactio NP - I don’t know if the two are related. I’m on a Thunderbolt monitor btw, >2000px ish seems to make it confused :)

# Posted by Tom Kiss on Wednesday, July 2nd, 2014 at 4:33pm

Tom Kiss

@adactio Also noticed your code of conduct link is a .dev one on your blog post (apologies, I’m on a roll here!)

# Posted by Tom Kiss on Wednesday, July 2nd, 2014 at 4:34pm

10 Shares

# Shared by Mike Martin on Wednesday, July 2nd, 2014 at 3:53pm

# Shared by Fred Oliveira on Wednesday, July 2nd, 2014 at 3:55pm

# Shared by Viviana Doctorovich on Wednesday, July 2nd, 2014 at 3:55pm

# Shared by graham smith on Wednesday, July 2nd, 2014 at 3:57pm

# Shared by Paul Lloyd on Wednesday, July 2nd, 2014 at 4:05pm

# Shared by Inayaili de León on Wednesday, July 2nd, 2014 at 4:25pm

# Shared by Ubuntu Designers on Wednesday, July 2nd, 2014 at 4:25pm

# Shared by Admire The Web on Wednesday, July 2nd, 2014 at 4:25pm

# Shared by Takashi Sakamoto on Wednesday, July 2nd, 2014 at 4:28pm

# Shared by Matt Tullett on Wednesday, July 2nd, 2014 at 4:43pm

15 Likes

# Liked by Rab on Wednesday, July 2nd, 2014 at 5:07pm

# Liked by Aaron Delani on Wednesday, July 2nd, 2014 at 5:07pm

# Liked by Cyriel on Wednesday, July 2nd, 2014 at 5:07pm

# Liked by Kenneth Auchenberg on Wednesday, July 2nd, 2014 at 5:07pm

# Liked by Robin Taylor on Wednesday, July 2nd, 2014 at 5:07pm

# Liked by Torsten Nienaber on Wednesday, July 2nd, 2014 at 5:07pm

# Liked by Benjamin Parry on Wednesday, July 2nd, 2014 at 5:27pm

# Liked by Marc Drummond on Wednesday, July 2nd, 2014 at 6:00pm

# Liked by SheSaysBrighton on Wednesday, July 2nd, 2014 at 6:31pm

# Liked by David Goss on Wednesday, July 2nd, 2014 at 6:31pm

# Liked by Anselm Hannemann on Wednesday, July 2nd, 2014 at 6:44pm

# Liked by vollepeer on Wednesday, July 2nd, 2014 at 10:51pm

# Liked by Tim Swan on Wednesday, July 2nd, 2014 at 11:11pm

# Liked by shouri sazoriza on Thursday, July 3rd, 2014 at 12:03am

# Liked by Oli Studholme on Sunday, July 6th, 2014 at 3:10am