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.

24 the web is back again this year. Stay tuned for updates. If you want to help with sponsorship (need to feed people) or a venue, please contact me (stucurry at gmail dot com). If you want to volunteer to be on a team or nominate a charity I’ll post a form shortly so please don’t email just yet. Please.

Photo © Ben Arent

GOAL: Know more about the other person’s world before you get in touch with them.

CHANGE: We added the local time and current temperature to a new section at the top of a contact’s page. We also added the primary phone number and email address to the same section. Now, when you look up someone’s number or email, you’ll also know what time it is where this person is and what the temperature is. The time is especially useful if the contact is many time zones away. And since so many conversations start by talking about the weather, the temperature will give you a good bit of ammo for that discussion.

I think this is really clever – there’s a write-up of the other changes here but I think this and the contacts zoom are two really smart solutions.

Full Code Press was an international competition where 3 teams built a website for a charity in 24 hours. The amazing Jason Santa Maria was on Team USA.

FullCodePress is a web competition – the brainchild of the people at Webstock and WIPA. In essence it’s a geek Olympics! The concept is simple. Web teams take each other on, at the same location, to build a complete website in 24 hours. No excuse, no extensions, no budget overruns.

Wouldn’t it be awesome to do something like this in Ireland? Well, we already do something similar with the 24 hour design challenge – but we could do one for web design. Design Week is in November – anyone interested?

"Infographic", originally uploaded by Phil Gyford.

Funny. Click it for bigger version.

It would be great if imdb.com had a stripped-down version if their site for the iPhone, but what would be even better is an iPhone app with the following features:

- Sound detection: just record a bit from a show and it would find the epsiode or movie, just like Shazzam and Midomi do for songs

- Barcode scan: snap the barcode from the DVD box to pull up the details.

- Storage: remember what you’ve looked up and tag it so you remember if you’ve seen it.

- Facial recognition: snap a picture of an actor from the TV and it will tell you what you know them from.

- Sharing: so you can annoy your friends with your awesome taste in movies and TV

Anything else you’d put in an imdb.com iPhone app?

flavors.me/irishstu/, originally uploaded by irishstu.

I’m really impressed with flavors.me/irishstu/ – it’s kind of the way I wanted to go with stewartcurry.ie/ where every section has it’s own panel – so great inspiration there!