<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">Archives
</h1>
</header>
<section class="c-section" id="2015">
<header class="c-section__header">
<h2 class="c-section__title">2015</h2>
</header>
<div class="c-section__main">
<div class="s-prose">
<p>Ports and protocols were the name of the game, with swathes of the web switching to HTTPS connections. HTTP2 also started to gain adoption, and in doing so turned all we had learned about performance optimisation on its head. 24 ways saw increasing exploration of animation on the web, as well as renewed interest in accessibility, style guides and progressive enhancement.</p>
<p><a class="c-continue" href="/2015/">24 ways to impress your friends in 2015</a></p>
</div>
</div>
</section>
<section class="c-section" id="2014">
<header class="c-section__header">
<h2 class="c-section__title">2014</h2>
</header>
<div class="c-section__main">
<div class="s-prose">
<p>The web turned twenty-five and showed no sign of settling down in semi-detached suburbia. In October, HTML5 was released as a W3C Recommendation. Back in May, 24 ways was very excited and grateful to win the net award for best collaborative project – a huge thank you to all our authors, readers and supporters!</p>
<p><a class="c-continue" href="/2014/">24 ways to impress your friends in 2014</a></p>
</div>
</div>
</section>
<section class="c-section" id="2013">
<header class="c-section__header">
<h2 class="c-section__title">2013</h2>
</header>
<div class="c-section__main">
<div class="s-prose">
<p>Scourge of browser vendors everywhere, WaSP buzzed its last in March. Dave Shea’s CSS Zen Garden celebrated its tenth anniversary in May, and Google Glass was released. Ever broad in its interests, 24 ways tamed Grunt, URLs and GitHub Pages, encouraged readers to write and publish books, and leavened all that with goodies on project management, web typography and SVG.</p>
<p><a class="c-continue" href="/2013/">24 ways to impress your friends in 2013</a></p>
</div>
</div>
</section>
<section class="c-section" id="2012">
<header class="c-section__header">
<h2 class="c-section__title">2012</h2>
</header>
<div class="c-section__main">
<div class="s-prose">
<p>During the same month that HTML5 was designated a Candidate Recommendation by the W3C, 24 ways covered issues of performance as part of responsive web design, CSS and preprocessing, responsive images (again) and design systems.</p>
<p><a class="c-continue" href="/2012/">24 ways to impress your friends in 2012</a></p>
</div>
</div>
</section>
<section class="c-section" id="2011">
<header class="c-section__header">
<h2 class="c-section__title">2011</h2>
</header>
<div class="c-section__main">
<div class="s-prose">
<p>In October, Steve Jobs died. The thorniest part of responsive web design, and an arena for many competing and dissenting voices was images. 24 ways tackled that and many other issues head on: conditional loading; front-end style guides; icon fonts; and the importance of side projects.</p>
<p><a class="c-continue" href="/2011/">24 ways to impress your friends in 2011</a></p>
</div>
</div>
</section>
<section class="c-section" id="2010">
<header class="c-section__header">
<h2 class="c-section__title">2010</h2>
</header>
<div class="c-section__main">
<div class="s-prose">
<p>In April, the iPad; in May, Ethan Marcotte’s “Responsive Web Design” was published by A List Apart, and A Book Apart published <cite>HTML5 for Web Designers</cite> by Jeremy Keith; and then in June, the iPhone 4’s Retina screen changed the web development landscape. 24 ways sprinkled its Christmas pudding with CSS3, including animations and transforms, a little light content strategy, and some thoughts about the web designer of tomorrow.</p>
<p><a class="c-continue" href="/2010/">24 ways to impress your friends in 2010</a></p>
</div>
</div>
</section>
<section class="c-section" id="2009">
<header class="c-section__header">
<h2 class="c-section__title">2009</h2>
</header>
<div class="c-section__main">
<div class="s-prose">
<p>A year when books were winning (Five Simple Steps published <cite>A Practical Guide to Designing for the Web</cite> by Mark Boulton and <cite>Designing with Web Standards</cite> by Jeffrey Zeldman and Ethan Marcotte reached its third edition) and the web was losing (Yahoo! closed Geocities). Significant progress was made with web fonts and HTML5, and 24 ways delivered the Christmas gifts again.</p>
<p><a class="c-continue" href="/2009/">24 ways to impress your friends in 2009</a></p>
</div>
</div>
</section>
<section class="c-section" id="2008">
<header class="c-section__header">
<h2 class="c-section__title">2008</h2>
</header>
<div class="c-section__main">
<div class="s-prose">
<p>This year saw Apple’s App Store open, and the release of Android 1.0 and Google Chrome 1.0. Taking all that in its stride, 24 ways brought its seasonal perspective to bear on business, with articles on project management, the path from design to development, how to charm clients, and killer contracts. Also, a first look at modular layout systems. Pulse, meet finger.</p>
<p><a class="c-continue" href="/2008/">24 ways to impress your friends in 2008</a></p>
</div>
</div>
</section>
<section class="c-section" id="2007">
<header class="c-section__header">
<h2 class="c-section__title">2007</h2>
</header>
<div class="c-section__main">
<div class="s-prose">
<p>Apple launched the iPhone in June; Amazon released the Kindle in November — a big year. At three, 24 ways was as diverse as ever, taking a detailed look at font stacks, website performance, working with clients and markup.</p>
<p><a class="c-continue" href="/2007/">24 ways to impress your friends in 2007</a></p>
</div>
</div>
</section>
<section class="c-section" id="2006">
<header class="c-section__header">
<h2 class="c-section__title">2006</h2>
</header>
<div class="c-section__main">
<div class="s-prose">
<p>In March, the first tweets were tweeted; in August, jQuery 1.0 appeared. In its second year, 24 ways wrote responsible JavaScript and hinted at a mobile web, although mobile phones didn’t yet have proper browsers. Using CSS3 in client work was still a pipedream. And in October, IE7 was officially released by Microsoft — no words.</p>
<p><a class="c-continue" href="/2006/">24 ways to impress your friends in 2006</a></p>
</div>
</div>
</section>
<section class="c-section" id="2005">
<header class="c-section__header">
<h2 class="c-section__title">2005</h2>
</header>
<div class="c-section__main">
<div class="s-prose">
<p>It all started here, in the heady days of Web 2.0. Ajax was the first new browser technology we’d seen in years, and combined with a new breed of libraries such as Prototype, it kick-started the JavaScript renaissance.</p>
<p><a class="c-continue" href="/2005/">24 ways to impress your friends in 2005</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": "Archives",
"section": "archives",
"sections": [
{
"id": 2015,
"title": "2015",
"content": "Ports and protocols were the name of the game, with swathes of the web switching to HTTPS connections. HTTP2 also started to gain adoption, and in doing so turned all we had learned about performance optimisation on its head. 24 ways saw increasing exploration of animation on the web, as well as renewed interest in accessibility, style guides and progressive enhancement.\n\n<a class=\"c-continue\" href=\"/2015/\">24 ways to impress your friends in 2015</a>\n"
},
{
"id": 2014,
"title": "2014",
"content": "The web turned twenty-five and showed no sign of settling down in semi-detached suburbia. In October, HTML5 was released as a W3C Recommendation. Back in May, 24 ways was very excited and grateful to win the net award for best collaborative project – a huge thank you to all our authors, readers and supporters!\n\n<a class=\"c-continue\" href=\"/2014/\">24 ways to impress your friends in 2014</a>\n"
},
{
"id": 2013,
"title": "2013",
"content": "Scourge of browser vendors everywhere, WaSP buzzed its last in March. Dave Shea's CSS Zen Garden celebrated its tenth anniversary in May, and Google Glass was released. Ever broad in its interests, 24 ways tamed Grunt, URLs and GitHub Pages, encouraged readers to write and publish books, and leavened all that with goodies on project management, web typography and SVG.\n\n<a class=\"c-continue\" href=\"/2013/\">24 ways to impress your friends in 2013</a>\n"
},
{
"id": 2012,
"title": "2012",
"content": "During the same month that HTML5 was designated a Candidate Recommendation by the W3C, 24 ways covered issues of performance as part of responsive web design, CSS and preprocessing, responsive images (again) and design systems.\n\n<a class=\"c-continue\" href=\"/2012/\">24 ways to impress your friends in 2012</a>\n"
},
{
"id": 2011,
"title": "2011",
"content": "In October, Steve Jobs died. The thorniest part of responsive web design, and an arena for many competing and dissenting voices was images. 24 ways tackled that and many other issues head on: conditional loading; front-end style guides; icon fonts; and the importance of side projects.\n\n<a class=\"c-continue\" href=\"/2011/\">24 ways to impress your friends in 2011</a>\n"
},
{
"id": 2010,
"title": "2010",
"content": "In April, the iPad; in May, Ethan Marcotte's \"Responsive Web Design\" was published by A List Apart, and A Book Apart published <cite>HTML5 for Web Designers</cite> by Jeremy Keith; and then in June, the iPhone 4's Retina screen changed the web development landscape. 24 ways sprinkled its Christmas pudding with CSS3, including animations and transforms, a little light content strategy, and some thoughts about the web designer of tomorrow.\n\n<a class=\"c-continue\" href=\"/2010/\">24 ways to impress your friends in 2010</a>\n"
},
{
"id": 2009,
"title": "2009",
"content": "A year when books were winning (Five Simple Steps published <cite>A Practical Guide to Designing for the Web</cite> by Mark Boulton and <cite>Designing with Web Standards</cite> by Jeffrey Zeldman and Ethan Marcotte reached its third edition) and the web was losing (Yahoo! closed Geocities). Significant progress was made with web fonts and HTML5, and 24 ways delivered the Christmas gifts again.\n\n<a class=\"c-continue\" href=\"/2009/\">24 ways to impress your friends in 2009</a>\n"
},
{
"id": 2008,
"title": "2008",
"content": "This year saw Apple's App Store open, and the release of Android 1.0 and Google Chrome 1.0. Taking all that in its stride, 24 ways brought its seasonal perspective to bear on business, with articles on project management, the path from design to development, how to charm clients, and killer contracts. Also, a first look at modular layout systems. Pulse, meet finger.\n\n<a class=\"c-continue\" href=\"/2008/\">24 ways to impress your friends in 2008</a>\n"
},
{
"id": 2007,
"title": "2007",
"content": "Apple launched the iPhone in June; Amazon released the Kindle in November — a big year. At three, 24 ways was as diverse as ever, taking a detailed look at font stacks, website performance, working with clients and markup.\n\n<a class=\"c-continue\" href=\"/2007/\">24 ways to impress your friends in 2007</a>\n"
},
{
"id": 2006,
"title": "2006",
"content": "In March, the first tweets were tweeted; in August, jQuery 1.0 appeared. In its second year, 24 ways wrote responsible JavaScript and hinted at a mobile web, although mobile phones didn't yet have proper browsers. Using CSS3 in client work was still a pipedream. And in October, IE7 was officially released by Microsoft — no words.\n\n<a class=\"c-continue\" href=\"/2006/\">24 ways to impress your friends in 2006</a>\n"
},
{
"id": 2005,
"title": "2005",
"content": "It all started here, in the heady days of Web 2.0. Ajax was the first new browser technology we'd seen in years, and combined with a new breed of libraries such as Prototype, it kick-started the JavaScript renaissance.\n\n<a class=\"c-continue\" href=\"/2005/\">24 ways to impress your friends in 2005</a>\n"
}
]
}
There are no notes for this item.