Skip to content

24 ways to impress your friends

Design

Coloured crayons for felt-tip fairies. [Ed: What has got into you? Sort this out.] Alright, alright. Sheesh! There’s much more to web design than mere surface. Markup minutiae and clever CSS techniques; art direction and photography; inspiration and theoretical application; layout and typography; systems of design and modularization; even music gets a look in.

  1. Flexible Captioned Slanted Images

    Eric Meyer

    Eric Meyer gift wraps the most awkwardly shaped of boxes using nothing but CSS, HTML and a little curl of ribbon. No matter how well you plan and how much paper you have at your disposal, sometimes you just need to slant the gift to the side.

  2. A Modern Typographic Scale

    Rob Weychert

    Rob Weychert reaches for the top notes to sing us a song of typographic scale. A little attention to scale and to the mathematics will help you to hit a high note with your designs this Christmas and beyond.

  3. Design Tokens and Component Based Design

    Stuart Robson

    Stuart Robson rolls up his sleeves and begins to piece together the jigsaw puzzle that is design tokens and component based design. Starting with the corners, and working around the edges, Stu helps us to piece together a full picture of a modern design system.

  4. Art Direction and the New WordPress Editor

    Mel Choyce

    Mel Choyce explores how the new WordPress editor (also know as Gutenberg) can be used to create more carefully art directed posts. Like gifts carefully arranged beneath the Christmas tree, it’s the contents that matters but the presentation that sells.

  5. Z’s Still Not Dead Baby, Z’s Still Not Dead

    Andy Clarke

    Andy Clarke digs deep into snow to find ways flat design can be brought back to life in CSS with the use of techniques to create a sense of depth. Like spring after an everlasting winter, perhaps it’s time to let a different style of design flourish. What a relief.

  6. Iconography of Security

    Molly Wilson & Eileen Wagner

    Molly Wilson and Eileen Wagner battle the age old Christmas issues of right and wrong, good and evil, and how the messages we send through iconography design can impact the decisions users make around important issues of security. Are you icons wise men, or are they actually King Herod?

  7. How to Use Audio on the Web

    Ruth John

    Ruth John lets the bells ring out for Christmas with a look at a selection of inspiring sites with creative and effective use of audio. The days of jangly MIDI tunes to distract and annoy are thankfully long behind us, with browser APIs offering new and exciting ways to generate sound. Ahead is a beautiful sonic landscape. Ding dong!

  8. Stop Leaving Animation to the Last Minute

    Val Head

    Val Head delves deep into her Christmas sack to find two very important deliverables. With animation forming such a crucial part of interaction and brand design in modern interfaces, you may not want to leave its implementation to chance.

  9. Designing Imaginative Style Guides

    Andy Clarke

    Andy Clarke unpacks his tinsel and untangles the Christmas illuminations to add some brilliance to the subject of style guides. Whether you choose a boxed pre-decorated tree, or lovingly choose each adornment to your Norwegian spruce, just remember to switch the lights on.

  10. Make a Comic

    Rebecca Cottrell

    Rebecca Cottrell sharpens her trusty HB pencil and sketches out the steps to making a comic, before inking and colouring the whole deal with a few Photoshop tips for anyone unwilling to part with a screen over the festive season. Put that eggnog down and get drawing!

  11. Beyond the Style Guide

    Paul Lloyd

    Paul Robert Lloyd runs his finger along the seam between interface patterns and design systems, exploring how a visual design language can underpin and inform a web style guide, with judicious use of CSS preprocessing. Like a good Christmas jumper, sometimes you need to get creative with the rules.

  12. Designing with Contrast

    Mark Mitchell

    Mark Mitchell casts coarse salt upon the pale icy sheen of recent web design aesthetics to sound a warning that we may be on thin ice. The tension between low contrast tastes and high contrast needs is a story as old as the <font> tag, and yet it bears frequent retelling. For snow has fallen snow on snow.

  13. Animation in Responsive Design

    Val Head

    Val Head squeezes more animation into responsive design’s Christmas stocking with some strategies for getting the most out of animation at any screen size. Set your robin a-rockin’, no matter what size the dance floor.

  14. Run Ragged

    Mark Boulton

    Mark Boulton completes our calendar with some typographic techniques to improve the reading experience. Typography, like Christmas and advent calendars, relies on the accumulation of small gains for its best effects.

  15. Why Bother with Accessibility?

    Laura Kalbag

    Laura Kalbag stamps the snow off the boots of web accessibility, making positive cases for its foundational place in our work. Accessibility is like the washing up after dinner on Christmas Day: you could leave it to someone else, but it won’t be done right.

  16. Science!

    Jon Tan

    Jon Tan opens the final door on the web advent calendar to reveal the glittering star of research evidence shining its light on design decisions. Merry Christmas!

  17. Raising the Bar on Mobile

    Scott Jehl

    Scott Jehl unties the ribbon on his cross-browser method of clearing away the address bar from small mobile screens to make more room for your design. So clear a space under the tree and on your phone for more Christmas pixels.

  18. Golden Spirals

    Drew Neil

    Drew Neil spins himself like a Christmas top to bring us HTML and CSS spirals, with a golden proportioned twist. Throw in some RGBA transparency and you’ll soon be throwing shapes at the office party.

  19. Type-Inspired Interfaces

    Dan Mall

    Dan Mall shows us one technique to combat blank-page syndrome by demonstrating how design inspiration can be taken from the typefaces we use. So put down your pencils, reach for your composing stick and let the type do the talking.

  20. A Festive Type Folly

    Jon Tan

    Jon Tan upholds the good British tradition of building follies and talks us through the process of creating one such on the web using only HTML and CSS. Follies themselves are just for enjoyment. However, there’s always interesting things to be learned when we venture out and have some fun.

  21. Increase Your Font Stacks With Font Matrix

    Richard Rutter

    Richard Rutter delivers us an early Christmas present in the form of Font Matrix, a table detailing available fonts across Windows and Mac operating system versions and with different versions of common software packages installed. Need to know how widely your font of choice is available? Just look it up. This, my friends, is the future right here.

  22. Get In Shape

    Dave Shea

    Dave Shea considers the impact of shape and balance on design, and how it can affect user perception. Like that oddly shaped gift under the tree that never quite makes sense until it’s unwrapped, sometimes you can never be sure until you give it a shake. So let’s get shaking, people.

  23. Underpants Over My Trousers

    Andy Clarke

    Andrew Clarke looks to the world of comic books and graphic novels for inspiration in web design. Personally, I look for design inspiration is Christmas wrapping paper, which, as it turns out, is a less successful technique. On the whole I’d recommend Clarke’s approach above mine. Lesson learned.

  24. CSS for Accessibility

    Ann McMeekin

    Ann McMeekin decks the halls with some practical CSS techniques that can help in making your site design as accessible to as many different users as possible. ‘Tis the season of good will to all men (and women), after all. Fa-la-la.

  25. Back To The Future of Print

    Natalie Downe

    Natalie Downe sets the presses rolling with an in-depth look at the state of print stylesheets in 2007. Often neglected by developers but much loved by the user, the simple print stylesheet can really add that finishing touch to even the best site designs. So get this down you. Ding dong!

  26. Typesetting Tables

    Mark Boulton

    Mark Boulton revisits the HTML data table for a quick look at how legibility and communication of complex data can be helped through careful typesetting. Everyone likes a neat table at Christmas, especially Aunty. You wouldn’t want to upset Aunty now, would you?

  27. Gravity-Defying Page Corners

    Dan Cederholm

    Dan Cederholm is a skillful designer who’s attention to pixels could ne’er be finer. He brings technique for good boys and girls of how to create nice graphical curls. So on the night before Christmas all through your house, get your page curling by stirring your mouse.

  28. Photographic Palettes

    Dave Shea

    Dave Shea casts a critical eye over the process of choosing a colour palette – in particular, techniques for picking tones from a photograph. As Santa found one foggy Christmas eve, choice of colour can be absolutely critical to success.

  29. Styling hCards with CSS

    John Allsopp

    John Allsop applies a little bit of style to exhibit how life can be breathed into any instance of the hCard microformat. Like the wrapping on a good gift, add a little sparkle to your pages with this handy step-by-step tutorial.