"Good typographic design then is not just a way to communicate the character of your text and strengthen reader engagement, it could boost their cognitive performance, too"

Subcompact Publishing

Another fantastic and beautiful essay on digital publishing and simplicity by Craig Mod.

The Big Idea podcast: Episode 1 with Brian Suda

Brian Suda is a Master Informatician based in Iceland working on Upplýsingamiðlun, or data visualisations. He’s the author of Designing with Data, which is an introduction to those who have to create charts and graphs for a living, but could be doing it better.

Brian talks with us about collecting data, the growth in the data and technology sector, the difference between data visualisations and infographics, and the importance of telling a good story. He also provides great tips on getting started in this exciting field and some resources for listeners.

An Introduction to Sassy CSS - Talk

An Introduction to Sassy CSS

CSS is a fantastic language for making beautiful websites, but sometimes it can be a bit, well, clunky. Sassy CSS (SCSS) makes it fun again by extending CSS and adding great features such as variables, mixins, nesting and much more. In this talk I run through a beginner’s guide to SCSS, show you how to get started and explain the basic features with lots of code examples. You’ll be able to build faster, experiment more, and spend less time typing and more time creating.

This is a talk given at Refresh Dublin on 18 July 2012

Hack the Cover

This is an essay for book lovers and designers curious about where the cover has been, where it’s going, and what the ethos of covers means for digital book design. It’s for those of us dissatisfied with thoughtlessly transferring print assets to digital and closing our eyes.

A beautifully illustrated and eloquently written essay about covers and digital devices. Also available to purchase for your Kindle.

Responsive or Separate - how you build is how you’re built

There’s been a lot of great debate about whether it’s best to build responsive sites or separate mobile sites. Like most things, it depends. Here’s a theory - the approach you take (or take with an agency) is an outward manifestation of your company’s personality.

If your org chart looks like this, you can build a site like this (or this… or this…):

How does the responsive design process work? It’s fast. It’s flexible. It requires trust & compromise between everyone involved. The designers & developers need to have the responsibility & permission to make decisions about content and layout as they go. Changes can happen fast. ‘Finished’ isn’t in the scoping document. If your company is fluid & flexible, then a similar web development process will work for you.

If your org chart looks like this, you can build a site like this:

How do separate sites work? They’re about silos and chains of communication. Team A takes on the mobile part, Team B does the website, and Team C handles feedback. Status meetings, scoping documents, Gant charts. Here’s our new app that does something similar to the site. Come to the launch party.

Of course, structuring your website to match your org chart has never been a good idea…

Talk to me about this article @irishstu

update: This is an example of Conway’s Law - thanks Dermot Casey for pointing it out

Content Choreography Mixin

With woop.ie templates we like to re-order the display of blocks of content depending on screen-size. For example, in some templates we put headings first for mobile, but for lager screens we have hero images appear first. We were using display: table; caption-side: top; to achieve this but have switched to flexbox based on Jordan Moore’s excellent article on content choreography.

Below is a little mixin I wrote to make it simple with Sass. Just add this as a mixin:

add this to the containing block:

@include boxit(vertical);

and this to each item you want to reorder (changing the number to the order you want it to appear in - here we are swapping headings as an example):

h1 { @include boxnum(2);}
h2 { @include boxnum(1);}


If you can think of ways to improve this please tweet me @irishstu

Jordan Moore's Responsive Images solution

Very nice take on responsive images that allows for: 1) Smallest image/fallback first 2) Image control via media queries and 3) Multiple images (so you can crop them differently)

The iPad reading experience and medieval usability

I find scrolling much more natural. My gaze remains fixed on the type area of the device, not continuously searching around the page. 

Layouts to a Rhythm

Just  a few thoughts on using mixins and variables to create a rhythm in a design without relying on a grid. (Though there’s an implied grid of $variable x $variable)

Much as I love frameworks and grids, I’ve found them a bit forced while developing templates and themes for woop.ie, our digital publishing platform.

Multiple screen sizes and devices present a challenge - I might want to have wider side gutters for iPad (to allow for clumsy thumbs) than on screen. And with (mostly) single column content having multiple grid options seems a bit redundant.

Another issue is type scaling. Some responsive designs just scale the body font-size proportionally as the screen gets bigger. I find this a bit lazy/confining. Why not have dramatic leaps as real estate increases. Let’s have headings get six times bigger from mobile to 27” iMac!

What I’ve been experimenting with instead is designing to a rhythm - defining a unit and using multiples of that everywhere I go, so I know that there’s a harmony and relationship between type size, line heights, margins and paddings.

It’s all done with the magic of Sass. Here I define my base units.

/* Widths */
$sidegutter: 30px; /* Left and right spacing */
$basegrid: 15px; /* Set a base scale */ 

Then we make a mixin for type size:

@mixin typesize ($size, $lineheight, $marginbottom) {
 font-size: $basegrid*$size;
 line-height: $basegrid*$lineheight;
 margin:0 0 $basegrid*$marginbottom 0;
}

Now, every time we style a piece of text (headings, lists etc.) we use this mixing and simple multiples to make sure there’s a harmony throughout our design.

 h1 {
 font-family: $font1;
 @include typesize
 (1.75, 2, 1);
 } 

Different sizes get different sized types, but there’s always a relationship there, without having to do any fancy maths in your head. Plus, if you tweak a lot by eye like I do, it makes experimenting so much easier.

 /* Over 768px */
 @media screen and (min-width: 769px) { 

 hgroup { 
 margin-left: $sidegutter*2;
 margin-right: $sidegutter*2;

 h1 {
 @include typesize
 (4, 4, 1);
 margin:$basegrid*2 0 $basegrid 0;
 }

We can then do interesting things like outdenting pullquotes, and still keep a relationship to the overall design

 .fig-image, .fig-video, .fig-pullquote {
 clear: left;
 float: left;
 margin: 0 $basegrid*3 $basegrid 0;
 margin-left: -($sidegutter*4); /*match indent of article */
 padding: $basegrid*0.25 0 0 0;
 width: $basegrid*28;
}

The beauty of this system is that if I change the base body font and it all feels too small or too big, I can change my $basegrid by 1 or 2 pixels and everything will reflow and refactor to reflect that change.

There’s so much more to this system and I’m only really scratching the surface - if you’ve any thoughts on it tweet me @irishstu.