After Clearleft’s recent rebranding, I’m really interested in Happy Cog’s redesign process:
In the near future we’ll be rolling out a new website, followed by a rebrand of Cognition, our blog. As the identity is tested against applications, much of what’s here may change. Nothing is set in stone.
An open beta of Smashing Magazine’s redesign, which looks like it could be a real poster child for progressive enhancement:
We do our best to ensure that content is accessible and enhanced progressively, with performance in mind. If JavaScript isn’t available or if the network is slow, then we deliver content via static fallbacks (for example, by linking directly to Google search), as well as a service worker that persistently stores CSS, JavaScripts, SVGs, font files and other assets in its cache.
It’s all go, go, go at Clearleft while we’re working on a new version of our website …accompanied by a brand new identity. It’s an exciting time in the studio, tinged with the slight stress that comes with any kind of unveiling like this.
I think it’s good to remember that this is the web. I keep telling myself that we’re not unveiling something carved in stone. Even after the launch we can keep making the site better. In fact, if we wait until everything is perfect before we launch, we’ll probably never launch at all.
On the other hand, you only get one chance to make a first impression, right? So it’s got to be good …but it doesn’t have to be done. A website is never done.
I’ve got to get comfortable with that. There’s lots of things that I’d like to be done in time for launch, but realistically it’s fine if those things are completed in the subsequent days or weeks.
Adding a service worker and making a nice offline experience? I really want to do that …but it can wait.
What about other performance tweaks? Yes, we’ll to try have every asset—images, fonts—optimised …but maybe not from day one.
Making sure that each page has good metadata—Open Graph? Twitter Cards? Microformats? Maybe even AMP? Sure …but not just yet.
Having gorgeous animations? Again, I really want to have them but as Val rightly points out, animations are an enhancement—a really, really great enhancement.
If anything, putting the site live before doing all these things acts as an incentive to make sure they get done.
So when you see the new site, if you view source or run it through Web Page Test and spot areas for improvement, rest assured we’re on it.
Chris redesigned CSS Tricks and it’s got some really nice touches. I particularly like the stacked card view on mobile.
Ethan redesigned. It’s lovely.
And now that the new site’s live, I realize I’d like to keep working on it. I’m not just feeling excited to see where it goes from here: as modest as it is, I’ve made something I’m proud of.
Andy is sticking with the indie web.
Here, I control my words. Nobody can shut this site down, run annoying ads on it, or sell it to a phone company. Nobody can tell me what I can or can’t say, and I have complete control over the way it’s displayed. Nobody except me can change the URL structure, breaking 14 years of links to content on the web.
I second that emotion.
Ariel and Lisa have redesigned the excellent Spacehack site and it’s looking stellar!
The Perch Control Panel is progressively enhanced. Almost all functionality of Perch is available even if you completely disable JavaScript, or if JavaScript fails to load.
Mike’s blog is back on the Indie Web.
As someone who designs things for a living, there is a certain amount of professional pride in creating one’s own presence on the internet. It’s kind of like if an architect didn’t design their own house.
Paul gives the lowdown on the Google+ responsive relaunch. They set themselves this performance budget:
And this bit is crucial:
One of our major rules was that all our pages needed to be both server-side and client-side rendered. With server-side rendering we make sure that the user can begin reading as soon as the HTML is loaded, and no JavaScript needs to run in order to update the contents of the page.
A great case study from Richard, walking through the process of redesigning the website for the Royal Borough of Kensington and Chelsea.
The Guardian have hit the big red button and made their responsive site the default. Great stuff!
(top tip: don’t read the comments)
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.
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.
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.
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.
Some good-lookin’ stats from a responsive redesign:
Total page views, a metric we were prepared to see go down with the redesign, are up by 27%. Unique visitors per week are up 14% on average and visits per week are up on average 23%.
We finally launched the long-overdue redesign of the Clearleft website last week. We launched it late on Friday afternoon, because, hey! that’s not a stupid time to push something live or anything.
The actual moment of launch was initiated by Josh who had hacked together a physical launch button containing a teensy USB development board.
So nerdy.
Mind you, just because the site is now live doesn’t mean the work is done. Far from it, as Paul pointed out:
Keep the feedback and comments about the new @clearleft site coming. Launching a site is just the start; much to iterate upon and improve.
— Paul Lloyd (@paulrobertlloyd) January 11, 2013
But it’s nice to finally have something new up. We were all getting quite embarrassed by the old site.
Still, rather than throw the old design away and never speak of it again, we’ve archived it. We’ve archived every iteration of the site:
I’m glad that we’ve kept the archived versions online. I quite enjoy seeing the progression of the visual design and the technologies used under the hood.
Nishant gives a great overview of the responsive redesign of the Microsoft home page, ably abetted by the Paravel gang.
There’s some good advice here about launching a new design without pissing off your users (too much).
Wilson has turned his site into a single-serving page that’s doing some interesting things with media queries (using height as well as width).
Rob is back.
Paul has redesigned. Again. It’s gorgeous and it is, of course, responsive.