In all the excitement  I seem to have neglected to mention that I’m now working full-time on a digital publication startup called woop.ie. You can learn more about it by signing up to the mailing list and following @makewoopie but basically we want to help people create digital publications that look beautiful on every device – we’re prototyping it with Idea Magazine to give you a basic… umm… idea… of what we’re at.

If you’d like to hear myself and Martha Rotter talk about Idea and woop.ie then have a listen to this episode of the Technology.ie podcast: Martha Rotter and Stewart Curry from Idea Magazine [Tech Heroes Podcast #2] with Conn Ó Muíneacháin and Internet hero Michele Neylon

A SOPA style law is being proposed for Ireland, without any form of debate or discussion. It will give music and movie companies legal powers to shut down websites suspected of having copyright material on them.

This will have a chilling effect both on large international companies we want to have here in Ireland (like Twitter and Facebook) and on indigenous startups who allow for any form of content uploading or creation – stifling the chances of local startups developing the next Tumblr or Facebook or Flipboard or whatever.

Smarter people than me have written about it, so please have a look at the following posts and take action at Stop SOPA Ireland.

• TJ McIntyre’s FAQ on Ireland’s SOPA
• The Business Post’s article on it
• Michele Neylon’s rallying call
• Karl Monaghan has written about how it sucks
• Want a side of sarcastic comments with your info? Broadsheet bitches!!

They Work for You!

Be sure to let the relevant Minister Sean Sherlock TD know how you feel – he’s on Twitter too @seansherlocktd and let your local TDs know too.

Thanks to James for the image.

(update: spelling)

I learned that money can be a lot of things. It can be something that is hoarded, fought over, protected, stolen and withheld. Or it can be like an energy, fueled by the desire, will, creative interest, need to laugh, of large groups of people. And it can be shuffled and pushed around and pooled together to fuel a common interest, jokes about garbage, penises and parenthood.

I’m a big Louis CK fan – his TV show Louie is one of the best TV shows ever made – it’s so far beyond your typical one-liners and Flanderised characters from typical sitcoms it’s scary. Some shows are hilarious, and on familiar subjects – bad dates, relationships, bullies. Other episodes are more uncomfortable, or just – stories. Taking time to learn about people and their relationships. There’s a bit where he spends about 3 or 4 minutes air-drumming to “Who Are You” while driving with his kids – no other show (except maybe Mad Men) would take so long to indulge in something that doesn’t have a laugh or a gag or a cut to someone making a funny face (Jim Halpert).

Since season 2 Louis has been writing and editing Louie with complete control and no interference, and he decided to take that logic to distributing a completely DRM free comedy show for $5 online – all written, produced and edited by himself – giving him complete control. He broke even in 24 hours and is well on the way to making a fair bit of money, without fucking over his fans.

It’s a real nice story of taking control of your art, getting closer to your fans, and hoping that people will do the right thing. You should read how he’s reacted to the whole experience. Cool story.

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.

Words are the supreme objects. They are minded things

– William H. Gass

What’s this all about? Idea Magazine is a new digital publication about Ideas & Technology in Ireland. (follow @readidea for updates). It’s for people who build web stuff and people interested in web stuff. If your mum tells people you ‘work/study/are interested in computers’ it’s probably for you too. If, like me, your 18th birthday cake had a PC on it and your brothers are still calling you a nerd over it 15-odd years later, it’s DEFINITELY for you. #truestory

Finally, after a lot of late nights, emails and epic HTMLing, Idea Magazine is live for your reading pleasure. I’m delighted to have been involved as the subject matter is incredibly close to my heart – now more than ever – and it’s all about people (some of whom I’m lucky enough to call friends) I respect and a community that I’m privileged to be a part of.

This is been a real passion project for me – when Martha Rotter first asked if I was interested in being involved with her and Niall Kitson in creating a digital publication about tech and startups in Ireland, I jumped at the chance. I’ve been becoming increasingly interested in the aspect of web design that involves long form narrative, digital typography, words designed to be read – and this was my chance to experiment, try new ideas, and learn more about how to design this type of content for multiple devices.

Reading the thoughts of people like Mark Boulton, Luke Wroblewski and Craig Mod over the last while, and particularly in the last year or so, I’ve felt a real shift in how people are thinking about how we design, and how people are consuming and engaging with what we design. Multiple devices, responsive design, grids, typography, resolution and quality… there’s so much to learn all over again.

Frameworks and Layout Choices

The inaugural issue of Idea Magazine is only the very first step down this path of research and learning. The design/development brief was pretty loose, but we had some very clear goals:

• Design to be read. The text was the most important thing.
• Adapt to different devices and screen sizes, while still designing to be read.
• Keep it standards based, but transportable to other publishing formats.

The first big question we asked ourselves was on pagination vs scrolling. (Read iA’s discussion of it here). I experimented with Treesaver for a while but ultimately the pagination model didn’t give the granular control over the content that I wanted. (For example, I couldn’t specify exactly where in the content flow an image would appear.) Plus, I was more scrolling that paging, though I’m still open to the idea. (For example, the Sunday Times app does both, depending on orientation.)

Deciding to go with a framework to shortcut cross-platform and browser testing (time was very tight) I did some prototyping with HTML/CSS frameworks such as Skeleton and Golden Grid System and mashups of both. The main issue with these I found were the gutters were too thin for my purposes (two columns of text would blur into one wide column.) Finally, Martha pointed me at the Laker framework, which was pretty much ideal for what we were looking at, as it worked well everywhere and was built to publish to multiple formats. I also liked Laker’s space right, indent left way of breaking up long pages to make them easier to read.

Best viewed in…

…can stay a legacy of the browser wars, we tried to make it look great everywhere (and appropriate and respectful to the device) as best we could. That being said, check it out on an iPad ;)

Resize it if you’re looking at it in a browser, it looks pretty cool as it scales across. It’s also using a lot of cool CSS3 stuff like multiple backgrounds and border-radius – so if you’re looking at it in Safari that’s how we like it and if you’re looking at it in IE8 then I spent four hours making it not broken for you, and that’s the best I can do!

Better next time

Long term, we’d be looking at a custom framework with LESS to quickly let us change and build new layouts super fast, and adapt for different devices as the come along. (Subject to change based on reading more about responsive/adaptive/break points etc. – I think that the whole aspect ratio element is a factor that needs to be looked at in more depth.)

Branding & Design

The Idea brand – italic Baskerville in a black circle – is based on the following thoughts… An idea is an organic thing. It’s powerful and exciting, but it’s nothing without action and human effort. So the logo takes the form of a circle, which is both organic but also mechanical, and which ‘contains’ and forms the Idea. Baskerville? It’s beautiful in italic, it’s a classic, and it supports the notion of ‘words to be read’. Plus the circle motif is a great starting point for new design elements (and also a bit dumb for designing for pixels but hey we’ll all have retina monitors in a few years – won’t we?)

The design of the content is deliberately minimal – off white textured background that’s not too stark, dark grey text in Droid Sans that’s easy to read on screen, and bold Open Sans headings to grab your interest. The colours are bold and vibrant (on colour screens!) as we’re working with light and talking about exciting, hard working, fantastic people – no muted colors for these guys. Images were sourced mainly from commons because we spent all our money on t-shirts and this issue’s free.

Timing and Collaboration

The most time-consuming element in creating the magazine was content population. Words would go in, they’d be structured to display them in the best way, and extra content (video, pictures etc ) added. And, being last in the production process (author > editor > design), it was all on a very tight deadline. We’d a good workflow so there was very little re-pasting of content (we used Google Docs to collaborate) but it’s not practical going forward, as we’d no easy way for designer, editor and writer to all work together to make minor copy edits or move stuff around, as everything is hard-coded HTML and very easy to break.

One work-around was to have sample content for specific page types – Job Opportunities, Gifts etc. That way I could press ahead designing these pages with sample content to sort out how it should appear. This only works where you have units of repeatable, discreet objects, rather than a single long form article, which needs to be put together based on how the content *is*.

Also, as every page was hard-coded, reordering, removing or adding pages was a pain as you have to change all the next/back buttons.

What’s missing

A brief list of what I’d liked to have had given infinite time: Swipe to change page (too slow); Fully responsive, percentage based design (no time to test); more layout variation; more experimental layouts; play more with the dramatic shift from portrait to landscape on iPad (The Daily adverts do this very well); more customised content & tools for certain devices; the list goes on…

An even better Idea

When we first got together about this project it was about one magazine. Very quickly we realised that if we built a CMS for this, it would be so much easier. And it would be something that other people would like to use too. A way for anyone to create beautiful digital magazines that can work on multiple devices, whether it’s with predefined templates or their own designs. A simple and elegant system that lets people take their words and Write Only Once, Publish It Everywhere.

So, starting in January, I’ll be working full time in a startup with Martha and that’s what we’re going to build. Wish us luck!

A few months back Martha Rotter asked me if I could give a small bit of advice in making a digital magazine for the tech community in Ireland & Northern Ireland. As I really like having side projects to work on, to keep me fresh and allow me to experiment, I said “of course!”

Coming out this Thursday 8 December, Idea Magazine should be something special and really interesting to anyone involved in tech startups and making things for the web, so please sign up and check it out when it comes out!

Beautiful piece of stop-motion animation. Via @marcusmacinnes

Google Street View stop motion animation short made as a personal project by director Tom Jenkins.

Story: A lonely desk toy longs for escape from the dark confines of the office, so he takes a cross country road trip to the Pacific Coast in the only way he can – using a toy car and Google Maps Street View.

All screen imagery was animated – there are no screen replacements.

Produced, animated, filmed, lit, edited & graded by Tom Jenkins (www.theoryfilms.co.uk / https://www.facebook.com/theoryfilms – !NEW MAKING OF PICS ON FB PAGE! / @thetheoryUK / http://twitter.com/#!/thetheoryUK).

Shot using Canon 5d MkII, Dragonframe Stop Motion software and customised slider.

Music by the wonderfull Cinematic Orchestra (www.cinematicorchestra.com) and the track is Arrival of the Birds

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.

Thanks, internet