Irishstu.com stublog

Found and shared

Idea Issue 1 – Design Notes

8 comments

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!