<header class="c-banner" id="top">
<a class="c-banner__skip" href="#main">Skip to content</a>
<p class="c-banner__title">
<a class="c-banner__home" href="/pages/" rel="home">24 ways <span>to impress your friends</span></a>
</p>
</header>
<div class="c-menu no-transition">
<button class="c-menu__button" id="menu__button" aria-controls="menu__drawer" aria-expanded="true" aria-label="Menu">
<svg class="c-menu__icon" width="20" height="20" viewBox="0 0 200 200" focusable="false" aria-hidden="true">
<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>
</button>
<div class="c-menu__drawer" id="menu__drawer" role="region" aria-label="Menu">
<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…" />
<button class="c-field__button" type="submit"><svg class="c-field__icon" width="20" height="20" viewBox="0 0 200 200" focusable="false" role="img" aria-label="Search">
<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>
<nav class="c-topics-nav" aria-label="Topics">
<ul class="c-topics-nav__items">
<li class="c-topics-nav__item">
<a class="c-topics-nav__label" href="/topics/business/">
<svg width="16" height="16" viewBox="0 0 240 240" focusable="false" aria-hidden="true">
<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="16" height="16" viewBox="0 0 240 240" focusable="false" aria-hidden="true">
<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="16" height="16" viewBox="0 0 240 240" focusable="false" aria-hidden="true">
<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="16" height="16" viewBox="0 0 240 240" focusable="false" aria-hidden="true">
<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="16" height="16" viewBox="0 0 240 240" focusable="false" aria-hidden="true">
<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="16" height="16" viewBox="0 0 240 240" focusable="false" aria-hidden="true">
<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>
</nav>
<nav class="c-site-nav" aria-label="Explore 24 ways">
<ul class="c-site-nav__items">
<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/" aria-label="About this website">About</a>
</li>
</ul>
</nav>
</div>
<script class="c-menu__onload">
document.getElementById('menu__drawer').style.display = 'none';
</script>
</div>
<main class="c-main" id="main">
<section>
<header class="c-preface">
<h1 class="c-preface__title">Topics
</h1>
</header>
<section class="c-section c-section--topic" id="business">
<header class="c-section__header">
<h2 class="c-section__title">Business</h2>
</header>
<div class="c-section__main"><svg width="16" height="16" viewBox="0 0 240 240" focusable="false" aria-hidden="true">
<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>
<div class="s-prose">
<p>Where there’s muck, there are clients, deliverables and contracts. Occasionally, there’s brass. Here are articles on developing and improving relationships with clients; writing contracts and presenting your work; and encouraging success and avoiding failure.</p>
<p><a class="c-continue" href="/topic/business/">16 ways to improve your business</a></p>
</div>
</div>
</section>
<section class="c-section c-section--topic" id="code">
<header class="c-section__header">
<h2 class="c-section__title">Code</h2>
</header>
<div class="c-section__main"><svg width="16" height="16" viewBox="0 0 240 240" focusable="false" aria-hidden="true">
<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>
<div class="s-prose">
<p>Poetry? Not likely (though <a href="/2006/gravity-defying-page-corners/">Dan Cederholm wrote some doggerel</a> back in 2006). Here are articles on hypertext markup language, its attributes and other minutiae; crafty <s>hacks</s> tips for your cascading style sheets; JavaScript legerdemain; and tinkering with application programming interfaces.</p>
<p><a class="c-continue" href="/topic/code/">45 ways to craft your code</a></p>
</div>
</div>
</section>
<section class="c-section c-section--topic" id="content">
<header class="c-section__header">
<h2 class="c-section__title">Content</h2>
</header>
<div class="c-section__main"><svg width="16" height="16" viewBox="0 0 240 240" focusable="false" aria-hidden="true">
<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>
<div class="s-prose">
<p>If code is our bread, then content is our butter. It’s also been king for a while. A buttery smooth king. <em>[Ed: Mixing metaphors is inelegant, reveals a want of sophistication and causes confusion. Please stop.]</em> Whatever your preference, you’ll find a wealth of useful information in our articles on copy, including its micro and macro aspects; content planning, strategy and management for sites big and small; as well as ideas on generating it.</p>
<p><a class="c-continue" href="/topic/content/">23 ways to sharpen your content</a></p>
</div>
</div>
</section>
<section class="c-section c-section--topic" id="design">
<header class="c-section__header">
<h2 class="c-section__title">Design</h2>
</header>
<div class="c-section__main"><svg width="16" height="16" viewBox="0 0 240 240" focusable="false" aria-hidden="true">
<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>
<div class="s-prose">
<p>Coloured crayons for felt-tip fairies. <em>[Ed: What has got into you? Sort this out.]</em> 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.</p>
<p><a class="c-continue" href="/topic/design/">67 ways to enhance your design</a></p>
</div>
</div>
</section>
<section class="c-section c-section--topic" id="process">
<header class="c-section__header">
<h2 class="c-section__title">Process</h2>
</header>
<div class="c-section__main"><svg width="16" height="16" viewBox="0 0 240 240" focusable="false" aria-hidden="true">
<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>
<div class="s-prose">
<p>The great work of web, where it all comes together. Except when it doesn’t and we need to re-examine the distance between how things are done and how they could and should be done. Advent articles revealed here cover managing projects, both business and personal; smoothing the flow of work; thoughts and techniques for working smarter and being better; and getting the most out of what we do.</p>
<p><a class="c-continue" href="/topic/process/">15 ways to hone your process</a></p>
</div>
</div>
</section>
<section class="c-section c-section--topic" id="ux">
<header class="c-section__header">
<h2 class="c-section__title">UX</h2>
</header>
<div class="c-section__main"><svg width="16" height="16" viewBox="0 0 240 240" focusable="false" aria-hidden="true">
<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>
<div class="s-prose">
<p>Everything we make is made to be used: read, heard, pushed, swiped, clicked, followed, interacted with. Hard edges must be smoothed and blunt instruments sharpened. Users carry the web we’ve made with them and it must be ready to work on whatever they have to hand. From prototypes to product, from wireframe to web app, and all the research, analysis and testing in between, there are at least twenty-four ways.</p>
<p><a class="c-continue" href="/topic/ux/">34 ways to enhance your UX</a></p>
</div>
</div>
</section>
</section>
</main>
<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>© 2005-2016 24 ways and our authors</small>
</p>
</footer>
{% extends "@page" %}
{% block main %}
<section>
{% include "@preface" %}
{%- for section in sections -%}
{% render "@section", section %}
{%- endfor -%}
</section>
{% 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": "Topics",
"section": "topics",
"sections": [
{
"id": "business",
"title": "Business",
"mods": [
"topic"
],
"icon": "topic-business",
"content": "Where there's muck, there are clients, deliverables and contracts. Occasionally, there's brass. Here are articles on developing and improving relationships with clients; writing contracts and presenting your work; and encouraging success and avoiding failure.\n\n<a class=\"c-continue\" href=\"/topic/business/\">16 ways to improve your business</a>\n"
},
{
"id": "code",
"title": "Code",
"mods": [
"topic"
],
"icon": "topic-code",
"content": "Poetry? Not likely (though [Dan Cederholm wrote some doggerel](/2006/gravity-defying-page-corners/) back in 2006). Here are articles on hypertext markup language, its attributes and other minutiae; crafty ~~hacks~~ tips for your cascading style sheets; JavaScript legerdemain; and tinkering with application programming interfaces.\n\n<a class=\"c-continue\" href=\"/topic/code/\">45 ways to craft your code</a>\n"
},
{
"id": "content",
"title": "Content",
"mods": [
"topic"
],
"icon": "topic-content",
"content": "If code is our bread, then content is our butter. It's also been king for a while. A buttery smooth king. *[Ed: Mixing metaphors is inelegant, reveals a want of sophistication and causes confusion. Please stop.]* Whatever your preference, you'll find a wealth of useful information in our articles on copy, including its micro and macro aspects; content planning, strategy and management for sites big and small; as well as ideas on generating it.\n\n<a class=\"c-continue\" href=\"/topic/content/\">23 ways to sharpen your content</a>\n"
},
{
"id": "design",
"title": "Design",
"mods": [
"topic"
],
"icon": "topic-design",
"content": "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.\n\n<a class=\"c-continue\" href=\"/topic/design/\">67 ways to enhance your design</a>\n"
},
{
"id": "process",
"title": "Process",
"mods": [
"topic"
],
"icon": "topic-process",
"content": "The great work of web, where it all comes together. Except when it doesn't and we need to re-examine the distance between how things are done and how they could and should be done. Advent articles revealed here cover managing projects, both business and personal; smoothing the flow of work; thoughts and techniques for working smarter and being better; and getting the most out of what we do.\n\n<a class=\"c-continue\" href=\"/topic/process/\">15 ways to hone your process</a>\n"
},
{
"id": "ux",
"title": "UX",
"mods": [
"topic"
],
"icon": "topic-ux",
"content": "Everything we make is made to be used: read, heard, pushed, swiped, clicked, followed, interacted with. Hard edges must be smoothed and blunt instruments sharpened. Users carry the web we've made with them and it must be ready to work on whatever they have to hand. From prototypes to product, from wireframe to web app, and all the research, analysis and testing in between, there are at least twenty-four ways.\n\n<a class=\"c-continue\" href=\"/topic/ux/\">34 ways to enhance your UX</a>\n"
}
]
}
There are no notes for this item.