&lt;p&gt;W3C is pleased to announce the creation of the &lt;a href="/2005/Incubator/decision/"&gt;Decisions and Decision-Making Incubator Group&lt;/a&gt;, whose mission is to determine the requirements, use cases, and a representation of decisions and decision-making in a collaborative and networked environment suitable for leading to a potential standard for decision exchange, shared situational awareness, and measurement of the speed, effectiveness, and human factors of decision-making.. The following W3C Members have sponsored the &lt;a href="/2005/Incubator/decision/charter"&gt;charter&lt;/a&gt; for this group: DISA, MITRE, and CNR. Read more about the &lt;a href="/2005/Incubator/"&gt;Incubator Activity&lt;/a&gt;, an initiative to foster development of emerging Web-related technologies. Incubator Activity work is not on the W3C standards track but in many cases serves as a starting point for a future Working Group.&lt;/p&gt; </content>

by W3C Staff at March 15, 2010 06:00 AM

&lt;p&gt;The &lt;a href="/WAI/UA/"&gt;User Agent Accessibility Guidelines Working Group&lt;/a&gt; has published an updated Working Draft of the &lt;a href="/TR/2010/WD-UAAG20-20100311/"&gt;User Agent Accessibility Guidelines (UAAG) 2.0&lt;/a&gt;. UAAG defines how browsers, media players, and other "user agents" should support accessibility for people with disabilities and work with assistive technologies. This draft adds requirements in seven new areas, including support for speech input, video playback controls and a new section on conformance. It introduces a new supporting document, &lt;a href="/TR/2010/WD-IMPLEMENTING-UAAG20-20100311/"&gt;Implementing UAAG 2.0&lt;/a&gt; as a First Public Working Draft. Read the &lt;a href="http://lists.w3.org/Archives/Public/w3c-wai-ig/2010JanMar/0078.html"&gt;invitation to review the UAAG 2.0 Working Draft&lt;/a&gt; and about the &lt;a href="http://www.w3.org/WAI/"&gt;Web Accessibility Initiative (WAI)&lt;/a&gt;.&lt;/p&gt; </content>

by W3C Staff at March 15, 2010 06:00 AM

&lt;p&gt;W3C announced today a &lt;a href="/2010/02/convapps/cfp"&gt;Workshop on Conversational Applications - Use Cases and Requirements for New Models of Human Language to Support Mobile Conversational Systems&lt;/a&gt;, 18-19 June 2010 in Somerset, New Jersey (USA), Hosted by Openstream. There is currently an increasing need for new capabilities of the human language model to support sophisticated conversational applications. The goal of the Workshop is to understand the limitations of the current W3C language model in order to develop a more comprehensive one. Participants will collect and analyze use cases and prioritize requirements that ultimately will improve support for language capabilities that are unsupported today. Position papers are due 2 April. Please see the &lt;a href="/2010/02/convapps/cfp"&gt;Call for Participation&lt;/a&gt; for more information.&lt;/p&gt; </content>

by W3C Staff at March 15, 2010 06:00 AM

&lt;p&gt;The &lt;a href="/Graphics/WebCGM/WG/"&gt;WebCGM Working Group&lt;/a&gt; has published a W3C Recommendation of &lt;a href="/TR/2010/REC-webcgm21-20100301/"&gt;WebCGM 2.1&lt;/a&gt;. Computer Graphics Metafile (CGM) is an ISO standard, defined by ISO/IEC 8632:1999, for the interchange of 2D vector and mixed vector/raster graphics. WebCGM is a profile of CGM, which adds Web linking and is optimized for Web applications in technical illustration, electronic documentation, geophysical data visualization, and similar fields. WebCGM aims to balance graphical expressive power on the one hand, and simplicity and implementability on the other. A small but powerful set of standardized metadata elements supports the functionalities of hyperlinking and document navigation, picture structuring and layering, and enabling search and query of WebCGM picture content. WebCGM 2.1 refines and completes the features found in WebCGM 2.0. Learn more about the &lt;a href="/Graphics/"&gt;Graphics Activity&lt;/a&gt;.&lt;/p&gt; </content>

by W3C Staff at March 15, 2010 06:00 AM

&lt;p&gt;The &lt;a href="/XML/Processing/"&gt;XML Processing Model Working Group&lt;/a&gt; has published a Proposed Recommendation of &lt;a href="/TR/2010/PR-xproc-20100309/"&gt;XProc: An XML Pipeline Language&lt;/a&gt;. This specification describes the syntax and semantics of XProc: An XML Pipeline Language, a language for describing operations to be performed on XML documents. Pipelines are made up of simple steps which perform atomic operations on XML documents and constructs similar to conditionals, iteration, and exception handlers which control which steps are executed. The group has produced an &lt;a href="/XML/XProc/2010/02/ir.html"&gt;implementation report&lt;/a&gt; Comments are welcome through 15 April. Learn more about the &lt;a href="/XML/"&gt;Extensible Markup Language (XML) Activity&lt;/a&gt;.&lt;/p&gt; </content>

by W3C Staff at March 15, 2010 06:00 AM

&lt;p&gt;The &lt;a href="/2006/WSC/"&gt;Web Security Context Working Group&lt;/a&gt; has published a Last Call Working Draft of &lt;a href="/TR/2010/WD-wsc-ui-20100309/"&gt;Web Security Context: User Interface Guidelines&lt;/a&gt;. This specification deals with the trust decisions that users must make online, and with ways to support them in making safe and informed decisions where possible. This document specifies user interactions with a goal toward making security usable, based on known best practice in this area. Comments are welcome through 31 March. Learn more about the &lt;a href="/Security/"&gt;Security Activity&lt;/a&gt;.&lt;/p&gt; </content>

by W3C Staff at March 15, 2010 06:00 AM

&lt;p&gt;The &lt;a href="/2008/WebVideo/Annotations/"&gt;Media Annotations Working Group&lt;/a&gt; has published Working Drafts of &lt;a href="/TR/2010/WD-mediaont-10-20100309/"&gt;Ontology for Media Resource 1.0&lt;/a&gt; and &lt;a href="/TR/2010/WD-mediaont-api-1.0-20100309"&gt;API for Media Resource 1.0&lt;/a&gt;. The former document defines the Ontology for Media Resource 1.0, a core vocabulary to describe media resources on the Web. It is defined based on a core set of properties which covers basic metadata to describe media resources. Further it defines syntactic and semantic level mappings between elements from existing formats. The ontology is supposed to foster the interoperability among various kinds of metadata formats currently used to describe media resources on the Web. The latter defines a client-side API to access metadata information related to media resources on the Web. Learn more about the &lt;a href="/2008/WebVideo/"&gt;Video in the Web Activity&lt;/a&gt;.&lt;/p&gt; </content>

by W3C Staff at March 15, 2010 06:00 AM

&lt;p&gt; &lt;a class="imageLink" href="http://www.w3.org/People/Jeff/"&gt; &lt;img width="100" height="150" src="http://www.w3.org/2010/03/JeffreyJaffe_thumb.jpg" alt="Dr. Jeffrey Jaffe"/&gt; &lt;/a&gt; W3C today named &lt;a href="/People/Jeff/"&gt;Dr. Jeffrey Jaffe&lt;/a&gt; its new Chief Executive Officer. "Web technologies continue to be the vehicle for every industry to incorporate the rapid pace of change into their way of doing business," said Dr. Jaffe. "I'm excited to join W3C at this time of increased innovation, since W3C is the place where the industry comes together to set standards for the Web in an open and collaborative fashion." As W3C CEO, Dr. Jaffe will work with Director Tim Berners-Lee, staff, Membership, and the public to evolve and communicate W3C's organizational vision. The CEO is responsible for W3C's global operations, for maintaining the interests of all of the W3C's stakeholders, and for sustaining a culture of cooperation and transparency, so that W3C continues to be the leading forum for the technical development and stewardship of the Web. Read the &lt;a href="http://www.w3.org/QA/2010/03/w3c_ceo_blog_first_posting_mar.html"&gt;CEO Blog&lt;/a&gt; and learn more in the &lt;a href="/2010/03/ceo-pr.html"&gt;press release&lt;/a&gt;.&lt;/p&gt; </content>

by W3C Staff at March 15, 2010 06:00 AM

&lt;p&gt;W3C published today seven documents related to HTML:&lt;/p&gt; &lt;ul class="show_items"&gt; &lt;li&gt;&lt;a href="/TR/2010/WD-html5-20100304/"&gt;HTML 5&lt;/a&gt; and &lt;a href="/TR/2010/WD-html5-diff-20100304/"&gt;HTML5 differences from HTML4&lt;/a&gt;. In addition, some content that was part of the HTML 5 specification has been published in two new standalone drafts: &lt;a href="/TR/2010/WD-2dcontext-20100304/"&gt;HTML Canvas 2D Context&lt;/a&gt; and &lt;a href="/TR/2010/WD-microdata-20100304/"&gt;HTML Microdata&lt;/a&gt;.&lt;/li&gt; &lt;li&gt;&lt;a href="/TR/2010/WD-html-markup-20100304/"&gt;HTML: The Markup Language&lt;/a&gt;, a first draft. This document describes the HTML markup language and provides details necessary for producers of HTML content to create documents that conform to the language. By design, it does not define related APIs, nor attempt to specify how consumers of HTML content are meant to process documents, nor attempt to be a tutorial or "how to" authoring guide.&lt;/li&gt; &lt;li&gt;&lt;a href="/TR/2010/WD-rdfa-in-html-20100304/"&gt;HTML+RDFa&lt;/a&gt;, which defines rules and guidelines for adapting the RDF in XHTML: Syntax and Processing (RDFa) specification for use in the HTML5 and XHTML5 members of the HTML family.&lt;/li&gt; &lt;li&gt;&lt;a href="/TR/2010/WD-html-bidi-20100304/"&gt;Additional Requirements for Bidi in HTML&lt;/a&gt;, a first draft. Authoring a web app that needs to support both right-to-left and left-to-right interfaces, or to take as input and display both left-to-right and right-to-left data, usually presents a number of challenges that make it an especially laborious and bug-prone task. Some of these are due to browser bugs, but some can be traced to a gap in the specification of the bidirectional aspects of a given HTML feature. And some of these challenges could be greatly simplified by adding a few strategically placed new HTML features. This document proposes fixes for some of the most repetitive pain points.&lt;/li&gt; &lt;/ul&gt; &lt;p&gt;All documents were published by the &lt;a href="/html/wg/"&gt;HTML Working Group&lt;/a&gt; except the last one, published by the &lt;a href="/International/core/"&gt;Internationalization Core Working Group&lt;/a&gt;.&lt;/p&gt; </content>

by W3C Staff at March 15, 2010 06:00 AM

&lt;p&gt;The &lt;a href="/Voice/"&gt;Voice Browser Working Group&lt;/a&gt; has published a Working Draft of &lt;a href="/TR/2010/WD-voicexml30-20100304/"&gt;Voice Extensible Markup Language (VoiceXML) 3.0&lt;/a&gt;. This document specifies VoiceXML 3.0, a modular XML language for creating interactive media dialogs that feature synthesized speech, recognition of spoken and DTMF key input, telephony, mixed initiative conversations, and recording and presentation of a variety of media formats including digitized audio, and digitized video. See the &lt;a href="/TR/2010/WD-voicexml30-20100304/diff.html"&gt;diff-marked version&lt;/a&gt; of changes since the previous draft, and learn more about the &lt;a href="/Voice/"&gt;Voice Browser Activity&lt;/a&gt;.&lt;/p&gt; </content>

by W3C Staff at March 15, 2010 06:00 AM

&lt;p&gt;The &lt;a href="/2008/xmlsec/"&gt;XML Security Working Group&lt;/a&gt; has published two Working Drafts: &lt;a href="/TR/2010/WD-xmldsig-core2-20100304/"&gt;XML Signature Syntax and Processing Version 2.0&lt;/a&gt; and &lt;a href="/TR/2010/WD-xml-c14n2-20100304/"&gt;Canonical XML Version 2.0&lt;/a&gt;. The first specifies XML syntax and processing rules for creating and representing digital signatures. XML Signatures can be applied to any digital content (data object), including XML. The second is a major rewrite of Canonical XML Version 1.1 to address issues around performance, streaming, hardware implementation, robustness, minimizing attack surface, determining what is signed and more. It also incorporates an update to Exclusive Canonicalization, effectively a 2.0 version, as well. Learn more about the &lt;a href="/Security/"&gt;Security Activity&lt;/a&gt;.&lt;/p&gt; </content>

by W3C Staff at March 15, 2010 06:00 AM

&lt;p&gt;The &lt;a href="/XML/Core/"&gt;XML Core Working Group&lt;/a&gt; has published a Proposed Recommendation of &lt;a href="/TR/2010/PR-xlink11-20100225/"&gt;XML Linking Language (XLink) Version 1.1&lt;/a&gt;. This specification defines the XML Linking Language (XLink) Version 1.1, which allows elements to be inserted into XML documents in order to create and describe links between resources. It uses XML syntax to create structures that can describe links similar to the simple unidirectional hyperlinks of today's HTML, as well as more sophisticated links. Comments are welcome through 31 March. Learn more about the &lt;a href="/XML/"&gt;Extensible Markup Language (XML) Activity&lt;/a&gt;.&lt;/p&gt; </content>

by W3C Staff at March 15, 2010 06:00 AM

&lt;p&gt;The &lt;a href="/Voice/"&gt;Voice Browser Working Group&lt;/a&gt; has published a Proposed Recommendation of &lt;a href="/TR/2010/PR-speech-synthesis11-20100223/"&gt;Speech Synthesis Markup Language (SSML) Version 1.1&lt;/a&gt;. The Speech Synthesis Markup Language Specification is designed to provide a rich, XML-based markup language for assisting the generation of synthetic speech in Web and other applications. The essential role of the markup language is to provide authors of synthesizable content a standard way to control aspects of speech such as pronunciation, volume, pitch, rate, etc. across different synthesis-capable platforms. SSML 1.1 improves SSML 1.0 support for a broader set of natural (human) languages. Known implementations are documented in the &lt;a href="/Voice/2009/ssml11-ir/"&gt;Implementation Report&lt;/a&gt;, along with the associated test suite. Comments are welcome through 23 March. Learn more about the &lt;a href="/Voice/"&gt;Voice Browser Activity&lt;/a&gt;.&lt;/p&gt; </content>

by W3C Staff at March 15, 2010 06:00 AM

&lt;p&gt;The &lt;a href="/AudioVideo/TT/"&gt;Timed Text Working Group&lt;/a&gt; has published an updated Candidate Recommendation of &lt;a href="/TR/2010/CR-ttaf1-dfxp-20100223/"&gt;Timed Text Markup Language (TTML) 1.0&lt;/a&gt;. TTML is a content type that represents timed text media for the purpose of interchange among authoring systems. Timed text is textual information that is intrinsically or extrinsically associated with timing information. This an updated document based on implementation experience; see the &lt;a href="http://www.w3.org/TR/2010/CR-ttaf1-dfxp-20100223/#change-history-cr2-to-cr3"&gt;list of changes&lt;/a&gt;. A &lt;a href="http://www.w3.org/2008/10/dfxp-testsuite.zip"&gt;test suite&lt;/a&gt; for TTML is available, along with its &lt;a href="http://www.w3.org/2008/10/dfxp-test-coverage.html"&gt;coverage report&lt;/a&gt; and a &lt;a href="http://www.w3.org/2009/05/dfxp-results.html"&gt;preliminary implementation report&lt;/a&gt;. The test suite and implementations are work in progress and may not reflect all of the changes of this document. Learn more about the &lt;a href="/2008/WebVideo/"&gt;Video in the Web Activity&lt;/a&gt;.&lt;/p&gt; </content>

by W3C Staff at March 15, 2010 06:00 AM

&lt;p&gt; The &lt;a href="/2005/MWI/Tests/"&gt;Mobile Web Test Suites Working Group&lt;/a&gt; has &lt;a href="/2005/MWI/Tests/blog/2010/02/09/wctmbv2"&gt;just released&lt;/a&gt; a &lt;a href="/2010/01/wctmb2/"&gt;brand new Web Compatibility Test for Mobile Browsers&lt;/a&gt;. Based on the same idea of evaluating support of a number of Web technologies at a glance as in the &lt;a href="/2008/06/mobile-test/"&gt;first Web Compatibility Test published in July 2008&lt;/a&gt;, this second version features a number of more recent technologies that promise to make Web browsers more powerful, in particular on mobile devices. Learn more about the &lt;a href="http://www.w3.org/Mobile/"&gt;Mobile Web Initiative&lt;/a&gt;.&lt;/p&gt; </content>

by W3C Staff at March 15, 2010 06:00 AM

Hi,

In this post, I will introduce you to some of the most compelling Facebook add-ons for Internet Explorer 8.

Share with Facebook Accelerator

The Share with Facebook Accelerator allows you to share any text, link, or page with your Facebook friends with a single click. You can use this accelerator by selecting either some text or a link, or by right-clicking on any part of the page.

Install here: http://www.ieaddons.com/en/details/204/Share_on_Facebook/

The technical beauty of this add-on is that it is extremely simple. In fact, it is contained in a single XML file, which is based on the OpenServiceDescription specification.

Facebook Web Slice

The Facebook Web Slice allows you to stay up to date with what's happening in your Facebook network. Regardless what website you are on, you can click at any time on the web slice title and display the recent messages from your friends on your board.

Install here: http://www.ieaddons.com/en/details/social/Facebook_Web_Slice/

The Web Slice uses the Facebook Connect APIs to connect to your account and it shows a notification when new content is available. Special thanks go to the MVP Konstantinos Pantos for his contribution to the community.

Facebook Search Provider

Do you need to search for someone on Facebook? You can start right away from the browser search box!

Install here: http://www.ieaddons.com/en/details/searchhelpers/Facebook/

Again, this extension is built on top of an XML file which describes the end-point for the search provider.

Facebook Toolbar

The Facebook Toolbar lets you to share with your friends while browsing anywhere on the web - get notified, share content, upload photos, and update your status no matter where you are!

Install here: http://www.facebook.com/toolbar#!/toolbar?v=app_4949752878

The source code of this toolbar is available on github.

Thanks to the Facebook Team for these great extensions!

If you have any feedback or you would like to highlight other great IE8 add-ons, please leave a comment to this post.

Giorgio Sardo
Web Technical Evangelist
Microsoft Corporation

by ieblog at March 12, 2010 08:36 PM

Lead gen pages are often misunderstood as standalone, single-page designs. There’s a science behind A/B testing and optimizing lead gen pages, but there’s also a component of creative user experience that should not be overlooked as you drill deeply into what drives your users through your conversion funnel.

Some user behaviors make clear sense, while others can confound your expectations. Overall, however, designing a complete experience around a conversion page is best understood taking these 3 “Ss” into consideration:

1. Somewhere"”Users get to conversion pages from somewhere, so go there first!
2. Superficial"”Good looks matter. Users respond to a particular aesthetic, so try different designs!
3. So Much More"”Users engage deeper through community, so get them connected to you and each other! (FYI a Facebook Fan Page is a great ecosystem & it’s free)

Okay, so few weeks ago I posted about a redesign I’m working on for a lead generation page. That project began with a single page, but preliminary outcomes further demonstrated that we needed to step backwards and design for an entire experience, which is where Somewhere, Superficial, and So Much More came into play.

I’ll explain!

First, our initial A/B test is over:

• Good news"”we didn’t break the existing conversion rate.
• Better news"”we raised the conversion rate a little bit ;-)
• Great news"”we blew up our Facebook Fan page by designing a thoughtful “Thank You”! (*We increased fan acquisition from 3 fans per day to 30+ fans per day)

Second, we’re embarking on Phase 2 of our test plan, so let me share what that plan looks like, because A/B testing can be delivered in a number of ways. Here is the 3-phase method I recommend and that we’re currently using:

Phase 1: Update, Don’t Break

(This phase is optional, in the project I’m working on we did need to update an older design before we could effectively move forward with testing.)

• Update the design to a higher standard that better expresses the brand
• Don’t break existing conversion (50 v. 50 split test, confirmed by a 5 v. 95 follow-up)
• Phase original design out completely

(Current design in the wild, original design)

Phase 2: Design Different Concepts

• Create 2 more well-informed aesthetically different designs
• Conduct user testing (DIY-style works well!)
• Release new designs into testing cycle in increments (10 v. 90% to start)

(Potential design to test)

Phase 3: Optimize One

• Select the “winning” design from the 3 that have been tested
• Optimize the winning design with A/B testing of the smaller elements on page (copy, image, steps, etc)

(Potential design to test)

Third, as we prepare for our next test, which will involve 3 very different designs, here are things we considered about the current experience to make sure we covered “Somewhere, Superficial, and So Much More”:

Traffic Sources

It’s important to learn about where your users are coming from; this is the first step to take in order to reduce your bounce rate.

Are your users coming to your site after clicking an ad? Are users coming to your site to learn something, or have they accidentally gotten there, is the message seductive, on target?

User Testing

User testing doesn’t have to be expensive, drawn out, or complicated. Do informal (or formal if you can) user testing to gather feedback on the different designs before you release them into the wild.

Form Friction

At the heart of every conversion page is a form. Determine what variables can be tested, and what variable make sense to test. Some form friction is good!

Let me share an example, for us, it seems like “phone number” is an easy variable to test out. But, it turns out it’s not! While we might get more conversions by taking that element out of the form, we would also open ourselves up to less qualified leads, which we don’t want and also aren’t equipped to scale for.

(*Consider your community support team, if you put their phone number on your conversion page can they handle the incoming calls?)

The Thank You

Never underestimate the opportunity for a second level of conversion that your “Thank You” messaging provides for you to create and facilitate community and further engagement.
Our Thank You experience in our first round of testing, totally changed our approach to how we were looking at this conversion page.

To wrap it all up, throughout this process of redesigning and optimizing a single conversion page (we’ve planned on about 3 months of testing), we’ve really come to understand that the best and most effective lead gen page designs involve an entire experience that goes well beyond a single page. Suddenly, our little conversion page isn’t so lonely or so little.

Take a look at your app’s conversion page, rally your team, and consider the impact of Somewhere, Superficial, and So Much More.

by Chrissie Brodigan at March 12, 2010 06:20 PM

It's been over three years since Geek Meet Gothenburg February 2007, so it's about time for another one. Like last time, this event will take place at the NetRelations office in Gothenburg, Sweden. The date is March 24, 2010.

We'll be talking about the usual web geek stuff, likely with a bit of emphasis on HTML 5 and other up-and-coming web things. Check out Geek Meet Göteborg "“ the sequel! on the NetRelations blog for the details and to sign up.

Read full post

Posted in Web General.

by Roger Johansson at March 12, 2010 01:25 PM

Sergey Chikuyonok gets his Philips Ambilight foo on as he created a HTML5 video + canvas sample that mimics the TV effect.

As the video runs, a snapshot is sent over to JavaScript land where colors are worked out:

Then, two canvas objects are placed, one on each side, of the video itself.

by Dion Almaer at March 12, 2010 11:30 AM

Maybe I'm old-fashioned, but I don't get why some sites display reader comments in reverse chronological order. It seems especially popular on newspaper sites, which also for some reason tend to use paging for comments. I think the combination of reverse order and paging makes trying to follow discussions very frustrating.

Still, since more and more sites seem to display comments this way I guess there are some people who actually prefer comments displayed backwards, so it is probably here to stay.

Read full post

Posted in Usability.

by Roger Johansson at March 11, 2010 07:43 PM

I just finished doing some talks on geo hacking (slides are available here) and how to use some of the Geo technologies Yahoo and Google provide as part of a University gig in Atlanta.

As a lot of the students liked the idea of APIs like GeoPlanet and Placemaker but had a hard time getting their head around them I thought it a good idea to build a small JavaScript library that does the job for them.

I give you the YQL Geo library (and its source on GitHub). Using this library you can do the following:

• Detecting the visitor's location with the W3C geo API and with IP as a fallback
• Find geo location from text
• Find location from lat/lon pair
• Find locations in a certain web document (by URL)
• Get the location for a certain IP number

And all of that in pure JavaScript. For example:

Will get you:

Other uses:

This gets the name and the country of a lat/lon pair:

This finds the visitor's location (on W3C geo API enabled browsers it asks them to share it - otherwise it detects the IP and locates this one on the planet)

Read all about it on my blog and enjoy!

by Chris Heilmann at March 11, 2010 03:04 PM

In response to my HTML5 apps argument a few people came back to how the payment thingy is missing from my idea, and how it will (apparently) be worthless because of that. I’ve been thinking about that a lot in the past few days, and I’m increasingly of the opinion that the payment argument is nonsense.

Sure, everybody who does iPhone apps, or who’s glancing cursorily at the mobile market without trying to gain in-depth knowledge, currently believes that the App Store concept is going to be a huge success because of the opportunity for developers to earn some money. But they’re just wrong.

I did some back-of-napkin calculations and found that, macro-economically speaking, iPhone app development costs money right now. And yes, an individual developer can strike it rich, but that’s getting rarer and rarer. I do not want to build a new app ecosystem based on arguments from developers who just want to take a gamble in the App Store roulette. Gamblers’ arguments are not real arguments.

March 11, 2010 02:35 PM

Strategy. You hear about it all the time. One must have a strategy/work on a strategy/follow a strategy and so on. Business types like to say “strategy” a lot as it sounds big, complicated and important.

And it is important, but there is no need for it to be complicated. Quite the opposite.

At the heart of it all “strategy” is just about having a plan for the thing you are working on. Or as Wikipedia puts it “a strategy is a plan of action designed to achieve a particular goal”.

Getting the Strategy Right

If there is ever a time to look at what’s important in a project, it is early on, in the strategy stage.

Let us assume that your client doesn’t have a strategy for their next web project.

Before you build, design, code or write anything you need to think about what the project needs to achieve.

This is in part because strategy can mean almost anything, depending on the needs of the client, the size of their audience and ultimately the goal of your client. And it will mean different things at different times during the life-span of a project: you may have one strategy to launch with, another for the ongoing management of the site and so on.

Thinking the project through, seeing how one thing leads to another on the way to the project’s goal is a very healthy thing to do.

The one thing all strategies must have in common is that they tie in with your client’s overall business goals. (You’d be surprised how often clients themselves forget this simple fact!) If it doesn’t, the client will never be happy with your work even if they were the ones who ignored the business goal connection.

That’s why you should be thrilled when a client asks for your help in developing their web project strategy (or asks you to help them find someone who can create it for them).

It is an excellent opportunity to make sure that you, or the people you choose to collaborate with, create a to-the-point strategy that helps the client reach their goals and in the process makes you look like an absolute star who deserves lots more commissions.

Strategy as a Sales Tool

Before we continue, you may wonder if you really need to bother with all this strategy stuff. The answer is yes you do, especially if the client asks you to help craft it.

A strategy, even one that is just a paragraph in length, shows that you have understood the task at hand. It shows the direction you will take the project, and it is an effective way to put your client’s mind at ease.

How to Do It

A good web strategy should always cover the following five points.

1. What you are doing
2. Who you are doing it for
3. Why you are doing it
4. How you are doing it
5. When you are doing it

Here is an example:

Your client, the Think Vitamin Dairy, tell you they want to sell more of their orange flavored Think Vitamin Milk.

To make sure you have enough information to cover the five points above you ask the client loads of questions, including:

• Who currently buys the Think Vitamin Milk?
• Why and how do they buy it?
• When do they drink it?
• What do they think of it?
• Have the sales changed over the past year, if so how and why?

The client tells you that Think Vitamin Milk is mostly gulped by web people who like the energy kick they get from it. They buy it online in crates of twelve bottles and according to their tweets some of them have started drinking it when they go hiking in the Cotswolds on the weekends.

After a spot of thinking you come up with a plan, a strategy, which suggests the client invest their budget in creating a smartphone app to reach a new audience instead of buying advertising. You flesh it out with a few pointers:

• Think Vitamin Dairy should build an iPhone app aimed at ramblers to help them plan hiking trips – The Think Vitamin “Think Hiking” app. (A new audience, with existing customers mixed in is golden.)
• The app lets users plan hikes and share them with their friends to get everyone ready for the excursion (virality – always a good thing!).
• The app would show where along the trail the energizing Milk can be bought and plot the local independent dairy farms who provide the cow juice. (If you like hiking you probably care about food sustainability too.)
• The app is supported by a small teaser and signup site that, after the app has launched, displays tweets from hikers and shows where the most popular trails are.

Instead of throwing money at advertising, the client’s milk brand would be known for a very useful app that is associated with good friends, good times and days off in the country.

There it is, a good simple and easy to understand strategy tied to the goal of selling more orange flavored milk.

In Conclusion

Strategy is important, but it’s not rocket science. It is really just about having a plan.

The more you work with strategy, the more you learn and the more you will want to learn. You will find new ways of approaching old problems, and it can be just as addictive as the work you are already passionate about.

This post was all about the basics, but to be honest that’s where many clients and us web creators go wrong. Get the basics right, and keep your eyes open and you will become an even better web professional in no time.

Best of all, the more comfortable you get with the strategy portion of your work the better you will be at understanding the client’s needs and the more valuable you will become to them.

by Jaan Orvet & Andreas Carlsson at March 11, 2010 02:00 PM

Erik Dahlström and Vincent Hardy have put together a cool website, called SVG Wow!, that showcases SVG doing things you didn't expect SVG can do:

There are alot of unique demos on there.

One of my favorites uses SVG, HTML5 Audio, Web Fonts, and YUI to play music accompanied by flying animated lyrics (Chrome and Safari only):

There are lots of other great samples for you to play with and study!

by Brad Neuberg at March 11, 2010 10:35 AM

The Ext JS team have announced the 3.2 beta which includes new components and goodness.

Take the animated DataView transitions for example:

On top of that, the release includes:

• Multiple sorting and filtering on Ext.data.Store
• Composite Fields
• Slider improvements
• Toolbar plugins: ToolbarReorderer and ToolbarDroppable
• New Accessibility Theme: compliant with Section 508 of the Disabilities Act.
• Quality Assurance: Unit Testing: over 180 bug fixes and enhancements over 3.1

by Dion Almaer at March 11, 2010 06:12 AM

Editors Note: In his first article for Think Vitamin Thierry Koblentz discusses the issue of “resetting” your CSS.

“base.css” versus “reset.css”

For a long time, the very first line in my styles sheets was:

* {padding:0;margin:0;}

This simple rule was very convenient as it leveled margin and padding values of all elements across browsers. This “hard reset” was short and simple and it had the advantage of belonging to the main styles sheet rather than being an external file.

Later, this technique was denounced as bad practice as it makes the rendering agent style (check) every single element in a document. It also triggered issues with form controls, but authors were used to specifying styles for these.

Then came “reset” styles sheets. These files go way beyond resetting margin and padding. The most complete in terms of properties/elements involved has to be Eric Meyer’s. It “unstyles” everything you could think of, from a to var.

Authors start with a clean slate. From there, they most often write rules to style elements that were originally styled by the browser’s styles sheet, but overwritten by the reset file. In short, many elements are styled three times:

1. by the browser’s styles sheet (see User Agent Styles Sheets).
2. by the “reset” file.
3. by the author’s styles sheet.

Criticism of this Approach

Jonathan Snook, Jens Meiert and others have “criticized” this approach, saying more or less that there was no use for a “middle man”. On Jen’s site, “randomCommenter” summarizes the issue pretty well when asking: "Wouldn't a well written base style sheet render a reset style sheet redundant and therefore useless?"�

Actually, I believe Eric Meyer himself hints in that direction when he says:

"I don’t particularly recommend that you just use this in its unaltered state in your own projects. It should be tweaked, edited, extended, and otherwise tuned to match your specific reset baseline. Fill in your preferred colors for the page, links, and so on. In other words, this is a starting point, not a self-contained black box of no-touchiness."�

In any case, people should at least evaluate the rules in these reset files before copying and pasting their content. For example, if one authors documents as HTML 4.01 Strict! one may safely remove from a reset styles sheets any reference to elements like:

• iframe
• applet
• strike
• u
• font
• s
• center

My Base Styles Sheet

Following the idea of “tweaking” a reset file, I came up with this “base styles sheet“. It sets default styling for many elements, follows a couple of recommendations regarding usability/accessibility, and addresses a few “common issues” as well.

What does it do that a reset doesn’t?

It fixes a few things

• It forces a gutter for a vertical scrollbar (when content is too short to require a scrollbar)
• It includes an IE button width fix
• It removes “sticky” outline (not in Internet Explorer though)
• It prevents “mysterious gaps below images“
• It prevents descenders letters in legend from being cut-off in Internet Explorer
• It vertically aligns checkboxes and radio buttons with their label
• It sets a default color background for the document with no shrink wrap effect on body¹

It styles lists by default

It is easier to remove markers on lists than to style them. So, by default, lists are styled to show indentation and markers depending on hierarchy and list types. But the styles sheet contains a class to reset this styling. When applied to a UL or OL – it will remove markers and left margin on their items.

It creates vertical “gutters”

Left and right padding are applied to most block-level elements to create vertical gutters. This allows to build layouts without having to use “padding” on main containers which helps to produce designs that do not break in IE 5 (or IE 6 in quirks mode) as width and padding values are not mixed. This is also an alternative to using non semantic wrappers as a workaround to avoid mixing these properties.

Why using padding instead of margin to create that space?

Using padding allows to paint elements’ background all across their parent container. Stretching from one edge to another. When this behavior is not sught, for example when styling a heading with a bottom border that should be no wider than what appears to be the “content box”, authors can use a class (in the sheet already) to revert that styling (swaping padding values with margin values).

It creates horizontal white space too

• Via margin – By default, vertical space is obtained through top margin. A top margin of 1.2em is applied to most block-level elements.
• Via padding – Authors can uncomment two rules in the styles sheet to create spacing using padding instead of margin. The advantage of this method is that it prevents two common “issues”:
  • Collapsing margins - Margins will not collapse since elements are not styled with vertical (top/bottom) margins.
  • Loss of top margin when clearing floats – When an element clears a float, it “loses” its top margin, but that gap is preserved if top padding is used instead.

What else?

Rules in this base styles sheet are well commented and values that one would like to change (font-family, font-size, line-height, color, padding, etc.) are placed near the top of the file.

You can download base.css with comments or a minified version. My advice is to use these rules as a starting point to create your own styles sheet. Do not link to an external file to then override property values, instead, add, remove and edit anything you want to end up with a main styles sheet for your own project(s).

My base.css styles sheet is a work in progress. If you play with it, and if you see things that should not belong in there or to the contrary things that should be included, please join the discussion.

¹ The YUI reset styles sheet sets a background-color on html. This styling makes the browser paint the background of body no taller than its content instead of matching the viewport’s height (this is by specs). I believe a future release of YUI reset will include this change.

by Thierry Koblentz at March 10, 2010 02:00 PM

Paul Irish and Jonathan Neal have created a fun example of various CSS tweaks that you can make, and see the results instantly.

CSS3, Please! lets you play with fancy new rules such as:

• border-radius
• box shadow
• gradients
• rgba support in backgrounds
• transforms
• font-face

Really nice way to make tweaks inline in the page..... nicely done. Hope to see some other examples out there :)

by Dion Almaer at March 10, 2010 01:39 PM

Good old Kangax has been playing with HTML minification and has shared his new tool in an early stage.

What does it do?

Kangax has forked John Resig's HTML parser which parses the HTML and sends that into the Minifier. This has rules that do things like whitespace optimization, comment removal, and collapsing boolean attributes (e.g. disabled="true" -> disabled).

He also has a linter going:

While working on minifier, I realized that oftentimes the most wasteful part of the markup is not white space, comments or boolean attributes, but inline styles, scripts, presentational or deprecated elements and attributes. None of these can be simply stripped, as that could affect state of the document and is just too obtrusive. What can be done, however, is reporting of these occurences to the user. HTMLLint is even a smaller script, whose job is exactly that"”to log any deprecated or presentational elements/attributes encountered during parsing. Additionally, it detects event attributes (e.g. onclick, onmouseover, etc.). The rationale for this is that moving contents of event attributes to external script allows to take advantage of resource caching.

by Dion Almaer at March 10, 2010 11:14 AM

Harmony is a new drawing tool, a HTML5/Canvas experiment with great potential. It provides some unique brush styles, and can produce some great-looking charcoal pencil style sketches, among other things. Better to try it out than explain it in words.

Creator Mr. Doob (Richard Cabello) explains how he used Canvas to make it darker the more you draw over it:

The whole thing is quite modular so I can keep adding more brush styles whenever I get inspired. During the process I found out that, for some reason (apparently lack of hardware acceleration), Firefox and Opera do not support context.globalCompositeOperation = 'darker'. This was on the HTML5 spec before but got removed. Just so you know what I'm talking about, this is like the "multiply" blending in Photoshop. Webkit does support it tho. I hope they put it back on the specs and all browsers support it.

You can also save images using data URI encoding.

As it works on webkit, he made sure it worked on the mobile Android and iPhone browsers. No multi-touch as yet, but the touch UI still makes a nice input mechanism.

(Thanks FND)

by Michael Mahemoff at March 10, 2010 09:50 AM

We're always excited to engage with members of the W3C including the developers of other browsers as well as the broader web development community to help shape the direction of emerging Web standards, particularly HTML5.  This includes participating in events like TPAC, which we wrote about in November, and on-going engagement with various working groups.  Patrick recently talked about joining the SVG working group, and I'd like to share a brief list of other happenings on the way to making HTML5 well-defined, well-tested, and accessible:

• Providing feedback on HTML5
  Tony Ross, Internet Explorer Program Manager, and Jonas Sicking of Mozilla, led a discussion about extensibility in HTML5 at TPAC after our initial submission.  While the working group hasn't resolved the issue yet, we think the event helped inform everyone and generate the different proposals submitted since. 
• Testing HTML5
  Kris Krueger, Internet Explorer Test Lead, was appointed facilitator of the W3C HTML5 Testing Task Force.  The task force has set up necessary infrastructure like a wiki, Bugzilla, a work item tracker, and CVS repository for test cases.  With that in place, they've started to review DOM Level 2 HTML test cases to use as the start of HTML5 testing.  As with CSS2.1, we think a good test suite is critical to ensuring a specification results in interoperable implementations.
• Ensuring new specifications enable accessibility
  We care deeply about an accessible web so besides implementing accessibility-focused browser features, we're working with Apple, IBM, and other interested parties to ensure the new HTML5 <canvas> and <video> elements have great accessibility support so everyone can use sites leveraging them.  This work is driven by the Accessibility Task Force.  Together, we're working on <canvas> HTML prototypes to use as "˜proof of concepts' to ensure the feature is well-designed, as discussed in a recent teleconference. 
• Indexed DB Proposal
  Together with Mozilla, we're excited about a new design for local storage called Indexed DB.  We think this is a great solution for the web.  Look for another post with more information about this proposal.  In the meantime, you can read the latest working draft. 
• DOM Level 3 Events
  Travis Leithead, Internet Explorer Program Manager, continues to help close down open issues with the latest editor's draft. It's been awhile since the working group published the last working draft and the group plans to publish an update soon that will improve clarity for implementers and web authors alike. On a recent teleconference, we noted that DOM Level 2 Events was published as a Recommendation nearly 10 years ago; it's exciting to have the next milestone in sight!

Finally, you can read an interview with Paul Cotton from Microsoft and co-Chair of the W3C HTML Working Group on the W3C Blog.

Adrian Bateman
Program Manager

by ieblog at March 09, 2010 09:23 PM