Woopie Blog

This week we look at advertising, accessibility, Vogue, and toilet reading. Happy reading and enjoy...

irishstu — Fri, 17 May 2013 18:36:53 +0100

This week we look at advertising, accessibility, Vogue, and toilet reading. Happy reading and enjoy your weekend!

British Vogue Gets Top Marks for UX & Branding

Shelley from Vogue has a great review of British Vogue and their focus on a cross-platform experience and typography.

How Accessible is the Kindle iOS App?

The National Federation of the Blind reviews Amazon’s new Kindle app to see how it scores for accessibility.

Book Marketing Q&A: Jeff Yamaguchi Talks Advertising

A (brief) Q&A about advertising, native ads vs banner ads, and the importance of “big ideas”

Easy product shots

Want to get a cool looking “real world” shot of your publication on a tablet or mobile? PlaceIt has you covered. (Expect to see these everywhere)

Machines for Life

Pitchfork have produced yet another fantastic long-form interview with scrolling hypermedia elements, this time with Daft Punk.

Quote of the Week

“Anywhere you can stick a screen, eventually you’ll find a browser.” – @anna_debenham #mobilism

— Cennydd Bowles (@Cennydd)

May 16, 2013

Useless Gadget of the Week

The iPad Commodore Caddy

Douglas from one of our favourite publishing blogs reviews an iPad stand - for your toilet!

The Potential of Digital Advertising in Magazines

martharotter — Wed, 15 May 2013 17:20:00 +0100

Let’s say you have a magazine for your customers on your plane/train/cruise ship, and you spend time sourcing great content and advertising to help them plan their journeys and enjoy their travel more. You have an eager, focused audience with a lot in common. Wouldn’t your readers appreciate the chance to purchase tickets for the tours you’ve recommended or book the restaurant your magazine raves about? Wouldn’t your advertisers appreciate the chance to reach out even more?

Most print magazine advertisements can, at best, list a website or phone number.

Most digital advertisements bounce in readers’ faces, annoying them until they navigate away.

We can do better by not only respecting readers but providing something of more value to both them and the advertiser.

(Image credit)

Commerce, Interrupted

A few months ago, I was on a flight reading the complimentary airline magazine as I always do. Airline magazines often have surprisingly great writers (Paul Ford for example) and many have interesting tips for wherever you’re going.

In this case, it was not anything in the magazine about Reykjavík, my final destination, that caught my eye. This time it was a piece of jewelry. That might sound normal for many people, but I’m honestly not much of a jewelry person. Advertisements from Tiffany’s and other jewelry brands usually bore me, and I flip right by them.

This one was different. A necklace like nothing I had ever seen before. I was fascinated by it. I flipped back to that page in the magazine several times to stare before the flight ended. I looked through the duty free catalogue to see if perhaps by some amazing coincidence it would be there but no dice. I snapped a picture of the ad with my phone just to save the company’s name. I was sold.

When I got home I spent some time trying to search for the piece in order to find it online & buy it. Shockingly, this jeweler who put together such a stunning magazine advertisement had basically zero web presence. How can this be?! It’s 2013! After much searching, I found a company who sold a small set of this jeweler’s collection, but not the piece I loved.

Eventually I exhausted my energy after finding there were no distributors in Ireland for this jeweler – only in Denmark. And while there were a handful of online retailers selling their collection, none had the piece I liked. It was late. I was pretty sure I could call their store in Copenhagen the next day and ask about pricing, shipping, etc., but I did not.

Imagine how different this story be with a digital magazine?

If Scanorama, the Scandinavian Airlines magazine, had been a digital magazine, that advertisement becomes so much more powerful. I could have clicked and bought the necklace and had it waiting for me when I got back from my holiday. In this case I would have. Whatever about the other products usually in Sky Mall, this was different and special and spoke to me. Now that sale will probably never happen as I unfortunately have no plans to go to Denmark any time soon. Even if they had had a website I could buy things from, it would have been a more likely sale.

Apply this thinking to other potential commerce

When we provide crappy, ugly advertisements in our publications, no one wins. The reader is now annoyed and the advertiser gets basically zero traction. Why let your advertisers chase away your readers? You probably need them both.

When we put thought into our advertising, we can create beautiful and more effective advertising. I bring this up with our customers at Woopie to convince them not to put banner ads in their publications. At first, they often think their hands are tied. Then I show them ads like this lovely interactive domain search and this fun developer ad, and their eyes light up as they understand the potential.

(image courtesy of http://www.flickr.com/photos/will-lion/2698179649/)

It’s About Respect

Is it time-consuming to be thoughtful about your advertising? Yes.
Is it easier to just sign up for ad services and not care if the ads are good and just forget about it? Well, yes.

Ultimately you have to do what makes sense for your publication. If your publication is fully reader-funded through subscriptions or memberships, well done. If, like many publications, you rely on advertising to help fund your magazine either partially or fully, why not see what happens when you raise your expectations?

Curating advertisements creates a better, more respectful relationship with both readers and advertisers. Installing set-and-forget advertising never makes sense unless you’re planning a short-lived magazine. If your publication’s ads are relevant and interesting for your audience, you’ll not only improve effectiveness but eventually will be able to charge more for your advertising slots.

Crafthouse#003 - Educating for the Web

irishstu — Mon, 13 May 2013 10:52:00 +0100

Crafthouse#003 - Educating for the Web:

Stewart will be taking part in a panel about education for web designers and developers. Tickets are sold out but some may be released if there’s a cancellation.

Crafthouse revolves around a set of regular meet-ups for those designing for the web. More info on the Crafthouse site

Friday Link Roundup - 10 May 2013

irishstu — Fri, 10 May 2013 16:49:09 +0100

This week we look at advanced layouts, new thinking in news design, and more. Happy reading!

Adobe & National Geographic Content Explore the Future of Responsive Digital Layout

A look at some advanced and prototype browser rendering techniques to help create interesting and exciting layouts, including regions, exclusions and balanced text.

Every page is your homepage

Fascinating piece about the design thinking behind the new look for Reuters, where every page is considered a home page. An interesting move, driven by the logic much web traffic comes via social and search direct to a deep page.

Virgin Australia wants to beam Magazines and Newspapers to your iPad

Virgin are going to allow passengers get free content for their tablets while waiting for their flight in lounges. Looking forward to seeing this in flights as well!

The Media Show on ebooks, digital and self-publishing

Eoin Purcell has a great piece with the editor of the Irish Independent and Brian Fallon from TheJournal.ie

Vigilante Copy Editor

Someone is going around a Brooklyn sculture park correcting grammar and typos on informational placards.

Quote of the week:

Responsive web design isn’t your site working on phones and tablets. It’s about your site working everywhere.

— Scott Kellum (@ScottKellum)

May 9, 2013

Useless Script of the Week:

fartscroll.js

For developers who want their pages to fart when people scroll.

Review: Combining Typefaces by Tim Brown

irishstu — Fri, 10 May 2013 12:11:46 +0100

Book Review: Combining Typefaces by Tim Brown

Combining Typefaces is part of a series of ‘pocket guides’ from Five Simple Steps, and, like most of their publications, it is very well designed, researched and written.

Part reference book and part tutorial, the book helps designers answer the question – “What typefaces should i use?”

It begins with a refresher course on the anatomy of type - if you don’t know your ascenders from your counters then it’s important not to skip through this. A knowledge of this terminology will help later in selecting typefaces that work together.

The next section takes a spin on the ‘jobs to be done’ idea, by asking in what context your type will be used - is it for a user interface? headlines? long passages of text? and also what size and scale the type will be used at. There’s a very strong focus on context - using real text, in the browser, on devices, to assess the best typefaces to use.

Once you’ve an anchor typeface selected, the book goes beyond the typical ways of matching typefaces (using superfamilies, or choosing a time period, or choosing a designer) and looks at the actual visual elements that make typefaces work together - rhythm, shape, proportion, colour and anatomy.

The final part of the book is a critique of a number of sites such as Contents Magazine and Art of the Title and analyses the type choices made, and what makes them work together.

Combining Typefaces is a short read, but makes for an excellent desktop companion for any designer who cares about type. It’s also a fantastic resource, full of links to useful tools and sites. And it’s only £2!

Friday Link Roundup - 3 May 2013

irishstu — Fri, 03 May 2013 10:00:00 +0100

Welcome to our first weekly roundup of interesting links in the world of digital publishing and content. Happy reading!

WYSIWTF

Karen McGrane talks about the separation of content and form and how content management systems need to evolve.

~~TOC Frankfurt Call for Entries~~

Tools of Change Frankfurt are looking for talk proposals on the theme of “experience first” and ‘sessions and panels that will help everyone in our community of publishing and technology professionals improve how customers are experiencing our brands and content, as well as the discovery, delivery and consumption of that content.’

Update: Tools of Change has been shut down.

Free WIFI with your Magazine?

To help promote Office 365 Microsoft included a WIFI router and free access inside a recent issue of Forbes magazine.

The slow shift from print to digital

A recent Deloitte report shows that readers are abandoning print newspapers for the mobile and tablet equivalent, but it’s a slow process.

No Finish Line

A beautifully designed long-form article with some really nice typographic and interactive touches.

Ditching the Shoehorn: Designing Type that Works on ePubs, Mobi and the Web

irishstu — Wed, 01 May 2013 11:33:00 +0100

As a huge fan of Typecast App I was honoured to be asked to submit a guest post on what I’ve learned about designing for the web and ereaders and tablets all at the same time – you can read it here “Ditching the Shoehorn: Designing Type that Works on ePubs, Mobi and the Web“

In the article I discuss the importance of typography to your design, how to cope with the different device capabilities when publishing to multiple platforms, and provide some gotchas that will save you from a /headesk or two!

Hello London & New York!

martharotter — Wed, 02 Jan 2013 01:00:00 +0000

We’re headed to New York and London in February for the following events.

Will you be there? Say hi!

If you’re not going to either event but would like to meet up and see a demo of Woopie or talk about how you or your organization might be able to use Woopie, just let us know!

Tools of Change:
February 12-14 at New York Marriott Marquis

Publishing & Media Expo:
February 26-27 at Earls Court 2
Hall EC2, Stand M10

"We want designers to spend their time doing interesting things and pushing boundaries instead of..."

martharotter — Wed, 05 Dec 2012 21:17:19 +0000

“We want designers to spend their time doing interesting things and pushing boundaries instead of trying to mash their product into a bad format.”

- from Viewport Industries’s interview with us about our work on their beautiful book, Insites:

http://viewportindustries.com/blog/start-up-stories-woopie/

"Good typographic design then is not just a way to communicate the character of your text and..."

irishstu — Tue, 27 Nov 2012 10:38:48 +0000

“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”

- Effects of Typography on Reader Mood and Productivity

Subcompact Publishing

irishstu — Mon, 26 Nov 2012 18:55:00 +0000

Subcompact Publishing:

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

The Big Idea podcast: Episode 1 with Brian Suda

irishstu — Fri, 03 Aug 2012 12:47:27 +0100

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

irishstu — Thu, 19 Jul 2012 15:07:00 +0100

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

irishstu — Thu, 24 May 2012 15:53:00 +0100

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

irishstu — Wed, 23 May 2012 12:52:00 +0100

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

irishstu — Thu, 17 May 2012 14:18:00 +0100

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:

https://gist.github.com/2718782

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

irishstu — Mon, 14 May 2012 11:17:40 +0100

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

irishstu — Wed, 25 Apr 2012 13:25:00 +0100

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

irishstu — Tue, 24 Apr 2012 12:01:00 +0100

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.

Tools of the trade - Typecast lets you design with web fonts in...

irishstu — Fri, 20 Apr 2012 15:50:00 +0100

Tools of the trade - Typecast lets you design with web fonts in the browser.