Selecting the 20 best CSS sites of 2011 turned out to be much harder than I’d thought at first. I mean, pretty much every website uses CSS nowadays, so on what criteria do you judge them? Is using cutting-edge CSS3 features any more impressive than making a site which is fully responsive thanks to clever use of media queries? I myself am just as impressed by clever uses for the basics like CSS selectors and generated content, as I am by using CSS gradients to create tiled backgrounds (for example).
So in this article I’ve aimed to show a mixture of CSS-powered websites, from those which use subtle visual effects to enhance the user experience to ones which go all-out to impress with flashy animations and transformations.
I’ve absolutely no doubt that not one of you will agree with all of my choices, but by their very nature lists like this are very subjective. If you know sites which have impressed you more, leave a comment at the end of this article and let me know. And if you want to know more about some of the new techniques used in these sites, can I recommend my book, The Book of CSS3, as the perfect reference guide? Okay, with the shameless plug out of the way, let’s get on with the list – and please note, these are in no particular order.
This new design from Surrey-based agency Kyan is all-round beautiful and sleek, but the real highlight is that amazing exploded carousel on the homepage, which uses CSS transforms and keyframe animations to superb effect. Robin Whittleton, front-end developer at Kyan, explains how it was made:
“I sat down with the designer and thrashed out an idea for the animation. He then went off and implemented exactly the design he wanted in Flash, which I then converted to CSS animation.
“This way of working appeals: I get design direction on the animation and timings as well as the static assets.”
2011 saw Google roll out a system-wide visual refresh. There’s a lot to admire about the new, lighter appearance which finally unifies their range of disparate products, including the way they use CSS gradients and transitions appropriately, providing fallbacks for older browsers.
The design refresh was spearheaded by their new social network, Google+, which got everybody talking about the keyframe animations used in their circles; if you have an account, half of the fun of Google+ is watching your friends’ faces spinning around as you add them to a circle.
3. iPhone 4S
Bending the rules slightly here, as this is only a section of the iPhone4S site, but the carousel on this page from the in-house team at Apple is bold, striking, and deceptively simple. It uses CSS transforms and animations to rotate a series of large images into place, providing an effect which seems quite new and very impressive.
If you want to see how it was done, developer John B. Hall has put together an explanatory demo.
The portfolio site of Swedish designer Andreas Johansson is a masterpiece of subtle CSS. The site is filled with understated transitions and transforms, and nowhere is this more obvious than on his diary of his stay in the UK, My London Story, which has many simple yet effective animations including those gorgeous fade-outs when changing page.
“The main purpose of the website”, Andreas explains, “is of course to show the broad spectrum of what I know and what I can do. But not to over do it, just enhance the experience subtlety, and use the new tech in the right way, together with good design.”
5. Ben the Bodyguard
Long pages with clever scroll effects were all the rage this year, and the one that captured the public imagination was this clever animation for an iPhone app which protects your data. In the site Ben the Bodyguard takes a walk through the mean streets and explains the benefits of security to you, triggering events as you scroll down. It’s not as complex as some of the other similar sites in this list, but it’s perhaps the most notable.
6. The Boston Globe
Everybody’s been talking about responsive web design this year, and while many sites have practised it, the Boston Globe site is the first large scale implementation and will almost certainly be the poster-boy for the near future. There’s not a lot in the way of cutting-edge visual effects or graphics, but instead what we have is fantastic use of media queries to create a website that scales perfectly no matter what device you access it with.
Blazing a trail like this must have led to a number of important lessons being learned, and I hope their developers share those because I can’t wait to read about them [also see Behind Boston Globe's responsive layout and The evolution of client services, Ed.].
7. Making the Perfect Listing
Another impressive long-scroller, clever use of CSS transitions and transformations with geometric shapes makes this instruction guide for Gidsy, a marketplace for experiences and activities, both informative and entertaining.
Some of the shapes were made by manipulating border properties rather than using images; as designer and developer Andrew McCarthy explained, “when you start moving too many image elements simultaneously it can get really choppy. The CSS shapes really help keep the animation smooth.”
Is it permitted for me to include the site that I work on? There’s a lot of CSS3 used across The Top 10 of Everything, from the gradients and rounded corners of the buttons to the animations that are triggered on user interactions. We’ve used transitions and keyframe animations extensively, most notably when you re-order items in a Top 10, and web fonts for displaying our icons.
If you’re interested in reading more, we wrote a blog post about some of the techniques we used in the creation of the site.
9. Beercamp 2011
In terms of technical bravado the site for Beercamp at SXSW 2011 will be hard to beat. The scroll bar is used to control a zoom into the page itself, which reveals new sections the further you zoom in, until you’re faced with the spinning top from Inception – which leaves you wondering whether you’re dreaming the whole thing!
Beercamp 2011 was voted Site of the Year by .net readers and a panel of industry judges, and developer David DeSandro wrote a tutorial explaining how he achieved this stunning effect – although if that’s not enough for you, you should read the site’s Colophon for a detailed description of the methodology.
10. Slavery Footprint
Another clever long scrolling site is the Slavery Footprint from the Fair Trade Fund, which seeks to educate you about the use of slaves in making goods for the first world. The explanation page features a scroll effect which sees hands putting the content together for you, while the survey uses some fantastic transition and transformation effects to provide an engaging experience for a worthy cause.
The site for new online bank Simple is very clean, modern and uses many of the most stable CSS3 features – border-radius, rgba color values, border-radius – to good effect. All of the key content is displayed on a single page, with extra information provided in tabs which transition pleasingly between states.
12. Cultural solutions
The portfolio site of independent consultancy Cultural Soluctions is another long scrolling site, but slightly different from the others in that it leaves out the showy events and has instead a nice subtle parallax to keep you interested as you move down the page. Also uses transitions for its smooth animation, including on the scrolling marquee – are they making a comeback now?!
Not a flashy site, doesn’t use a lot of cutting-edge CSS3, but MailChimp.com is an example of using CSS to make a harmonious site which displays their content cleanly and intelligently. There’s consistent and subtle use of text-shadow and border-radius, but really this redesign provides emphasis on their key features in a way that gives maximum impact, and the CSS supports that rather than becoming a feature itself.
MailChimp was voted Redesign of the Year in the .net Awards, so the in-house design team’s hard work was definitely appreciated.
14. Nike Better World
15. Union Station Neighborhood, Denver
A tasteful design with nods to the heritage of the railway station that’s the focus of Union Station Neighborhood, and built with clean, modern CSS. Web fonts and rgba colour values are aided and augmented by transforms and transitions to make browsing this site a real pleasure.
16. Ampersand Conference 2011
As you’d expect from a typography conference such as Ampersand, web fonts are used beautifully and effectively in this site from Elliot Jay Stocks and Clearleft. It’s also coded responsively using percentage and em widths, combining with media queries to make it impactful on every device. The basics, done very well – something everyone should aspire to.
Subtle hover effects using rgba color values and understated use of web fonts give the site for freelance project management tool Solo a professional, modern feel which is perfect for the project management software it promotes. Features a light touch of CSS multi-columns in an appropriate way, and seamlessly integrates SVG for the charts in the Stats section.
18. Dazed Digital
The site for Dazed & Confused magazine uses a heavily grid-based layout made possible by the Masonry.js jQuery plugin to provide the markup and CSS. This is enhanced by the use of transitions for some of the interactions and web fonts for subheadings.
19. Financial Times (for iOS)
Is it an app or is it a website? The new FT.com blurs the boundaries, but as it’s only for iOS at the moment it falls more into the app camp. Regardless, the use of media queries makes sure users of different (iOS) devices get a fully tailored experience, and we get proof that sites using open web technologies can take on native apps and win – the FT.com mobile app now has over one million users.
Looking at it positively, there’s plenty to learn from this site – from both the things that are done well, and the things that are less so.