The Digital Distraction
Jeremy Leslie

28 Mar 2017

The term magazine was first applied to a printed periodical in 1731, when the Gentleman’s Magazine was produced in Clerkenwell, London, a few hundred metres from where I’m writing this. Like other periodicals of the time, it owed its existence to the new printing technology.

The Gentleman's Magazine
For the 200 years since, technological change has continued to shape publishing. Better inks, papers, typography and ever- improving print reproduction, first bringing line art images, then halftones, spot colour, and four-colour lithography, enhance the print experience.

When in the 1990s the means of production ended up in a single desktop box with the Apple computer, the search for a publishing system that could work on screen began. Initial experiments with hyperlinks and hypercard ran alongside the very first web pages. There wasn’t yet a name for the discipline but these early experiments inevitably attracted publishers who could see the link between print and screen.

My first introduction to the world wide web came at this time via the tiny Apple Mac Plus computer lent to me by Tony Elliott, owner of Time Out magazine where I was art director (around the same time he also gave me a copy of the launch issue of Wired magazine). There was a new world here, but what was it?

Blender Magazine
An attempt at an answer arrived in the form of US music magazine Blender. Launched in 1994, Blender combined a traditional editorial approach with new technology; it was a CD-rom mounted on a magazine-sized piece of card for distribution on the newsstand. It used Macromind Director, an early digital animation program, and had a crazy design based on the then popular Kai’s Power Tools Photoshop plug-in and a navigation system to match. It looked pretty hideous, to be frank, but the idea, a magazine that worked only on the screen, appealed to me.

While working for various magazines I had developed an interested in experimental publishing, in particular magazines that challenged what a magazine might be. From sixties art surprise box Aspen to its nineties commercial descendent Visionaire and on to today’s Ordinary and Voortuin, I am fascinated by how the apparent straitjacket of ‘magazine’ can be stretched. Jumping off the page and onto the screen appealed to me on this simple level: what might a digital magazine consist of?

Blender failed to find an audience, reverting to a regular print format after 15 issues. Likes others that experimented with CD-rom publishing, Blender was limited by the computing power of the time and by the resulting either-or decision making processes it was able to offer. It was slow, unintuitive and, importantly, just not as easy to use a print magazine. Video and audio stuttered. In the end it was a gimmick, and one that is unviewable today – does your current computer even have a CD-drive? But the *idea* appealed — how could you transfer a magazine sensibility to the screen?

A generation later, similar hopes and promises surrounded the launch of Apple’s iPad. This seemed to offer to publishers the promise of paid digital content.

Many magazine publishers had been stung by the late 90s dot com bubble, a time when a magazine and newspapers mistakenly applied their print model (collect as many readers as possible to appeal to advertisers) to the new online sphere. But this proved to be huge mistake; vast sums were spent on consultants and designers with almost zero income. The iPad was set to change this, since apps were paid-for items, like a print magazine.

My pre-order iPad arrived on the first day it was available in the UK. It was thrilling, a beautiful metal and glass object unlike anything I’d seen before. The pre-retina colours were vivid and bright, and the first magazine app, US Wired, looked amazing on the glossy screen. Animation, video and audio brought to life designs based on the much-admired print edition of Wired.

First Generation iPad

Wired’s creative director Scott Dadich worked closely with Apple and software developer Adobe to build the production framework for the app. As supplier of the industry-standard layout program InDesign, Adobe were ideally placed to create a new digital production tool and working with Dadich they created Adobe Digital Publishing System, a plug-in for InDesign that theoretically allowed print designers to transfer their designs into the digital realm in the form of an iPad app.

I worked with the beta version of DPS on a project for men’s magazine Port. It was at once liberating and depressing. It was soon clear that it was a developers project rather than a designers project, and while the hook in to InDesign was a necessity that has been improved on since by other app systems, the structural limitations built in from the start by the Wired team left some huge navigational issues unresolved. That’s not to belittle their contribution, it was necessary experimentation. But ultimately it was to prove to be a huge distraction.

Most frustrating to me was the need to separate content and controls. What I love about magazines is the seamless melding of content and design so that the two forms of visual engagement – looking and reading – are one. DPS, though, required a third layer of visual interaction, the button/control. I tried hard to hide the clumsy presences of button and scroll information but it just wasn’t possible.

Port Magazine App
For the second issue of the Port app I worked with a brilliant coder, Tim Moore, to write our own base code that allowed design and navigation to be one. This was far harder in some respects, but the results were more satisfying. Simple words could be buttons, actions relied on intuition rather than highlight.

In the end, though, the iPad app has struggled to find a significant paying audience. The initial hopes of publishers were dashed by the complexities of production (the assumption existing teams could fit app creation into already packed workflows was wrong) and, vitally, a fundamental lack on interest from the public.

There are exceptions – I designed the Frieze magazine app, and their global audience benefit from receiving the magazine digitally long ahead of the print edition and in a form they can easily travel with. The Economist have benefitted from the similar requirements of its audience.

Frieze Magazine App
But essentially, the iPad magazine app has settled into a niche role. It has struggled for the same reasons that the original dot com bubble burst. There simply wasn’t money in the medium. Apple insisted on taking 30% of all sales, as they do with all apps, the app store was a hopeless space to search for magazine apps, and their screening process wasn’t suited to the monthly turnaround of magazines.

And just like the CD-rom magazines, it’s already impossible to view the early iPad apps due to multiple software updates rendering earlier files unusable. Whatever happens to the magazine app in the near future, that first Wired app deserves to be archived and accessible. For now it is not.

There remain plenty of magazines working with other suppliers to make simpler, HTML-based apps, of which PugPig and Mag+ are the most successful; but it’s a niche market in which the basic PDF app is the mainstay –  PDF versions of the print magazine sold in app format. Efficient, but dull.

NYTimes Snowfall Website
Advances in website design provide have improved the online experience outside the app: better font rendition with web fonts, combined with experimental parallax storytelling sites such as NYTimes Snowfall, successfully mix text, audio, image and video in a manner unimaginable til recently. Add the promise of virtual reality, another technology already being explored by the New York Times, and the iPad app drops further in relevance.

The speed of technological development also means that the smartphone is a more realistic environment than the tablet for digital content. The challenge here is the size of the screen; a consensus has developed round design for the small screen in terms of functionality (something that never happened for the tablet app). The challenge now for the designer is how to make your mobile site reflect your brand and have a different tone to your competitor. How do you add character and definition in such a small space without jeopardising its readability and function?

Apartamento Magazine App
One interesting current phone app is Apartamento’s, with its content that times out after five days. The design does a good job of reflecting the print edition, but it is this content strategy that makes it stand out, and proves there is still scope for experiment in the digital space.

Despite such experiments, the digital magazine continues to fail as a popular medium. Print magazines continue to face huge problems in terms of their business model, but they remain creatively strong.

If someone had invented it today, the print magazine would be hailed as an advance on all digital magazine projects to date because of its ease of use (identity, navigation, extent, placement).

While the publishing industry has been trying to squeeze its traditional format into the digital space, elsewhere digital content has been thriving. Perhaps it’s all a matter of words: just as the 18th century publishers of The Gentleman’s Magazine adopted a French word meaning ‘storehouse’ for the title of their publication, maybe we need a new name for digital magazines.

Latest Resources

✂ Copy and 📋 Paste Emoji 👍
getemoji.com

No apps required.

Computer Virus Catalog
computerviruscatalog.com

They steal our files, corrupt our hard drives and destroy our lives. We scan. We block. Do everything we can to prevent infection. Computer viruses. We hate ’em. Nevertheless, we remain fascinated by their evil plots. This fascination led to a new kind of art collection – Computer Virus Catalog. The worst viruses in computer history interpreted by artists around the world.

Founded & curated by Bas van de Poel

Scrolling on the web: A primer
blogs.windows.com

Scrolling is one of the oldest interactions on the web. Long before we had pull-to-refresh or infinite-loading lists, the humble scrollbar solved the web’s original scaling problem: how can we interact with content that’s stretched beyond the available viewport?

Resilient web design
resilientwebdesign.com

Resilient Web Design, you might think that this is a handbook for designing robust websites. This is not a handbook. It’s more like a history book.

A Handmade Web
luckysoap.com

‘handmade web’ to refer to web pages coded by hand rather than by software…

Eloquent JavaScript
eloquentjavascript.net

This is a book about JavaScript, programming, and the wonders of the digital.

The Future of Browser History
medium.freecodecamp.com

About browsers history, and how we tend to browse nowadays.

Swiss in CSS
swissincss.com

Swiss in CSS is a homage to the International Typographic Style and the designers that pioneered the ideas behind the influential design movement.

Automatically art-directed responsive images
cloudinary.com

by Eric Portis

WHAT IS CODE?
bloomberg.com

Businessweek, June 11, 2015
by Paul Ford

Interview with Tom Krcha, Adobe XD
subtraction.com

Adobe released the first public preview of what the company is now calling Adobe XD, its their major new UX/UI design and prototyping tool.

Typography for User Interfaces
viljamis.com

A recap of how far type in UI has come, where it’s going (VR) and what to look for when choosing a workhorse for your next interface. (via Atomic.io)

Typeface As Programme: Glossary
typotheque.com

A glossary of tools and technologies mentioned in Typeface As Programme.
by Jürg Lehni

Declarative Design Tools
jon.gold

Our brains and computers are fast; our hands, mice and keyboards are slow.

Roger That: Emoji Overdrive
ia.net

A font that turns the 2,000 most used English words into emoji.

Layout in Flipboard
engineering.flipboard.com

Flipboard Pages, a layout engine that turns web page articles into magazine pages for the iPad.

Use Your Interface
uyi.io

UYI, is a place documenting the uprising of motion based interface patterns.

Google Fonts
fonts.google.com

Google’s new site for Web fonts.

 

 

New Yorker cover comes to life
itsnicethat.com

Malika Favre’s illustration for this week’s New Yorker magazine has been brought to life by French animator Mathieu Maillefer.

Natural User Interface

In computing, a Natural User Interface (NUI) is the common parlance used by designers and developers of human-machine interfaces to refer to a user interface that is effectively invisible, and remains invisible as the user continuously learns increasingly complex interactions. The word natural is used because most computer interfaces use artificial control devices whose operation has to be learned.

Graphical user interface

In computing, a graphical user interface (GUI, sometimes pronounced “gooey” or “gee-you-eye”) is a type of interface that allows users to interact with electronic devices through graphical icons and visual indicators such as secondary notation, as opposed to text-based interfaces, typed command labels or text navigation. GUIs were introduced in reaction to the perceived steep learning curve of command-line interfaces (CLIs), which require commands to be typed on the keyboard.

Parallax scrolling

Parallax scrolling is a special scrolling technique in computer graphics, wherein background images move by the camera slower than foreground images, creating an illusion of depth in a 2D video game and adding to the immersion.
Web designers began incorporating parallax scrolling in 2011, using HTML5 and CSS3. Websites with parallax backgrounds are becoming an increasingly popular strategy, as advocates argue it is a simple way to embrace the fluidity of the Web.

WebGL

A Web Graphics Library (WebGL) is a JavaScript API for rendering interactive 3D computer graphics and 2D graphics within any compatible web browser without the use of plug-ins. WebGL is integrated completely into all the web standards of the browser allowing GPU accelerated usage of physics and image processing and effects as part of the web page canvas. WebGL elements can be mixed with other HTML elements and composited with other parts of the page or page background.

Twitterbot

A Twitterbot is a program used to produce automated posts on the Twitter microblogging service, or to automatically follow Twitter users. Twitterbots come in various forms. For example, many serve as spam, enticing clicks on promotional links. Others post @replies or automatically “retweet” in response to tweets that include a certain word or phrase. These automatic tweets are often seen as fun or silly. Some Twitter users even program Twitterbots to assist themselves with scheduling or reminders.

UEM

User experience moment.

Usability

Usability refers to how easy it is for a visitor to your site to use your site in its intended manner. In other words, are navigation, content, images, and any interactive elements easy to use, functioning the way they were intended, and that your intended target visitor will not need any special training in order to use your site.

Permalink

Short for “permanent link.” Generally used only on blogs, a permalink is a link that is the permanent web address of a given blog post. Since most blogs have constantly-changing content, the permalink offers a way for readers to bookmark or link to specific posts even after those posts have moved off the home page or primary category page.

Pageview

A pageview is a request for an entire web page document from a server by a visitor’s browser. In other words, for each page view your site had, someone (or a search engine spider) looked at that page.

Meta data

Meta data is the data contained in the header that offers information about the web page that a visitor is currently on. The information contained in the meta data isn’t viewable on the web page (except in the source code). Meta data is contained within meta tags.

Hypertext

Hypertext is any computer-based text that includes hyperlinks. Hypertext can also include presentation devices like tables or images, in addition to plain text and links.

Hyperlink

A hyperlink is a link from one web page to another, either on the same site or another one. Generally these are text or images, and are highlighted in some way (text is often underlined or put in a different color or font weight). The inclusion of hyperlinks are the “hyper” part of “hypertext.”

Hit

Contrary to popular belief, a hit does not represent a single visitor to a website. A hit is actually a request for a single file from your web server. This means one page can actually generate multiple hits, as each page generally has more than one file (an html or other base file, a css file, multiple images, etc.) and each one is requested from the server whenever the page is loaded. Some marketing people like to quote hits to unknowing consumers as the number makes their site sound like it’s getting a whole lot more traffic than it actually is.

Focal Point

The focal point of a web site is the spot on a web page that they eye is naturally drawn to. This could be an image, a banner, text, Flash content, or just about anything else. You want to make sure that whatever is acting as your focal point is the most important part of your site.

Fixed Width Layout

A fixed width layout has a set width (generally defined in pixels) set by the designer. The width stays the same regardless of screen resolution, monitor size, or browser window size. It allows for minute adjustments to be made to a design that will stay consistent across browsers. Designers have more control over exactly how a site will appear across platforms with this type of layout.

Elastic Layout

An elastic layout is one that uses percentages and ems for widths paired with a max-width style to allow the site layout to stretch when font sizes are changed. It’s ability to flex to accommodate the browser width and reader’s font preferences are where it gets its name.

Cascading Style Sheets

Also referred to simply as CSS, Cascading Style Sheets are used to define the look and feel of a web site outside of the actual HTML file(s) of the site. In recent years, CSS has replaced tables and other HTML-based methods for formatting and laying out websites. The benefits to using CSS are many, but some of the most important are the simplification of a site’s HTML files (which can actually increase search engine rankings) and the ability to completely change the style of a site by changing just one file, without having to make changes to content.

Cache/chaching

Cached files are those that are saved or copied (downloaded) by a web browser so that the next time that user visits the site, the page loads faster.

Bounce rate

A website’s bounce rate is the percentage of people who leave the site from the same page they entered the site, without clicking through to any other pages. This can be a good indicator of how good a website’s navigation is, as well as an indicator of the quality of the site’s content (a very high bounce rate doesn’t bode well for either of those things).

AJAX

Stands for Asynchronous JavaScript and XML. AJAX is typically used for creating dynamic web applications and allows for asynchronous data retrieval without having to reload the page a visitor is on. The JavaScript on a given page handles most of the basic functions of the application, making it perform more like a desktop program instead of a web-based one.