saila.com

New designs on news

Tue, 29 Jun 2010 01:11:00 -0400

During my career, I’ve been lucky enough to be a part of some pioneering moments in online news: from bring national magazines online in the mid-1990s to introducing reader comments to mainstream news sites in the mid-2000s. This week marks another: msnbc.com has embarked on a revolutionary rethink on how to report news to its audience.

The most conspicuous element of this is a radical overhaul of story page designs. Beyond the aesthetics of the design, which, as is expected, has its detractors, there’s a whole new narrative being told.

As first experimented with last spring, the new story pages are built to allow editors to easily tell a robust story with all the tools at their disposal: text, inline photo slideshows, interactive data visualizations, rich video (which is also viewable on the iPad as HTML5), timelines, votes, and, of course, discussions. Ads have been integrated in a way that allows a sponsor to tell their story in ways that compliment the editorial, as opposed to fight it. In the process, msnbc.com has put an end to using pageviews to artificially boost traffic at the expense of user experience

Behind the scenes, some of the smartest people I know have built pages that follow the best Web technology practices today. Powered by a custom developed MVC platform, the Web pages are rendered with HTML5-ready markup using microformats and object-oriented CSS, and enhanced with highly-refined JavaScript. Despite being optimized for the latest browsers, the pages are usable in Internet Explorer 6, as well.

In the coming days and weeks, as both the editors and audience get comfortable with using the new story pages, you can expect to see some interesting experiments and enhancements being made. Some will fail, others will show new ways to convey the news on this medium.

But this is only part of the story.

The other is how mainstream media is about to revolutionize the way it does business.

Obviously, there’s only so much I can share, but I’ll post an overview of some of these changes over the next weeks.

Saila CSS layouts, revisited

Sat, 12 Jun 2010 12:10:00 -0400

In early 2002, Web standard design was an exception and a number of people were working to change that. My little effort was to create a free CSS-based layout that worked in all browsers including, the browser with the worst support for CSS: Netscape 4.

In a testament to the Web standards themselves, all of those layouts still work, although only two are relevant anymore:

saila_layout-ie6.html: Supports Internet Explorer 6 and above, in addition to all modern browsers (Opera, Gecko-based browsers like Firefox, and Webkit-based browsers like Safari and Chrome).
saila_layout-css2.html: Works in all CSS-2.1–compliant browsers. Essentially, everything but IE6.

Ready for HTML 5

Given the traffic those original layouts still get, I thought it’d be worth updating the CSS2 version of the template. So I did. This new version is a bit more semantic and uses HTML 5 and the latest CSS:

saila_layout-html5.html: Uses semantic HTML 5 markup to support all browsers that support CSS 3 selectors (IE9+, Opera, Gecko-based browsers like Firefox, and Webkit-based browsers like Safari and Chrome). Has an alternate layout for displays narrower than 640 pixels. (There is also custom styles for IE7 and 8 included in the documentation .)

Keep in mind, this layout was first introduced in 2002 to push an agenda that has now become accepted in the mainstream Web design community. When designing CSS layouts, it’s best to let the design inform the CSS and markup, not the other way around.

Safari fine

Tue, 08 Jun 2010 12:38:00 -0400

Yesterday, Apple announced something that will change the way I access the Web. Yes, Safari was updated to include both a poor man’s Awesome Bar and framework for browser add-ons.

As Brian Fling noted, the latter was likely done with one major goal in mind: bring Web apps into the App Store. That this also brings the browser’s feature set inline with the other browsers (Chrome, based on the same rendering engine as Safari, had these features a while ago), was a happy side effect.

Meanwhile, for my own browser usage, the updated address bar resolves the one last, major annoyance I had using Safari. Apple’s browser has become my default for surfing and basic Web development. While I still rely on Firefox’s Firebug to do heavy lifting, Safari’s Inspector is functional enough.

With Firefox 4 still a ways off, and my irrational reluctance to use Chrome, Safari has surprisingly become my reliable window to the Web.

Safari extensions may also solve the remaining minor bothers I found when switching from Firefox. For example, there is one to add shortcuts for jumping to different tabs.

Safari 5 power tip

If you don’t like the justified Reader text in Safari 5: Show Package Contents for Safari.app package contents, go to the Contents folder, then the Resources and edit Reader.html. You'll want to remove the text-align: justify rule from the .page ruleset.

High-res Web browsing

On a completely other note: the Safari mobile browser featured in the new iPhone looks to be the first mainstream browser to render the Web in print-like resolution. Web designers will very quickly need to consider resolution and file size when creating and saving images. Expect SVG to become a lot more commonplace, and the 72dpi image to begin disappearing.

The summer of the city

Tue, 01 Jun 2010 10:53:00 -0400

Toronto has been the most Canadian of cities — striving to be something, and quietly wary about trying too hard.

Knowing that, makes it easier to understand why it’s one of Hollywood’s most filmed cities, and one that rarely plays itself (even when the landmarks are painfully obvious).

But something happened this year. Toronto is shaking off its New York/Chicago/Anyplace, USA costume and reveling in its true self.

First off, Atom Egoyan got picked to direct Chole and proceeded to make his adopted city a defining backdrop to this French remake.

Now but a few months later, comes two summer movies that couldn’t have come from anywhere but “Toron’o.”

The marquee blockbuster is the new Michael Cera movie, Scott Pilgrim vs. the World, directed by Edgar Wright (famed for Shaun of the Dead and/or Spaced). Toronto is so essential to the movie, they actually recreated a mid-nineties Lee’s Palace complete with all the grunge of the era. The action-romance graphic novels detailed the city even as they collected awards, and a lot of people are eager to see their onscreen transition this summer.

But to see the real Toronto, you'll need to seek out This Movie is Broken. Directed by Canada’s greatest rock-and-roll directors, it’s written by a man whose done more to capture Toronto onscreen than almost anyone, and stars the most Toronto of all bands: Broken Social Scene. As a result this is the movie to see to know Toronto. This is the movie that reflects the Toronto I love. And though this movie may be broken, to me, it looks absolutely perfect.

Lessons from working with Web standards, revisited

Thu, 20 May 2010 11:47:00 -0400

Just over four years ago, I wrote about a large-scale Web redesign on a news site. Today, I’m doing a similar thing, for a different site. Both projects relied on Basecamp for project management and bug tracking, and the improvement to that tool have been tremendous. Other things, however, remain surprisingly the same.

Web standards

In 2006 I wrote that building a Web-standards-based site, using the best practices … with a few smart, skilled, and talented people can be done more effectively than most in the industry can imagine. Although people are more aware of the effectiveness of standards-based development, it still is surprising how much more productive it can be.

Revenue compromises

The context for my next lesson has blurred with time: The best intentions, when encountering commercial needs, always result in hideous workarounds, no matter how hard you try. I can say, though, on the current project, the commercial constraints have led to some incredibly innovative ad and design solutions. And what work arounds there are, could not be described as not “hideous.”

Opera

Another exception. Four years ago, I declared that Opera produced one of the most eccentric modern browsers available. However, The company’s latest version (10.5) is far more predictable and reliable and is a rock-solid, X-grade browser.

Debugging tools

Declared in 2006: DOM inspectors are an essential tool for debugging CSS-based sites. Still true. Today, I would also add a Macintosh with at least one virtual machine for IE6, IE7, and IE8/IE9. Or Adobe BrowserLab and Spoon’s Browser Sandbox on a Windows machine.

Advanced CSS features

Minimum and maximum widths can make for a compelling Web site — if the browser supports min-width/max-width, (today I’d replace that with rgba, opacity and CSS3 selectors) If not (I’m looking at you Internet Explorer), the workarounds are messy.

Internet Explorer 6

Sadly, even after much effort from Microsoft during the past half-decade, this is even more true today: Internet Explorer 6 … is the Netscape 4 of this era The productivity lost to providing support for this browser is astounding.

Unfortunately, there is little to suggest news sites will be able to completely drop support anytime soon. This even though IE6 weekday usage has declined to 10 percent, about half of it what it was 12 months ago. The catch lies in the weekend usage which drops by nearly half again, to 6 percent. The realistic conclusion suggests that the most of the remaining visitors are forced to use that browser at work.

The future

The promising thing about the consistency of this experience over the years is that Web standard development is no longer an exception.

Design planning, project management cycles, and the daily workflow have all adapted to this more flexible way of creating Web sites. The result is projects that completed more efficiently and are easier to quickly scale.

The next challenge, though, lies optimizing the performance of these pages. And that involves a whole other set lessons, to be discussed in a future post. In the meantime, look for a more about this year’s project very, very soon.

Magazines reborn

Sat, 15 May 2010 11:20:00 -0400

Magazines introduced me to design. Magazines introduced me to interesting typography. More of my shelves are dedicated to old magazines than they should be.

For the past decade, though, my love for them has waned. I blame the damage caused by industry’s addiction to boom-time ad revenue followed by the overzealous revenue-saving efforts by group publishes.

But in that time there has also been a magazine renaissance of sorts. The generation the grew-up making ’zines before shifting to websites, is now returning to printed, and bound, word.

The Internet, the very thing blamed for the destruction of the printed word is breathing new life into it. It seems, when people say x is the death of y, they really mean x is the death of mass market y. The corollary to that is that as a result of the latter’s death, indie y surges.

Self-published books are growing in acceptance, and the emerging niche magazines carry with them a level of respect and accessibility heretofore unknown. Not only are these magazines showcasing new ideas and creators (as pioneered, in this wave, by McSweeney’s and seen in the new 48 Hours Magazine — itself a hybrid blog/newsweekly/literary magazine) but they are also experimenting with design in bold new ways that are able to scale beyond what was imaginable at the turn of the century (see Goodwill Fernandes).

Even marginally more mainstream publications are experimenting in ways that harkena back to the some early ideas of what a magazine should be. Monocle, despite its occasionally unbearable pretentiousness and its obsession with the lux lifestyle, is a perfect example of this.

While it is sad to see the decline of publications like Newsweek, the future of the medium itself is nothing short of inspirational.

Gaining pay walls and losing page views

Tue, 27 Apr 2010 02:32:00 -0400

In the ongoing struggle to determine how to make money, the for-pay news industry is fixated on three key metrics:

advertising spends;
time spent (e.g., page views, minutes viewed);
and reach (e.g., subscriptions, viewership).

All metrics, when properly sliced-and-diced tell a story about the trends in the business. Not surprisingly, these are of great interest to anyone getting paid by the media business — be they journalists or media buyers. What they don’t do is predict the industry’s future.

They also, by themselves, don’t tell the whole story.

Reading about how newspaper electronic subscriptions have soared by 40 percent, while interesting gossip, is merely another volley in the intercompany media PR war. What the numbers don’t immediately reveal is the actual value of each of those electronic subscribers. In many cases, it is far less than a print subscriber, but they can help attract more valuable advertising dollars to both in the long-term.

Relatedly, it’s not always a disaster when page views drop by 40 percent after a publication adopts a subscription model — if the price is right.

In Variety’s case, that means 1.3 million less pages seen. There are many reasons to explain this, and many represent good business strategy (it could be an attempt to increase time spent, improve user experience, or, more likely drive susbscriptions).

Dipping into the numbers a bit further, it’s easy to see that unique visitors have decreased much less - down about 18 percent to 609,000 from 745,000. Still not a runaway success story, but if even a tenth of those readers are subscribers, that represents nearly US$1.2 million dollars in subscription fees a month.

Those people are more loyal to the publication, and, again, there is a more valuable audience for the advertisers.

Remember business stories about the media can use facts to make a good headline, but that headline often distorts the truth.

The Canadian Charter of Rights and Freedoms

Sat, 17 Apr 2010 00:00:00 -0400

Twenty-eight years ago today, the British government enacted a law that officially ended it’s legal authority over the country of Canada. With the passage of the Canada Act, 1982, however, came another document. The Canadian Charter of Rights and Freedoms guarantees political rights to the country’s citizens, and civil rights to everyone within its borders.

April 17 is also the twenty-fifth anniversary of one of the most influential sections of the Charter: Section 15 with its protection of equality rights. Inspired by the Article 2 of the Universal Declaration of Human Rights, the section also allows those rights to be extended to other groups when warranted. As a result, without the need for amendments, Canada has been able to declare other protected areas, including citizenship, marital status, and, notably, sexual orientation.

Perspective and change

Living in the U.S. has helped me see how profoundly the Charter has shaped the entire definition of what Canada is for the better. From same-sex marriage to its resoundingly multicultural cities, modern Canada is clearly inspired by the ideas defined just three decades ago in the Charter of Rights and Freedoms.

Nearly seven years ago, after seeing how badly the government copy of the Charter was presented online, I believed Web standards could help bring some dignity to the document. Browsers, however, were not quite ready to support the complex counter rules I needed to define the legal document.

In subsequent years, there’s been significant improvements in browsers and a new drive to bring openness to government. The latest example of this is Canada’s Open Parliament. But still, the Charter has languished online.

On its twenty-eighth birthday, I want to change this.

Openness through availability

The Charter of Rights and Freedoms is now available, in both French and English, and is designed specifically to be more accessible and more discoverable, while evoking the feel of the original document.

This version is stripped of bureaucratic uniformity and free from proprietary plug-ins. There are no commercial interests involved and it is built on open standards.

This one is designed to be read and shared openly by anyone so that everyone can understand and appreciate the value of Canada’s Charter of Rights and Freedoms.

Where to find the Charter

In English: http://charter.ofrightsandfreedoms.ca/
In French: http://chartes.desdroitsetlibertes.ca/
Short URL: http://bit.ly/charterofrights

To get to the other side

Wed, 07 Apr 2010 09:50:00 -0400

Since 2008, I’ve waited at the same 3-way, T intersection almost single morning and evening. During the cumulative hours I’ve spent waiting there, I’ve convinced myself that the key to the world problems lies in changing one simple assumption: Low-density yet high-impact items are more efficient than high-density, low-impact ones.

As an example: For three minutes I stand with dozens of others people waiting to enter a bus station to take shuttles or buses back into the city. Meanwhile, 50 or more single-occupant cars drive by. The only reason the light we wait at exists is to let pedestrians across the street.

When the light does change, pedestrians have less than 20 seconds to safely cross the five-lane road. I typically cross two of those in about 8 seconds before the warning light begins flashing.

Again, the only purpose for that light is to allow pedestrians to cross the street to get on (or off) a bus.

On bad days, when I miss the bus while waiting at the light, I think I should just give in a drive. (The prime reason I haven’t is that I would first need to buy a car.)

But I’m left wondering: why is the time to cross so short? If it’s to improve traffic flow, is it not the wrong kind of traffic? If it’s the right kind why not at least build a pedestrian bridge.

The only conclusion I’m left with is that planners working in medium-density cities suffer from a kind of confirmation bias that is emblematic of the planning biases found at all levels of when it comes to the long-term welfare of society.

The promise of the iPad

Wed, 31 Mar 2010 08:03:00 -0400

That the iPad arrives on the Christian calendar’s Easter weekend has got to be more than a coincidence — after all, its progenitor was called the Jesus phone.

Throughout the media industry, designers have been slaving away at prototype applications designed to serve their content in new ways in hopes of uncovering riches. Many of the prototypes (including a few concepts produced where I work) showcase innovative ways to interact with a touch-based computer the size of a magazine. It’s also spurred many Web developers to dive into HTML 5, thanks largely to the iPad’s lack of support for Flash-based video.

But for me, despite the foreboding excitement found in discovering the first new UI metaphors since the decades old WIMP paradigm, the iPad offers the promise of design worth appreciating.

For nearly a decade-and-a-half, designers have struggled to mesh centuries of design practices into a medium, that, by its very nature rejected them. On the Web, there’s no such thing as a predictable colour palette. Typesetters practicing 300 years ago often had more control over more typefaces than today’s Web designers do. In fact, the idea of a fixed page size became so unrealistic, those who tried to enforce it on the Web were openly mocked.

With the iPad, however, comes the promise of a fixed canvas, with finer typography controls, and ability to play with a brilliant range of colours. Those features, especially the fixed page, immediately return me to my days in the magazine industry, where I first learned to appreciate the potential offered by design restrictions.

So it’s no surprise that many of the anticipated new apps will come from the world of print media (Niemen Journalism Lab reviews a pre-release sampling), with magazines leading the way. The iPad is seen to not only offer the best promise for those publications to recoup operating expenses, but they also allow print designers to experiment in ways they’ve been unable to for nearly 20 years.

With all this promise, there is one thought that gnaws at me: Apple is offering designers a devil’s deal. We can work within this beautiful sandbox and produce castles that touch the sky, but those on the perimeter will never be able to see the scaffolding holding it all up. By agreeing to a closed system, we prevent the next generation from copying our work. View source will be dead, and with it innovation will soon slow into a comfortable status quo.

For all the chaos and frustration of a multi-browser Web, the ability to learn and build upon each other’s work has created an entire industry, and shaped the views of multiple generations.

As great as the iPad may be, it can never accomplish that.

Breaking news (literally)

Wed, 24 Mar 2010 08:17:00 -0400

Twitter limits you to 140 characters, so one of my posts today didn’t quite tell the whole picture:

Breaking news (literally): Announcement emails become spam by arriving well after friends on Twitter highlight the product's best features

That was inspired by an email I received from Pictory announcing their new issue. It arrived in my inbox at the exact time newsletter marketers said it should: around lunch, on a Wednesday. The perfect moment to grab my attention.

Except, I’d already heard about it from my friends who were pointing me directly to the features they liked in it. Their recommendation meant I went to look at Pictory an hour so before the publication asked me to.

Surprisingly, this was the first time I’d had an emotional connection to the intellectual question facing news organizations today: how do you be the source for breaking news when you audience’s friends have already told them the story?

Expect to see a lot more of my thoughts about this in the coming months. In the meantime, the company where I work has a few ideas — one of them is the still embryonic breakingnews.com. Take a look. Follow its feed. See what you think.

Haven’t heard that before

Thu, 18 Mar 2010 01:30:00 -0400

So, as HTML 5 begins to spread beyond the academic discussion phase, and into the fringes of the Web design community, an all too typical culture clash has once again emerged. The perfectionists and pragmatists are publicly at it again.

But, there are a few things you can always take for granted in the world of Web design:

there will always be that one browser that will make your dream design a nightmare to execute;
the cache will never work in your favour when you need it to;
if you could change that one piece of markup, everything would fall into place, but, of course, you can’t;
the pragmatists always find a way around the puritans.

A Safari adventure

Thu, 11 Mar 2010 09:37:00 -0500

With the exception of a few years when Internet Explorer was actually the more standard-compliant browser, I’ve always surfed the Web with a Netscape-originated browser. I supported Mozilla when it was still struggling to make something even approaching a usable browser. My name was one of thousands to be found in a New York Times ad announcing Firefox’s debut. I have friends that work with Mozilla.

But the Macintosh version of Firefox has grown more unstable and a browser’s speed and reliability are critical in my work. So, a week ago I decided to switch browsers from Firefox to Safari.

After adjusting to the subtle font rendering differences, here are my thoughts.

Definitely missing

Using the Awesome Bar to find visited pages
Firebug
Shortcut key combination for jumping to different tabs†
Lack of visible XML rendering
Keywords for bookmarks
View source rendering without markup highlighting
Accessing bookmarks via the Awesome Bar
No undo close of tab feature*
Full screen*
Firebug’s various plugins
Searching via the Awesome Bar
Multiple search engine support*
Re-opening the previous last session when the browser starts*
Auto-closing the download window*
Have I mentioned the Awesome Bar?

* Glims adds many these features I miss and can be trimmed down to maintain the minimalism of Safari’s UI.

† Safari 5 enabled browser add-ons, and one enables shortcuts for tabs.

Beginning to accept

Jumping to the search (⌘ + Option + F)
View source (for more than a decade ⌘ + U, not ⌘ + Alt + U)

Truly loving

Launching speed
Fast page rendering
Lightweight feel of the application
RSS rendering
Native Cocoa rending (enabling quick dictionary lookups)
⌘ + Option + E to empty cache

In general, Safari feels delicate, but faster.

Unfortunately, its UI conventions, in particular tab switching and searching via the location bar, seem stuck in past decade. In Safari, Apple agains shows it values visual æsthetics over power functionality. As a result, the default page looks stunning but quickly becomes a distraction. The bookmark/history navigation showcases pages as if they were album covers, but the iTunes metaphor breaks when trying to group items with tags.

In all likelihood, I’ll stick with Safari for now because it is fast and stable.

Firefox, though, will never be far from mind, and with each new release, I’ll give the Web’s truly open-source browser another try.

For those not wanting to retrain their muscle memory, I was reminded that you can remap the keyboard shortcuts pretty easily in the Mac. Has helped a lot, although I still miss the Awesome Bar.

Schrödinger’s press

Wed, 03 Mar 2010 08:20:00 -0500

Rarely do I post things this raw, but it seemed appropriate. Also note, the publication date is a few weeks after it was written for reasons that only makes sense to the calendar.

Working in the media during revolutionary times is an interesting experience. You’re at once aware of the changing landscape, and because of the need to report on it from a stable perspective, you’re unable to really participate.

Objective journalism, the unbreakable commandment for the resectable media outlets most of the 20th century (there was that blip in the late 1960s and 1970s) thrived in response from its ability to provide and omniscient view of the world.

The democratization of the media (this time, the distribution, not the institution) has had profound effects on journalisms intended audience. Atari and the first Mac acted liked long-gestating virus that only began to mature in the past decade with exposure to other infected people via the Internet.

Those early devices illustrated how easy is to manipulate the media. Playing Pong shifted pixels on the screen, thereby suggesting how easy it was to control and manipulate the images coming from a previously unquestionable one-way stream. And desktop publishing sudden amplified the power, and lowered the cost, of pamphleteering (itself the Lucy of modern journalism).

None of the shockwaves from those early experiments were felt in the foundations of modern institutions until this past decade. What began with the abject failure of centralized media to provide the citizenry what it expected (in part, an understanding of why foreigners attacked the continental US for the first time in its history) ended with abject failure of the the centralized media’s patrons (essentially blue chip companies). Now the source of those vibrations are much better understood, but the stable platform to observe the effects has disappeared.

What remains is carefully honed and trained professionals responding within the paradigms they understand are experts in. Television sees a future in video. Print sees a future in paid subscriptions to text-based products. Internet sees the promise of mass distribution. The truth may be closer to something only a quantum physicist could love: by defining it, it ceases to be.

Let’s go Canada!

Sun, 28 Feb 2010 09:16:00 -0500

Not sure I really understood what being Canadian was until today.

For more than three decades, I’ve been incredibly proud of my home country; it’s humanitarianism, it’s politics, and it’s landscape have all been something that have shaped my entire worldview. But I’ve never been blindly patriotic.

I’ve never before been inspired to wear red and white to a sporting event. I’ve never spontaneously sung the national anthem in a bar. And I’ve never rung a cowbell in victory until now. Most relevantly, I’ve never really been a hockey fan.

Living in Seattle (an American city without an NHL team) and watching Canada play the United States in a game invited by Canadians, on Canadian soil was, as a result, the most surreal, and patriotic moment of my life.

Few at the bar knew the rules of game. Cheers happened too late and were often in response to our chants of “Let’s go Canada.” The game though was understood to be a great one. And everyone appreciated the quality of play.

But unlike Canada, the streets were quiet and our hoarse cheers were greeted with the distance normally reserved for the crazy ones.

Which, for once, may have been the appropriate response to these Canadians in Seattle.