I'm still eyeball-deep in the explore phase of my new site redesign, which has meant a lot of research into the state of web design trends. There's clearly two big ones going on at the moment and they're both tricky to visualise without a lot of examples, so I'm going to whittle down my overflowing bookmark bar and point out the dozen best examples I've found.
Parallax!
Linking in with the 2010 craze for one-page websites; these are sites where the backgrounds, foregrounds and/or midgrounds animate relative to the position of the scroll bar to make it look like they are moving faster or slower than expected. It started with the Nike site, and now everyone's doing it. Easier shown than told though! Click and scroll up and down to witness the nifty.
- Mark Lawrence Design is the personal site of a designer, it's pretty arty and freeform with things swooshing in from every direction as you scroll down. Nifty!
- On the other hand Quality Cabinets is a "just" a commercial, almost brochure-ware site, but it still uses a restrained parallax on their homepage effect to very nice effect.
- I can't decide if Dentsu Network over-uses the parallax, but it's certainly very striking when you use the left hand navigation to get around the page.
- A charity appeal on a sector jobs site Authentic Jobs uses a well-drilling analogy to get through the page, striking water at the end.
- The Nizo sign-up page is slick and minimal...
- While swiss design firm Ala decided to go in the opposite direction, showing off everything you could ever possibly want to do with scrolling-based animations. It's a leeetle busy.
Responsive design!
In a nutshell these are sites that change depending on the width of the device, which is becoming critical in a time of increasing web device plurality. Technically they're a combination of three techniques: auto-sizing columns (using % widths instead of px), auto-sizing images (by setting their widths to 100%), and using Media Queries to serve up a different styles at very wide or very narrow widths. To see the changes you'll have to vary your browser width.
- The website for the dConstruct 2011 web conference by the inestimable ClearLeft is predictably one of the quintessential responsive design sites. The columns shrink, the images resize and flow and at narrow widths it switches layout to a more "mobile friendly" design.
- Stephen Caver has another true responsive site, using three layouts instead of two. This one's interesting because of the CSS3 used to get some pseudo-parallax texture effects when you widen and shrink the portal size.
- Andersson-Wise has BIG PICTURES YAY. Slightly basic layout but this demos the technique of stretching an image to fill the space, where usually the images have a maxwidth.
- Forefathers doesn't actually use resizing columns or images - focusing instead on Media Queries - so this an example of adaptive design similar to what I already use on my site. It's much less fluid so it needs four distinct layouts at different widths to get it looking as good, and it's a bit less future proof as it's difficult to predict what portal sizes new web-enabled devices will have. Still, at the moment it still looks great. Plus there's a monkey.
- Andrew Revitt's page is another example of adaptive design with four layouts. It also uses a double background to make a better use of what space is left over at the sides.
- The Happy Bit is a lovely little adaptive design site, but it uses five CSS layouts at different widths... On anything but a tiny site it's a bit much.
At first I got very excited about the parallax-type sites, but looking under the hood the markup behind all those different scrolling elements is actually pretty ugly and unsemantic. I'd never be able to compress my site to one page anyway. So instead I'm going to focus on responsive design, which certainly has more longevity, though I still hope to throw some subtle parallax elements in there.
Dauntingly. what both these techniques have in common is they're a big step away from websites being frozen HTML interpretations of static Photoshop documents; they move, they change, they flow. It makes my next stage - amateur wireframing - kinda tricky.