Photo courtesy of Andrew Chen via 52 Weeks of UX

Do you ever feel that your design has become stale and that despite your making lots of little changes to it over time without any big overhaul there is just no way to drastically improve it?

If so you’ve probably hit what Andrew Chen calls the “Local Maximum”. The local maximum is a point in which you’ve hit the limit of the current design…it is as effective as its ever going to be in its current incarnation. Even if you make 100 tweaks you can only get so much improvement; it is as effective as its ever going to be on its current structural foundation.

The local maximum occurs frequently when UX practitioners rely too much on a/b testing or other testing approaches to make improvements. This type of design is typified by Google and Amazon…they do lots and lots of testing, but rarely make large changes. (Except, of course, Google’s homepage background change this week, which was quickly reverted)

While a cycle of smaller improvements is better than the dysfunctional design processes most of us are stuck with, one of the criticisms of this type of extreme optimization is that it’s always and only incremental: you can only make a few small changes at a time and therefore your design evolves slowly. And if you’re doing rigorous testing, by only changing one variable at a time, then you’re only changing one small part of your application in each iteration. This work cycle becomes dependent on how fast you can run tests. For Google and Amazon, who are blessed with millions of visitors per day, this is no problem because they can run tests extremely quickly. For most people building web sites, low traffic volume can be a huge hurdle because it means that tests have to run longer and thus slows down rate of iteration.

To illustrate the notion of local maxima Chen uses the example of a photo upload application, pointing out there are many ways to improve an offering by optimizing what currently exists. You can A/B test the current photo upload page, send out more emails reminding people to upload, add more calls-to-action to upload, etc. It’s easy to both design and test these options.

But after a while these low-hanging fruit get few and far between and as UX designer you have two choices: continue to try ever-increasing alternatives (optimize) that are small enough to test or to try and make a bigger, structural change that really shakes things up (innovate).

Chen points out that other approaches to improving a photo app besides optimization would probably have a higher return. These include:

* Repositioning the product for a stronger value proposition
* Going after a different kind of audience to target their needs
* Recalibrating the “core mechanic” of the product to make uploading photos a natural part of using the product

Because these changes are much larger than a single design element you can effectively test, making a change to them requires making a daring design decision. Someone has to step up and take a chance based on their intuition: what they think will work instead of what testing has proven works.

In order to design through the local maximum we need a balance between the science-minded testing methodology and the intuitive sense designers use when making big changes. We need to intelligently alternate between innovation and optimization, as both are required to design great user experiences.

One strategy we might employ is to optimize until we reach a point of diminishing returns: design until changes just aren’t having a big effect. Then, stop optimizing and return to other kinds of analysis to figure out the next steps. Conduct interviews. Do user testing. Give surveys, ask questions. Find out the biggest existing pain points instead of focusing on tiny design elements at this stage. Focus at the activity-level. What are people trying to accomplish? What are their higher-level goals? What aren’t people doing that we want them to? What big hurdles keep them from taking the next action? This level of insight will allow you to make those bigger changes.

And when the time comes to make the bigger changes, when you decide to jump from your local maximum to some other design possibility, make the decision with conviction. But don’t forget that the optimization has only just begun.

Rather than take a traditional page-design approach, we architected the database and interaction to be slim and exchangeable. First, the database was managed by use of two .NET-based Web Services written in C# that ingested via POST marking transaction success with 32-character IDs, output via XML and with multi-purpose edit functions using switches and variable inputs. Next, the authentication was built on a combination Basic and session-based approach using ASP – quick and efficient and easy to modularize should the system need to be moved to another platform. Finally, the front-end was built on a single HTML page with jQuery and jQuery UI to support the large number of Ajax exchanges and interactive features.

The result is a clean, easy to use, transportable DAM-CMS capable of complex transactions (multi-tiered, synchronous updates), hooks to a Silverlight-based rough cut editor from Southworks, and most of all, easy and quick to modify without affecting the production environment. By deploying a single jQuery-based controller separate from the parser and presentation components, new objects could be introduced to the interface based on a modifiable, dynamic XML document at login (or pushed in real-time, even after the user had logged in).

Some of the things we learned seem pretty silly but in fact were critical to the project completing in such a short amount of time.

First, segregate all the processes – by constructing the database, the web services, and the interface separate from each other, different developers could rapidly deploy all of it and mesh together quickly at stop-points each day. Chandler and I (with a big assist from Srini and Mio) were able to work independently and merge as he completed parts of the web service, or make changes as parts of the interface came together. Likewise, during testing, changes to the interface and sequence could be done in real-time and re-tested within minutes instead of having to go back to the drawing board. This was eased by the fact that issues could be easily attributable and divisible to interface or back-end, and handled separately.

Second, it’s the little things that make a difference. Providing small visual cues – update notifications at the top of the page that disappear, Ajax loader starburts, highlighted labels and input boxes – all give the user information, information that helps them get through difficult or tedious and complex processes (for example, in creating a VOD asset, a user had options that might require upwards of 50 different pieces of information – eliminating unnecessary components on the screen made it easier to get through).

Finally, architect it but be flexible. Changes happen, and while developers and project managers all try to keep scope creep from happening, we all know that in the real world, so does feature change. It is unrealistic to assume that projects will get started 6 months before the deadline. It is also unrealistic to assume that, in such a project with a short deadline, that you’ll remember to include everything. Likewise, it’s also unrealistic to assume that during the process you’ll realize that the planned interface will work – prototyping is great but it takes time and testing that you may not always have. Being able to be flexible by following a basic interface design, using modular builders (in jQuery UI or other framework) and XML-based instruction sets, and providing error catching systems in both the front-end as well as the web services makes the project continue to move, even when not all the parts are correct.

In the end, we had a lot of hiccups and it didn’t go as smoothly as we’d hoped but it did get done and delivered on-time. The client goes to training in 9 hours and there will likely be another round of changes, but that we were able to post a full-featured DAM CMS in such a short amount of time gives us new methods and targets for the future.

For years, the only other options were to use images (which then lose the semantics and made it difficult to update over time) or sIFR (which still rocks and can provide much more extended support for very unusual fonts).  Now you can add Font API support with:

<link href='http://fonts.googleapis.com/css?family=Tangerine' rel='stylesheet' type='text/css'>

body { font-family: 'Tangerine', serif; }

Produces (though this is an image):

According to Google, the back end system converts the font into a format acceptable to the browser (including MSIE6), serving up only the weights and styles you specify, and can be cache headered in order to optimize/improve performance over the span of the site.  They also work with HTML5 and CSS3, so transformations like rotation and drop shadows still works.  Currently support exists only for Western European languages (Latin-1) but I’m pretty sure that will expand quickly once it takes hold.

Nice job!

Read the Google announcement here.
See the fonts available in the Google Font Directory.

I’d love for fifteen or twenty minutes to go by without my Google Reader barfing out yet another piece of software patent or “HTML5 video codec war” news, but that’s how it is. At this point, I wouldn’t be surprised if the video tag didn’t become standardized until HTML6 or 7.

One serious downside to the lack of consensus is the fact that your browser may very well not have built-in support for some video files embedded with the tag. Firefox, for example, is running with Ogg Theora and won’t be bolting on H.264 support. Apart from patent issues, there’s a $5 million price tag to be paid to MPEG-LA if Mozilla did want to support the codec, and they still wouldn’t be able to include that code in their open source.

But developers love to spin remixes of the Fox, and it only makes sense that someone would take matters into his or her own hands. Enter Maya Posch, who has launched the Wild Fox project on SourceForge. The plan: add H.264 support to Firefox’s stable branch using libavcodec or GStreamer.
Posch feels “that decisions have been made due to patents which do not apply in most parts of the world.” He continues, “The Wild Fox project aims to rectify this by releasing builds with these features included, builds which will of course only be available to those not in software patent-encumbered countries.”

That sounds useful, right? A nice, pre-packaged Firefox build with H.264 support? Sure it does, but there’s a potential pitfall.

While you would probably be able to download and install Wild Fox even in the U.S. and Korea (two of the patent-encumbered countries), Thomas Holwerda of OSNews warns that you’d be doing so at your own risk, saying “MPEG-LA has clearly stated that it will sue unlicensed users (and is clearly not afraid to do so).” Their director of Global Licensing, Allen Harkness, has said “where a royalty has not been paid, such a product remains unlicensed and any downstream users/distributors would have liability.”

Yes, that means MPEG-LA could come after you if you choose to browse with Wild Fox. However, it’s infinitely more likely that they’d target Posch and Wild Fox.

You’ve hired the wrong guy. After reading David Airey’s forget about design and Andrew Maier’s User Experience Designer vs. Creative Director I’ve come to the conclusion that the role “web designer” is a cheap ass effort to fudge a graphic designer into a role requiring two entirely separate fields of knowledge.

Web teams still need graphic designers to communicate visually appealing messages. And graphic designers moving from a print team to a web team should stay graphic designers. What’s needed to compliment a web team’s graphic designer is someone to account for the complexities of human-computer interaction (HCI). Surely a manager in any field can’t expect staff to adopt a completely opposite, complex knowledge base overnight.

Welcome the missing link: User experience designer.

User experience design is a blend of usability, information architecture (IA), and user interface (UI) design.

A web-based user experience designer is charged with learning about users and creating interfaces that match website goals and user needs. They deliver interaction specs and simple mockups to the graphic designer as a framework for user-centered visual communication. Then, of course, the web developer makes the interaction work.

Don’t mix up the two roles, user experience designer and graphic designer. Neither should do the others’ job. They should never be blurred into “web designer.”

If you’re going to make the leap into a more complex communication channel, account for its complexities or it’ll bite you in the ass when your competitors “get it.”

I have always told my students that the best way to get backup help is to go to the bookstore, site down, and read 10 pages out of each book on the topic, and find the one that “speaks” to them. A teacher’s recommended text, the school’s required textbook, it’s rare that student find them legible or helpful (I think my logic teacher went out of her way to find the most confusing book on Earth). Find the book that they understand and start working. Work every day. Work at least 15 minutes or 30 minutes every single day, doing the exercises over and over, changing little things, until the whole concept is solved.

But not every great book can be found at the store. Of course there are the online standard – w3schools.com for example – and the plethora of smaller resources. But it is always a treat to find an online resource that has both extensive resources and is also an easy, if not opinionated, read.

Such is “Eloquent Javascript,” authored by Marijin Haverbeke. I remember coming across it a few years ago but a posting on DownloadSquad reminded me of it. It is available in its entire text online (in HTML) as well as via downloadable PDF. As with most good resources, I recommend grabbing the PDF (and if you’re ambitious, a local copy of the HTML) before the perishability of Web documents steals it away.

So I set up a WP instance for her to play around with and it looks like she’s digging it. She’s worried that she’s going to lose some of the benefits of using the Google-based platform but I think that with the stats she has (trust me, she’s way beyond what MatSays will ever do) she doesn’t really need to worry.

The one downer note – the import function works great but it puts Blogger tags as WP categories so you might have to massage the DB by hand a bit. Wonder if they are aware of that little bug.

So the real juice behind our success in 9 years is our ability to think outside the box. Honestly I can’t stand that expression but the reason I am not hunting for another metaphor is because everyone understands it. So what am I getting at? Back to the post I was reading.

The gem from the post was “know what the box is.” It sounds simple enough and certainly something we almost take as a given. But do you really?

A week ago my team was contracted to do a job for a prominent division of a Fortune 100 company. The job was to construct an SMF-based Silverlight media player that would, in short, deliver live and/or on-demand Smooth or Windows Media content with a bunch of social tools, a very slimmed down interface with a universal style and the catch is that it needed to use initParams and/or an externalized XML to direct it (with order of operations precedence), blah blah blah on and on. Nothing out of the ordinary except that the portability meant that we needed to reduce the configurable parameters as much as possible, make sure that delivery could occur both inside and outside a firewalled intranet, and that it was CMS supported. Anyway, the designer did the nice, clean XAML, the developer got the app interface done, I finished off the CMS and reporting components. All in 2 days.

And along comes the first gig – only a week from today – and another group in my company asked – so what happens if we’re streaming Smooth over satellite and we drop the link? How do we fail over to, say, an origin-based WM encode? Hmmm, didn’t really think about that one. It’s not that we wouldn’t normally, but historically we’ve always used ASX files or our own mediaFeedXML format to handle failover, but in this case we didn’t even really think about it, because (I guess) we don’t work operations on a regular basis and hence don’t really make those considerations.

My point is that we approached the job thinking we had covered the details but in fact we were missing part of the equation – we didn’t really know the box, inasmuch as we thought we did. And it took a single email from another team to point it out. Problem has since been solved but it makes me wonder, now, if we neglected anything else.

In the blog post author’s (Tom Stewart) words:

How often have you been told to ‘think outside the box’? I don’t know about you but I find that very hard to do. It’s as helpful as saying, ‘now come up with a great idea’. So my approach involves ‘knowing the box’. Identify all the constraints and limits you can.

Same holds true for design. Inspiration and production comes from knowing the box – knowing the customer, knowing the intent, knowing the content, knowing the delivery. Before tackling that really great job or that really great idea that you get your head wrapped around what it is you’re really designing against. Knowing that, and being able to step outside of the proverbial space, will only serve to make the end result better.

[sooner or later, when I'm allowed to and if I remember, I'll post about that player]

I’ll give it to the Quince company – they make nice interfaces. Really nice interfaces. Smooth, sleek and all that. But when it comes to devices, it’s sometimes a hit or miss. Google, on the other hand, well…they’re still playing a lot of catch-up. Google is a great big brother data collection/aggregation company but for all the work put into Android, especially into v2, it’s still just not the same.  Jennifer, a long time Mac-head, battled with me for the better part of 11 years.  If you walk into our home/MadeByGirl offices now, however, it’s nothing but one-bite fruit machines all over the place.  And though I hate some things (ok, code-writing is just an abomination and I STILL can’t get used to the command keys, something about Ctrl and Alt just fit my fingers well). And I suspect that the next few objets d’art that materialize will also be sleek and ringing “ta-da” when turned on.

Take the Kindle.  Now that’s a device with purpose.  Why is it so popular?  Because it has one purpose and one purpose only.  And it does it well.  Hey, if they added on a couple of other features, awesome, but it’s when it becomes overbuilt, that’s when it starts to become pointless.  Just like that, the iPod.  One purpose from inception, super design, awesome and intuitive interface, good UX, sells millions billions.

My G1, on the other hand, I am quickly learning that I wish it were just a freakin’ phone.  My very first Sprint mobile (circa 1993) was a somewhat bricky Samsung with a rocker switch and I loved it.  Hell, I wish I still had it – the roller switch was just so easy to use (compared to this pinhead sized trackball thing).  And for all the touchscreen love, I still miss that the phone was just to make calls.  Yes, I post from my phone, send text and all that other crap, but at some point I just started deleting apps because there really was no point to it.  Which is my point.

The iPad brings in a new level of “I really don’t know what I want to be.”  On the one hand, it’s very limited, but at the same time it’s pretty extreme.  I, like a lot of people, don’t seem to know where it will fit in.  Maybe I just need to use one for a while.  Or not use it as it sits idly on my coffee table, eventually becoming a very expensive coaster with a nice user interface.  Jobs had a lot of failures in the past but maybe we just don’t understand the impetus   crazy, drunken idea   motivation business model behind it quite yet (like Lisa).  Maybe the idea behind “just leave them all over like computerized notepads” really does have something behind it.

So back to Google – are we just plunking that idea on a browser?  As if every time Jennifer tells me to put the freakin laptop away while she’s trying to watch “Millionaire Matchmaker” and share a moment isn’t bad enough, but to have Google in my pocket, on the laptop screen, on my neighborhood gas pump (ok, that hasn’t materialized in my neck of the woods yet), and now on my coffee table too?  Right next to an iPad?  Does this mean that in 5 years, all the books in my custom-made bookshelf will be replaced with digital tablets (that I have to label with a Brother p-Touch – now there’s a device with purpose – one job, one UI, no complications)?

The age of computerization is nice.  It is.  But put the shit   screen   thing down and pick up a book.  A real book with paper and ink.  Enjoy it…it’s the original UI.

Last week, YouTube announced beta HTML 5 video support: once you’ve activated the beta, you’ll see videos using a native browser element rather than the Flash plugin. The new player only works with a recent version of either Safari or Chrome (or Chrome Frame in IE), as the video is encoded with the H.264 codec, which isn’t supported in Firefox. A day after YouTube’s announcement, Vimeo made a similar one. They also now provide preliminary support for the HTML video element with a new HTML player.

Superficially this seems like a victory for the “open” Web, right? A few major sites, representing a significant percentage of online video, begin to move away from a proprietary technology (Flash) and towards an open standard (HTML 5). But when you look a little deeper it turns out to not be so simple. Both YouTube and Vimeo have chosen to provide their HTML video encoded with the H.264 codec, which is patent-encumbered. Apple has a big stake in H.264, so Safari supports it, and Google has paid a licensing fee to include an H.264 decoder in Chrome.

Mozilla Firefox, on the other hand, doesn’t support H.264: it will only play HTML video encoded with the Ogg Theora codec. This is partly for ideological reasons, as the Theora codec is open source and therefore inline with Mozilla’s principles. But there’s more to it than just ideology. In reply to YouTube’s announcement, Mozilla’s VP of Engineering, Mike Shaver, published a blog post explaining why Mozilla is sticking to its guns with Theora. He points to H.264’s licensing fees not only as a justification for Mozilla’s decision not to support the format, but also as a more dire threat: “[...] if H.264 becomes an accepted part of the standardized web, those fees are a barrier to entry for developers of new browsers, those bringing the web to new devices or platforms, and those who would build tools to help content and application development.” Mozilla’s Open Source Evangelist, Christopher Blizzard, also had a lot to say on the topic, likening the situation to what happened years ago with the GIF format (and, to a lesser extent, with MP3).

It’s important to remember that the current level of browser support for web standards comes, in large part, from Firefox’s ability to compete on a level playing field with other browsers, and from the Mozilla team’s dedication to open standards. When big sites like YouTube begin positioning a proprietary format as the de facto standard for HTML video, they significantly impede the ability of free-as-in-speech browsers like Firefox to rival their competitors in functionality, which hurts interoperability and innovation on the Web as a whole. Meanwhile, though Chrome and Safari may be excellent browsers, and while their support for modern standards-based HTML and CSS should be applauded, in this respect their choice of a proprietary video format is more reminiscent of IE, circa the mid-90’s.

The fact that YouTube and Vimeo are trumpeting their new HTML 5 video support as an open standards victory is misleading to say the least. And it does lead to confusion: as pointed out by Christopher Blizzard, more than a few people on Twitter seem to think that Firefox’s lack of support for YouTube’s HTML 5 video should be taken to mean that Firefox doesn’t support HTML 5!

YouTube stated that it was launching the new feature in response to a user survey in which “Support HTML5 open web video with open formats” was the most requested feature. It seems that YouTube might only have been paying attention to the first half of the sentence: HTML 5 video, yes; open formats, eh, not so much.

So what do you think? Is it the job of YouTube and other sites like it to lead the way in providing video in an open format? Or should Chrome and Safari lead the way by supporting those formats first? Or are Mozilla being hopeless idealists?

From a visual perspective, it fills that little void by replacing the static window blahs in my second monitor with a fullscreen slideshow, complete with bios, photos, and a whole lot of social gaming tricks that I have to say are very well thought out and very easy to use. It does all this while the music plays continuously and the photos keep sliding in

And it’s not Flash (no love lost there). And of course you can buy the music (the true Long Tail in action here). Awesome. On a side note, as CC and I were commenting, we had a good laugh about a miserably failed project we did in 2003 with the then-Death Row Records that had a similar premise but way before social media was the buzz, before Ajax and jQuery frameworks existed, but was nonetheless pretty hot conceptually (though definitely not as good looking).

Anyway, for all my IMD414 students – this is the kind of thing you should be striving for and exactly what we’ll be talking about this quarter. Nice timing.

Despite people’s expectation of change and movement on the screen, CSS and HTML have few controls that allow you to design interactivity, and those that exist are binary.

A link is either one color or another. A text field is either one size or another. A photo is either transparent or opaque. No in-betweens from one state to the next. No transitions.

This has led to most web pages feeling abrupt, with elements shifting and changing ungracefully.

Yes, we can use DHTML and leverage the jQuery library for transitions, but this requires a lot of code for something that should be very simple.

What we need is a quick and easy way to add simple transitions to the page and in this article you’ll find useful information about CSS transitions and how to use them.

[MatSays: some rambling by the author omitted]

CSS transitions are being introduced right now in CSS Level 3 but have already been added as an extension to Webkit. Right now that means they work only in browsers based on Webkit, including Apple Safari and Google Chrome. [MatSays: so use a "real" browser but don't forget your graceful degradation for MSIE and stuff]

Where CSS Transitions Come From

Transitions have been a part of Webkit for a while and are the basis of a lot of the cool things that the Safari UI can do that other browsers cannot.

But the W3C CSS Workgroup resisted adding transitions to its official specs, some members arguing that transitions are not style properties and would be better handled by a scripting language.

But many designers and developers, myself included, argued that these are in fact styles— only dynamic styles, rather than the traditional static styles that so many of us are used to.

Fortunately, the argument for dynamic styles held the day. Last March, representatives from Apple and Mozilla began adding the CSS Transitions Module to the CSS Level 3 specification, closely modeled on what Apple had already added to Webkit.

[read the complete tutorial here]

If Oracle buys MySQL as part of Sun, database customers will pay the bill.

In April 2009, Oracle announced that it had agreed to acquire Sun. Since Sun had acquired MySQL the previous year, this would mean that Oracle, the market leader for closed source databases, would get to own MySQL, the most popular open source database.

If Oracle acquired MySQL on that basis, it would have as much control over MySQL as money can possibly buy over an open source project. In fact, for most open source projects (such as Linux or Apache) there isn’t any comparable way for a competitor to buy even one tenth as much influence. But MySQL’s success has always depended on the company behind it that develops, sells and promotes it. That company (initially MySQL AB, then Sun) has always owned the important intellectual property rights (IPRs), most notably the trademark, copyright and (so far only for defensive purposes) patents. It has used the IPRs to produce income and has reinvested a large part of those revenues in development, getting not only bigger but also better with time.

If those IPRs fall into the hands of MySQL’s primary competitor, then MySQL immediately ceases to be an alternative to Oracle’s own high-priced products. So far, customers had the choice to use MySQL in new projects instead of Oracle’s products. Some large companies even migrated (switched) from Oracle to MySQL for existing software solutions. And every one could credibly threaten Oracle’s salespeople with using MySQL unless a major discount was granted. If Oracle owns MySQL, it will only laugh when customers try this. Getting rid of this problem is easily worth one billion dollars a year to Oracle, if not more.

For my students and UNLV colleagues: if you had never heard of the DreamSpark program, you should jump on it.  A program launched in 2008 by MSFT (don’t groan) can get you free software.  Yes, free.  Yes, I’ve gotten some of it.  In a blatant (and conducive) attempt to move budding developers and IT staffers to the Redmond dark side, they’re offering Visual Studio (2005 & 2008), Windows Server 2008, Expression Studio and more for free.  So while the university’s alliance program is broken and paltry, you could have just headed straight to the source and gotten legit, keyed copies.

Now the new stuff: just released by MSFT – WebsiteSpark.  Like it’s older brother, the new program is aimed at small companies – no more than 10 employees – and offers:

• 3 Visual Studio licenses
• 1 Expression Studio 2 or 3 license
• 2 Expression Web licenses
• 3 users license for WinServer 2008 and SQLServer 2008
• 4 processor license for self-hosting WinServer 2008 and SQLServer 2008

That’s a buttload of very expensive stuff for nothing.  The caveat is that you must launch a new web app (that’s app boys and girls, not a paltry PHP site) and if you hit it big, you have to exit the program and pay a $100 fee.  That’s peanuts compared to the value.  Or you could go to a bunch of MSFT seminars and collect copies but that takes a lot of time and snoozing through 4 hours of demos.

Several sites are reporting that a major attack on Wordpress blogs started yesterday. The latest version of Wordpress, 2.8.4, is not vulnerable to this particular worm, so upgrading now could save you a lot of headaches. The worm creates a new, hidden administrator account on your blog, allowing whoever’s behind this thing to access the guts of your blog, databases and all.

How do you know if your site has been affected? Lorelle on Wordpress offers two possible ways to find out:

There are strange additions to the pretty permalinks, such as
example.com/category/post-title/%&(%7B$%7Beval(base64_decode($_SERVER%5BHTTP_REFERER%5D))%7D%7D|.+)&%/.
The keywords are “eval” and “base64_decode.”

The second clue is that a “back door” was created by a “hidden” Administrator. Check your site users for “Administrator (2)” or a name you do not recognize.

Wordpress has acknowledged the attacks and encouraged users to upgrade their sites. Wordpress.com users aren’t affected, as the whole system has already been updated to 2.8.4. If you’ve already been afflicted by the attack, start on the steps in Wordpress’ FAQ.

I’ve already done the upgrade and it is the same, painless upgrade as usual.  Just be sure (especially if you’re using FireFTP) that you set the transfer options to Automatic Mode (Tools > Options > Downloads/Uploads : top fieldset).

If you’ve ever read David Weinberger’s ”Everything is Miscellaneous” (ISBN10: 0805080430) as well as a host of other books and articles on Wikipedia, it’s almost as if Wikimedia is doing a 180 on its own founding principles.  Since the beginning, the founders strongly defended and imposed the concept that the community itself was the police and at no time should an editor be the final say…this to extent that a founder removed himself as an editor for changing an article without the consent of the community (consent being reached by culminating responses and critique any time an article change was made or requested).

“We are no longer at the point that it is acceptable to throw things at the wall and see what sticks,” said Michael Snow, a lawyer in Seattle who is the chairman of the Wikimedia board. “There was a time probably when the community was more forgiving of things that were inaccurate or fudged in some fashion — whether simply misunderstood or an author had some ax to grind. There is less tolerance for that sort of problem now.”

Not that I am necessarily opposed to having these types of sanctions, but at the same time, it gets to the core of defeating the point of the community based system.  The community, as I’ve often maintained, can rarely govern itself over a long period of time.  If it could, governments wouldn’t exist.  But by the same token, where does the power and authority end?  Should the Wikimedia board not consider that instead of a single editor, at the very least, possibly three or more editors should have to consent to the alteration first?

Advocates of the system point out that [it] provides an extra layer of insurance to prevent false posts and improve the overall accuracy.  But once again, at whose expense?  Is historical information not fact riddled by the opinion of the observer?  Who is to determine what is accurate?  While editors are, for sure, carefully chosen, aren’t VH1 game show contestants screened as well (ok, bad analogy but you get the idea – substitute radical terrorists in place of game show contestants and it’s a bit more frightening).  There is much at stake in this issue – freedom of speech, importance of historical record, observation and opinion – more than just the fact that Wikipedia could potentially end up more like Encyclopedia Brittanica (a system it sought to avoid) than the incarnation we’ve all grown to love over the last eight years.

How NBC, NFL Will Stream Sunday Night Football

Web surfers will be able to watch only a fraction of NFL games in live streaming video this season, but those few games that the league will run online will offer several interactive features, including the ability to watch any play in slow motion.

The NFL and NBC Universal said today that they’ll offer live streaming video of NBC’s 17-game Sunday Night Football schedule on NBCSports.com and NFL.com.

After using Adobe Systems Inc. (Nasdaq: ADBE)’s Flash player to deliver games online last year, NBC is switching to Microsoft Corp. (Nasdaq: MSFT)’s Silverlight platform for its football coverage.

NBC Sports senior vice president of digital media Perkins Miller said the network struck a broad deal with Microsoft to use Silverlight and its Smooth Streaming technology to deliver high-definition streaming video for its major sporting events, including the Olympics and Wimbledon.

Football fans will be able to toy around with several interactive features during the games on NFL.com and NBCSports.com, including four separate camera angles and a video player that offers full DVR functionality. Viewers that access the video streams in the middle of a game will even be able to rewind to plays that occurred before they opened their Web browsers.

One of the biggest additions to the streaming video feed this year is a “scrub bar” that will allow viewers to quickly navigate to the major plays of the game. NBC will integrate a data feed detailing each play into the scroll bar, so a viewer will be able to hover over an area on the scroll bar of the video window, and a marker will detail locations in the video where touchdowns and other major plays occur.

“We’re collecting the data feed that comes out of the stadium. We marry it to the video file. We can take a point in time, and create a visual marker for it on the player,” Miller explained.

NBC will rely on technical teams in several cities to deliver the interactive football games. In addition to teams that will be stationed in trucks near the stadiums at each Sunday night game, NBC staffers at its digital sports operation in Stamford, Conn., will cull video highlights from the game.

Perkins said NBC signed San Francisco-based Vertigo Software Inc. to write the code for a video player that hosts the Silverlight component. The network is also using the Uppercut video switching product from Los Angeles-based Reality Check Studios, and it signed iStreamPlanet Co. to encode video from all of the games.

While the games on NFL.com and NBCSports.com will allow those few viewers without access to a TV on Sunday nights to catch the games, Perkins says NBC expects that most of the traffic will come from football fans that are watching the games on TV.

“People use it as a complement to the broadcast. It enables them to have a control room at their coffee table,” Miller said, adding that he expects it to be popular with fantasy football fans and viewers that want to discuss plays with their friends.

NBC has a sales team dedicated to handling digital sales for the streaming NFL games and other online programming, and the network is also packaging online ads in broader deals with media buyers that buy spots during its TV broadcasts. Miller said NBC expects to generate online ad sales for football that will reach “seven figures.”

“It [online sales] is a fraction of what we’ll do on broadcast in terms of the revenue. We’ll do fairly well on this product,” he added.

Unfortunately for football fans, NBC will be the only NFL broadcaster to distribute games on the Web, as Fox Broadcasting Co. , CBS Corp. (NYSE: CBS), and ESPN won’t have the rights required to stream games under their contracts with the league.

The NFL extended its TV and online rights deal this week with NBC, giving the network rights to broadcast Sunday nights on TV and online through 2013. The league already has rights deals with ESPN, CBS, and Fox to broadcast games through 2013, but those contracts don’t include rights to broadcast games online.

The Comments:

davisfreeberg
“Perkins Miller said the network struck a broad deal with Microsoft to use Silverlight and its Smooth Streaming technology to deliver high-definition streaming video for its major sporting events”

For those who don’t know, a micropayment solution describes a system whereby the product being bought is a significantly small amount (something like $2 or less, so basically iTunes music would be one), and is usually coupled by either a pre-pay or a carting/aggregation system. Some day-to-day examples that have succeeded outside of iTunes would be something like pre-paid transit passes in NYC which remove one fee for each use. In the UK, there’s sQuid which is a similar service but can be used for many types of transactions. In Japan, the phones are tied directly to bank accounts for vending machine purchases.

Having worked on a number of e-Commerce back-ends for varying clients, this has always been an issue that perplexed me. On the one hand, consumers all know that at some point, to access content or acquire goods, that a payment needs to be made. On the flip side, content is so easily accessed for free on the Web (whether legally or quasi-legally) that consumers have started to become used to getting it for free. So how do we impose payment systems that allow for micro-purchasing? The example scenario is for, say, news. Several news providers have already started charging for access to news (which in reality is no different than buying a newspaper) and several others are moving in that direction, but is the subscription model working? Or perhaps will we see a pay-per-content-item system emerge?

Either way, the system itself is the culprit. In my somewhat out-of-the-box opinion, there needs to be a new model altogether. Imposing traditional payment schemes simply hasn’t worked for the micro-payment world (though I could argue that RedBox might actually be a close-to-perfect model but its also partly the targeting). Pre-pay, post-pay-aggregation, bank cards, none seem to work really well, and most of the systems that have emerged with promising outlooks later died untimely deaths (as pointed out by one of the Answer respondents).

Anyway here was my response…

I think that we still haven’t tapped the right balance in micropayment solutions that is able to satisfy the needs of the providers and the consumers. There is too little transparency and too little fluidity in the process, and we have (as a development and developer-provider community) dwelled to much on protecting the value of our content and not offering alternatives to letting customers acquire it (mind you, I am a rabid advocate of DRM solutions, so don’t think that I am not in support of content protection, it’s just that we tend to either do it with an iron fist or not at all).

I think customers are more than willing, in the end, to pay for services but the system itself needs an overhaul, likely one we haven’t come up with yet. In the same way that Amazon capitalizes on long-tail marketing, we need to look way outside of how we do things now in order to create environments where the provider and consumer of media services can co-exist. To that end, while there are several successful vendors of such products I don’t think anyone is a leader right now because I think the market will shortly turn itself over.

I do know, from my own experiences, that changes in digital asset management is the starting point for the vendors, but from a standpoint of providing explicitly heuristic access to content, not just providing massive libraries and letting the users hunt for it. A Pandora type experience with a flowing payment process (mixed pay for right to use and pay for use on a very micro level) is something I envision as an evolution. Providers are going to have to work together instead of living in silos of licensed content and use intelligent agents to disperse desired media.

Clarification posted 9 hours later
[reference to responses made later] those are some really great points. I agree that the current state of micro-payments is in waning death mode but argue that a re-thinking of the approach and process (and yes, the interminable fee structures that traditional money systems place on the products) can revolutionize the system. iTunes is a successful venture for every reason stated in several responses, but after raising the price point past the $1 mark, it’s beginning to lose its lustre and it’s debatable if it’s a true micro-payment system anyway (it’s really just a shopping cart for smaller products like the 99¢ store). When I think of micro-payment, I there’s two traditional approaches but they are still both pre-pay or cart-and-pay systems; the evolution I see would be be much more superfluous than that.

Several years ago, a good friend and myself came up with the idea of sending barcode images to cellphones via MMS as a means of ticketing for events, most notably nightclubs with VIP access (and two years later we see Fandango using scanned bar-code “ticket at home” systems that are pretty much the same but not digitized), but the system itself was paid for using micro-transaction on account (in other words, the transaction itself was attributable to the benefiting business, which could then be passed on in hard form to the customer if the business desired).

Like this, what outlandish ideas can you come up with that can revolutionize how payment models work?

While is why I am extremely proud of the evolution of the CMS that I designed and built for the Wimbledon Live player (see this post).

To understand the complexity behind designing the UX it’s important to understand the nature of the data and the critical effect of the workflow. First, video was being supplied from six sources, some to us using Saviant direct to our servers, some we pulled via FTP, and then of course the live streams (some HD and some SD). Then there were multiple parties…NBC (as the news reporter) needed editorial control over metadata, while iStream’s Managed Webcasting team needed to control the timeline over when items went to publication. My team, RnCS (Research & Creative Services) needed to insure that everything was tested before going live so we needed to throw the whole thing through a staging server before hitting a production server that then fed a cluster of edge servers on Akamai’s network.

So we structured it in several parts. First we put automated bots to determine when new assets had been dropped, specifically seeking out XML files that held the initial metadata, and dropped that into the CMS DB. Once there, the appropriate parties were notified by email (or in my case as PM, by SMS) – to update metadata, insert images, begin video transcoding, etc. Through the entire process, we designed screens to make it as easy as possible to follow the flow of assets, provide enough ability to each staff person so that overlaps in duties existed but that checkpoints assured data integrity throughout.

The grid above, for example shows the visual layout of the thumbnails that would appear in the cover-flow style playlist inside the player. Deep linking was provided so editorial users could create pointers on the MSNBC/NBCSports sites. Drag and drop allowed us to reorder objects to maximize the visibility of prominent players.

Each level of user had various modal windows to insert data. Even imagery was uploaded first to the staging, processed for size and then sent to production.

Because of the nature of edge servers, we also had to purge the cache after any update, so we provided a three-section grouping that allowed us to send the feed XMLs to production and clear the cache in one shot. And to make THAT process even easier, we built it so that it was accessibly by mobile phone so even if I was in transit, I could still update the CMS in a timely fashion.

Finally, the live streams had the ability to be toggled on and off so that the matrix of available feeds, particularly the Smooth HD stream, was optimized and prioritized. To be sure, there was still much room for improvement but given that the whole CMS was built in 6 days and now, five days into Wimbledon, has eased us into a steady, smooth workflow, speaks volumes for making it easy to use, intuitive (for example, the color designations on the player match the ones in the CMS, big text and extensive micro-transaction Ajax created an interactive environment), and overall a good experience.

WordPress is often thought of as just a blogging platform. But it’s capable of so much more. Even WordPress’ documentation includes an entire section on using WordPress as a content management system. Because WordPress is such an easy-to-use platform, it makes sense to consider using it as a platform to build just about any kind of website, a portfolio website included.

Whether you’re a photographer, graphic designer, Web designer or any other kind of visual artist, WordPress makes an excellent starting point for developing your online portfolio. And with the wealth of plug-ins and ready-made themes available, you can usually get a perfectly presentable website up and running in a matter of hours.

So get on the bandwagon, listen, learn, try, play and get some stuff done!

Excellent article on a consistently overlooked problem for most web designers – help elements.  A help element is anything that provides the user with assistance in completing a task.  They come in many shapes, sizes and formats but the primary goal is to be unobtrusive but noticeable and, well, helpful.  Most designers/developers look at help elements with trudgery but in many cases it can actually enhance the user experience.

The place we frequently see help elements is in form completion and validation.  Why we somehow can’t provide scripts that reduce error rates in the first place is beyond me, but I suppose in a lot of cases you still have to provide visual cues and alerts to help some users out. 

In HCI we consider that a standard free-form entry is the most volatile of inputs and sure enough, that’s where you’ll encounter the most errors, but don’t neglect the other visual aspects, including external labels, internal (low contrast, like the one shown below) labels, direct manipulation (such as calendar popups). 

The extremes of direct input error handling might be dates and telephone numbers, but here you may need to also consider flow; if within the form you require country, simply provide formats that the user will be more familiar with (such as auto-complete country codes).

From Matt Cronin’s post:

Usability is the Key

With any website design, one strives for usability. Usability is the key factor in the success that a website achieves. Usability is simply about making things easier for your users — and help elements certainly do that. But are your individual help elements themselves usable?

Don’t Confuse the User
Confusing the user contradicts the purpose of the help element, so avoid it. Only put in content that is appropriate to the element. The way you organize content within the help element affects usability. If the element contains a lot of content, use lists and highlight keywords so that the content is easy to scan.

Placement Has a Major Impact
In Web design layout, placement of objects is a top usability consideration. Likewise for help elements, placement affects usability.

Many designers make the mistake of making help elements (i.e. buttons, links, etc.) very small so that they don’t get in the way of the website’s main content. The problem is that they become hard for the user to find. Sure, their small size leaves room for more content, but that won’t help a confused user. Find a balance between subtlety and accessibility.

Also remember that help elements should be optional for the user, not required. Allow the user to choose to get help, instead of immediately showing the element.

Next time you’re designing your site, put some extra consideration into the help elements and see what ideas you can come up with.  Send me some examples of your clever solutions via comment.

With the huge move towards user experience in the last 12 months or so, I’ve decided to change the class up a bit this time around. First, a new textbook – Measuring the User Experience by noted guru and researcher Tom Tullis. I think it might just be what we need to introduce more experience and less testing. Second, we’ll focus more on task accomplishment and user satisfaction in the past by using some pre-defined testing, sprinkled with a lot of web-based issues as opposed to general interface issues, and wrap that up nicely in a site building exercise designed to take what we’ve learned and applying it to a development.

I’m also continuing my support of WordPress by introducing it as the tool of choice for both blogging as well as general site development.

For those of you in the class, get ready for a hopefully fun, definitely challenging, and mostly a good learning experience with lots of information that I hope you take and reflect on every now and then. I have the benefit of 15 years of experience in the business – some good, some bad, a lot of great designs and experiences and a lot of bad ones too. It would be unfair to say that I hope you can live these experiences within the 3 short months of the course (or 6 if you count IMD345) but I certainly hope you can take from what I have learned and use it to your advantages.

That being said, I hope you all take a bit of time to check out some of the upcoming work that my team at iStream has been working on. Right now the prominent projects we have in the still include:

• A redesign of the iStreamPlanet corporate web site
• A launch of the iStreamPlanet Sales Portal
• The official release of iStream Director, a digital asset management system
• AT&T Blueroom Masters Golf Silverlight application with Move Networks technology
• Three interactive Silverlight applications to replace some existing Flash interfaces for a major broadcast network
• New Silverlight interfaces featuring Smooth Streaming
• A Flash video player featuring slow motion techniques for Ballpark Preps
• PlayReady digital rights management

And plenty more to come…

Probably one of the best stated defenses I’ve read for UX comes courtesy of this post in Smashing Magazine.  In talking about the brand loyalty of Apple users…

How do you make your customers trust you this much? The answer is to give the user an “Experience.” It is not enough simply to make a website usable. The experience you create for the customer has to make them not realize that they are “using” it. It’s a tough concept to grasp, and the recipe changes from website to website, but the right combination of usability, creative design, writing, psychology and metrics and a strong brand will create an experience through which your customers learn to trust you.

How true. This week I’ve been tossed back and forth between clients and bosses struggling with all the wants and demands and needs and the bottom line came down to making sure everyone realized that it has nothing to do with personal preference and like and dislikes, it’s about experience, and more than that it has to be tangible, palpable and reach the emotion of a human in a way that makes it memorable, or at the very least engaging.

In the resulting manifesto, entitled “Information Management: A Proposal“, Berners-Lee suggests the we “should work toward a universal linked information system.”  Every student of web design should read it and understand the origins of the industry.  It is an amazing path that the Web has taken in its course to ubiquity and utility but it all started, like most great inventions, as just an idea in someone’s head.

Communication is one of the foundational elements of a good website. It is essential for a positive user experience and for a successful website that truly benefits its owners. All types of websites are affected by the need for good communication in one way or another. Regardless of whether the website in question is an e-commerce website, a blog, a portfolio website, an information website for a service company, a government website or any other type of website, there is a significant need to communicate effectively with visitors.

Because of the significance of communication with visitors, it is an essential consideration for every designer and website owner and the responsibility of both. Unfortunately, communication is sometimes overlooked and takes a backseat to the visual attractiveness of a website. Ideally, the design and other elements that do the communicating work together to create a clear, unified message to visitors.

In this article, we’ll take a broad look at the subject of clear communication in Web design. We’ll start with a discussion of the primary methods of communication for websites and typical challenges that designers face. From there, we’ll move on to look at what specifically should be communicated to visitors and tips for implementing this in your own work. At the end, we’ll look at some of the goals that should be established in terms of communication when developing websites, as well as some of the results of having a website that communicates effectively.

[read the entire article at Smashing Magazine]

You may have a personal portfolio website for a number of reasons. If you’re a freelancer, then you’d need one to showcase your work and allow people to contact you. If you’re a student (or unemployed), then you’d need one to show prospective employers how good you are and what you can do, so that they might hire you. If you’re part of a studio, then you might use one to blog about your design life, show people what you’re doing and build your online presence.

A personal portfolio website is all about promoting you. You are a brand, and your name is a brand name. No one is going to know about your brand unless you get it out there; and if you’re a Web designer, developer, writer, gamer or any other type of creative, then it’s essential that you have a good portfolio website.

1. Logo
Your logo is usually the first thing a user sees. In the Western world, we read from left to right, top to bottom, so it makes sense to put your logo in the top left of your website so that users can immediately identify who owns the website.

It doesn’t necessarily have to be your name, but if you’re trying to promote yourself online, then it’s a good idea to go by your name. And always link your logo to your home page. It’s a common convention that users expect online.

[read the entire article here at SmashingMagazine]

Recently WebTrends blogged that Twitter search will now be listed in the standard search engine and keywords report in WebTrends. Omniture has also blogged about integrating Twitter search data into Site Catalyst.

As Twitter increasingly becomes a tool that people use to find information it is really critical for companies to know how people are finding their sites on Twitter. Doing so will allow them to incorporate that learning into future marketing efforts on Twitter as well as other sources (e.g. Google etc).

Since Google Analytics does not yet recognize Twitter search as a search engine like WebTrends or Ominiture does, I will show you how you can do it easily with one line of code.

However, keep in mind this solution only works when the search originates on Twitter (i.e. http://search.twitter.com). 3rd party tools like TweetDeck, those will not be captured in this solution (nor will it, I believe, be captured in WebTrends’ solution). Use this information to understand general search keywords being searched on Twitter but do not get caught up in actual number of visits that your Twitter efforts are driving.

So how do you capture searches conducted in Twitter?

GA provides a few functions to allow you to add your own search engines to the list of search engines that are already tracked by GA.

_addOrganic(newOrganicEngine, newOrganicKeyword)

You simply call this function right after var pageTracker = _gat._getTracker(“UA-XXXXXX-X”); This functions to track any custom search engine.

Twitter uses “q” as the querystring that contains the keyword. So in this case our search engine is search.twitter.com and newOrganicKeyword is the value in query string q

So you code will look like

var pageTracker = _gat._getTracker(“UA-XXXXXX-X”);
pageTracker._addOrganic(“search.twitter.com”, “q”)
pageTracker._trackPageview();

(Note: pageTracker._addOrganic(“twitter”, “q”) will also work)

What will the reports look like in Google Analytics?

Note: For some reason I cannot get Twitter search to show up as Twitter in Google Analytics Search Engines report, it shows up as “search”(Maybe it’s a bug in GA? If anybody can provide pointer that will be a great help). However, for now this works fine as long as you know what “search” means in your search engine report. I am playing with filters and if I get that resolved I will post the fix or if you know the fix please email me.

Search Engines Report will show the following:

Drilling down to keywords will show the keywords on Twitter Search.

Looks like Twitter Search brings me repeat visits and more engaged traffic.

[original article here]

iStreamDirector is both a digital asset management (DAM) system and a content management system (CMS) that does such things as media ingestion, transcoding between multiple formats, metadata management, live event management, Silverlight and Flash player creation, playlist management, rights management and so on.

Once installed, it adds an additional panel to the FireBug console labelled “Reference”. Check out the screen shot to see the changes and be sure to get all the details on SitePoint’s web site.

More and more applications these days are migrating to the Web. Without platform constraints or installation requirements, the software-as-a-service model looks very attractive. Web application interface design is, at its core, Web design; however, its focus is mainly on function. To compete with desktop applications, Web apps must offer simple, intuitive and responsive user interfaces that let their users get things done with less effort and time.

In the past we didn’t cover web applications the way we should and now it’s time to take a closer look at some useful techniques and design solutions that make web-applications more user-friendly and more beautiful. This article presents the first part of our extensive research on design patterns and useful design solutions in modern web applications. Below you’ll find a collection of 10 useful interface design techniques and best practices used in many successful web-applications.

1. Interface elements on demand

Simplicity is important in user interface design. The more controls you display on the screen at any time, the more time your users will have to spend figuring out how to use your interface. When there is less choice, the available functions become more apparent and are easier to scan. Simplifying an interface isn’t easy though, especially if you don’t want to limit the app’s functionality.

When you click on the search link in Kontain’s search box, a similar drop-down menu appears. So, if you need to narrow your search, you can use the menu to select the sort of content you’re looking for. Tucking these options away simplifies the search box.

One way of making things simpler is to hide or conceal advanced functionality. Find out the most commonly used functions of your interface and tuck away the rest. You can do this with pop-up menus and controls, which are very common on desktop software. For example, if your search bar has advanced filters, put them away in a special drop-down menu at the end. If users need those filters, they can enable them with just a couple of clicks. Deciding what to keep and what to conceal isn’t a simple task, though, and will depend on how important and how frequently used each of the controls is.

When you click on the search link in CollabFinder, you aren’t taken to a different page. Instead, the search box controls drop down, allowing you to begin your search straight away.

2. Specialized controls

It’s important to select the right interface controls for the situation. Different situations can be handled in different ways, and certain controls are better at their intended task than others.

Backpack has a compact calendar date and time picker for selecting a reminder date.

For example, you can select a date by using drop-down lists for day, month and year. Drop-downs aren’t very efficient, however, when compared to a calendar picker, where you can click directly on a day you want. Calendar pickers also help you see the days, weeks and months (and especially workdays and weekends) more easily and so allow you to make a more informed decision more quickly than you would with a simple drop-down list.

MyBankTracker’s APY calculator features easy-to-use slider controls for quickly trying out different projections.

Another good example of this are sliders. Yes, you can always input a number manually, but for certain situations, slider controls do a much better job. Not only are they easy to use — just click and drag — but you can also see how your selection fits between the minimum and maximum of an available range.

3. Disable pressed buttons

One of the problems Web applications encounters with forms is the submission process. With very simple forms, if you click the “Submit” button twice or more very quickly, the form will be submitted two or more times. This is obviously problematic because it will create duplicates of the same item. Preventing duplicate submissions isn’t very hard, and it is essential to do this for most Web apps.

There are two tiers to this safeguard: client-side and server-side. We won’t go through the server-side safeguard here because this will vary depending on the programming language you use and your back-end architecture. What you should essentially do is put in a check to ensure during the processing stage that whatever is being submitted is not a duplicate, and if it is to block it.

Yammer disables the “Update” button while your new message is being submitted.

The client-side stage is much simpler. All you have to do is disable the “Submit” button the very moment it is clicked. The easiest way to do this is to add a piece of JavaScript to the “Submit” button like this:

<input type=”submit” value=”Submit” onclick=”this.disabled=true” />

Of course, we would advise you to also implement server-side checks to be sure that duplicates don’t get through.

4. Shadows around modal windows

Drop shadows around pop-up menus and windows aren’t just eye candy. They help the menu or window stand out from the background by reinforcing its dimensions. They also block out the noise of the content beneath the window by darkening the area around it with a shadow.

This technique hat its roots in traditional desktop applications and helps the user to focus his/her attention on the appearing window. Since most modal windows aren’t as easy to distinguish from the main content as in desktop applications, shadows help them to appear closer to readers, because the window appears to be three-dimensional and lay above the rest of the page.

Digg’s log-in window has a thick shadow around it to block out the noise of the page beneath.

To achieve this effect, designers often create a container with a transparent PNG-image as background and place the content inside the container – with equidistant padding on all sides of the box. Another option is to use a background image with transparent borders and position the content box within this box using absolute positioning. This is exactly what Digg does — this is the image they are using (dialog.png). And this is the markup and CSS-style they are using:

(X)HTML:

<div id=”container”> <div style=”display: block; top: 236px; opacity: 1;” class=”dialog”> <div class=”body”> <div class=”content”> … </div> </div> </div> </div>

CSS:

.dialog { position: absolute; left: 50%; margin-left: -315px; width: 630px; z-index: 100001; } .dialog .body { background: url(/img/dialog.png) 0 0; /* semi-transparent .png image */ padding: 40px 13px 10px 40px; }

Alternatively, you can also use JavaScript-based lightboxes or drop shadows using CSS3-attributes we’ve described earlier, but you need to be aware that Internet Explorer won’t support them.

Basecamp’s project switcher window has a large soft drop shadow that helps the menu area stand out.

5. Empty states that tell you what to do

When you’re designing a Web application, it’s important not only to test it with sample data, but to ensure that it looks good and is helpful when there is nothing there yet. You should design the empty states.

When there is no information for a page or query yet, a helpful message telling the user how to start could go in that empty space. For example, a project management application’s home page may list the user’s projects, but if there are no projects yet, you could provide a link to the project creation page. Even if there is already a button to do that on the page, an extra bit of help doesn’t hurt.

Campaign Monitor points you in the right direction when you start building an email campaign.

This technique encourages users to actually try out the service and proceed directly with using the service after registration. Guiding the user through single steps of the application may help him or her to understand what advantages the application offers and if it’s useful or not. It is also important to present most important options to the users and only them — it doesn’t make sense to overflood them with numerous options. Keep in mind that users usually want to get a more or less concrete idea of what is offered to them, but they don’t want to jump into details — they have neither time nor interest in it.

Using empty states to motivate users and animate actions, you can significantly reduce the amount of “drop-outs” and help your potential clients to gain a better understanding of how the system works.

Wufoo’s forms page has a large, friendly message inviting you to create a new form if none yet exist.

6. Pressed button states

Many Web applications have custom-styled buttons. These are anchors or input buttons that have custom images assigned as their backgrounds. The default input buttons may not be suitable in some cases, and the text links are sometimes too subtle. The challenge is, when you make your links look like buttons, they should act like buttons — and this includes having a “pressed” look when the user clicks on them.

This isn’t a purely visual tweak. Giving instant feedback to the user will make the application feel more responsive and bring the experience closer to what the user experiences on desktop applications.

You can add a pressed button state with CSS by styling the active pseudo-class of the link in question. So for example, if your anchor has the class add_task_button, you can style its active class by targeting add_task_button:active.

Buttons in Highrise actually show a pressed state when you click on them, providing the user with a satisfying responsive feel.

7. Link to the sign-up page from the log-in page

Some people who haven’t yet signed up to your application will inevitably end up on the log-in page. They likely want to try out your application but can’t find the registration page in a hurry. Perhaps they’ve tried accessing a feature that’s only available to registered users.

Don’t have a Delicious account? No problem; a sign-up link is provided on the Delicious log-in page.

Goplan has a nice colored button on the log-in page pointing to the sign-up page.

Make things easy for these folks by placing a registration link on your log-in pages. If they haven’t got an account yet, they shouldn’t have to look for a registration page. Our studies confirm: 18% have a sign-in form or a link to the sign-in form placed next to it (e.g. YouTube, Reddit, Digg, Lulu, Metacafe).

8. Context-sensitive navigation

It’s important to think about what the user expects to see and what they need in every given context. You don’t need to display the same navigation controls everywhere because users simply may not need them in every situation.

One of the best examples of context-sensitive controls is the recent change in the Microsoft Office 2007 interface, in which the default set of toolbars was replaced by ribbon controls. Each tab on the ribbon holds different controls relating to a particular activity, be it editing graphs, proofreading or simply writing. Web applications can also benefit from such context-sensitive controls because these controls help unclutter interfaces by showing only what the user needs, not everything that’s available.

Lighthouse features a familiar tabbed navigation menu; however, it also has a second level of menus right under the set of tabs. This level displays only the items associated with the active section of the website.

9. More emphasis on key functions

Not all controls hold the same importance. For example, on a screen for creating a new item, you may have two buttons: “Create” and “Cancel.” The “Create” link is more important because that’s what the user will be doing most of the time. Only rarely will they need to cancel the screen. So if these controls are located side by side, you may not want to give both the same emphasis.

The “Create ticket” button in Lighthouse. You can see the “cancel” link next to it, in plain text. The button not only commands more importance but also has a larger clickable area and is easier to spot because of its frame.

To shift emphasis to the “Create” link, we can simply use different styles or types of controls. Some applications use the form input button for the create action, and have the cancel action as a text anchor. This not only gives the create button more clickable area, it also helps to grab the users gaze better when they’re looking for it.

10. Embedded video

While pictures and text are a great way to communicate and teach your users about your app’s features, video can be an even better alternative if you have the resources to produce it. Video has been gaining popularity on the Web in recent years. For Web apps, videos are generally used on the marketing website as a kind of screencast to show off a product’s features; however, this isn’t the only way to use video.

GoodBarry features a video screencast on its front page showing off the product. It also uses screencasts inside the app to teach people on how to get started.

MailChimp includes tutorial videos right on the admin panel to help out new users.

Some Web apps use video inside the application itself to teach users how to use certain features. Video is a fantastic way to quickly demonstrate how your product can be used, because it is easier to consume than a page of text, and it is also much clearer because the viewer can see exactly what to do.

It’s been a long time coming, but Apple has finally secured the deals to sell the entire iTunes music catalogue without DRM and the entire music library is finally available in the 256kbps AAC format that has been known as iTunes Plus until now.

Starting in April, iTunes will also be introducing variable pricing for songs – 69¢, 99¢ and $1.29 depending on the prices set by the record labels. Despite the momentum that the likes of Amazon and other DRM-free vendors such as 7Digital have been gaining in the last few months, the iTunes store remains the largest (and most popular) online music store.

If you’re already sunk a fair amount of money in the iTunes store, Apple will allow you to upgrade your entire library to the DRM-free format – for 30¢ per song or 25% of the album price.

Read the complete article here.

Web design isn’t art. It involves a whole collection of different skills — from copywriting and typography to layout and art — all fused together to create an interface that not only features a pleasant aesthetic but that communicates function and facilitates easy access to its content.

But in order to combine all these elements of Web design together and achieve successful results you must have a clear direction, a direction that will guide each and every aspect of your design towards common goals. You must think strategically.

What is strategic design?

Strategic design is the fusion of your organizational goals with every aspect of your design process. You aren’t simply designing a user interface that looks good and is usable and accessible. You’re designing an interface that will help you accomplish your organization’s objectives.

There are many websites out there that look fantastic and sport the latest trends in design yet often fail miserably in their intended function. Design trends are, of course, important because they give you fresh inspiration and new techniques, but the implementation of those techniques and styles needs to be intelligent and focused. For example, a blog isn’t a marketing brochure; you should focus on usability and readability rather than style. Similarly, a promotional website for a computer game should feature graphics and styles that portray a specific feel and style; the aesthetic is very important here.

When the designer simply implements a look and feel that is fashionable at the moment (think Web 2.0 trends) without any thought of how they fit the function of the website or the business behind it, the end result is unlikely to be very effective.

Web design is all about crafting an interface that communicates function, is usable and accessible and exudes the right emotion and feeling. Effective Web design needs all of these elements to be in tune with the goals of your website and in sync with the organizational objectives behind the website. Strategic design is all about identifying those goals and using them to guide your design.

Implementing Strategic Design

Let’s take a look at how we can use six steps to think strategically about a Web design project:

1. Establish your goals

One of the first things you need to do before starting work on a Web design project is to be clear about your client or organization’s goals. What are you trying to achieve with the new website or redesign? What is the website’s main purpose? Ask your client, your manager or yourself what those are. If they or you don’t know yet, then they should be discussed and agreed upon. A clear direction is essential if you want your design to have a purpose.

Remember that a website isn’t a piece of art; it’s an interface that serves a function. That function may be to sell products, to deliver informational content, to entertain, to inform or to provide access to a service. Whatever that function is, your design must focus on fulfilling it. Goals are also important, especially if you’re doing a redesign. Ask why you are doing the redesign: are you looking to grow the number of sign-ups, decrease the bounce rate or maybe increase user participation?

Take a look at the design of the New York Times website above. Its function is to deliver informational content. The minimalist interface serves this function beautifully by fading into the background.

In contrast to the New York Times, AdaptD is a Web design studio, so the goal is not to deliver a lot of content but to impress visitors with its design, showcase a gallery and advertise the company’s services. The visuals are very important here, and AdaptD delivers a browsing experience with beautiful imagery and strong colors.

2. Identify your audience

Who your audience is will play a big role in how your website should look and function. There are many demographics here that can influence your design, ones like age, gender, profession and technical competency. A computer game website for a younger audience needs a different style than that of a serious business journal. Usability should play a bigger role for older and less technically savvy audiences.

Who your audience is will not only influence the general aesthetic of the website but will also determine a lot of smaller details, like font sizes, so make sure you’re clear about who will be using your website.

This is the unsuccessful jQuery rock-star redesign. The designer went too far in trying to create excitement and so failed to cater to the more serious, techy audience. Since then, the rock-star graphic has been replaced with a more conservative look.

Disney’s target audience is kids. The intent is to entertain and involve this young audience, and the design does it by wrapping the content in a fun, colorful interface with a lot of visual and interactive elements.

3. Determine your brand image

A lot of designers tend to get a little too inspired by the latest trends and then implement them without thinking first about what sort of image they really should be conveying. Glossy buttons, gradients and reflective floors may work for some websites, but they may not be right for your brand.

Think about color. Think about the feel you want to achieve and emotions you wish to elicit. Your design should embody the personality and character of your brand. Everything has a brand; even if you don’t sell a product or service — for example, if you run a blog — your website still has a certain feel that makes an impression on your visitors. Decide what that impression should be.

Carbonica is a website aimed at helping people reduce their carbon emissions. The environmentally friendly image of the website is crafted using a lot of recycled paper images and textures, as well as earthy green and brown tones.

Restaurantica is a restaurant reviews website. Its design illustrates this by taking on the look and feel of an actual menu you would see in a restaurant.

4. Goal-driven design direction

You’ve established the purpose of your website, set some goals you want to achieve, identified your audience and determined your brand image. You can now proceed to implement it. So how do you make design decisions sync with your strategy? Let me illustrate this with a likely example.

Suppose your main objective is to increase the number of subscribers to your Web service. How can your design help accomplish this goal? I can see at least three things here that will make a difference:

• Make the “About” snippet on your landing page as clear and concise as possible. Your visitors must not have any confusion about the function of your website.
• Use color and contrast to make the registration button or link stand out. If people can’t find it, then you won’t get many sign-ups.
• Streamline the registration process by removing unnecessary and optional elements; people can fill those out later. If the form looks long, people may be put off of filling it in.

These are just three ways you can lead your design towards accomplishing the goal of increasing the number of sign-ups to your service. Your goals may vary, but the strategy is the same: shape and focus all the design elements towards meeting those goals.

The same strategy applies to your brand and audience: design the aesthetic that best suits it. If your website’s focus is entertainment, then create an “experience.” You are free to use a lot of color and imagery to shape that experience. On the other hand, if you’re designing a website that is focused on information consumption, for example, a blog or a magazine, then focus on usability and readability. Create an interface that fades away and doesn’t distract the user from accessing the content.

Stubmatic is an online box-office application. Their external website has two purposes: explain what the service does and get people to sign up. New visitors may only remain on your website for a few seconds, so if you don’t want to lose them you must be concise. You can do this by:

• Using large imagery and diagrams to illustrate the function of your product or service.
• Showing screenshots of your application. People will want to see what it looks like before they commit to a download or sign up.
• Providing a tour, using descriptive examples of how your service can help them solve a problem. Show a video if you can; the less effort people need to make to understand how your app works the better.
• Having the sign-up link accessible from all pages.

To succeed, the website must make the best use of the very limited amount of attention visitors will be giving it by not only informing but educating them about what your product does, and selling the benefits it provides. Stubmatic uses design elements effectively to pursue those goals.

TechCrunch is one of the more popular tech blogs. Its new design removes every single unnecessary graphical element from the page. What’s left is just the content, advertising and navigation. Subtle lines and grey shades give the page structure, yet the interface is almost invisible and places content straight into the front row. For a blog that posts several new articles a day, this format is ideal because it facilitates fast and easy access to the content.

5. Measure results

Once you’ve designed and deployed your website, it’s time to measure your success. This is just as important as the first two steps because until you test how well your design performs, you won’t know whether or not it is effective in fulfilling your goals.

If your goal is to increase the number of sign-ups to your service, measure it and see if your changes are making a positive impact. If you want to increase the number of subscribers to your blog, check your RSS stats. If you want to increase user involvement, see if you get more comments or more forum posts or whatever else is relevant in your context.

You can, of course, also ask people for their feedback, and this is a very good way to check if you’re on the right track. Be careful though not to implement every suggestion people make. Everyone has different tastes and wants, so everyone is going to have a different opinion about what your website should look like. If you do collect feedback, look for patterns; see if there are common issues that crop up and deal with those.

Measuring various website metrics is a whole science unto itself and is beyond the scope of this article. But however in-depth your analytics are at this stage doesn’t really matter; the important thing is that at the very least you have some way of measuring your key objectives. You can use this information to see if you’re moving in the right direction with your design and with any future changes you or your client make.

Even if you’re on a tight budget, you can use free tools like Google Analytics to get a lot of data on how your website is being used, including overlays of your pages to see what links people click on most as well as the ability to track conversion funnels.

6. Kaizen

There is a Japanese philosophy called “Kaizen,” which focuses on continuous improvement using small steps. When you work on your website, you should be thinking of Kaizen because the version you’ve just published is not the final version. There doesn’t even have to be a final version.

You can always make improvements, and the very nature of a website will allow you to introduce these at any time. This is because a website isn’t a magazine that you print and sell: once a magazine copy is out of your hands, you cannot make any changes or fix any spelling mistakes or errors. A website, however, sits on your server: if you find a mistake, you can fix it right away. In the same vein, you can introduce gradual improvements and updates to make your website more effective in serving its function.

Using the results of your measurements, you can identify problem areas. Perhaps your visitors cannot find the RSS feed link, or your bounce rate is too high or an important page on your website isn’t getting enough visits. Whatever the problem is, there will always be a way to improve things.

Conclusion

The main gist of strategic design is simply common sense: you’re making something for a specific purpose, so of course it should fulfill that purpose through its design. But it is actually very easy to lose track of your goals and end up with something that is beautiful but ultimately doesn’t work in its context. It’s very easy to fall into the trap of implementing the latest design trends just because they look attractive or shaping a section of your website to resemble another website that you really like without first thinking about why you are doing it or how it fits in with the purpose of your project.

Avoid falling into these traps by thinking through every design decision you make. Why is this button this color? Why are we using tabs? Why should we use icons here? Once you get into the habit of questioning your every design decision, the whole process will become much more focused. Think about the product or organization you’re representing. Think about the target audience and your brand. What will work in this context? What is expected? How can you use design to best fulfill the website’s purpose? Don’t just build a beautiful website: make a website that really works.

About the author

Dmitry Fadeyev is the founder of the Usability Post blog, where you can read his thoughts on good design and usability. (al)

The purpose of this change is to make it so you can all get your grades back on a more timely basis.  However, it also means that I will be getting more strict about assignments and quizzes.  I hope that between eCompanion and Mobimeet you’ll be able to get a complete resource for both classes.

One final note before the quarter begins – using any of the older editions of the textbooks is perfectly fine for both classes (well, really the Program Logic class in particular) so shop out on half.com or Amazon.  If you can’t get it right away, I will post questions taken from the textbook on eCompanion but you do need to get the textbooks.

Automattic, the company behind the popular WordPress blog publishing software has acquired blog commenting service Intense Debate. [We've]
covered Intense Debate in the past. The service provides web publishers a replacement for the default comments systems supplied by WordPress, Blogger, and Moveable Type and other blog platforms. By installing the plugin, you get threaded comments, reputations, and other advanced features. And readers can track their own comments and those left by others across any blogs or web sites that use Intense Debate. Intense Debate will continue to be available for use on blog platforms besides WordPress, but Automattic plans to add some features, like threaded comments to WordPress 2.7, which will be the company’s next major release.

This can’t come as good news for Disqus, another company that provides enhanced commenting features for bloggers. While Disqus has gotten a lot of good press over the last year, and has rolled out an impressive suite of blog comment management features, an awful lot of blogs are powered by WordPress. And pretty soon most of those blogs will have quick and easy access to Intense Debate’s features, giving bloggers and blog commentors one less reason to sign up for another blog commenting service.

[more...truncated cuz it wasn't that noteworthy]

For the most part, portals have kind of gone the way of the wind.  The only big competitors in the space (even MSN seems to be being overtaken by Live) are barely hanging on with the proliferation of all sorts of social networks from wikis to microblogs to blogs and mapping systems and mashups and blah blah blah.  But lets face it – the fact is that portals do something that few other sites can do, and as a testament to Yahoo’s continued efforts to delivering it – it continues to thrive. 

And one nice thing for Yahoo is that its customers are loyal.  I am not one to use portal sites.  I like most quasi-techs use Google to search, Live services for some communications, and a host of RSS aggregations for news, microblogs for fun, wikis for info and so on.  But I still use Yahoo for all my domain registration because their control panel is just about the easiest to use, and frankly because I have a weird sense of trust in Yahoo, probably not the least of reasons being that it’s survived for so damn long and strived to improve its services offerings over and over.

You’ve got to admit – look at the task at hand – what an enormous pain in the ass.  Back in 1998 I did some freelance consulting for Yupi, a Spanish-language portal eventually acquired by MSN.  Even in its infancy, the architecture was enormous and trying to wrap ones head around the breadth of information was unbelievably tough.  Of course back then we hadn’t begun to scratch the surface into the power of tagging (meta tags were still king), but even then, I doubt it would have made the job easier.

I have to admit that I’ve always felt that Yahoo does a pretty darn good job of piecing together their homepage.  I can’t quite always say the same for some of the divisions, but definitely the homepage does great for driving the ship.  Check it out,

1. Proper use of <h#> tags
Many themes I’ve looked at do not use <h1>, <h2> and so forth properly.  Remember that the search engines (and POSH) dictate that the header tags place emphasis on specific information (which should include things like the title, the date of publication or the author).  Comb through the single post and main index templates to make sure there is consistent use of both <h1> and <h2> tags (at the very least, and preferably <h3> as well) and adjust the CSS to get the look and feel you want instead of relying on class-based <div> markup.

2. Too many links on the index page
Two problems here – first, the increase in links (past 40) decreases or dilutes the value of importance placed on the page.  At the very least, push the most important posts on the front page and consider whether or not you need the others.  Second, why are you sending people elsewhere in the first place?  Sure your friends might run a great blog but do you really need 100 listings in your blogroll?  Consider that external links in your posts should not go past 2 each and that you should keep the total number of links as close to 40 as possible.

3. Bad keyword choices
Especially on the main index page, it is critical that you consider your choice of keywords and mold your page to the proper density.  Use a free tool like Google’s Keyword Tool to find ones if you’re unfamiliar with structuring keywords.

4. Alt and title text
Always, always, always include alt attribute text on images and preferably include a title attribute on links and lists so that search engines know what tags to associate with the image.

5. Unique keywords
Every page in the site should have a) unique titles and b) different keywords.  You may even opt to remove the name of your blog from the page title because in the end it’s just a vanity thing isn’t it?  There are several plugins that can help you do this by converting the text and tags on the posts into the keywords and description <meta> elements.

6. Fix your markup
Bad markup is, well, just bad.  This goes for both the HTML as well as the RSS feeds.  By default (the newer versions of) WordPress provides at least 4 places to get the feeds from: www.domain.com/feed/, www.domain.com/comments/feed/, www.domain.com/wp-rss.php, and www.domain.com/wp-rss2.php and you should provide appropriate links to them as needed.

Now many of you (all 5 reading this post) are probably asking why I don’t even follow these rules necessarily and the fact of the matter is that for this blog, I don’t personally care.  I publish this for information purposes and largely for my students, not really for the public at large.  Should I teach by example, sure I should; but there are many other ways to get this information across, so I do as I wish.

These are the elements of functional design, the process of responding to the needs or desires of the people who will use an item in a way that allows their needs or desires to be met. Functional design is both an outcome and a process. As an outcome, it describes products that work well to perform their assigned tasks; as a process, functional design is a set of practices guided by the principles that produce that positive outcome.

I’m not going to bother repeating the article here – please take the time to jump over to SM and read it.  However, here’s a quick synopsis:

1. Consider the product’s goal
Determine that one primary goal of the site and make sure that everything you do revolves around that fundamental concept.  Every addition you make, every tool you provide, every piece of text you write should be dedicated to that goal.

2. Consider who will be using it
As JJG proposes, identifying the target audience can be a critical factor simply because most designers either fail to take it into consideration or misjudge it.  Audiences vary and so do their wants, needs, and abilities.  Cater to that need: a product has to work equally for all its potential users if it’s to accomplish its goal.

3. Consider what your audience intends to do with it
What your audience does may not be what you do.  YOU are not the audience, your users are.  Every user comes with intention, learn what those intentions might be.

4. Is it clear how to use it?
We designer/developers have a tendency to go beserk with our functionality.  Don’t.  "Clarity is the key to functional design".

5. How does your user know it’s working?
Provide feedback…it’s the only way your user knows that he or she is using it right.  Provide visual cues, highlight the necessary parts.

6. Is it engaging to your users?
One of JJGs two tenets and the one that I believe is fundamental to all things Web – is it engaging.  I harp on it nearly every quarter but I don’t think many people really see it.  Example: four times this week alone I’ve seen references to Blackberry’s as engaging – owners cannot seem to put them down or stop fiddling with them.  Whether its the feel, the interface, the haptics or the information it provides, there is definitively something engaging about them.

7. How does it handle mistakes?
JJG makes a big point of discussing error handling.  We as dev-igners pretty much think we never make mistakes.  Just because you can run through your web site and never encounter an error doesn’t mean your user won’t.  Users make mistakes.  Or more succinctly, your user will not do the same things you do.  How does the site correct, adjust or respond to errors?

Forum Post: design or develop first?

Q: "just wondering if I should go about designing my site first before implementing any back end capabilities. i like to keep things organized and plan ahead. It would seem to make sense to create the static site first but i am somewhat unsure if I were to design first and end up redesigning to fit everything I plan on adding later, in terms of dynamic content."

R: "The approach you take probably depends on whether you are more of a designer or more a developer. A developer would tend to do the back end first without worrying too much about exactly how the page will look until after they know that it all functions properly. A designer would probably get the page looking exactly how they want and then worry about how to get it to function correctly. If you have separate people performing each of these tasks then all that needs to be done first is to define the interface between the two so that the two almost separate parts can be done separately in the knowledge that they will fit together once both are done."

Article: HTML or XHTML: Does It Really Matter? (excerpted, July 9, 2008 by James Edwards)

HTML was originally conceived as a semantic language, in which elements should describe only the meaning of their content, not the presentation. However, this good intention didn’t hold up very long.

In 1997, the HTML 4.0 specification was published, and although it continued to include presentational markup that had been instigated directly by vendors, it also began a push to clean up HTML, calling some markup “deprecated” and suggesting that it not be used.

XHTML 1.0 came along in 2000 as formalization of HTML 4 into XML. XML itself had been standardized in 1998 as a general specification for defining markup languages, and was a stricter and simpler offshoot of SGML, the Standard Generalized Markup Language from which HTML itself was originally derived.

XHTML is still worth using, because it’s a transitional standard that moves us towards a pure-XML Web. XML is inherently better than SGML, because it’s simpler and stricter, and much easier to parse (once you’ve understood its rules). I don’t know from where we’ve adopted the idea that we should be forgiving of markup errors, but I don’t share that view.

And some other choice reads:

• Custom Web Fonts: Pick Your Poison by Kevin Yank
• Fancy Form Design Using CSS by Cameron Adams
• 10 Tips for Being a Greener Web Designer by Matthew Magain

TIOBE Index, July 2008 by TIOBE bv

Position		Delta	Language	Ratings Jul 2008	Delta Jul 2007	Status
Jul 2008	Jul 2007
1	1		Java	21.345%	+0.33%	A
2	2		C	15.945%	-0.42%	A
3	3		C++	10.693%	+0.19%	A
4	4		(Visual) Basic	10.447%	+0.72%	A
5	5		PHP	9.525%	+0.87%	A
6	6		Perl	5.131%	-0.20%	A
7	8		Python	4.973%	+1.95%	A
8	7		C#	4.000%	+0.29%	A
9	9		JavaScript	2.757%	+0.24%	A
10	10		Ruby	2.735%	+0.64%	A

(For my students) In case you’re wondering why HTML is not included in this list, the definition used by the index is:

A language is considered a programming language if it is Turing complete. As a consequence, HTML and XML are not considered programming languages. This also holds for data query language SQL. SQL is not a programming language because it is, for instance, impossible to write an infinite loop in it. On the other hand, SQL extensions PL/SQL and Transact-SQL are programming languages. ASP and ASP.NET are also not programming languages because they make use of other languages such as JavaScript and VBScript or .NET compatible languages. The same is true for frameworks such as Ruby on Rails, ColdFusion, Cocoa, and technologies such as AJAX. Finally, we have also excluded assembly languages, although Turing complete, because they have a very different nature.

And finally, for those of you in my weekend classes…yes, it’s 2 hours after class and yes, I am still up.  Good night.

This morning I spent 90 minutes in line with Jennifer waiting to buy her 3G.  I’m not quite sure what the fascination is with actually waiting in line that long (more than 7 hours all in all) to get one, but I’ll give her credit for persevering that long.  Now on the other hand, the Touch Pro will reportedly be out in September, so maybe I’ll eat my own words.  Unless I break down and import one instead.

I sat through an enlightening department meeting today in which the issue of, amongst other things, design came up.  Without going overboard I would like to elicit a challenge to all WDIM students this quarter not only to complete the work they are assigned but to challenge themselves one step further and "polish" your design. 

Mr. Anderson had an interesting point – a lot of you don’t seem to know where to begin and he gave out a lot of recommendations that I strongly agree with: stepping away from the computer and drawing by hand, layering screencaps of choice sites on top of each other in Photoshop and deconstructing or morphing them together, cutting clips from magazines and arranging them together like a scrapbook.  The point being that despite everyone’s creative talents, sometimes finding direction is the hardest part.  Take a step to be different.

From my end I would like to see more polish.  Hopefully we’ll be able to incorporate a few good example of what we mean by this in IMD345 (UCD3) this quarter.  Or if you need some examples, pick up Web Designer Magazine (a glossy, expensive British mag – find it at Barnes & Noble) and check out some of the great design coming out of the UK.  Aspire to get that kind of cleanliness or artistry in your design.  By the same token, don’t lose sight of the content and functionality.

See you next week!

This article from VandelayDesign makes a pretty good point about that first impression. Of course you’ll want to make the best one possible but don’t forget that because of the plethora of choices, a lot of visitors will forget anything other than the visual in a web design – throw some makeup and a new dress on it and frequently a visitor will not even know it was the same skeleton underneath. Nonetheless, it’s those fundamentals a web site still needs that counts and this post makes a clear and concise listing of them.

And for those of you too impatient to read the whole thing:

1. Load Times
2. Error Messages
3. Colors
4. Logo/Branding
5. Header Images
6. Typography
7. Layout
8. Advertisments
9. (Your) Reputation
10. Ease of Navigation
11. Clarity of Purpose
12. Unprofessional Items
13. Quality of Images and Photos
14. Accessibility
15. Popups and Popunders
16. Video and Audio
17. Associations
18. Quality of Content
19. Tone
20. Number of Comments and Trackbacks
21. Flash Intros

[via VandelayDesign]

Read the post “The Paper Version of the Web” and see the pics at deeplinking.net.

Dan Catt’s concept sketch for Flickr Places

“Lately, I have taken interest in discussing methods of creating sexy stylesheets. While CSS can be used to create sexy websites, writing CSS can actually be an artform by itself. The way in which CSS is created, structured, and maintained can be a thing of beauty.

So how does one create sexy stylesheets? What characteristics would your stylesheets have?

A few months ago, I had the opportunity to present on this very topic at Web Visions 2007 conference in Portland, Oregon. In preparing my presentation, I surveyed twelve people who work in web design and development. The results of this survey, combined with my own work experiences helped me to compile a list of essentials to remember when creating stylesheets.”

01. Keep CSS out of the markup.

Linking and/or importing stylesheets would seem to be a no-brainer to the intermediate or advanced CSS developer, but I want to stress why this is so important. I’ve seen many sites start out with clean, well-organized CSS files but then get littered as time goes by, with embedded or even inline styles (due to fast updates needed on short deadlines, or possibly sometimes even pure laziness).

Imagine that you are working on an extremely large-scale website with hundreds of ways content can appear. You have fast deadlines, so you opt for making “quick fixes” or updates by using embedded or inline CSS. Years go by, and this habit continues… Until one day you’re told the site is being completely redesigned (but all the content is to remain the same), and you only have a week to build it (including testing).

Normally, this would have been a fairly simple task of updating the stylesheet(s). Except you have years worth of “quick fixes” scattered throughout the site — and no way to remember where they all are. So now you have to either a) find a way to clean everything up and get everything styled for the redesign in one week (Good luck!), or b) find a new job.

Don’t make your job harder than it really has to be. Linking and/or importing your stylesheets is not optional. Create it clean, keep it clean, and you’ll be much happier.

NOTE: Be careful of adding too many linked and/or imported stylesheets in your markup. If you’re tempted to create a new stylesheet every time you make an update or add new content, you’re not doing yourself any favors. Excessive linking and/or importing can make bug-fixing difficult, and make your styles harder to maintain. It is understandable to want separate stylesheets for different sections or components for larger websites (I’ll go more into that later). Just be careful that you don’t go overboard.

It is worth mentioning that linking too many stylesheets requires additional HTTP requests, which can add up, and potentially hinder performance. Also, Microsoft Internet Explorer 6 has a limit of 32 linked stylesheets.

02. Semantics is not just a buzz word.

You know I have to bring it up; semantics are your best friend. Beyond choosing the most appropriate, meaningful elements to describe your content, make sure also that you’re choosing semantic class and ID attribute values. Besides being the “right thing to do,” it really does make your life easier (and it makes the lives of your fellow team members easier too– if you working as part of a team). Take a look at the following rule:

.l13k { color: #369; }

If you were new to the job, and you saw that in the CSS file, are you going to know right away what that class is for? Most likely not. This class name could be an abbreviation for something, but there’s no real way you can tell right off the bat. Alternatively, maybe you put it there, so you know what it means, right? Today. But will you know what it means three years from now?

Now, let’s take a look at this rule:

.left-blue { color: #369; }

You might immediately know what purpose this class selector serves as you know exactly where the left-side blue module appears. So it would appear that this works. Until along comes that redesign you have to build in a week, as I mentioned earlier. In the redesign, this module is now to be positioned on the right, and colored red. The class attribute values no longer makes any sense, so now you have to either change all your attribute values, or leave it as it is (which could lead to mass confusion).

It is always best to refrain from using colors (either the color name or its hex value) or width/height dimensions in your class attribute values. You should also avoid any attribute values that are presentational (such as “box”).Presentational attributes defeat the purpose of separating presentation from content.

Finally, let’s look at this more appropriately named rule:

.product-description { color: #369; }

Here you can see that the rule styles product descriptions, no matter how many times your design changes. Clarity is a beautiful, beautiful thing.

03. Take advantage of commenting.

Commenting your CSS files can be a great deal of help to you and others during development if you use comments in creative and meaningful ways. At the most basic level comments provide little reminders why a certain rule is used. But you can use comments to really help improve organization and efficiency.

Reminders and notes

The common approach for commenting, leaving reminders and notes for yourself and other developers can help avoid confusion later. Keep these brief and simple. For example:

/* Turn off borders for linked images */
img { border: 0; }

Time stamp and signature

Some designers and developers also note the date and time that the CSS file was last updated, along with their name or initials. This information can provide a quick indicator of who to contact, as well as how up-to-date the file is.

/* Sushimonster Typography Styles
   Updated: Thu 10.18.07 @ 5:15 p.m.
   Author:     Jina Bolton
   ----------------------------------------------------*/

Depending on the project, this can be a good idea, particularly if you are working on a team. Keep in mind that some organizations require leaving this type of information out (some companies prefer to keep names and dates out of files), so it is best to find out if there is a mandate on this sort of thing.

Organization

It’s a good idea to use comments to indicate the different sections within a CSS file. For example, if all header styles are grouped together, you can use a comment to section these styles off from the next section’s styles:

/* HEADER
   ----------------------------------------------------*/

I’ll go more into this a little later, when discussing “Separating style types.”

Comment flagging

If you have your CSS file organized into sections as I described above, comment flagging can also be useful to make it easier using FIND to skip down or up to the parts of the file you want to see. You can use a character (such as an equal sign [=]), along with a keyword (typically the name of the section, such as “HEADER”) to provide “anchors” in your CSS file:

/* =HEADER
   ----------------------------------------------------*/

This is particularly useful in long and complex stylesheets. You can read more about this at Stop Design.

Reference

A less common, but nonetheless useful approach is to use comments as reference guide. One example of this might be to include a color guide as you can see in Steve Smith’s CSS file:

/* COLORS
   Body Background:       #2F2C22
   Main Text:             #B3A576
   Links:                 #9C6D25
   Dark Brown Border:     #222019
   Green Headline:        #958944
*/

You should place this guide at the top of your CSS file to help you remember what color values you use throughout your site. Another example is of an index-like approach. Here you can define different sections so that you can jump down to them (perhaps by using comment flagging). Here’s one example:

/* GENERIC
   HEADER
   SIDEBAR
   FORMS
   TABLES
   FOOTER
*/

/* =GENERIC
   ----------------------------------------------------*/

04. Know when to use conditional comments or hacks.

There are many articles regarding the problem with hacks, and why Conditional Comments are a better way to handle Internet Explorer issues. Then there are articles that say otherwise. While I agree that Conditional Comments can be a much better solution than littering your CSS file with hacks, only recently have I come to realize there are instances where they are actually not the most appropriate solution.

Imagine that you want to set a minimum height for an element. The IE6 developers did not implement min-height, so you know that you can use height, which will be treated the same way. Does it make sense to create a whole new stylesheet, and inject it by way of Conditional Comments in your markup, when all you need is this one rule? Would it make better sense to keep the min-height and height rules together, and opt for a small “hack” within the same CSS file? In this case, I would consider it less efficient to use Conditional Comments.

Another thing to consider: if you have multiple places that your styles are located, using multiple CSS files and Conditional Comments can make your debugging process more difficult. Also, if you need to alter something (perhaps the min-height value in the above-mentioned scenario), you have to open more than one file to make this change. In many cases, this may not be such a big deal for you, but imagine if you have something defined in your main CSS file, and then redefined in 3 different IE stylesheets. That could turn out to be a hassle later down the road, especially if another developer making the edit doesn’t realize that these overrides exist.

If you do use Conditional Comments, I recommend leaving a comment in your main stylesheet letting you or a fellow developer know that an IE-specific rule exists. That way when you have to edit a height or something of that nature, you know that you have more than one file to open.

As always, if you do use hack, remember that browser updates can change what works later down the road, and the hack you use now may not work later versions.

05. Organizing selectors and declarations

Always, always keep your CSS clean and organized. I prefer organizing my selectors by style groups:

• reset styles
• typography styles
• layout styles (header, content, footer, etc.)
• module or widget styles
• etc.

Then, within each of those groups, I organize selectors by DOM hierarchy (working down the page, from the outside in):

• any parent styles (containing elements, working outside-in)
• block-level element styles (paragraphs, lists, etc.)
• inline element styles (links, abbreviations, etc.)
• etc.

Then within those, I work by element types:

• paragraphs
• blockquotes
• addresses
• lists
• forms
• tables
• etc.

Finally, I prefer to organize my CSS declarations by style type:

• positioning (with coordinates) styles
• float/clear styles
• display/visibility styles
• spacing (margin, padding, border) styles
• dimensions (width, height) styles
• typography-related (line-height, color, etc.) styles
• miscellaneous (list-style, cursors, etc.) styles

Some people like to organize declarations alphabetically. It doesn’t make sense to me, but it might make perfect sense to you. Whichever method you choose, stick with it, and be consistent.

06. Creating a framework

When it comes to developing CSS, If you find yourself doing the same things repeatedly, it is a good idea to consider creating a library or framework. A framework can be made up of a group of stylesheets that act as a foundation for your site, and help speed up your development time. Typical stylesheets you may find in your framework might include:

• screen.css – A screen CSS file can either have all your styles you want to be used for on screen, and/or can import additional styles, such as the following:
  • reset.css – A reset CSS file can be used to “reset” all the default browser styling, which can help make it easier to achieve cross-browser compatibility.
  • typography.css – A typography CSS file can define your typefaces, sizes, leading, kerning, and possibly even color.
  • grid.css – A grid CSS file can have your layout structure (and act as the wireframe of your site, by defining the basic header, footer, and column set up).
• print.css – A print CSS file would include your styles you want to be used when the page is printed.

One example of a framework is the Blueprint framework put together by Olav Bjørkøy (which based itself off of work developed by authors including Jeff Croft and Eric Meyer). Another popular framework can be found at the Yahoo! User Interface Library. Many developers do feel that these pre-built frameworks contain markup and CSS that are a bit “bloated” and also that they contain presentational class attribute names.

NOTE: As I was writing this article in its draft stages, Jeff Croft released the post What’s not to love about CSS frameworks?, in which he mentions in the comments he was told that people think I am strongly against frameworks. I’m not sure where this came from, but as I stated in my response, I am not against CSS frameworks, and am very much for them.

For the best results, I recommend that you create your own framework that works best for you or your organization.

07. Balance readability and optimization.

Styles in formatting vary from developer to developer. Some developers use formatting styles that offer great readability, and then optimize the files (removing comments, spaces, tabs, carriage returns, etc.) before pushing the file live. This is a great technique and one I would recommend (done carefully). However, if you are somehow in a situation where you can’t really go through those steps, try to find a style that balances readability and optimization. Steve Smith has a great suggestion that offers a little bit of both.

Also, consider using hyphens instead of underscores. Microformats use hyphens as a standard separator, and certain older browsers have a hard time with them. You can read more about this at Underscores in class and ID Names.

08. Master your text editor.

Just as an artist has proper tools they know well, it’s important for a designer/developer to know the tools they use well. For CSS, that would be the editor you are using.

There are many text editors to choose from: TextMate, Coda, BB Edit, TextPad, DreamWeaver, etc. I’m not here to tell you which one to pick; they all have their pros and cons, and the right editor for you is up for you to decide. However, once you have decided on a text editor, make sure you learn everything you can about it. Find out what the shortcuts are, and learn all the tips and tricks you can.

Mastering your text editor is the best way to speed up your development time, and help you be more much more efficient when creating sexy stylesheets.

09. Use version control.

Smoother maintainability is also an important part of creating sexy stylesheets. This is where version control can be your best friend. It’s not only helpful for teams, but it can be a lifesaver even for the sole designer/developer.

Some applications have built-in mechanisms for source control. DreamWeaver uses a check-in/check-out system (that can help make sure that a developer doesn’t edit a file that is already currently being edited), as well as synching capabilities (which lets you sync and merge your local files with your remote files, or vice versa). This can be very handy, but are somewhat limited.

Subversion (SVN) or Concurrent Versions System (CVS) are great tools to use for more robust management, with additional options, like being able to revert, view changes (which is extremely helpful for teams — you can track who added/edited/removed code and when they did it), and resolving conflicts. There’s a great article by Jonathan Snook, called “Hosted Subversion” you can read for more information on how to set this up quickly and easily.

10. Create and maintain a style guide.

While in some cases, a style guide is an author’s guide with grammar rules and writing standards, it can also be used to outline standards for design, development, and content. A style guide is a great way to have a reference manual that can clarify rules on typography, grid, color, image sizes, etc.

When creating a style guide, it is a great idea to provide reference for the markup and CSS. This reference can be used as a handbook for the development team and future developers. It can include defined layouts, in which you can list the different layouts that can be used, and provide the associated markup and styles.

Finally, you can also leave steps for quality assurance for developers, (such as checking validation and accessibility) to ensure the highest quality.

Conclusion

Being an expert in CSS is so much more than having advanced CSS skills (i.e.: fully understanding the cascade, the box model, and how browsers work). I encourage you to think about ways you can constantly and consistently improve maintainability and efficiency. Think beyond what is designed in the comp, even if that is all that you have been provided. Make the CSS intelligent and plan for the future. Overall elegance in workflow is essential to master.

Fortunately for most designers, the performance impact is only in extreme situations. But it’s definitely something to be aware of when writing CSS.

For the Web designer n00bs reading this: CSS selectors are names given to styles — font-size, color, background-color, etc — in internal and external style sheets that dictate a Web page’s design. By using sibling, descendant (two or more selectors) and child selectors (a selector that’s a “child” of another selector), designers can apply greater control over the CSS for their pages.

Sykes’ test uses a 20,000-item loop in an HTML document. Within that document, he uses three levels of nested “div” tags, the lowest containing a “paragraph” tag that also contains an “anchor” tag. The anchor tag is targeted and styled using the CSS.

The test also consists of three parts: class (each anchor tag gets a unique class name), descendant selectors and child selectors. The results — listed by the browsers with the largest performance hit — were as follows:

See Sykes’ graph of his results

Class

1. Firefox 3 (OSX)
2. Firefox 2 (OSX)
3. IE 7
4. IE6 and Safari (aprox. tie)

Descender selector

1. Firefox 3 (OSX) and Firefox 2 (OSX) tie
2. Safari
3. IE 7
4. IE 6

Child selector

1. Safari and Firefox 3 (OSX) tie
2. IE 6
3. Firefox 2 (OSX)
4. IE 7

Note that Opera 9 (OSX) was excluded because it couldn’t render the test page for Sykes.

Sykes does point out that this test measures the performance under extreme circumstances — there aren’t many Web pages with this amount of markup or styling. But he does caution that descender and child selectors can cause at least a slight drop in browser performance.

You can download Sykes’ tests in ZIP format.

[via DownloadSquad via comment by Dave Hyatt via ShaunInman.com]

But there are quite a few high quality typefaces that are available on most new computer systems and you can always fall back on the common ones. Of course there are options like creating images, dynamic headlines, and siFR… but all of these techniques increase load time and development time. There are plenty of good reasons to be strategic in the font choices rather than using additional technology. I am shocked at how rarely I see anyone taking advantage of these type options, so here is a quick and dirty list of fonts you should and could use in your desgns and stylesheets.

WINDOWS 97.09% / MAC 78.86%

This is a nice serif font that his pretty good support for both Mac and Windows based machines (97.09% of all windows machines have it, and 78.86% of mac’s). Yet very few people use it and instead default to georgia or times. As you can see it makes for great headlines, and I have used it with success as copy type as well. Worse case you can always default back to georgia, times, etc.

WINDOWS 96.09% / MAC 72.02%

I admit this is not one of my favorite fonts, but it does have many instances where it could be used effectively. It doesn’t seem to get used very often despite the fact that it could be an excellent copy font. Again there is always Arial or Helvetica if the machine doesn’t have Tahoma installed.

WINDOWS 95.85% / MAC 88.08%

Admittedly this font probably is overused in non-web related design. Since it is one of the “cooler” default fonts on most machines it tends to get a lot of use. Despite this fact there are plenty of good places to use it, and it works great for well… “impactfull” headlines.

WINDOWS 85.44% / MAC 42.50%

This is a nice elegant font that was overused by graphic designers some time ago, but it has been locked away and shunned for some time now. It may almost be time to pull it back out of the tool chest. Not a huge percent of Mac systems come with it preinstalled, but most new ones do. Depending on your target audience this could be the perfect font to use. If you are worried about the low mac support you could always opt for Futura as well (which has very high mac support).

WINDOWS 97.73% / MAC 96.18%

Yup you don’t just have to use plain old Arial. Arial black is a nice bold font that could be perfect for headings, impacting headlines, and hell even a replacement for the Impact font mentioned above. I don’t know that I would use it for body text, but it is an option that should be realized in web typography.

WINDOWS 87.08% / MAC 91.01%

Arial again! We are not done yet, oh no. Much like arial black, arial narrow is a great font for headlines. Instead of the big bold in your face style of headlines you can use this typeface for more elegant subtle headlines. A nice change from the traditional arial, and can be used much like you would a condensed font.

WINDOWS 58.13% / MAC 85.85%

I will admit I hate this font, mostly because it is misused (and people will probably argue that it is not the fonts fault, but the designers). But there are times when it can be used effectively, and it has pretty good support on newer windows computers and most mac based computers. Most likely it will again be for headlines, larger headlines, as it is not terribly legible at small fonts especially when it isn’t properly aliased.

WINDOWS 43.09% / MAC 90.82%

No surprise I like this font. I think it works both in copy and in headlines, and it has fair support in both platforms. Anytime you use a font that has about 50% support rate you want to think about the next logical font to serve, but there are enough options specific to windows that would let you achieve the same typographic message with only subtle differences.

[Excellent article from 3.7CREA.TV - click here for original article]

Image: Adaptive PathI was also recently at Mix08 where it was apparent that there was an huge interest in more collaborative approaches to problem solving and with the advent of socializing technologies, you should broaden your means of getting ideas generated.

I was prompted to think about this after reading a blog post on Adaptive Path about this very topic here and after watching one of my own UCD groups use overhead projections and whiteboarding.  But this is only a slice of the puzzle.  Be proactive, and be open-minded when searching for solutions.  Use colors, use technologies, use visuals and be big.  The answer is always out there, but it may be buried in a mound of ideas, so give it a reason to pop out.

[read "Tapping Into Conference Participants’ Brilliance"]