Having thought about responsive tables and progressively showing data a bit more, I’ve found a much simpler way based on using nth-child selectors with CSS – this is much cleaner than applying styles to individual tables, and should work for iPhones and most browsers that respect media queries in the first place.

Here’s the updated file – table-childs.

The HTML:

<table id="iseqchart">

<tr>
	<th id="index">Index</th>
	<th id="value">Value</th>
	<th id="change">Change</th>
	<th id="changepercent">Change %</th>
	<th id="yhigh">Year High</th>
	<th id="ylow">Year Low</th>
	<th id="dhigh">Daily Low</th>
	<th id="dlow">Daily High</th>
	<th id="turnover">Turnover €(Mil.)</th>
</tr>
<tr>
	<td>ISEQ® Overall</td>
	<td>2,725.99</td>
	<td class="neg">-15.30</td>
	<td class="neg">-0.56%</td>
	<td>3,037.89</td>
	<td>2,333.35</td>
	<td>2,712.84</td>
	<td>2,743.31</td>
	<td>24.00</td>
</tr>
<tr>
	<td>ISEQ® Financial</td>
	<td>130.77</td>
	<td class="neg">-3.24</td>
	<td class="neg">-2.42%</td>
	<td>493.83</td>
	<td>101.54</td>
	<td>130.43</td>
	<td>136.14</td>
	<td>2.76</td>
</tr>
<tr>
	<td>ISEQ® General</td>
	<td>3,751.79</td>
	<td class="neg">-17.49</td>
	<td class="neg">-0.46%</td>
	<td>4,146.84</td>
	<td>3,188.68</td>
	<td>3,731.15</td>
	<td>3,770.88</td>
	<td>21.24</td>
</tr>
<tr>
	<td>ISEQ® Small Cap.</td>
	<td>1,661.94</td>
	<td class="pos">3.76</td>
	<td class="pos">0.23%</td>
	<td>2,175.60</td>
	<td>1,633.21</td>
	<td>1,643.92</td>
	<td>1,661.94</td>
	<td>0.20</td>
</tr>
</table>

The CSS:

<style>
#iseqchart	{
	border:1px solid #000;
	border-collapse:collapse;
	font-family:Arial, Sans-Serif;
	font-size:12px;
	text-align:right;
	}

#iseqchart th	{
	border:1px solid #333;
	padding:3px 6px;
	}

#iseqchart td	{
	border:1px solid #999;
	padding:3px 6px;
	}

.neg	{
	color:red;
}

.pos	{
	color:green;
}

@media only screen and (max-width: 768px) {
	#turnover, tr td:nth-child(9)		{ display:none; visibility:hidden; }
}

@media only screen and (max-width: 420px) {
	#changepercent, tr td:nth-child(4)	{ display:none; visibility:hidden; }
	#yhigh, tr td:nth-child(5)			{ display:none; visibility:hidden; }
	#ylow, tr td:nth-child(6)			{ display:none; visibility:hidden; }
	#turnover, tr td:nth-child(9)		{ display:none; visibility:hidden; }
}

@media only screen and (max-width: 320px) {
	#changepercent, tr td:nth-child(4)	{ display:none; visibility:hidden; }
	#yhigh, tr td:nth-child(5)			{ display:none; visibility:hidden; }
	#ylow, tr td:nth-child(6)			{ display:none; visibility:hidden; }
	#dhigh, tr td:nth-child(7)			{ display:none; visibility:hidden; }
	#dlow, tr td:nth-child(8)			{ display:none; visibility:hidden; }
	#turnover, tr td:nth-child(9)		{ display:none; visibility:hidden; }
}

</style>

The result:

Much cleaner markup where we are targeting cells mathematically, rather than with classes.

Update: A simpler solution using nth-child instead of classes

Inspired by a post by Mark Boulton on Google+ I thought I’d have a look at responsive design for tables.

Here’s the HTML file to play with.

The problem: Smaller screens can’t display over a certain number of columns. So you either get long, squashed tables with epic scrolling on narrow screens (if you have lots of columns), or super-wide tables with little data on large screens (if you have only 2 or 3 columns).

The solution: Add more columns as the screen size expands, showing only the most important data first.

(Note: using images for tables to best illustrate resizing etc.)

Here’s a basic table, with styling:

<table id="iseqchart">

<tr>
	<th>Index</th>
	<th>Value</th>
	<th>Change</th>
	<th>Change %</th>
	<th>Year High</th>
	<th>Year Low</th>
	<th>Daily Low</th>
	<th>Daily High</th>
	<th>Turnover €(Mil.)</th>
</tr>
<tr>
	<td>ISEQ® Overall</td>
	<td>2,725.99</td>
	<td class="neg">-15.30</td>
	<td class="neg">-0.56%</td>
	<td>3,037.89</td>
	<td>2,333.35</td>
	<td>2,712.84</td>
	<td>2,743.31</td>
	<td>24.00</td>
</tr>
<tr>
	<td>ISEQ® Financial</td>
	<td>130.77</td>
	<td class="neg">-3.24</td>
	<td class="neg">-2.42%</td>
	<td>493.83</td>
	<td>101.54</td>
	<td>130.43</td>
	<td>136.14</td>
	<td>2.76</td>
</tr>
<tr>
	<td>ISEQ® General</td>
	<td>3,751.79</td>
	<td class="neg">-17.49</td>
	<td class="neg">-0.46%</td>
	<td>4,146.84</td>
	<td >3,188.68</td>
	<td>3,731.15</td>
	<td>3,770.88</td>
	<td>21.24</td>
</tr>
<tr>
	<td>ISEQ® Small Cap.</td>
	<td>1,661.94</td>
	<td class="pos">3.76</td>
	<td class="pos">0.23%</td>
	<td>2,175.60</td>
	<td>1,633.21</td>
	<td>1,643.92</td>
	<td>1,661.94</td>
	<td>0.20</td>
</tr>
</table>

Full width:

Small screen – text is squashed, lots of scrolling:

Next step: Use colgroup to identify columns, and hide them using media queries (I’m adding colours so you can see what goes wrong…):

The HTML:

<table id="iseqchart">

<colgroup id="name">
    <col/>
  </colgroup>
<colgroup id="delta">
    <col/>
	<col/>
</colgroup>
<colgroup id="deltapercent">
    <col/>
</colgroup>
<colgroup id="yearhigh">
    <col/>
	<col/>
</colgroup>
<colgroup id="dailyhigh">
    <col/>
	<col/>
</colgroup>
<colgroup id="turnover">
    <col/>
</colgroup>

<tr>
	<th>Index</th>
	<th>Value</th>
	<th>Change</th>
	<th>Change %</th>
	<th>Year High</th>
	<th>Year Low</th>
	<th>Daily Low</th>
	<th>Daily High</th>
	<th>Turnover €(Mil.)</th>
</tr>
<tr>
	<td>ISEQ® Overall</td>
	<td>2,725.99</td>
	<td class="neg">-15.30</td>
	<td class="neg">-0.56%</td>
	<td>3,037.89</td>
	<td>2,333.35</td>
	<td>2,712.84</td>
	<td>2,743.31</td>
	<td>24.00</td>
</tr>
<tr>
	<td>ISEQ® Financial</td>
	<td>130.77</td>
	<td class="neg">-3.24</td>
	<td class="neg">-2.42%</td>
	<td>493.83</td>
	<td>101.54</td>
	<td>130.43</td>
	<td>136.14</td>
	<td>2.76</td>
</tr>
<tr>
	<td>ISEQ® General</td>
	<td>3,751.79</td>
	<td class="neg">-17.49</td>
	<td class="neg">-0.46%</td>
	<td>4,146.84</td>
	<td >3,188.68</td>
	<td>3,731.15</td>
	<td>3,770.88</td>
	<td>21.24</td>
</tr>
<tr>
	<td>ISEQ® Small Cap.</td>
	<td>1,661.94</td>
	<td class="pos">3.76</td>
	<td class="pos">0.23%</td>
	<td>2,175.60</td>
	<td>1,633.21</td>
	<td>1,643.92</td>
	<td>1,661.94</td>
	<td>0.20</td>
</tr>
</table>

The CSS:

<style>
#iseqchart	{
	border:1px solid #000;
	border-collapse:collapse;
	font-family:Arial, Sans-Serif;
	font-size:12px;
	text-align:right;
	}

#iseqchart th	{
	border:1px solid #333;
	padding:3px 6px;
	}

#iseqchart td	{
	border:1px solid #999;
	padding:3px 6px;
	}

.neg	{
	color:red;
}

.pos	{
	color:green;
}

#name			{ background:#eff3f7; }
#delta			{ background:#ffffff; }
#deltapercent	{ background:#fafbdb; }
#yearhigh		{ background:#dbf8fb; }
#dailyhigh		{ background:#dbfbe5; }
#turnover		{ background:#e4dbfb; }

@media only screen and (max-width: 768px) {
	#yearhigh		{ display:none; visibility:hidden; }
	#dailyhigh		{ display:none; visibility:hidden; }
	#turnover		{ display:none; visibility:hidden; }
}

</style>

This creates 6 groups of columns – the name of the index, the value and change, the percentage change, the year’s high and low, the daily high and low, and turnover. All this information is useful, but at a bare minimum you’d need to know the name, value and change. So we try and hide the extra stuff with media queries – if you go smaller than 768px the high/low columns and turnover columns should be switched off.

Full width:

Less than 768px width:

The bad news: Only the styling from the table columns gets hidden, not the headings and rows that should be associated with that column through <colgroup>

The hacky icky way – style ALL THE THINGS!

The HTML – add a class to each cell

<table id="iseqchart">

<colgroup id="name">
    <col/>
  </colgroup>
<colgroup id="delta">
    <col/>
	<col/>
</colgroup>
<colgroup id="deltapercent">
    <col/>
</colgroup>
<colgroup id="yearhigh">
    <col/>
	<col/>
</colgroup>
<colgroup id="dailyhigh">
    <col/>
	<col/>
</colgroup>
<colgroup id="turnover">
    <col/>
</colgroup>

<tr>
	<th>Index</th>
	<th>Value</th>
	<th>Change</th>
	<th>Change %</th>
	<th class="yearhigh" scope="colgroup">Year High</th>
	<th class="yearhigh" scope="colgroup">Year Low</th>
	<th class="dailyhigh" scope="colgroup">Daily Low</th>
	<th class="dailyhigh" scope="colgroup">Daily High</th>
	<th class="turnover" scope="colgroup">Turnover €(Mil.)</th>
</tr>
<tr>
	<td>ISEQ® Overall</td>
	<td>2,725.99</td>
	<td class="neg">-15.30</td>
	<td class="neg">-0.56%</td>
	<td class="yearhigh">3,037.89</td>
	<td class="yearhigh">2,333.35</td>
	<td class="dailyhigh">2,712.84</td>
	<td class="dailyhigh">2,743.31</td>
	<td class="turnover">24.00</td>
</tr>
<tr>
	<td>ISEQ® Financial</td>
	<td>130.77</td>
	<td class="neg">-3.24</td>
	<td class="neg">-2.42%</td>
	<td class="yearhigh">493.83</td>
	<td class="yearhigh">101.54</td>
	<td class="dailyhigh">130.43</td>
	<td class="dailyhigh">136.14</td>
	<td class="turnover">2.76</td>
</tr>
<tr>
	<td>ISEQ® General</td>
	<td>3,751.79</td>
	<td class="neg">-17.49</td>
	<td class="neg">-0.46%</td>
	<td class="yearhigh">4,146.84</td>
	<td class="yearhigh">3,188.68</td>
	<td class="dailyhigh">3,731.15</td>
	<td class="dailyhigh">3,770.88</td>
	<td class="turnover">21.24</td>
</tr>
<tr>
	<td>ISEQ® Small Cap.</td>
	<td>1,661.94</td>
	<td class="pos">3.76</td>
	<td class="pos">0.23%</td>
	<td class="yearhigh">2,175.60</td>
	<td class="yearhigh">1,633.21</td>
	<td class="dailyhigh">1,643.92</td>
	<td class="dailyhigh">1,661.94</td>
	<td class="turnover">0.20</td>
</tr>
</table>

The CSS

<style>
#iseqchart	{
	border:1px solid #000;
	border-collapse:collapse;
	font-family:Arial, Sans-Serif;
	font-size:12px;
	text-align:right;
	}

#iseqchart th	{
	border:1px solid #333;
	padding:3px 6px;
	}

#iseqchart td	{
	border:1px solid #999;
	padding:3px 6px;
	}

.neg	{
	color:red;
}

.pos	{
	color:green;
}

#name			{ background:#eff3f7; }
#delta			{ background:#ffffff; }
#deltapercent	{ background:#fafbdb; }
#yearhigh		{ background:#dbf8fb; }
#dailyhigh		{ background:#dbfbe5; }
#turnover		{ background:#e4dbfb; }

@media only screen and (max-width: 768px) {
	#turnover, .turnover		{ display:none; visibility:hidden; }
}

@media only screen and (max-width: 420px) {
	#yearhigh, .yearhigh		{ display:none; visibility:hidden; }
	#turnover, .turnover		{ display:none; visibility:hidden; }
}

@media only screen and (max-width: 320px) {
	#yearhigh, .yearhigh		{ display:none; visibility:hidden; }
	#dailyhigh, .dailyhigh		{ display:none; visibility:hidden; }
	#turnover, .turnover		{ display:none; visibility:hidden; }
}

</style>

Small

Smaller

Smallest

This progressively hides columns that aren’t vital as the screen sizes decreases. It’s also pretty brutal in terms of styling overload.

Better Solutions:

It would be nice if <colgroup> passed through CSS display stylings to the cells it’s supposed to be containing and identifying - I’m testing in Chrome so if it’s different in other browsers let me know. Also, if I’ve missed something obvious do tell.

The elephant in the room is downloading extra data only to hide it, which is only a few KB in this case so not the end of the world. There’s also the question of what to show or hide, which is really a content issue and not one for the designer to decide.

What would be nice is a way to ‘weight’ visibility based on availabily width or height – an x-index or y-index if you will. In that case I could go:

#name		{ x-index:10; }
#delta		{ x-index:10; }
#deltapercent	{ x-index:4; }
#yearhigh	{ x-index:6; }
#dailyhigh	{ x-index:8; }
#turnover	{ x-index:1; }

and let the browser gradually show new columns IF there’s enough room to do it nicely – by calculating the width of each column versus screen width.

Watch the video (can’t embed)

Today, as webfonts are buoyed by a wave of early-adopter enthusiasm, they’re marred by a similar unevenness in quality, and it’s not just a matter of browsers and rasterizers, or the eternal shortage of good fonts and preponderance of bad ones. There are compelling questions about what it means to be fitted to the technology, how foundries can offer designers an expressive medium (and readers a rich one), and what it means for typography to be visually, mechanically, and culturally appropriate to the web. This is an exploration of this side of web fonts, and a discussion of where the needs of designers meet the needs of readers.

Here’s the three sites that were created – I think they all reflect how a professional design process can produce exceptional results. They were conceived, designed and developed by: Tom Cunningham, Donovan Hutchinson, Ciarán Harris, Colm McBarron, Anne Magner, Fabrizio Calderon, Cory-Ann Joseph, Christian Hughes, Mark Wallis, Stephanie Francis, Celine O’Neill, Matt Finucane, Una Vejsbjerg, Neil Turner, Elaine Larkin, John Rainsford, Ken Stanley, Aoife Ross, Michael Flanagan, Paul Watson and Martha Rotter – you can follow them all here.

My job was just to find volunteers and charities, find a venue (Engineyard/Orchestra – thanks to Eamon Leonard) and get sponsorship (thanks Blacknight and all the sponsors) with the help of Darragh Doyle, who also helped document the whole event.

There’s some cool time-lapse stuff to come!

How others can do this

I’ve seen a few comments saying how this would be a good idea for other people to try. It’s very easy to say ‘somebody should do XYZ’ but to be honest with a good support network of friends and businesses, a very patient partner, a bit of time in the evenings and a good old spreadsheets of tasks, it’s not that difficult to organise a design event like this. The hard work is all from the volunteers’ side. Hopefully the following might help, based on what I’ve learned over the last two 24 the webs (or 24s the web I don’t know…)

Volunteers

• You need great volunteers, who really know their shit. They are 99.9% responsible for the success of the projects. I’ve been lucky to have fantastic volunteers sign up.
• You need a diverse range of skills.
• Selecting people is very difficult. Sign-ups for the last two events have always been to very high standards. Can’t really think of any easy tips for this one, except to encourage teams to sign up.
• To get signups make a form in Google Documents, and stick it on a website. This is saved to a spreadsheet. Add some columns for who’s picked or not, and team names.
• Import this into Mailchimp and use its segmenting tool to send certain emails to specific people.
• Ask for confirmation that people are coming, so there’s no surprises on the day. Mailchimp is handy for seeing if an email’s been opened or not.
• Be sure to thank everyone who took the time to volunteer, selected or not, and ask permission to contact someone again if you need a substitute.
• Tell them what they need to bring and what’s supplied, including hardware, software, hosting and licensing.

Logistics

• Set a deadline. Building stuff ‘in your spare time’ makes it very hard to get things finished, especially if many people are involved. Sufficient time (debatable!), a fixed end point, and everyone in the one place means you get something done.
• You need a venue where everyone’s together, so there’s more team spirit, energy and banter. A separate room for naps, meetings and quiet time is important too.
• You need to keep people fed and full of caffeine. It’s at least four meals – lunch, dinner, supper, breakfast.
• Be sure to ask everyone to thank and promote the sponsors.
• If you’re running the show your job is to make sure everyone’s ok. After 10 hours stop doing this, you’re annoying them and they know where to find you!
• Ask people for help – donations of time, money or resources are out there, you just need to ask.

Charities

• It’s up to you how you select charities. A mix of charities makes for more diverse work, while a theme might be good too. Up to you really.
• As this is a one-off build and not a relationship the charity needs someone who will keep the site alive and updated, so an active Facebook page, Twitter account or blog is a good indicator.
• You need to make sure the charities have a great brief and decent content – depending on your criteria the content may not be available, but they should at least have a strong idea about what exactly they need.
• This website briefing document is a good starting point. Make sure they also have all their passwords etc. If they haven’t a domain name they can get a free .ie if they are a registered charity. You could also look for sponsored hosting.
• A quick elevator pitch at the start from each charity is a good way to get people excited about the project
• Encourage the charities to stay for at least 8 hours. Or never leave.

Promoting

• Still getting the hang of this one, but a twitter hashtag seems like the best way to have 20+ people share what they are doing. Could do a lot better sharing what’s happening, with auto-screenshotting and video etc. Maybe next year!
• Nothing worse than hearing ‘oh if only I’d known, I’d have signed up/helped out’. Star-tweet or bookmark anyone who says that and remind them for the next event!
• I live-blogged the event, sharing what people were doing and snippets of their work. More than 50% of referrals came from Twitter. Had just over 1,500 visits, which would be better if it were a weekday but not doable, as people have to work!
• Getting a professional photographer in to snap photos produced some amazing photos, so ask volunteers if there’s anyone they know that wants to pop in and help out.
• The most important part for me is the work produced and crediting the volunteers – so try and get as many people to see that as possible.

I’d be happy to talk about this if anyone wants to get in touch – stucurry at gmail or Follow @irishstu

Journalist? Get a full press release here!

Last year I organised (with a LOT of help) an event where 21 very talented and hard-working people built three websites for charities in 24 hours. It all went pretty well so I thought we thought we’d do it again!

Application are now open for people who want to take part in building sites and for charities who needs sites built. Please read the requirements on the right when signing up.

The event is a great opportunity for experienced web professionals to donate their time & talent to charity in a fun and exciting event, and for charities to avail of services and talent that they couldn’t otherwise get access to.

There’s a few simple rules for charities, but it basically comes down to: we can’t take work away from people (so charities must have no budget for a website); they must have great content and practical needs that can be accomplished in 24 hours; and they must have someone willing to take care of the site on an ongoing basis, so that it can be a useful tool for them in the future.

For volunteers, we just need skilled people who can stay awake! This year it would be handy if people formed groups before applying, to make life easier when matching teams.

Love these Alternate History Posters on Etsy

A 5×7 board book that has 16 pages of bold col­or­ful, pos­i­tive words wrapped in lov­ing HTML mark up tags for imag­i­na­tive code geeks in train­ing.

via Cameron Moll

The Art of the Menu is a wonderful new design blog from Under Consideration, which highlights creative menu design. The above example is from Schiller’s Liquor Bar, one of my favourite New York restaurants. Also of interest is this Wired article on the psychology of menu design.

Bitman!

Superman, Son of Pix-el

More comic book characters as Tiny Tower bitizens. See also Tiny Tower Judge Dredd

HARDCORE WILL NEVER DIE, BUT YOU WILL

Beautiful gig poster by Andrew & Matt McCracken