<header class="c-banner" id="top">
    <h1 class="c-banner__title">
        <a class="c-banner__home" href="/pages/" rel="home">24 ways <span>to impress your friends</span></a>
    </h1>
</header>

<a class="c-menu" href="#navigation">
    <svg class="c-menu__icon" width="20" height="20" viewBox="0 0 200 200" role="img">
  <rect class="c-menu__line" width="120" height="10" x="40" y="45"/>
  <rect class="c-menu__line" width="120" height="10" x="40" y="70"/>
  <rect class="c-menu__line" width="120" height="10" x="40" y="95"/>
  <rect class="c-menu__line" width="120" height="10" x="40" y="95"/>
  <rect class="c-menu__line" width="120" height="10" x="40" y="120"/>
  <rect class="c-menu__line" width="120" height="10" x="40" y="145"/>
</svg>

    <span class="u-hidden">Jump to menu</span>
</a>

<main class="c-main" role="main">

    <article>
        <header class="c-preface">
            <h1 class="c-preface__title">About 24 ways
            </h1>
        </header>
        <section class="c-section" id="background">
            <header class="c-section__header">
                <h1 class="c-section__title">Background</h1>
            </header>
            <div class="c-section__main">
                <div class="s-prose">
                    <p class="lede">24 ways is the advent calendar for web geeks. For twenty-four days each December we publish a daily dose of web design and development goodness to bring you all a little Christmas cheer.</p>
                    <p>Back in December 2005, Drew McLellan set up what he called “a festive blog” with a new article each day written by experts sharing their knowledge. Articles present ideas, techniques or experiences that you can take and apply to your
                        own work. Code snippets, advice about business and clients, workflow and workshopping, design inspiration: 24 ways has it all.</p>
                    <p>With over one hundred authors and almost two hundred articles, 24 ways is very proud to have become an annual fixture in the calendars of web geeks. Since 2005, 24 ways has always combined learning and sharing, both vital aspects of
                        the continued strength of the web community. As Drew wrote, ‘There’s a lot of fun to be had in learning something that will impress those you work with – especially if then you can share what you know to everyone’s benefit.’</p>

                </div>
            </div>
        </section>
        <section class="c-section" id="credits">
            <header class="c-section__header">
                <h1 class="c-section__title">Credits</h1>
            </header>
            <div class="c-section__main">
                <div class="s-prose">
                    <ul>
                        <li>24 ways is brought to you by Perch and is built on <a href="https://grabaperch.com/?ref=24w01">Perch Runway</a></li>
                        <li>Produced by <a href="http://allinthehead.com/">Drew McLellan</a>, <a href="http://suda.co.uk/">Brian Suda</a>, <a href="http://maban.co.uk/">Anna Debenham</a> and <a href="http://fullcreammilk.co.uk/">Owen Gregory</a>.</li>
                        <li>Designed by <a href="https://paulrobertlloyd.com/">Paul Robert Lloyd</a>.</li>
                        <li>Possible only with the help and dedication of <a href="/authors/">our authors</a>.</li>
                    </ul>

                </div>
            </div>
        </section>
        <section class="c-section" id="colophon">
            <header class="c-section__header">
                <h1 class="c-section__title">Colophon</h1>
            </header>
            <div class="c-section__main">
                <div class="s-prose">
                    <ul>
                        <li>Content managed with <a href="https://grabaperch.com/?ref=24w01">Perch Runway</a>.</li>
                        <li>Hosted by <a href="https://www.memset.com/dedicated-servers/">Memset Dedicated Servers</a>.</li>
                        <li>Standing on the shoulders of Varnish, Nginx, Apache, PHP, MySQL, Amazon S3 and CloudFront.</li>
                        <li>Type set in <a href="https://adobe-fonts.github.io/source-sans-pro/">Source Sans Pro</a>, <a href="https://adobe-fonts.github.io/source-serif-pro/">Source Serif Pro</a> and <a href="https://adobe-fonts.github.io/source-code-pro/">Source Code Pro</a>                            by Adobe.</li>
                        <li>Fonts served via <a href="https://fonts.google.com/">Google Fonts</a>.</li>
                        <li><a href="http://www.webalys.com/minicons/">Minicons</a> by Vincent Le Miogn.</li>
                        <li><a href="https://github.com/leaverou/prism/">prism.js</a> by Lea Verou.</li>
                    </ul>

                </div>
            </div>
        </section>
    </article>

</main>

<nav class="c-navigation" id="navigation">
    <h1 class="u-hidden" id="navigation__title">Browse 24 ways</h1>
    <div class="c-traverse-nav">
        <a class="c-traverse-nav__item" rel="prev" href="/2015/how-tabs-should-work/" data-sequence-title="How Tabs Should Work">
            <svg class="c-traverse-nav__icon" width="20" height="20" viewBox="0 0 200 200" role="img">
  <path d="M50 100l85 85 7-7-78-78 78-78-7-7"/>
</svg>

            <span class="u-hidden">Previous article</span>
        </a>
        <a class="c-traverse-nav__item" rel="next" href="/2015/solve-the-hard-problems/" data-sequence-title="Solve the Hard Problems">
            <span class="u-hidden">Next article</span>
            <svg class="c-traverse-nav__icon" width="20" height="20" viewBox="0 0 200 200" role="img">
  <path d="M150 100l-85 85-7-7 78-78-78-78 7-7"/>
</svg>

        </a>
    </div>

    <div class="c-navigation__drawer" id="navigation__drawer">
        <form class="c-search" role="search" id="search" action="/pages/search/">
            <fieldset class="c-field">
                <legend class="u-hidden">Search 24 ways</legend>
                <label class="u-hidden" for="q">Keywords</label>
                <input class="c-field__input" type="search" id="q" name="q" placeholder="e.g. CSS, Design, Research&#8230;" />
                <button class="c-field__button" type="submit"><svg class="c-field__icon" width="20" height="20" viewBox="0 0 200 200" role="img" aria-labelledby="c-field__icon--search">
  <title id="c-field__icon--search">Search</title>
  <path role="presentation" d="M129 121C136 113 140 102 140 90c0-28-22-50-50-50S40 63 40 90s22 50 50 50c12 0 24-4 32-12L158 164l7-7-36-36zM90 130c-22 0-40-18-40-40s18-40 40-40 40 18 40 40-18 40-40 40z"/>
</svg>
</button>
            </fieldset>
        </form>
        <ul class="c-topics-nav">
            <li class="c-topics-nav__item">
                <a class="c-topics-nav__label" href="/topics/business/">

                    <svg width="24" height="24" viewBox="0 0 240 240" role="img">
  <path d="M20 220c-11 0-20-9-20-20V70c0-11 9-20 20-20h60V35c0-10 5-15 15-15h50c10 0 15 5 15 15v15h60c11 0 20 9 20 20v130c0 11-9 20-20 20H20zm0-160c-5.5 0-10 4.5-10 10v130c0 5.5 4.5 10 10 10h200c5.5 0 10-4.5 10-10V70c0-5.5-4.5-10-10-10H20zm130-10V35c0-3-2-5-5-5H95c-3 0-5 2-5 5v15h60zM30 100V90h180v10H30zm0 40v-10h180v10H30zm0 40v-10h180v10H30z"/>
</svg> Business
                </a>
            </li>
            <li class="c-topics-nav__item">
                <a class="c-topics-nav__label" href="/topics/code/">

                    <svg width="24" height="24" viewBox="0 0 240 240" role="img">
  <path transform="rotate(45 120 120)" d="M115 100H70.5C63 85 47.5 75 30 75 8.5 75-9.5 90-14 110h29l10 10-10 10h-29c4.5 20 22.5 35 44 35 17.5 0 33-10 40.5-25h99.5c7.5 15 22.5 25 40.5 25 21.5 0 39.5-15 44-35h-29l-10-10 10-10h29c-4.5-20-22.5-35-44-35-17.5 0-33 10-40.5 25H125V30h10v-50h-30v50h10v70zm123.5 40c-6.5 9-17 15-28.5 15-16 0-29-10.5-33.5-25H63.5C59 144.5 46 155 30 155c-12 0-22.5-6-28.5-15H20l20-20-20-20H1.5C7.5 91 18 85 30 85c16 0 29 10.5 33.5 25h113c4.5-14.5 17.5-25 33.5-25 12 0 23 6 29 15h-19l-20 20 20 20h19zM115-10h10v30h-10v-30zM99.5 240v-50h-10v-10h25v-40h10v40h25v10H140v50c0 10-7.5 20-20 20-12.5 0-20-10-20.5-20zm11 0c0 7.5 5 10 10 10s10-2.5 10-10v-50h-20v50z"/>
</svg> Code
                </a>
            </li>
            <li class="c-topics-nav__item">
                <a class="c-topics-nav__label" href="/topics/content/">

                    <svg width="24" height="24" viewBox="0 0 240 240" role="img">
  <path d="M102.5 240l-1.5-2c-2.5-3.5-61-88-61-128s40.5-64 42.5-65L50 0h140l-32.5 45S200 70 200 110s-58.5 124.5-61 128l-1.5 2h-35zm30-10c9-13 57.5-85.5 57.5-120 0-33-35-56-41.5-60H91.5C85 54 50 77 50 110c0 34.5 48.5 106.5 57.5 120h25zM115 129.5c-11.5-2-20-12.5-20-24.5 0-14 11-25 25-25s25 11 25 25c0 12-8.5 22-20 24.5V230h-10V129.5zm5-39.5c-8 0-15 6.5-15 15s6.5 15 15 15 15-6.5 15-15-6.5-15-15-15zM92.5 40h55L170 10H70l22.5 30z"/>
</svg> Content
                </a>
            </li>
            <li class="c-topics-nav__item">
                <a class="c-topics-nav__label" href="/topics/design/">

                    <svg width="24" height="24" viewBox="0 0 240 240" role="img">
  <path fill-rule="evenodd" d="M140 0h80v240h-80V0zm70 10h-60v30h20v10h-20V70h20v10h-20v20h20v10h-20v20h20v10h-20v20h20v10h-20v20h20v10h-20V230h60V10zM45 230c-14 0-25-11-25-25V60c0-1 35-55 35-55s35 54 35 55v145c0 14-11 25-25 25H45zm-15-25c0 8 7 15 15 15h20c8 0 15-7 15-15v-5H30v5zm0-25v10h50v-10H30zm0-106c0-2 2-4 4-4h2c2 0 4 2 4 4v96H30V74zm20 0c0-2 2-4 4-4h2c2 0 4 2 4 4v96H50V74zm20 0c0-2 2-4 4-4h2c2 0 4 2 4 4v96H70V74zM30.5 60.5S39 58 45 63.5c6-4.5 14-4.5 20 0 6-5.5 14.5-3 14.5-3L69 45H41L30.5 60.5zm24.5-38L47.5 35h15L55 22.5z"/>
</svg> Design
                </a>
            </li>
            <li class="c-topics-nav__item">
                <a class="c-topics-nav__label" href="/topics/process/">

                    <svg width="24" height="24" viewBox="0 0 240 240" role="img">
  <path d="M210 116v4c0 49.5-40.5 90-90 90-29 0-55-14-71.5-35l7-7c14.5 19.5 38 32 64.5 32 44 0 80-36 80-80v-3.5l-15.5 16-7.5-7.5 28.5-28.5L234 125l-7.5 7.5L210 116zm-180 8v-4c0-49.5 40.5-90 90-90 29 0 54.5 13.5 71 35l-7 7C169 52.5 146 40 120 40c-44 0-80 36-80 80v5l17-17 7 7-28.5 28.5L7 115l7-7 16 16z"/>
</svg> Process
                </a>
            </li>
            <li class="c-topics-nav__item">
                <a class="c-topics-nav__label" href="/topics/ux/">

                    <svg width="24" height="24" viewBox="0 0 240 240" role="img">
  <path d="M220 240H20c-11 0-20-9-20-20V20C0 9 9 0 20 0h200c11 0 20 9 20 20v200c0 11-9 20-20 20zM20 10c-5 0-10 4-10 10v200c0 5 4 10 10 10h200c5 0 10-4 10-10V20c0-5-4-10-10-10H20zm150 200c-11 0-20-9-20-20s9-20 20-20 20 9 20 20-9 20-20 20zm0-30c-5 0-10 4-10 10s4 10 10 10 10-4 10-10-4-10-10-10zm-50 30c-11 0-20-9-20-20s9-20 20-20 20 9 20 20-9 20-20 20zm0-30c-5 0-10 4-10 10s4 10 10 10 10-4 10-10-4-10-10-10zm-50 30c-11 0-20-9-20-20s9-20 20-20 20 9 20 20-9 20-20 20zm0-30c-5 0-10 4-10 10s4 10 10 10 10-4 10-10-4-10-10-10zm45-30V80h10v70h-10zm0-100V30h10v20h-10zM65 80V30h10v50H65zm0 70v-40h10v40H65zm100 0v-20h10v20h-10zm0-50V30h10v70h-10zM50 110V80h40v30H50zm10-10h20V90H60v10zm90 30v-30h40v30h-40zm-50-50V50h40v30h-40zm10-10h20V60h-20v10zm50 50h20v-10h-20v10z"/>
</svg> UX
                </a>
            </li>
        </ul>
        <ul class="c-site-nav">
            <li class="c-site-nav__item">
                <a class="c-site-nav__label" href="/archives/">Archives</a>
            </li>
            <li class="c-site-nav__item">
                <a class="c-site-nav__label" href="/authors/">Authors</a>
            </li>
            <li class="c-site-nav__item">
                <a class="c-site-nav__label" href="/about/">About <span class="u-hidden">24 ways</span></a>
            </li>
        </ul>
    </div>
</nav>

<footer class="c-contentinfo">
    <p class="c-contentinfo__social">
        <a href="https://feeds.feedburner.com/24ways" rel="alternate">Grab our RSS feed</a>
        <a href="https://twitter.com/24ways" rel="me">Follow us on Twitter</a>
        <a href="https://github.com/24ways" rel="me">Contribute on GitHub</a>
    </p>
    <p class="c-contentinfo__copyright">
        <small>&#169; 2005-2016 24 ways and our authors</small>
    </p>
</footer>
{% extends "@page" %}
{% block main %}
<article>
  {% include "@preface" %}
  {%- for section in sections -%}
    {% render "@section", section %}
  {%- endfor -%}
</article>
{% endblock %}
{
  "site": {
    "title": "24 ways",
    "handle": "24ways",
    "description": "24 ways is the advent calendar for web geeks. Each day throughout December we publish a daily dose of web design and development goodness to bring you all a little Christmas cheer.",
    "url": "https://24ways.org",
    "feed": "https://feeds.feedburner.com/24ways",
    "theme_color": "#f04"
  },
  "theme": {
    "year": [
      348,
      344,
      340,
      336,
      332,
      328,
      324,
      320,
      316,
      312,
      308,
      304,
      300,
      296,
      292,
      288
    ],
    "day": [
      360,
      353,
      346,
      339,
      332,
      325,
      318,
      311,
      304,
      297,
      290,
      283,
      276,
      269,
      262,
      255,
      248,
      241,
      234,
      227,
      220,
      213,
      206,
      199
    ]
  },
  "title": "About 24 ways",
  "section": "about",
  "sections": [
    {
      "id": "background",
      "title": "Background",
      "content": "<p class=\"lede\">24 ways is the advent calendar for web geeks. For twenty-four days each December we publish a daily dose of web design and development goodness to bring you all a little Christmas cheer.</p>\n\nBack in December 2005, Drew McLellan set up what he called \"a festive blog\" with a new article each day written by experts sharing their knowledge. Articles present ideas, techniques or experiences that you can take and apply to your own work. Code snippets, advice about business and clients, workflow and workshopping, design inspiration: 24 ways has it all.\n\nWith over one hundred authors and almost two hundred articles, 24 ways is very proud to have become an annual fixture in the calendars of web geeks. Since 2005, 24 ways has always combined learning and sharing, both vital aspects of the continued strength of the web community. As Drew wrote, ‘There’s a lot of fun to be had in learning something that will impress those you work with – especially if then you can share what you know to everyone’s benefit.’\n"
    },
    {
      "id": "credits",
      "title": "Credits",
      "content": "* 24 ways is brought to you by Perch and is built on [Perch Runway](https://grabaperch.com/?ref=24w01)\n* Produced by [Drew McLellan](http://allinthehead.com/), [Brian Suda](http://suda.co.uk/), [Anna Debenham](http://maban.co.uk/) and [Owen Gregory](http://fullcreammilk.co.uk/).\n* Designed by [Paul Robert Lloyd](https://paulrobertlloyd.com/).\n* Possible only with the help and dedication of [our authors](/authors/).\n"
    },
    {
      "id": "colophon",
      "title": "Colophon",
      "content": "* Content managed with [Perch Runway](https://grabaperch.com/?ref=24w01).\n* Hosted by [Memset Dedicated Servers](https://www.memset.com/dedicated-servers/).\n* Standing on the shoulders of Varnish, Nginx, Apache, PHP, MySQL, Amazon S3 and CloudFront.\n* Type set in [Source Sans Pro](https://adobe-fonts.github.io/source-sans-pro/), [Source Serif Pro](https://adobe-fonts.github.io/source-serif-pro/) and [Source Code Pro](https://adobe-fonts.github.io/source-code-pro/) by Adobe.\n* Fonts served via [Google Fonts](https://fonts.google.com/).\n* [Minicons](http://www.webalys.com/minicons/) by Vincent Le Miogn.\n* [prism.js](https://github.com/leaverou/prism/) by Lea Verou.\n"
    }
  ]
}

There are no notes for this item.