saila.com: Web Design Feed

A picture’s worth

Wed, 08 Sep 2010 01:52:00 -0400

There’s an itch that the Internet and its all-seeing search engines hasn’t yet scratched: visual search.

Despite all the improvements to the UI (see Bing and Google’s recent efforts) and technology (including the amazing TinEye), it remains stubbornly difficult to find digital copies of the images one see’s so clearly in the mind’s eye.

For example, I have this clear memory of a scene in Return of the Jedi — an X-wing fighter crashing and exploding into the shields of the Death Star in the movie’s final battle. Subsequent viewings, however, never showed that particular scene. Fruitless Internet searches years later left me unsure whether it was the search engines, or my memory, failing. (Upon the re-release of the “original” edition, it was clearly a false memory explaining what could have happened.)

A few days ago, a similar situation resurfaced, despite the many years of search technology improvement. In an episode of Mad Men, two characters are brainstorming an ad for Samonsite luggage. A mouse makes a random appearance, and an elephant is constantly mentioned in conversation. Instantly, I recognized the reference to a classic suitcase ad showing an elephant balancing on a suitcase after being scared by a mouse.

The visual, along with the design of the ad, was clearly discernible in my mind.

Last night, I decided to look for it online. Again, nothing. Instead, all I found were references to other people trying to find the ad. They all recalled the same images I did, and none had managed to find a copy of the ad either. A massive ad campaign of decades passed had, for all intents and purposes, morphed into a figment of our collective consciousness.

There is something poetic in the thought that these iconic images become, in essence, legendary in a time when almost everything else is discoverable.

But, really, I still would like to see that ad again.

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.

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.

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.

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.

Touching the future

Wed, 27 Jan 2010 10:59:00 -0500

Thirteen years ago, the future imagined by Apple was a tablet computer called the Knowledge Navigator. Today, this vision became real with the iPad. And while the iPad lacks many of the features Apple first imagined, it represents an experience literally inconceivable in 1987.

After all, the metaphors used to describe future technology are often grounded in our current experiences.

The Knowledge Navigator, as an example, was positioned as a loyal, yet distant, personal secretary. In the mid-1980s, this suggested a level of prestige unreachable by most at the time. Using your fingers to manipulate the device would have seemed unnatural, almost offensive.

These shifting metaphors, though, often end up hiding the reality of the future.

Videophones, like those depicted by Stanley Kubrick in 2001, never have really arrived. Yet, personal video communication has been available throughout the world for five years thanks to services like Skype.

And although we will never likely be able to teleport and travel faster than light, we do have a permanent colony in space. We have universal translators and talking computers. We’ll soon have regular commercial flights to space.

The last generation’s future has arrived and we’re beginning to recognize how it manifested itself. The next trick will be identifying the current generation’s future now.

Don Watt, brander of No Name

Sat, 02 Jan 2010 09:59:00 -0500

One of my earliest memories of design involves wandering aisles filled with uniformly yellow packaging of different shapes and sizes. Each item was labelled with the same, tightly kerned, black typeface and was always set in lowercase.

This carefully designed unbranded branding strategy was conceived of by a man named Don Watt. The “no name” products for Loblaw’s grocery stores transformed the retail industry (he went on to develop brand design strategies for Walmart and also designed the Home Depot logo and store experience). Coincidentally, considering the imageless design of the “no name” products, Watt was also one of the first designers to use photo-symbolism on packaging. His work there became iconic, as well: a red mug sitting in [a pile of coffee] beans.

In his career, he helped design the Canadian flag preferred by the nation’s first Nobel Peace Prize winner. He also did design work for another Canadian legend: the Avro Arrow.

Don Watt died, unexpectedly, last week at the age of 73. His minimal, acutely Canadian, “no name” aesthetic — and its use of Helvetica — will nevertheless endure as a lasting influence on my design sensibility.

New threads for stories

Wed, 29 Apr 2009 10:40:00 -0400

Nine weeks ago, msnbc.com began work on a new story page design concept to improve the ways news events are covered.

The resulting design, which launched today, was one of seven explored by the Creative Development team during the past year, and it pushes the limits of what a site with more than 40 million monthly visitors can do. The pages also test the limits of what modern browsers can do as the designs rely heavily on client-side processing to affect the appearance of the page itself.

The primary goal is to showcase what msnbc.com has always done best: rich, online journalism. As a result, the design integrates interactives, photo slide shows, and videos directly into the page. For too long, mainstream online journalism has often come from the print mentality: text, supported by some pictures.

The new msnbc.com design concept aims to thread these elements together into one cohesive story by featuring interactive journalism in ways not previously possible. In fact, just linking to any of the media elements allows the page to change its core layout. One view might showcase the words of Pulitzer-prize winning investigative reporter Bill Dedman, another view highlights the richly visualized Moody’s data produced by msnbc.com’s team of renegade cybergeeks.

These designs also push the boundaries of what the Web industry typically considers “page views.” Though better than the “hit”, those in the industry have long known pages views can be inflated with unnecessary clicks while genuine content updates go unmeasured. The solution is capturing the intent of what a page view is: a substantive change of the majority of the content within a user agent’s viewable space. Working with audience measurement firms, msnbc.com designed the template to balance the needs of the business with the user experience desires of its audience.

No longer do visitors need to load an entire page just to read a few hundred more words; the page now adds it to end of the text you are already reading. Want to view a slideshow? No pop-up windows need to be unblocked; you simply view it on page you already have loaded.

The effort behind the scenes to enable all this is substantial. A number of very smart people worked many long hours to develop these templates. An entirely new JavaScript framework (dubbed Quilt) was built to allow the page to “know” what content and data was visible to the viewer. The video player was rebuilt to connect more intimately with the content on the page. The interactive producers built a suite of new tools to tell their stories more effectively in these pages. The design team continues to experiment with end-user experience.

Most importantly, though, millions of people reading the news will get a more comprehensive view of the stories of the day. This new journalism platform launched using msnbc.com’s in-depth coverage economic in The Elkhart Project as a base. Over the coming months, expect the design to evolve and spread across the site. In the meantime, your thoughts, as always, are welcomed.

BarCamp Seattle: The Father’s Day Edition

Sat, 14 Jun 2008 03:48:00 -0400

Sunday morning and another Seattle bus adventure means arriving once again late for BarCamp Seattle, thankfully, the sessions also got underway a bit later. Today begins (for me) with a discussion on social media design where I promote Pownce’s friend/fan and group pattern (potentially to be added to the new social media repository announced in the session) and will end with, apparently, Diet Coke and Mentos.

Yesterday’s session were a solid mix, starting with more formal presentations and easing into casual discussion outside in the sun by the end of the day. Seattle was finally starting to get the BarCamp spirit. In fact the tipping point seemed to be a session on Starbuck vs. Samwise — it was a relaxed, loose conversation that was tangentially about the attention economy. Other sessions on the economy, mobile “microformats” and accessibility provoked some good discussions that were almost all cut short by the time limit of 30 minutes. This was most notable during a discussion on standards and search; one statement about using only one anchored link per page could have spawned an entire 60 minutes worth of argument.

Today, it’s about 45 minutes, which seems to be far more comfortable a timeslot, as evidenced by the social media talk and a demo of drawball.com. People seem to be a lot more comfortable and ready to participate…

OH: “What’s next!?”

Answer: How to be a superhero, by Tantek Çelik.

First impressions of BarCamp Seattle

Sat, 14 Jun 2008 03:26:00 -0400

Probably a result of the venue, what with its actual class rooms filled with podiums, projectors, and microphones, the formality of this Seattle BarCamp is far more implicit than ever it was at the Toronto BarCamps (except for the one held, coincidentally, at the MSN Canada offices). Lots of hallway buzz, but the sessions have been sadly distracted by the jackhammering going on outside the Adobe building.

That being said, the level of discourse is excellent and the snacks are great (no Starbucks coffee [but no keg of beer that might get stolen]). In fact, the attendees are actively engaged in each of the half-hour sessions I’ve been in (there are three rooms and a packed grid).

Best tip so far: Judo can help Web standards.
Best moments so far: Seeing all the organizers wandering around in housecoats.
Weirdest moment so far: Seeing all the organizers wandering around in housecoats.

Heading to BarCamp Seattle

Sat, 14 Jun 2008 02:29:00 -0400

This is being written on a bus (the 30) as I tardily trek to BarCamp Seattle — only the first of many differences between my experiences with the BarCamp scene in Toronto (although, coincidentally, on my way to the first Toronto BarCamp, I spotted some infamous graffiti on the outside of a Starbucks franchise).

Toronto held its first BarCamp in November 2005 and the community that’s grown around it has helped energize the tech and Web development community there (and potentially created a baby boom).

This weekend, marks my ~~third~~ fourth BarCamp, but the first in a city (my new city) where the tech community is so dominant in mainstream life. Although Seattle is four-and-a-half times smaller than Toronto, this weekend's BarCamp Seattle includes some of the Web/tech community celebrities and is being held in Adobe Seattle campus (which is right beside Google and Getty and across the channel from Newsvine [Microsoft is a bit further away]).

All of this is leading to some high expectations for the proceedings ahead, and I hope, as the weekend wears on the chronicle some of them here.

Web Directions North ‘08 kicks off

Wed, 30 Jan 2008 03:03:00 -0500

Coming to this year’s Web Directions North provided me with a very memorable first: entering Canada for the first time as a U.S. resident. (Explaining to the border guard that we actually did live in Seattle and weren’t actually re-entering the country was…interesting). Thankfully, once we made it across I was happily re-united with my former co-workers at The Globe for an amazingly cooked meal at toothpastery’s house.

Day one started with more reunions — including a few Torontonians, some of the Web Directions 2007 crowd, a co-worker — and a very enjoyable keynote by Zeldman (he spent a good hour offering an eye witness account how The WaSP and Web standards actually came in to being).

Next on my list was Derek’s talk on real world accessibility and how it can affect usability (ask him about king-size bed’s in London), followed by Kimberly Elam’s in-depth session that I am currently in: five essential tools for Web typography.

I’m not sure if I’ll be blogging too much during this conference, but you can follow my Twitter-stream or the conference’s own pseudo-tumble log for a better sense of what is happening.

By the way, if you are attending, and see me, please come by and say hey.

The year that was

Mon, 31 Dec 2007 10:23:00 -0500

Draft

After missing 2006, the year in review returns for 2007. These are the trends that most seemed to effect my little part of the Interweb during the past 12 months.

Social Media

Sure, the social networks have proliferated over the years, but it wasn't until May 24 of this year that the landscape really came into shape.

Facebook's launch of its developer platform heralded in a new area of speculation and rapid growth. Watching its evolution was like watching the Web’s own growth over the past 10 years, but accelerated at an exponential rate. Geeks create some clever applications that attract tens of thousands of dedicated users, and then an entire new business stream develops. Quickly, Facebook faced competition from an alliance of services lead by Google. And even more money comes pouring into the sphere.

With Facebook becoming a platform, some smaller social networks started getting some attention: the Digg crew launched Pownce, Google bought Jaiku, and Twitter became the de facto micro-blogging tool.

All of this led to some smart people trying to figure out how to allow the social relationships defined in each of these networks to be shared amongst all the networks. Tim Berners-Lee defined this as the GGG and advocated the complex XML, while others like Tantek Celik argued for the simpler microformat approach.

Mobile Web

The announcement, and then release of Apple ’s iPhone created shock waves amongst fan-boys, UI experts, phone manufacturers and carriers, and at least one search engine. It even inspired me to finally get a cellphone. From the perspective of Web development, the iPhone introduced a concept for displaying Web pages that is provoking discussion in that community: it takes sites designed for a desktop and shrinks the display to fit on its screen. Other mobile browsers, notably the Opera flavours, relied on the a separate style sheet to render an optimized version of a given site.

With the iPhone and Google’s “gPhone” system, Android, mobile Web browsing is becoming far more common — even Canadian carriers have deigned to lower their rates for 1Gb of data from $2,400/month to $100/month.

Multi-Touch

The iPhone’s big feature was undoubtedly the use of the first consumer friendly multi-touch screen. Effectively, a couple of fingers and some natural gestures replaced the stylus and keyboard. Almost immediately, Microsoft introduced Surface, which is table that uses the multi-touch interface to act as a sales unit, a waiter, a photo album, or a paint canvas.

By the end of the year, other mobile devices were appearing with a multi-touch screen, and speculation is rampant that Apple will introduce a multi-touch laptop or desktop in the coming months

Apple reworked the JavaScript engine of it’s Safari browser to create new event observers specifically designed to react to finger swipes and pinches. ECMAScript 4.0 may even incorporate such observers into the final specification.

HTML Rebirth

After years of lobbying, the W3C decided to reopen development of the lingua franca of the Web. The consortium promised to make the development of the new HTML standard open and transparent, and quickly, hundreds of passionate Web developers signed-on to participate. Many of those were members of the alternate HTML standard group, WHATWG; and as a result WHATWG’s proposals have become the draft recommendation.

What that draft contains, however, is quite contentious, and the Web standard community is splitting over both its proposal and the methods used to come to said proposal.

No matter what the final recommendation, practical implementation may occur faster than many expect. Already parts of the draft have been built into beta releases Opera, Safari, and Firefox.