saila.com: Web Design Feed

BarCamp Seattle: The Father’s Day Edition

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

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

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

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

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.

An Overview of the Best Practices

Thanks to a concerted education effort by key Web designers, as well as a few prominent accessibility and usability experts, the Web development industry has begun to form its own best practices. These are built on top of of Web standards, are informed by human-centered design, and honed through nearly a decade of trial and error. While the routines of those best practices vary depending on the site and team focus, but at their core they all share the same philosophy.

Some may call it usability, others visitor loyalty, others rich content, but the goal of the vast majority of Web sites is to become a routine for its visitors, and to do that, the users needs are primal; no matter what the papers say, you don’t own your site, your users do.

This is an overview of these notable best practices — future installments will delve deeper into specific topics an areas of interest.

Be helpful

People want your advice, show them what you can offer: Know both your users and the purpose of the site, and provide two or three clear paths that enable visitors to easily achieve their goals (which, in turn, should map to the purpose of the site itself). Imagine a concierge.
Inspire curiosity to encourage exploration and discovery: With rare exceptions (i.e., a task requiring the completion of a fixed goal) each path should provide branches for visitors to take, thereby exposing them to parts of the site they are interested in, but didn’t necessarily come for. Think “serendipity”
Without wayfinding, you’re telling visitors to get lost: On every single page of the site, the visitor should be able to see where they are, where that item is within the site, and where they can go to. This can be explicit, like breadcrumbs; implicit like friendly Web addresses and design hints; or both. This is the “Wikipedia Effect”

Be flexible

Technology shouldn’t be a limiting experience: There should be no such thing as an “unsupported browser” in the sense that any visitor should be able to access the content you offer, even if its not optimally presented. The site should embrace the three pillars of open Web standards, accessibility, and device-independence.
Welcome the outside in and let the inside out: The Internet is built on the exchange of information, and sites are rewarded the more they reach out beyond their domain. Encouraging visitor participation builds both loyalty; enabling others to easily access the site’s contents helps market its services; and pointing to other sites, even competitors, enhance the site’s own authority. This is the “Yahoo Effect”
Being nimble means being adaptable: In everything from business strategy to technology choices, being able to quickly bring to market a new feature allows the site to adjust to changing conditions, saving money while maintaining the current audience. If the feature doesn’t work after a reasonable period, quickly admit to it, remove it, and continue forward. Think “fail faster”

Beware

Even in anarchy, there are rules: After nearly a decade-and-a-half of Web-based development, combined with its profound integration with mainstream society, there are unspoken conventions that nearly every user understands. Ignoring them creates a sense of discomfort amongst visitors; relying on them creates a solid foundation to explore from. Think: “green means go”
The tea leaves reveal what you want them to: The online world offers a universe of metrics to quickly draw upon: visitor surveys, site analytics, revenue patterns, and market analysis. But their easy availability obscures their unreliable nature; use them a background source to inform, not to define, plans and goals. Think “Deepthroat”
Technology will fail you in proportion to the faith you put into it: As a means to an end, choosing the right technology for the purpose at hand requires careful forethought, but there is no perfect solution. Understand the limitations, but know that the what is developed is only as good as the process and people that developed it. This is the “Messenger Effect”

Thank Hotwired, Saila suggests

Although my first thought was to Twitter this (apparently the frequency for which I do that is starting to make cats salivate), but it deserved more than 140 characters. That being said, had it been a little tweet it would have said this:

@veen: increasingly, it’s clear that everything I learned, I learned from HotWired

I’ve mentioned it before in a couple of posts, and in person to Mr. Veen, but as I do some work for a media client examining their competitors and forming some online strategies and best practices, that site and its primary colours raced back in mind.

Maybe it was the electronic music being streamed into my headphones (the first online music I regularly listened was webcasted from HotWired via Beta Lounge).

Maybe it was that nearly every guideline I outline was done by that crew back in in the mid-1990s.

Maybe it was the nature of my client’s business.

Maybe its the the current debate over “purpose.”

Nevertheless, it’s inspired me to collect my thoughts and respond to a point I made a few weeks ago. After the Online News Association’s conference in Toronto, one of my posts alluded to the fact that mainstream media has failed to pick-up on some of the independent Web’s best practices.

Over the coming weeks, I’ll start posting some longer essays collected under the tentatively group under the title of “Saila Suggests” that will respond and expand on those best practices.

The first, appearing this weekend will be an overview, and will be followed by an piece on created user-friendly Web addresses. Although my self-imposed schedules are infamously erratic, I hope to a have a few more posted before the year is out.

Simple CSS drop shadows, revisited

One of the more enduringly popular articles on this site has been “Simple CSS drop shadows,” which explains how to use progressive enhancement techniques to create drop shadows on text and boxes. Although the technique still works, support for complex DOM scripting and CSS as improved dramatically, making these simple CSS drop shadows even easier to do.

Using client-side scripting, this duplicated content is no longer required (unless support for version-five browsers or lower is still required) and a drop shadow can be created on any element accessible via the DOM. Also, this revised method purposely avoids using class names to trigger effects in order for the effect to be as non-intrusive to the basic markup as possible.

(The W3C has proposed two CSS methods to handle text and block shadows, and these are discussed later in this article.)

DOM-styled Drop Shadows

Like the original technique, this method duplicates the headline text and offsets it creating a drop shadow like effect. The box shadow effect places the targeted box slightly offset within a grey div.

In both the examples, there is a unique id attribute associated with the element, but this is not required. The script duplicates the content (and child elements) of the element targetted and requires five values when initiated:

the DOM node (e.g., the text or box);
the shadow color;
an array with the horizontal and vertical offset;
and the type of shadow wanted (i.e., “text” or “box”).

A headline with a drop shadow

The headline HTML:
<h5 id="pullquote">A headline with a drop shadow</h5>

To create a text shadow in the example above, the script is called this way: dropShadow(document.getElementById("pullquote"),"#AAA",[1,1],"text");.

The script looks for the element with an id of “pullquote” (this could be any DOM node reference, though); sets the shadow color to a shade of grey; and offsets that shadow by 1px both vertically (the first value) and 1px horizontally. Positive numbers place the shadow to the bottom and right of the text; use negative numbers to set the shadow in the opposite direction. The final value ("text") tells the script a text shadow is desired.

A drop shadow around a box

The box HTML:
<div id="box" style="float: right; width: 100px; height: 100px; border: none; background-color: #9FC;">A headline with a drop shadow</div>

The box shadow was created by calling: dropShadow(document.getElementById("box"),"#CCC",[2,2],"box");.

Again, the script looks for the DOM node reference; sets the shadow color to a different shade of grey; and offsets that shadow this time by 2px both vertically horizontally. The final value ("box") tells the script to create a shadow on a block element.

The JavaScript:

function dropShadow(shadow,shade,offset,type){

 var color = [getStyle(shadow,"background-color"),getStyle(shadow,"color"),shade];
 var container = (type=="box") ? document.createElement("div") : document.createElement("span");
 var els = [container,shadow];
 var content = shadow.childNodes;

 switch(type){
   case "box":
    container.appendChild(shadow.cloneNode(true));
    for(x=0;content.length>x;x++){
     shadow.removeChild(shadow.childNodes[x]);
    }	
    for(x=0;els.length>x;x++){
     els[x].style.color = color[1];
     els[x].style.position = "relative";
     if(x==0){
      els[x].style.width = getStyle(shadow,"width");
      els[x].style.backgroundColor = color[0];
     } else {	
      els[x].style.margin = offset[0]+"px "+offset[1]+"px";
      els[x].style.backgroundColor = color[2];
     }
    }
    break;
   case "text":	
    for(x=0;content.length>x;x++){
     deep = (content[x].childNodes) ? true : false;
     container.appendChild(content[x].cloneNode(deep));
    }
    for(x=0;els.length>x;x++){
     els[x].style.position = (x==0) ? "absolute" : "relative";
     els[x].style.color = color[x+1];    
    }
    break;
 }

 for(x=0;els.length>x;x++){
   els[x].style.top = (x==0) ? (offset[0]*-1)+"px" : offset[0]+"px";
   els[x].style.left = (x==0) ? (offset[1]*-1)+"px" : offset[1]+"px";
 }
 shadow.appendChild(container);


 function getStyle(obj,style){
   if(obj.currentStyle){
    return obj.currentStyle[style];
   } else if(window.getComputedStyle) {
    return document.defaultView.getComputedStyle(obj,null).getPropertyValue(style);
   }	
 }
}

If you are using a JavaScript framework, you can remove the getStyle function and replace those calls with ones to you preferred method.

CSS3 Drop Shadows

Safari 3 became the first mainstream browser to support both of the W3C proposed CSS drop shadow techniques: the text-shadow property and the box-shadow property. The former is nearly standardized (and also supported in Opera 9.5), the latter is still a draft so implementations are still considered proprietary.

A headline with a drop shadow

The headline HTML:
<h5 style="text-shadow: 2px 2px 2px #999">A headline with a drop shadow</h5>

The text-shadow property allows for multiple sets shadows, each with up-to four values: the colour preceded (or followed) by the horizontal offset, the vertical offset, and the blur radius. The blur radius, or the “fuzziness” of the shadow is optional, as is, technically, the colour (although Safari seems to require it). No drop shadows will appear if this method is used and the browser rendering the page doesn’t support these properties.

A drop shadow around a box

The box HTML:
<h4 style="float: right; margin: 0 4px 0 0; width: 100px; height: 100px; border: none; background-color: #9FC; -vendor-box-shadow: 2px 2px 2px #999">A headline with a drop shadow</h4>

Again, like text-shadow, the box-shadow property takes multiple shadows, each with up to four values (colour, horizontal and vertical offset, as well as blur radius). Since this is still a draft, those browser who have implemented it are prefix the property with a vendor id. To use it with a WebKit-based browser like safari, replace “-vendor-” in the above example with “-webkit-” — once the standard is set, this would not be needed.

Succeeding against Facebook

Facebook managed avoid ghettoization as YASN this May when it opened its Web site to third-party applications. Essentially, Facebook answered the unasked question of what to do after everyone you once knew are in your network (and you realize you don’t have much in common with your classmates from kindergarten).

The cynical summary: blogging enabled everyone to easily create a Web page for their cats, and the Facebook platform allowed them to collect and share their own dancing hamsters.

Assuming Facebook can overcome some its scaling problems with its application framework, and more intellectual applications can bubble-up into the general popularity, the service might emerge as a second, safe Web. And that, as many have begun arguing, would also mean its a closed Web.

But ironically, it is that self-contained community, with its essentially egotistic focus, that has helped Facebook to thrive. The entire Facebook application platform is built around the concept of the user, and applications that reward users by:

telling friends something about the user,
telling users something about their friends,
and by encouraging interaction with a friend

are bound to succeed, especially when they viral.

Those that are actively virulet (like Zombies, whose whole point is to infect other people) may achieve an immediate boost; long-term, slow-burn applications (such as a Scrabble-like game) is likely going to be more effective in the long-run.

All this is a long-winded way of wondering about Google’s rumoured attempt to “out open” Facebook. By developing a whole new set of APIs allowing third parties to both push and pull data, into and out of Google and non-Google applications, they could potential create an environment in the public Web that negates the power of “self” within Facebook.

Google failed pretty badly with Orkut and Gmail is still a distant third Webmail service; but the API approach could put Google in the best position to succeed if Facebook’s popularity wanes.

The again, Google may just be floating the API approach as a back-up plan if its attempts to buy into Facebook fails, and Microsoft gets a piece of it.

Good job posts

When checking the times for (my first) DemoCamp tonight, I stumbled across the TorCamp job board. This is an excellent place for anyone looking to fill local Toronto jobs with potentially qualified people.

But, please, before posting, ask yourself: Are all the requirements and responsibilities an essential part of the job or are there any edge cases? In Toronto, it is extremely hard to file a full-time position with skilled Web talent; don’t make it any harder on yourself.

For example, the Art Gallery of Ontario posted two positions (for a designer and developer) for what looks to be an interesting project using the Web’s best practices. Given my experience, I should be eligible for at least one of the positions — but for both I’m either missing key minimum requirements or skills.

In fact, of all the talented people I know who could apply, I can think of no one who matches the job profile as outlined.

In this market, those tiny misses might be enough to dissuade qualified from even bothering to apply. My suggestion if you are getting too few applicants:

Provide a good summary of the job, department, and company (the AGO did do this quite well).
Outline the three main job responsibilities (that will be enough to cover the essentials of the job, any more will make the job seem overwhelming).
List no more than six job requirements (the others can be determined in a follow-up screening call or interview).
Include some triggers to attract the right people (the AGO did this brilliantly by referencing “standards compliant web markup”).

Good hunting!

FacebookCamp Toronto: Follow-up

The first FacebookCamp Toronto is done, and kudos to the organizers for holding such a successful event. The reported turnout was about 450 people, making it the biggest Facebook Developer Garage yet (other cities, like San Francisco, often have had ten times less people); and, despite the buzz Facebook is creating in the marketing world, nearly half of the attendees were developers, and a quarter of those were actively developing Facebook apps.

All this helps explain why Facebook sent a team up to this event (it’s the first time they’ve attended a session outside the Unisted States). One of whom, Melanie Marks, started the night off sharing stats and details about Facebook’s usage in Canada (which I’ll likely comment on in another post at another time). She explained what Facebook has discovered about what a successful app must do:

promote recent activities within the application, and time stamp it;
ensure the application is socially relevant to the user (include friends names, for example);
create content that tells friends what a user is up to and doing;
and increase engagement by, in part, using social comparisons.

Jay Goldman, of Radiant Core, spoke next and revealed the anatomy of an application — had I seen his presentation a month and a half ago, I would have saved Google a lot of work. Trapeze Media’s Sunil Boodram followed with an overview of FBML and shared some tips on getting select menus to appear in a Facebook application (hint: fb:editor-custom).

The night was about ten minutes ahead of schedule when I took the stage after Sunil to talk about FQL (view the slides). Despite feeling as though I never got into the groove of things, people seemed to appreciate whatever I insight I did offer.

Refresh Partners’ Colin Smillie followed with a quick introduction to the thing that caused me the most pain (albeit, some of the blame falls on my inexperience with Code Igniter): how to update a user profile.

Although I missed the first demo, I caught the last bit of the one for Carpool by Zimride and I will be installing that; and it ended with Greg Thomson’s enjoyable pseudo-demo for My Aquarium, where he also shared some lessons learned about running an application with 1.3 million users.

(In typical fashion, the night didn’t end then, but carried on at the Drake, where, surreally, there was also a Degrassi DJ competition going on.)

There is already a plan to hold a second FacebookCamp in the fall to cater to the other half of the audience with its focus on marketing, and business. Keep an eye out on the TorCamp site and list for more details.

FacebookCamp Toronto

What started out as a little gathering for 30 TorCampers to showcase some development techniques with Facebook’s developer platform has exploded. First it jumped to 60, now it is being held at MaRS and although the declared maximum is 350, more than 600 people have signed up.

Now known by the dual handle of “FacebookCamp Toronto,” and — thanks to Facebook’s official participation — “Facebook Developer Garage Toronto” the event promises to be a very interesting evening. If you’ve not yet signed-up, chances are the only way you’ll be able to attend is virtual after-the-fact (hint: look for items tagged “FaceBookCampToronto” on Flickr and Technorati).

Or, you can just come back here tomorrow. As one of the presenters, I’ll post a bit more about what happened and will include a link to my session on FQL (if you are attending, come by and say, “Hi”).

Mix07 wrap-up

Finally made it back to Toronto after a case of mistaken departure and a very bumpy takeoff.

Mix07 was, for me, even with the heavy presence of Microsoft-marketing, a worthwhile conference. Well-run, with a great mix of sessions, I learned more than I expected, and was even re-inspired by a number of the things I saw.

The social networking I did (real-world only — I finally activated my long dormant Twitter account and used it like mad) was limited to a few in-between session talks and, really, only the first night out. Unfortunately, I was too tired to attend the BarCamp/Facebook party, which seemed to have been the best of the after-session events. That being said, during the final lunch, I had a very POSH time with Molly, Tantek as well as IE’ Chris Wilson and Pete LePage among others.

Big take-away: Microsoft is working hard to be as open as it can be. Although many critics of Silverlight are knocking it for being a Flash-clone, it really seems to be poised more as a Web 2.0 (read JavaScript + CSS + Ajax) alternative — and one ideally suited for those currently using the .NET platform.

Working for a company not using .NET, though, there still seems to be some benefit ’ especially when it comes to something like the “Reader” software and simple cross-platform video.

One last little tidbit: a few years ago, Microsoft actually proposed conditional comments for CSS like they’ve already done with HTML and JavaScript. This is something I’ve long wanted (as it would end all the “* html”-type hacks), but now know I probably will never see. The proposal was soundly rejected by those working with the CSS standard out of fear that it would encourage bad behaviour and break the Web. For those following the HTML5 working group debates, this may all sound quite familiar.

Seeing the Web’s future

Vegas may be the city you can gamble 24-7, but try to find a decent bar open in The Venetian after 11 p.m.…

Last day, sessions over, and despite the literal cold shower I had to take this morning, I managed to recover enough to be wowed once again by the potential of the New York Times Reader, and in turn Silverlight. Trust me on this, I am not drinking to Kool-Aid. The ease of development within it is phenomenal. More friendly to develop for Web standardistas, and simpler than XUL.

Likely, I’ll be doing more of a wrap up in the coming days, but now I’m off once again to hear Chris Wilson (now with more Molly!) talk; then it’s doing the Vegas strip before heading home.

New development platforms

Well, this has been eventful.

The past 20 hours or so have been surprisingly interesting, and looking behind the scenes at some of the code you can you use to produce Silverlight apps (which I still want to call “Silverfish”) continues to convince me that standalone Web apps (be it powered by Flex/Apollo or Silverlight) will be one of the next big steps in Web development.

Right now, I’m in a session talking about the business models behind creating rich, content experiences online — and I’m specifically interested in hearing from The New York Times.

Next will be Chris Wilson on Internet Explorer and what I anticipate should be some interesting revelations.