In order to to best understand what’s changed, you need to remember that a device pixel is not the same as a CSS pixel (see CSS Pixels), and that high DPI displays are able to create crisper and sharper images by fitting more device pixels into a smaller space. This means that in order for content to appear at a normal size, the browser treats each CSS pixel as multiple device pixels and the browser scaled up assets and images to fit within the correct number of CSS pixels.

In Android browser and early versions of Chrome for Android, developers could use target-densitydpi=device-dpi viewport value to force the browser to make a CSS pixel the same size as a device pixel, which may cause content to appear incorrectly scaled on screen (as seen in figure 1).

Figure 1 – The effects of target-densitydpi
<meta name="viewport" content="width=device-width, target-densitydpi=device-dpi">
Left: Android Browser respects the target-densitydpi setting and causes content to be improperly scaled.
Right: Chrome for Android ignores the target-densitydpi setting.

An Easy, Quick Fix

In most cases, if your site is affected by this change you can fix it easily by serving the same mark-up (including viewport) to Chrome for Android as you serve to mobile Safari (which never supported target-densitydpi).

Best Practices for Modern Mobile Web Sites

When designing a new mobile site, or updating existing pages, you should use modern techniques for dealing with high DPI displays; including always using <meta name="viewport" content="width=device-width"> and a flexible layout for mobile sites. Remember, device sizes, orientations and pixel ratios vary which means that your site may be displayed on a screen ranging from 320 to over 600 CSS pixels wide.

For more information about best practices for building websites that work well on high DPI displays, check out Reda Lemeden’s Towards a Rentina Web article on Smashing Magazine.

One Other Little Note

While writing up this post, I accidentally did a search for sites that used target-density instead of target-densitydpi and I came across quite a few of them. If you’re using target-density (without the dpi at the end), you can just remove it, it wasn’t doing anything!

Browsers can be pretty forgiving most days, they do their best to fix our coding mistakes; but it’s a tough job. Most days, they manage to get it right, but trying to fix all the possible error cases is pretty hard. Worse yet, sometimes one browser fixes our code for us, while others don’t.

The viewport meta tag seems to be one of those elements that’s a little bit persnickety. The CSS Device Adaptation spec says the correct syntax uses a comma to separate the values. Unfortunately some sites use a semi-colon, which causes the browser to ignore your viewport settings completely!

Correct Syntax

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

Incorrect Syntax

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0" />

If you want to see this in action and how bad things can look, use the remote debugger with Chrome for Android Beta to change the comma to a semi-colon in the viewport meta tag on Google.com. The site will suddenly go from looking good, to looking awful.

The Developer Tools also warn you in the Console when it comes across an invalid viewport meta tag with the warning: Viewport argument value "device-width;" for key "width" is invalid, and has been ignored. Note that ';' is not a separator in viewport values. The list should be comma-separated.

Go make awesome, but use a comma!

What is the viewport?

Figure 1 – If mobile browsers didn’t apply a default viewport, web pages would overfill the screen.

Imagine if every web page you opened on your phone or tablet got the same version as your desktop, and was displayed on the small screen of your device. On a phone, that might mean you would see only the top leftmost corner, a tiny 320px by 480px view, and you’d have to scroll around the page to be able to see everything. (See figure 1). Unlike a desktop or laptop, there is no way to resize the browser window to fit the content that you want to see. Thankfully, on mobile devices, almost every modern browser scales and renders the page so that you can more easily see and interact with it, panning and zooming into the areas you’re most interested in.

Figure 2

Most mobile browsers define a default viewport width of 980px CSS pixels, meaning that they lay out the page on a 980px wide area, then scale it down to fit within the width of the screen. (If you’re unfamiliar with CSS pixels, device pixels, device pixels ratios, or the like, check out the Smashing Magazine article Towards a Retina Web. This works great for most desktop sites that don’t take into account mobile devices and were designed for big screens. Sites that were designed to be compatible with narrow screens however are likely to be unnecessarily stretched and scaled. For example, see figure 2 – there is no viewport set, and the image is 1600px wide, that means users need to scroll left to right to see all of the content.

The meta viewport tag allows you to override the browser default value, allowing you to adjust the display and zoom level to best suit your web page.

Using meta viewport

Setting a specific viewport width

To override the default viewport defined by the browser you simply need to add a viewport meta tag in the <head> section of your page:

<meta name="viewport" content="width=320" />

Figure 3- A page with a fixed viewport width.

Setting the viewport width to 320px, is similar to resizing your laptop browser window to be 320px wide, now the browser will render the page on a canvas that’s 320px wide. If your device is 320px, then you’re all set, the browser doesn’t have to do any scaling and you’re pretty much all set. Obviously not all devices are 320px wide, and your site most likely isn’t 320px wide.

But what happens if you rotate the phone from portrait to landscape, and suddenly the device is now actually 480px wide? If this happens, the browser scales the content up by 50%, so that the 320px width, so that the 320px wide document is stretched to fit in the 480px wide browser window. Unfortunately, when this scaling is applied, less content will be displayed above the fold, and the content may look oversized.

If you’ve designed a site for a fixed width desktop, for example, you know your page is 600px wide, then you can simply add <meta name="viewport" content="width=600" /> to the <head> of your document, which will scale the content to fit within the window. Depending on the density of your content, this may work well, but you’ll want to test it to make sure.

Adding a specific width viewport, is discouraged unless you’re adding it to a legacy site as a stop-gap measure until you can build a more responsive site.

Setting the viewport width to the device-width

Figure 4 – A page with width=device-width viewport.

Consider the sustainability of a fixed width website and how it would look given the huge variety of mobile web devices, each with a different screen size, it becomes even more of a challenge when those devices are used in landscape mode. For that reason, building your site using a responsive approach and placing it within the viewport without any zooming will help to make your site look great across all of those devices. It doesn’t need to be responsive from phone all the way to desktop, but it should at least flex from a small portrait phone, to a mid-sized mobile tablet in landscape; about 320px to 640px.

When you design your page or web app using a responsive approach, you don’t want the browser to render your responsive content in a viewport that is 980px wide and then scaled down to the tiny screen; instead you want the content to render in the actual viewport size. To do that, you can tell the browser to set the viewport to be the width of the actual device by applying the following meta viewport tag:

<meta name="viewport" content="width=device-width" />

This means the viewport will be proportional to the width of the device’s screen, for example on any portrait iPhone (whether or not it is retina) the width would be 320 CSS pixels, on a landscape iPhone 3 or iPhone 4 it would be 480 CSS pixels, on a portrait Nexus 4 it would be 384 CSS pixels, and on a landscape Nexus 4 it would be 640 CSS pixels

Setting the viewport scale

When you specify a specific value for the viewport width, the browser will automatically determine the appropriate scale factor needed. For example, if you set the width=640 on a device that has a screen width of 320px, the browser will scale the content by 0.5.

In some cases, you may want to specify the scale used by the browser. You can do this by setting initial-scale, minimum-scale and maximum-scale.

<meta name="viewport" content="width=device-width, initial-scale=1" />

Initial scale forces the browser to an initial scale, but still allows the user to pinch-zoom on the content to be able to make things larger or smaller. By using minimum-scale or maximum-scale, you can set a boundary on the amount of scaling the user can do.

You can also prevent zooming by adding user-scalable=no, or setting the minimum-scale and maximum-scale to the same values. This is particularly useful for mobile web applications where it doesn’t make sense to allow the user to zoom or scale content.

<meta name="viewport" content="width=device-width, initial-scale=1, 
  maximum-scale=1, minimum-scale=1" />

Currently the user-scalable property does not work in Chrome for Android (m18).

Setting the viewport height

In addition to setting the viewport width, you can also set the viewport height. While it’s not something that’s used often, it’s good for mobile web applications that may pan horizontally only.

<meta name="viewport" content="height=device-height" />

Practices that are no longer recommended

• Adding a specific width viewport, is discouraged unless you’re adding it to a legacy site as a stop-gap measure until you can build a more responsive site (you’ll need to replace the 320 with the width of your site):<meta name="viewport" content="width=320" />
• The viewport property target-densitydpi has been removed from the CSS Device Adaptation specification and should not be used. It has been deprecated in Chrome for Android, and has never been supported in Mobile Safari or Firefox for Android. For more information, see Mozilla Bug 797090 or WebKit bug 88047.

Best practice for using meta viewport

• Use a comma to delimit different viewport properties. Although semi-colons may work, they do not behave consistently across browsers.
• For a responsive website, designed with mobile in mind and where the user may want to be able to zoom in to particular areas of content:

  <meta name="viewport" content="width=device-width,
    initial-scale=1" />
  

• For a mobile web application where you don’t want to allow zooming of the content:

  <meta name="viewport" content="width=device-width,
    minimum-scale=1, maximum-scale=1" />
  

The Future

Currently, the only consistent way to specify the viewport for a page is via the meta viewport tag, but the W3C is currently working on a CSS Device Adaptation, that will provide a way to specify the size, zoom factor and orientation of the viewport in CSS using the @viewport rule. As of late 2012, only Opera Mobile 11+ and Internet Explorer 10 provide support for it using a vendor prefix.

Additional Resources

• http://dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/
• http://developer.apple.com/library/safari/#documentation/appleapplications/reference/safariwebcontent/usingtheviewport/usingtheviewport.html
• https://developer.mozilla.org/en-US/docs/Mobile/Viewport_meta_tag
• http://www.quirksmode.org/mobile/viewports.html

More than just ‘offline’
But applications that work offline isn’t the only reason to start using these new techniques. There are lots of other scenarios that benefit from the offline experience. For example, the intermittent connection where someone may have a connection for 5 minutes, then lose it for 2 then have it again for 3 minutes. The low bandwidth connection, for people connected maybe by dial-up or 3G modem. It also benefits the person with a great net connection – because any time you load data from the local machine, it’s almost guaranteed to be faster than if it were to come across the network. The performance benefits are pretty significant here!

Reuse the same code for different platforms
If you’re already building native (iOS, Android, Desktop) applications, you probably already have the set of server-side APIs, build your web application to take advantage of those to get the data that it needs. Architect your web application in the same way that you’re building native applications – using the same set of APIs and XMLHTTPRequests! If you’re worried about performance (and everyone should be), you should cache data locally, so that after the first time the app is run, it only needs to get the newest data from the server, and there is some available immediately at start up.

Offline techniques
Building applications that work offline requires two main things, a way to store the applications components (the HTML, JavaScript, CSS, images, and other assets) on the user’s machine, and some way to store data. Solving the first problem is done with the HTML5 feature application cache, which tells the browser to explicitly store the necessary files locally on the user’s computer, and instead of asking for them from the server every time, load them from the cache.

HTML5 offers lots of great ways to cache data locally, localStorage, indexed DB and web SQL. Unfortunately, the only consistently available storage feature today is localStorage, but it’s got a few drawbacks. WebSQL works across most browsers, but it has been deprecated, and could go away at some point. The recommended method, is indexed DB, but it’s not available in all browsers yet, but it’s coming. Check out http://caniuse.com for more info about implementation.

Up next – how do we get users to demand offline?

How it works

When a user opens the Video Player Sample web app, they can choose to watch a single video or create a playlist of videos/episodes from a list that they have uploaded and populated to the app. The Video Player Sample is configured and information about the videos is stored in JSON files (config.json and data.json respectively), both of which are located in the data directory.

Key features

• A beautiful video watching experience, including a full screen view
• Ability to subscribe to shows, watch episodes, create play lists
• Support for multiple video formats depending on what the user’s browser supports (including WebM, Ogg, MP4, and even a Flash fallback)
• A Categories page with an overview of the different shows/categories available in the app
• Notifications of new episodes (when the app is installed via the Chrome Web Store)
• Built in support for sharing to Google+, Twitter and Facebook
• To ensure easy customization, all source files, including the Photoshop PSD’s, are included

How it’s built

The Google Video Application is written for the open web platform using HTML and JavaScript, broadly following the MVC (Model View Controller) pattern and structure.

• It is built using the open source Google Closure JavaScript library
• Compiled with the Closure Compiler
• Distributed through the Chrome Web Store to take advantage of notifications

Browser Support

In addition to working as an app that can be installed through the Chrome Web Store, the Video Player Web App has been tested and works in all of the modern browsers.

Try it out

You can see a demo of the video player in action in the demo app, or by Adding it to Chrome through the Chrome Web Store. To learn more about how the app works, check out the documentation.

You can grab the code from Google Code.

Enjoy!

Cross Posted at: http://google-opensource.blogspot.com/2012/01/introducing-video-player-sample.html

Credits: Seth Ladd for the HTML5 Guy idea. Kevin Cornell (via) Zeldman for the Beanie.

Other Formats: SVG Adobe Illustrator PNG

One piece of the puzzle that hasn’t really solidified yet is what defines a web app, and how does it differ from a web site?  Are app like experiences on the web part of a website, or are they web apps?  What about web sites that provide the same functionality as an app, but looks like a web site?

Is it a web site, or a web app?

TripIt is a great example, it’s concept is absolutely an app, it helps me to coordinate my travel plans into a single place where I can easily organize my trips into a single online experience.  Here’s where it gets confusing, compare their web application to their tablet application.  I can do exactly the same sets of things, but one looks like an application, and one looks like a website.  They both let me do the same tasks, but they provide very different experiences to complete those tasks. So what is the TripIt web app, is it a site or an app?

How do we define a web app then?

A web application is an application utilizing web and [web] browser technologies to accomplish one or more tasks over a network, typically through a [web] browser.

That answer is almost as good as saying “because it’s not orange” to the question why is the sky blue.

It can’t be a single criteria

Single criteria definitions don’t work for me either.  Can we say something is an app because of a single property?  For example, creation vs. consumption, or architecture.  Add the diversity of web apps to the mix, and I think we hit a wall when it comes to defining web apps with a single criterion.

A web app checklist

The diversity of apps makes it impossible to have a single go/no-go checklist that we can use to define apps.  A criterion for one app may be completely inappropriate for another app.  Instead, I think we need to judge apps based on reaching a particular bar of ‘app-y-ness’.

• Does the app have a tight focus around a single point or purpose?
• Is the app self-contained, keeping me within the app to complete my task?
• Does the app encourage interaction, engagement and completion of tasks?
• Does the app look beaultiful and have a rich user experience?
• Does the app have an action oriented interface that uses similar paradigms to native applications, for example dialogs, buttons instead of links and new pages?
• Is there at least a functional offline experience?
• Does the app take advantage of the capabilities of the device, like geolocation or device motion?
• Are traditional websites elements and links are hidden from view?
• Is the app architected to uses a primarily client side architecture model?

Now, let’s look at TripIt’s web “app” vs. their tablet app:

By this criteria, even though their web site is super functional, I can get the things done that I want and has some of the qualities of an app, it clearly could be more app-y.  Could TripIt build the same experience as a web app?  Absolutely!  Heck, it might even be less work because then they could reuse a lot of their design and UI components across the web and tablet versions.

But who really cares?

I do!  With more and more people demanding apps, I think we’re missing a huge opportunity to provide our users with web applications that are better, faster, and more fun to use than their mobile or native counterparts.  People will pay for mobile and native applications, but we have given them very few web apps that are worth their money.  We need to step up and change that, let’s build a more app-y web.

Now, with in SVG!  I also created a skin for my laptop with this guy and had it printed at GelaSkins:

With any newly launched product, there are lots of great opportunities for people to jump on board early, and if you’re a Web Developer in Canada, this is certainly one of them. On Thursday, we announced a special program for Canadian Web Developers. We want to see more Canadian Web Developers featured with apps that will resonate with Canadians. That’s why we’re offering a great incentive for submitting your apps! Our panel of experts will review the apps that you submit and for each app that meets the criteria, you will receive a $200 Amazon gift certificate – not to mention exposure to more than 200 million Chrome users around the world.

You’ve got until December 31, 2011 at midnight (PST) to get your app submitted to the Chrome Web Store and fill out the submission form. You’ve got just about 2 months to get your app built and submitted.  Be sure to read the complete rules and regulations at here.

To learn more visit The Chrome Web Store Canadian Web Developer Incentive Program site, including full regulations, and how to submit your app!

If you’re looking for resources to get you started, check out some of these links:

• Chrome Web Store Developer Guides: http://code.google.com/chrome/webstore/docs/index.html. These are the developer guides and tutorials for getting started submitting web apps to the Chrome Web Store.
• Tutorial: Getting Started with the Chrome Web Store: http://code.google.com/chrome/webstore/docs/get_started_simple.html. A super easy tutorial that will get your app into the store, without any custom features.
• Background: Extending Your App’s Life: http://code.google.com/chrome/apps/docs/background.html. This details how to add the background features to your app, using this, you can query for information, and then use notifications to alert the user, even when they’re not in/on your site.
• Using the Notifications API: http://www.html5rocks.com/en/tutorials/notifications/quick/ is a tutorial on how to use the notifications API available in Chrome and through the Chrome Web Store.
• Identifying the User: http://code.google.com/chrome/webstore/docs/identify_user.html is a good overview of OpenID and at the bottom under resources are a couple links to tutorials on implementing OpenID.
• AppMator: http://appmator.appspot.com is a tool that will automate the basic process of getting your app into the store. Sadly, it won’t handle the background page stuff, but does do the basics
• Application Cache: http://www.webdirections.org/blog/get-offline/ and http://www.html5rocks.com/en/tutorials/#appcache both provide great resources that you’ll find quite helpful
• Web Storage – LocalStorage and SessionStorage: are both widely implemented and allow for storing of name/value pairs, not good for binary data, but useful for things like lessons completed or topics of interest. The other great way we’ve seen this used is as a temporary cache until the client can connect to the server to update things. http://www.html5rocks.com/en/features/storage

Good luck!
PEte

Since the consumer UI will change in the near future, I’ve listed my suggestions in the order that they appear within the Developer Dashboard and included screenshots from both the Developer Dashboard and the current consumer UI. I’ll update the screenshots when the new UI launches.

Let’s dive in

Your first chance to make a great impression with a new user is often on your application listing page in the Chrome Web Store. People will make a split second decision whether to install your application based on what you put on there, so it’s important to make a great first impression. Let’s take a look at what makes a great Chrome Web Store application listing. This updated guide highlights a couple key components of a great Chrome Web Store listing. I tried not to repeat content from the documentation, but instead tease out the important parts or best practices. Be sure to follow the links for additional resources or details.

A Couple Quick Examples

I think both TweetDeck and Google Maps do a great job of providing a compelling, and interesting listing, so we’ll use those as our primary examples.

Application Name and Short Description

The application manifest file (manifest.json) has a property for a short description of your application. Use this to tell users about what your application does and why they should get excited and care about it. It’s limited to 132 characters, and cannot include any HTML. For example, the description for Angry Birds is simply “Birds! Slingshots! Destruction! Feathers! Fun!” For Gmail, it’s “Fast, searchable email with less spam.”

You must also specify the application name within the manifest file – be sure to specify only the name and not any taglines or things that would be more appropriate for the short description.  In the current UI, the +1 button will also be displayed in this section, another reason to not include tag lines or other stuff in your application name.

One other good tip – try to use ‘simple’ characters in your application name, and don’t get too fancy including special unicode characters.  For example, if your app is named App², use App2 instead of App².  Currently search sees those two as different app names, and if you search for App2, you won’t find App².

Detailed Description

Beyond the concise description set in the manifest file, a detailed description can be provided via the Chrome Web Store Developer Dashboard. This is your space to really excite your potential users about your application and convince them to install or buy it. If you’ve already built a landing page on your web site, you can likely leverage what you’ve already written here.

You should provide a detailed description of your application, including it’s features, quotes from great reviews, information about recent updates, and any other information that might be relevant to potential users. If your application has a freemium or free trial, be sure to tell users the differences between the paid and free experience so they’re not surprised or disappointed by functionality that they might not have access to.

Remember, this description will be searchable, so be sure to use any key words in your description that might help users to find your application if they try searching for it without knowing the name of it.

If your product is compatible with a Google product, make reference to that Google product by using the text “for”, “for use with”, or “compatible with”, and be sure to include the ™ symbol with the Google trademark. Example: “for Google Chrome™”. For other third party products, be sure to check any requirements that they may have when describing your application.

I also recommend including a short description of things that have changed since the last update, including any major bug fixes and such. This helps keep the user informed and tells them that you’re invested in the app and listening to their feedback.

Supplying Icons

When you package and upload your application to the Chrome Web Store, it needs to include at least the manifest file, and an application icon. The icon that you include in the ZIP file is the icon that is used on the new tab page in Chrome after the application has been installed. Your icon should be eye catching and representative of your application. You also need to supply a second icon that is uploaded via the Developer Dashboard. This icon is the one that is shown in the Chrome Web Store – through search, browse and currently on you application listing page.

Personally, I would use the same icon in both places because otherwise it I think it gets confusing for users, they see one icon when they install your application and then can’t find it in their new tab page because you’ve used a different icon!

Remember, the icons are pretty small, so you can’t be too complex or detailed. If your icon is not circular, we recommend you try to keep it within a 96×96 pixels box, with a 16 pixel per side transparent border. For circular icons, you can go up to 112×112 pixels. It’s generally a good idea to avoid words or text because it makes localization difficult and often becomes difficult to read. One exception to this is that if your app name or company name is part of your logo, then it’s probably okay to use.

Here are a couple of my favorite icons

Check out the Supplying Images of the Chrome Web Store docs for more info.

Screenshots & Promotional Images

We’ve done some work to increase the quality and provide you with more space to show off what your app does with the new screenshots and promotional images. The old images were simply too small to be able to really be useful or exciting for consumers. We’ve also done away with the customized header background.

Screenshots can be one of the most compelling factors in a user’s decision to install or buy an application, so it’s important to provide at least four or five screen shots that give a user a sense for how your application works, some of the features it offers and an idea of the different elements. You should always start with a beautiful screen shot that provides a detailed overview of the application experience first, and then drill into the additional elements. Make sure the screenshots show your application in use, so that users can see how the application works, and how they might use it. If you’re displaying any kind of data from the user, be sure to use safe or sample data in the screenshots instead of blurring things out or accidentally sharing personally identifiable information.

Screen shots should be full bleed images with square corners that are 1280×800 pixels. Since not every user has a 30” display, you can count on these images being scaled smaller to fit within the Chrome Web Store UI, and the user’s screen. With such large images, it’s important to show your app both at a high level, but also include images of your app in detail. Be sure to not over-compress or scale images so that you can’t see any of the detail. Further details about supplying screenshots are available in the Chrome Web Store documentation under Supplying Images. You can also provide locale specific screenshots if your app supports multiple locales.

YouTube Videos & Google Docs Presentations

A picture may be worth 1000 words, but video is worth many more. The Chrome Web Store allows you to add a YouTube video to the screen shot collection, allowing you to provide a richer way to show people your application, and convince them to install or buy it. Keep in mind that in many cases, people haven’t yet made the decision to install or buy your application, and likely won’t be willing to invest a lot of time, so optimize for a short, high quality overview that highlights the main features and will encourage people to try it.

Promotional Images

We’re always on the lookout for great web applications to feature throughout the Chrome Web Store. When we find them we use the promotional images, but if you don’t have promotional images, we can’t promote you! Also in the new UI, the small and large tiles will be featured more prominently across the site for all applications. Only the small marquee is required, but I’d strongly recommend providing all three.

All three promotional images should use the same branding and identity as the rest of the images that you supplied, and have a dark or medium background with light text and avoid any white or very light elements along the edges of the images. The small tile should be 440×280 pixels, the large tile 920×680 pixels, and a marquee tile that’s 1400×560 pixels. All of the tiles should have square corners and with no padding. It’s also a good idea to Additional details on promotional images can be found in the Chrome Web Store documentation.

Verified Domain

Verifying your domain via the Google Webmaster Tools is like adding a certificate of authenticity to something that you’re going to buy in the store. A verified application tells potential users they’re about the install a genuine, user experience from your site – and that they’re not getting a cheap, or potentially unsafe knock-off. Also, be sure the domain name that you’ve verified and are using makes sense, and isn’t a development or staging domain; which may scare away your users.

Additional Links

You can also provide your potential customers with additional resources that are on your site. Providing the URLs for description and support pages can improve your users’ experience and help make this item’s ratings and comments more meaningful. The “Link to website for your item” should point to the landing page of your website. You can also provide a link to the help or support section of your site via the “Link to support & FAQ for your item”

Categories

Putting your application into the most appropriate category will make it easy for users to find your application when they browse the store. You can choose up to two categories that are most appropriate for your application. You can find a list of the different categories as well as a description and examples for each in the Chrome Web Store developer documentation.

Even though you can choose up to two categories, and your application will be listed under both, it will only show one category on the navigation breadcrumb when you view it in the Chrome Web Store.

Other Helpful Components

Version Number & Last Updated

One of the great features of web applications is the ease at which we can add new features, fix bugs and enhance the overall user experience. It’s strongly recommended that you increment the version number in your manifest file and re-upload it to the Chrome Web Store any time you provide significant updates or bug fixes to your application. This ensures that the version number and last updated field on your application listing stay up to date, and users know that you’re application is fresh, and that you’re constantly working to make it better.

Also, when choosing a version number, it’s a good idea to start at 1.0, or as close to it as you can so that people know your application is ready for real world use and that you’re not something that’s still in beta or may not work as expected. If you’re not ready to be out of beta yet, that’s okay, but provide a realistic version number that indicates how close you are to being out of beta. And be sure to stay away from version numbers like 0.0.0.1.

Mature Content

If your application isn’t very child friendly, then marking it as Mature Content is probably a good idea. For example, some first person shooter games may not be appropriate for children. When considering whether your application should be marked as mature or not, evaluate your entire application, including any user generated content that may appear. There’s more info about ratings in the Ratings Guidelines section.

Analytics

While providing your Google analytics token won’t directly make the user experience any better, it will provide you with lots of data that you can use to understand who’s using your app, how many people are installing it and more detailed information than is available through the number of users or the number of weekly installs.

Using the Chrome Web Store Badge

On your application home page, you can let others know that your app is available in the Chrome Web Store by using the “Available in the Chrome Web Store” badge on your site and even going so far as to do browser sniffing to provide Chrome users with additional messaging.

Conclusion

There’s a lot you can do to make sure that you make a great first impression with your Chrome Web Store listing that encourages users to buy or install your application. Good luck, and let’s go build some cool web apps!  And of course, I’d be remiss if I didn’t include a link to @sethladd‘s blog post about 13 great tips!

My slide decks are based on HTML5Slides, the Google HTML5 Slide Template – it’s the same one that was used at Google IO, generally by the Chrome DevRel team and lots of other folks.  It’s freely available for anyone to use, modify, fork, whatever you want, and creating the content for it is pretty easy.  One of my favorite things about using the HTML5Slides as my presentation software is that I can embed my demos straight into the slides and when you want to understand what’s going on, you can simply view source!

There are a couple of things that I think this framework is missing though.  There isn’t a way to do a presenter view and an audience view (not always necessary, but sometimes helpful to make sure you don’t forget any of the important points you want to hit).  There wasn’t an easy way to add fades when doing builds, but most importantly for me, it doesn’t have any kind of timer.   I love to talk, and can easily lose track of time when on stage.

Creating a presentation timer

This weekend, while on the flight from Brazil to Argentina, I build a little timer plug in that would help better keep track of time.  I wanted it to do three things:

1. Tell me how many minutes until the official start time of my presentation
2. Tell me how many minutes left until I was supposed to be done
3. Tell me when I was done, and how many minutes over I was

Inserting a canvas element

Let’s jump right into the code! When the timer starts, it inserts a <canvas> element at the beginning of the <body> element with insertAdjacentHTML. The canvas element is going to draw our clock face and display the number of minutes left.

var insertElement = function() {
  var body = document.getElementsByTagName("body")[0];
  body.insertAdjacentHTML("afterbegin", 
    '<canvas id="cClock" width="30" height="30"></canvas>');
}

Make it look pretty, and subtle

Since I wanted things to be very subtle and configurable, I used CSS to set the position to the upper left corner, and set the opacity to 0.25 to it mostly invisible so that I’ll likely be the only one who notices it. I also created a hover pseudo element so that I can hover over the element if I need to. Finally, I added a hidden class so that the element is completely invisible if the presentation ended a long time ago.

#cClock {
  position: fixed;
  top: 0px;
  left: 0px;
  opacity: 0.25;
  z-index: 1000;
}
    
#cClock:hover { opacity: 1.0; }

#cClock.hidden { display: none; }

Refreshing the clock

When I start the clock, it uses a setTimeout to fire at a specific interval. I decided to use setTimeout instead of setInterval because I wanted to be able to dynamically change the amount of time between refreshes, depending on where in the presentation I was. If I was close to either the start time or end time, I want the clock to update more often, where as in the middle, it can fire every minute.

Drawing the clock
Getting the clock to draw in the way I wanted took a little bit of tinkering.

  var drawClock = function(min, color) {
    var canvas = document.getElementById("cClock");
    var ctx = canvas.getContext('2d');
    ctx.clearRect(0,0,30,30);
    ctx.lineWidth = 3;
    ctx.strokeStyle = color;
    ctx.beginPath();
    ctx.arc(15, 15, 10, toRadians(-90), toRadians((((min-60)/60)*360)-90), true);
    ctx.stroke();
    ctx.fillStyle = color;
    ctx.font="10px sans-serif"
    ctx.textAlign = "center";
    ctx.textBaseline = "middle";
    ctx.fillText(min, 15, 15);
  }

Math is hard, let’s go shopping!*

drawClock(min, color) grabs the <canvas> element, and uses clearRect() to erase everything in the box. I then set the line width and color and start the drawing the circle with beginPath() and arc(). Let’s quickly start at the end, the “true” tells arc to draw the circle counterclockwise. Then, the first three parameters tell the arc to put the center at 15, 15 with a radius of 10px. The next two parameters are the angles to start drawing the circle at in radians. If you remember high school algebra (which I don’t), 0 in radians on a circle would be equivalent of 3pm on a clock, so to figure out where the top is, we need to rotate -90 degrees and then convert to radians with toRadians(-90).

To calculate the second arc position, we need to convert everything to radians again, but we also need to figure out the angle in degrees. Since I wanted the circle to become more complete the closer the time gets to zero, I started by taking the minutes and subtracting 60. Next, I needed to figure out where (in degrees) the minutes would be, to do that, I divided by 60 to get a percentage and multiplied by 360 to get the degrees along the circle.

For example to figure out where the circle should end if the minutes were 15:
toRadians((((15 – 60) / 60) * 360) – 90)
-45 / 60 = -0.75 — The arc line should continue three quarters of the way around
-0.75 * 360 = -270 — The angle in degrees that the arc should draw to
-270 – 90 = -360 — The angle in radians, and remember my comment earlier that 0 (or 360) would be at the 3 o’clock position.

Phew! When coding this up, that was the hardest part for me. I’m not exactly the biggest math fan! Next I called .stroke() to draw the circle, and sure enough – the circle appears! Finally, I wanted to show the number of minutes left in the center of the circle. I did that by using fillText(). To get things to fit in the circle perfectly centered, I aligned everything middle and center, and with fillText, set the base point to 15, 15 – the center of the box.

Getting the countdown timer on screen

Finally – to create an instance of the clock in a presentation, I created a JSON config object that contained the start time, and a length and a warning time, and then created an instance of the timer.

<script type="text/javascript" src="js/timer.js"></script>
<script type="text/javascript">
  window.timerConfig = window.timerConfig || {
    settings : {
      date: new Date('Sept 19 2011 16:30'),
      minutes: 45,
      warnAt: 10
    }
  };
  var t = PresentationTimer();
  t.start()
</script>

In action

I’ve iframed the timer into the window below, or you can try it here. It creates a new instance of the timer, and sets the start time to be two minutes from now, with a length of 2 minutes and a warning at 1 minute. I also made a small change to the CSS so that it’s less transparent and you can see it better.

Summary

You can see the entire timer.js file in GitHub, or even grab the whole project.. I really want to integrate this into the HTML5Slides template at some point, because I think it’s pretty useful. Feel free to grab it, use it, fork it, what ever works for you!

*Math is hard, let’s go shopping is one of my favorite Simpsons quotes.

I presented two sessions in at each of the Google Developer Days (videos are coming shortly and I’ll link to them as soon as they’re posted), and had a small part in the keynote demoing the Chrome stuff.  Our venue in Buenos Aires, a Catholic University, was pretty neat, though as I joked, the last time I was in a university classroom, I was probably at the back of the room trying to stay awake. When we got to the venue on Sunday night to do our rehearsals and tech checks, they hadn’t put the Google Developer Day decorations up yet, which was a little weird because there was a crucifix on one side, and a large photo of the previous Pope on the other side.  We also hit a little snag because they blocked a couple of the websites that we needed!  Thankfully they were really good and got them unblocked pretty quickly.

I think my favorite on stage oops was during the live speech recognition demo.  Any time you do a speech recognition demo on stage in a big venue, the acoustics work against you – but can sometimes lead to comical results.  In Brazil, I tried to say “Hola Brazil”, which Chrome thought was “Fort Lauderdale”.  I did the same demo in Buenos Aires, and got “Call Argentina”.

I’ve listed the demos and slide decks below, and as soon as the videos go online, I’ll get a post out about those!  The slide decks between the two countries are the same, the only thing that changed was the title slide.

Keynote Demos

• All Is Not Lost – right click on the text box, and choose Inspect Element, then right click on the tag to Add an Attribute, and add the x-webkit-speech attribute.  Then you can try your own speech demo!
• Flux Sliders, Movie Posters & jQuery Photo Gallery – the CSS3 3D photo gallery demos
• WebGL Water – the beautiful pool demo with WebGL
• SimCity 2000 – the Native Client demo

Sao Paulo, Brazil

• Bleeding Edge HTML5 (be sure to try in Canary or other super new browser)
• Building Modern Web Apps

Buenos Aires, Argentina

• Bleeding Edge HTML (be sure to try in Canary or other super new browser)
• Building Modern Web Apps

Google is holding a few developer focused hack-a-thons around the US and would like to invite you to attend. At these events, we will be covering some of the latest and greatest features of HTML5, Chrome Web Store and In-App Payments. You will learn about the end to end flow of building a web app, distributing the app and monetizing it using these APIs. You will also have the opportunity to work hands on with the APIs and ask our experts (including me) questions. I’ll be helping out in Chicago and Mountain View.

For more information on the events and to register, please check out the location specific links below:

New York – 8/1 – http://www.eventbrite.com/event/1892631913
Chicago – 8/3 – http://www.eventbrite.com/event/1910102167
Seattle – 8/8 – http://www.eventbrite.com/event/1910138275
Mountain View – 8/11 – http://www.eventbrite.com/event/1910202467

* Image http://www.flickr.com/photos/dmitry-baranovskiy/2378867408/

I’m using a slightly modified version of Eric Meyer’s CSS reset to ensure that everything is ready to go, you can use that or other ones as you see fit.

Let’s get started!

First, let’s create the panel where everything will live

<div class="left-panel">
</div>

and we need to apply a bit of CSS. Typically when I start working on something like this, I’ll use super ugly colors to make sure that the stuff that I’m working on sticks out, so in this case, I’m going for a nice bright red.

#left-panel {
  width: 300px;
  height: 400px;
  border: 3px solid red;
  background-color: #fcc;
}

Positioning The Panel

Great, we’ve not got our panel, though it’s not in the right place, but at least it’s on screen. Next, let’s move it to it’s default position, so that it’s minimized. To do that, I’m going to set the position to fixed – I want it so that it’s always on screen. Then, we need to move the left side of the panel into the negative space, and move the panel down the screen.

#left-panel {
  width: 300px;
  height: 400px;
  border: 5px solid red;
  background-color: #fcc;
  position: fixed;
  top: 150px;
  left: -275px;
}

Making the panel appear

To get the panel to be fully visible, we’re going to add both a hover pseudo-class as well as a show class. The pseudo-class will move it out just a bit, to add some realism and a clear indication that the panel has more to show.

#left-panel:hover {
  left: -250px;
}

#left-panel.show {
  left: 0px;
}

Adding controls to show & hide the panel

You could simply show the panel on any hover, but that always gets a little annoying to me, especially when I’m moving my mouse around quite a bit, so I’d rather not do that. Now we need to add the logic that will show and hide the panel. I’m going to use a hyperlink as the main item, and a little JavaScript to toggle the show class. The &gt; will come in handy a bit later.

<div id="left-panel">
  <a href="#" onclick="showLeftPanel();" class="controller">&gt;</a>
</div>

The CSS for the hyperlink is pretty simple, it absolutely positions the hyperlink in the upper right hand corner, and removes the underline from the text.

#left-panel .controller {
  position: absolute;
  right: 0px;
  top: 0px;
  text-decoration: none;
}

Hooking everything up

Finally, we need the JavaScript to toggle the CSS class. I’m using a new property off element called callList that gives me similar functionality to a lot of libraries for modifying classes on elements. classList provides the ability to add, remove or toggle classes on elements.

<script type="text/javascript">
  function showLeftPanel() {
    var elem = document.getElementById("left-panel");
    elem.classList.toggle("show");
  }
</script>

Now, when we click on the >, the panel becomes visible, and clicking on it again, makes it disappear, perfect! The panel isn’t exactly beautiful yet, and it doesn’t take advantage of any of the cool CSS3 stuff yet, so let’s add a bit of that.

Adding a bit of style

First, we’ll add some rounded corners to the top right, and bottom right, and a little bit of spacing inside the panel with a 5px padding along all the edges. Next, I’ll add the transtion properties. The first, -wekit-transition specifies that all properties that change (beyond what’s indicated in #left-panel), they’ll appear over 0.5 seconds, and will use the ease-in-out transition. In a bit, we’ll need to add the transitions for other browsers that support it – but we’re going to get it working in Chrome first.

#left-panel {
  width: 300px;
  height: 400px;
  border: 5px solid red;
  background-color: #fcc;
  position: fixed;
  top: 150px;
  left: -275px;
  border-radius: 0 1em 1em 0;
  padding: 5px;
  -webkit-transition: all 0.5s ease-in-out;
}

I also need to make a few other modifications to a couple of the other classes. I’ve changed the left on #left-panel.show to -5px. That hides the border on the left, and ensures the 5px padding on the left doesn’t look too odd. I could have modified the border to only display on three sides, but it kind of felt like more work to me.

#left-panel.show {
  left: -5px;
}

Add hinting to help the user

The other thing that I want to do is make a few changes to the open/close hyperlink. Because of the rounded corners, we need to move it in a bit, but I’m also going to add transitions to it as well.

#left-panel a.controller {
  position: absolute;
  right: 5px;
  top: 5px;
  text-decoration: none;
  -webkit-transition: all 0.5s ease-in-out;
}

So why add the transitions? When the panel is closed, we’re using a > which renders like an arrow pointing to the right, to indicate the panel can be closed, we want the arrow to point to the left, so I used a transform and rotated the character by 180 degrees, and suddenly my > is a <!

#left-panel.show a.controller {
  -webkit-transform: rotate(180deg);
}

Our first working version

Alright, so here’s the final code that works in Chrome, with some nicer colors:

The HTML

<div id="left-panel">
  <a href="#" onclick="showLeftPanel();" class="controller">&gt;</a>
</div>

The CSS

#left-panel {
  width: 300px;
  height: 400px;
  border: 5px solid #555;
  background-color: #ccc;
  position: fixed;
  top: 150px;
  left: -275px;
  border-radius: 0 1em 1em 0;
  padding: 5px;
  -webkit-transition: all 0.5s ease-in-out;
}

#left-panel:hover {
  left: -250px;
}

#left-panel.show {
  left: -5px;
}

#left-panel a.controller {
  position: absolute;
  right: 5px;
  top: 5px;
  text-decoration: none;
  -webkit-transition: all 0.5s ease-in-out;
  color: black;
  font-weight: bold;
}

#left-panel.show a.controller {
  -webkit-transform: rotate(180deg);
}

And finally, the JavaScript

<script type="text/javascript">
  function showLeftPanel() {
    var elem = document.getElementById("left-panel");
    elem.classList.toggle("show");
  }
</script>

But what about other browsers?

To get this working in other browsers, we need to change our CSS a bit to add other vendor prefixed items, and we’ll need to make some changes to our JavaScript as well.

Safari

Safari doesn’t support classList’s yet, so we need to modify our JavaScript here. The absolute easiest way to make this change would be to use jQuery’s toggle function, but I want to do this without any libraries. That means we’ll have to do some feature detection to see if elem.classList is supported, if it is, we’ll use that, otherwise we’ll manually add or remove the show class.

<script type="text/javascript">
  function showLeftPanel() {
    var elem = document.getElementById("left-panel");
    if (elem.classList) {
      elem.classList.toggle("show");
    } else {
      var classes = elem.className;
      if (classes.indexOf("show") >= 0) {
        elem.className = classes.replace("show", "");
      } else {
        elem.className = classes + " show"; 
      }
      console.log(elem.className);
    }
  }
</script>

That’s all we need for Safari to work!

Firefox and Opera

Firefox 3.6+ and Opera 11.5+ both support classList, and previous versions will fall back to the manual method, so our JavaScript is good to go. But, the -webkit- vendor prefixed stuff needs a little love and thankfully it’s pretty easy!

In #left-panel and #left-panel a.controller add:

-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;

In #left-panel.show a.controller add:

-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);

Internet Explorer

Unfortunately, Internet Explorer (9 or the Platform Previews for 10), don’t have support for transtions yet, which mean that our panels just appear and disappear, but that’s not an awful experience, it’s just not ideal. In fact, the experience for Internet Explorer 7, 8 and 9 is identical except IE9 does have rounded corners. Just in case they add support for transitions in the future, I added the -ms- vendor prefix already.

Summary

There you go – you’ve not got a simple panel that can be displayed by the simple click of a link, and gets out of the way when not needed. It works in IE7/8/9, Chrome, Firefox, Opera and Safari and I suspect it will work in IE6, though I didn’t test that.

Give it a try at http://petelepage.com/scratch/slider-panel/

We’ve certainly seen a number of web sites start to push the boundaries of traditional navigation and they call out a couple like The Wishes Greenhouse at Clair et Net or how other sites use responsive web design to provide a better experience depending on the capabilities of the device you’re on.

Web Pages & Sites vs. Web Applications

This worked well when the web was only about sites and pages – navigating from one page to another and consuming content. But as we see more and more web applications come online, the traditional navigation model doesn’t work any more.

I think the author missed a great opportunity though to talk about the difference in navigation between web applications and web sites – two very different models. In a web site, navigation provides a connection from one page to another and a way to move around from one piece of content to another. Web application navigation is different, instead of moving between pages, it’s more about providing the user with an ability to control and interact with content. Changing the paradigm away from navigation towards control is one of the core components that separate websites and pages from applications.

Let’s take a quick look at Music by Google. Notice there isn’t a nav bar across the top, or on the sides, and there isn’t a footer either? Instead along the right side, there are a number of links that change my view. At the bottom, where the footer normally would be are the player controls (back, play, forward, volume, etc). Instead of providing links to help me get somewhere – the links on the page help me accomplish something, or change the view that I have (maybe to a different playlist, artist or genre).

Being More App-y

So what makes a web application app-y? Certainly the navigation and controls do. When I look at a web application and how the designers and developers have laid out the navigation, I ask myself how this app might be different if it were a client or mobile application. When was the last time you saw the privacy policy, terms of service or copyright notice not in an about screen on a desktop app, or tucked away under settings in a mobile application? Imagine if that were at the bottom of iTunes and took up the bottom 10%! And we see this all the time in web applications. In fact, GMail is one of my favorite offenders here. Why not tuck that away under settings in top right?

Step Out Of The Box

It will take some time for this paradigm to change, but it’s an important one. Today we still think in the web site and web page “box” too often when creating web applications. Let’s get out of that box, and make web applications feel more like applications and less like web pages.

Before we could start rating these apps, we built out a set of principles and criteria that we felt were important in providing a great application experience on the web.  We based our principles on some earlier work done by Mike and Paul, and refined their thinking into three principles.  We tried to create a set of objective criteria for each of the principles that we could use to rate the apps – and while we didn’t actually assign a score, we wanted to be as objective as possible.

A Tight Focus

A web application has a tight focus encouraging people to interact, engage, and accomplish something, rather than passively view content. It doesn’t distract people with content or components that are orthogonal to the task they’re trying to complete.  People integrate it into their day to day lives because it feels like a natural extension of the things that they understand and do every day.

• The application is limited to a single, core scenario
• Orthogonal scenarios and tasks are removed from view and not presented to the user
• The primary application components are accessible at all times
• Standard web page content and navigation is minimized and the application controls are the primary focus
• The application looks and behaves consistently across different screens, dialogs, controls and other components
• The application starts immediately and requires no set up or configuration before it’s first use
• When starting the application, the user is taken directly to the application instead of a landing page or marketing page
• The application can be used without registering or signing in, or the sign in/up process is extremely easy

Rich Visual Experiences

A web application provides rich visual experiences that will delight the eye without distracting the mind.  A positive first impression makes users comfortable, assures them your application is reliable and professional and encourages people to make the product their own.  A great web application puts a premium on aesthetics without sacrificing usability.

• Appropriate fonts and other typographic features are used to enhance readability
• Graphics and illustrations are high quality and look professional
• The application uses all of the screen real estate available to it
• Textures, gradients, and shadows add to the visual appeal of the application
• Controls and graphics convey meaning without requiring additional context
• Controls and graphics offer a manner of realism
• Standard web page content and navigation is minimized
• Animations are used to introduce new content, dialogs, or other items that require attention or interaction from the user
• Window resize events appropriately handle new screen sizes, resized graphics and images
• Messages and information provided to the user is helpful, easy to understand and actionable

Rich Interactive Experiences

A web application provides a rich, interactive experience that makes technology transparent so people can complete their task confidently without ever having to know or understand what makes the application work.

• The application feels fast and responsive
• The application provides appropriate notifications and information to keep the user informed
• The application follows best practices for building fast web applications
• The application provides a full featured offline experience
• Input from the user is validated before being sent to the server and appropriate input types are used
• Adding or removing data from the application is easy

A couple of my favorite apps

QuickNote

QuickNote was on application that stood out in this category – not only does it focus on it’s primary task (note taking), it didn’t require any setup or logging in to get started.

Flixster

I’m a web developer who knows enough about design to appreciate good design, but not enough to do it myself.  Flixster was a good example of involving design early on in the process – the use of rich CSS3 features like gradients, shadows and such make the app visually appealing and fun to use.

280 Slides

I love it when I see a web application and think – it must be Flash, only to find out that it isn’t – seeing the creativity and ingenuity of other web developers is awesome.  280 Slides is one of those web applications.  Like PowerPoint or Keynote, it’s an app to build slide decks and presentations – but it’s all built using the open web stack.  It was built using Cappuccino, a really powerful web framework for building apps, not web sites.  Def worth checking out.

Each time I uploaded my web.config file, I kept getting 500 server errors that weren’t very helpful.  As it turns out, the extension .manifest is already taken by the mime-type application/x-ms-manifest, and when I tried to override that, IIS got kind of angry, and served the 500 Server error.  I wasn’t quite sure what was happening, but was able to figure it out by reverting to my original web.config file, and requesting the appcache.manifest file that I had already uploaded.  Sure enough, using the network tab in the Chrome DevTools, I saw it was being served back with the wrong mime type.

To resolve the issue, I added a new static file handler for .appcache files in the system.web -> httpHandlers section.  If you don’t do this, IIS doesn’t know about the file type and it won’t serve unknown file types at all.  Then in system.webServer -> staticContent, I added a mimeMap extension for .appcache files with the mimetype of text/cache-manifest.  After uploading the web.config file again, I retried my request, and sure enough, everything worked perfectly!

My final web.config now looks like…

<configuration>
  <system.web>
    ...
    <httpHandlers>
      ...
      <add verb="GET,HEAD" path="*.appcache" 
        type="System.Web.StaticFileHandler" />
    </httpHandlers>
  </system.web>
  ...
  <system.webServer>
  ...
    <staticContent>
    <mimeMap fileExtension=".appcache" 
      mimeType="text/cache-manifest" />
    ...
    </staticContent>
    ...
  </system.webServer>
  ...
</config>

Check out this tutorial on Application Cache at HTML5Rocks.com. Also, you can find a full list of the default mime types provided by GoDaddy’s IIS servers here.

[Update 6/30/11 @ 1:53pm] @Paul_Irish pointed out that the recommended extension is .appcache specifically to avoid the unregistered Microsoft extension, and referred to a bug on HTML5.org. So there you have it!

TweetDeck & Google Maps

I think both TweetDeck and Google Maps do a great job of providing a compelling, and interesting listing, so we’ll use those as our primary examples.

Category

Putting your application in to the most appropriate category will make it easy for users to find your application when they browse the store. You can choose up to two categories that are most appropriate for your application. You can find a list of the different categories as well as a description and examples for each in the Chrome Web Store developer documentation.

Even though you can choose up to two categories, and your application will be listed under both, it will only show one category on the navigation breadcrumb when you view it in the Chrome Web Store. Unfortunately at this time there is no way to change which one is listed when you link directly to the page.

Header Details

Screen Shots and Video

Screen shots can be one of the most compelling factors in a user’s decision to install or buy an application, so it’s important to provide at least four or five screen shots that give a user a sense for how your application works, some of the features it offers and an idea of the different elements. You should always start with a beautiful screen shot that provides a detailed overview of the application experience first, and then drill into the additional elements. Make sure the screen shots show your application in use, so that users can see how the application works, and how they might use it. If you’re displaying any kind of data from the user, be sure to use safe or sample data in the screen shots instead of blurring things out or accidentally sharing personally identifiable information.

Screen shots should be full bleed images with square corners that are 400×275 pixels. Very few applications will actually fit within those dimensions, which means you may have to do some creative scaling, or cropping to provide appropriate screenshots. Be sure to not over-compress or scale images so that you can’t see any of the detail. Further details about supplying screen shots are available in the Chrome Web Store documentation under Supplying Images.

A picture may be worth 1000 words, but video is worth many more. The Chrome Web Store allows you to add a YouTube video to the screen shot collection, allowing you to provide a richer way to show people your application, and convince them to install or buy it. Keep in mind that in many cases, people haven’t yet made the decision to install or buy your application, and likely won’t be willing to invest a lot of time, so optimize for a short, high quality overview that highlights the main features and will encourage people to try it.

Icon

Your application’s icon represents identity of your application, and is an important part of the overall brand. The icon should be professional, and appropriately sized so that it’s not pixelated or skewed. The icon file should be a 128×128 pixel PNG, where the actual icon size should be 96×96 (for square icons); an additional 16 pixels per side should be transparent padding, adding up to 128×128 total image size. Additional details about icons can be found in the Supplying Images section of the Chrome Web Store documentation.

Verified Domain

Verifying your domain via the Google Webmaster Tools is like adding a certificate of authenticity to something that you’re going to buy in the store. A verified application tells potential users they’re about the install a genuine, user experience from your site – and that they’re not getting a cheap, or potentially unsafe knock-off. Also, be sure the domain name that you’ve verified and are using makes sense, and isn’t a development or staging domain; which may scare away your users.

Short Description

The application manifest file (manifest.json) has a property for a short description of your application. Use this to tell users about what your application does and why they should get excited and care about it. It’s limited to 132 characters, and cannot include any HTML. For example, the description for Angry Birds is simply “Birds! Slingshots! Destruction! Feathers! Fun!” For Gmail, it’s “Fast, searchable email with less spam.”

Customized Header Background

You can supply a customized background for the header description that appears on the right side of the header in your application’s store listing. The header background allows you to enhance the identity and branding elements on your listing page. When supplying the background image, make sure your app’s title and description are still readable and that the background elements don’t distract from the overall listing.

The header background image should fill the entire 570×275 pixel canvas, though don’t put anything important in the bottom 60px as those are reserved for the rating, buy or install buttons. Be sure to choose a background color that will provide the appropriate contrast with either white, or black text, though a dark or medium background color is recommended, like in this example. Additional details can be found in the Header background section of the Chrome Web Store documentation.

Full Description

Beyond the concise description set in the manifest file, a detailed description can be provided via the Chrome Web Store Developer Dashboard. This is your space to really excite your potential users about your application and convince them to install or buy it. If you’ve already built a landing page on your web site, you can likely leverage what you’ve already written here.

You should provide a detailed description of your application, including it’s features, quotes from great reviews, information about recent updates, and any other information that might be relevant to potential users. If your application has a freemium or free trial, be sure to tell users the differences between the paid and free experience so they’re not surprised or disappointed by functionality that they might not have access to.

Remember, this description will be searchable, so be sure to use any key words in your description that might help users to find your application if they try searching for it without knowing the name of it.

If your product is compatible with a Google product, make reference to that Google product by using the text “for”, “for use with”, or “compatible with”, and be sure to include the ™ symbol with the Google trademark. Example: “for Google Chrome™”. For other third party products, be sure to check any requirements that they may have when describing your application.

Other Helpful Components

Version Number & Last Updated

One of the great features of web applications is the ease at which we can add new features, fix bugs and enhance the overall user experience. It’s strongly recommended that you increment the version number in your manifest file and re-upload it to the Chrome Web Store any time you provide significant updates or bug fixes to your application. This ensures that the version number and last updated field on your application listing stay up to date, and users know that you’re application is fresh, and that you’re constantly working to make it better.

Also, when choosing a version number, it’s a good idea to start at 1.0, or as close to it as you can so that people know your application is ready for real world use and that you’re not something that’s still in beta or may not work as expected. If you’re not ready to be out of beta yet, that’s okay, but provide a realistic version number that indicates how close you are to being out of beta. And be sure to stay away from version numbers like 0.0.0.1.

Promotional Images

It’s always a good idea to provide a small and large promotional images; in case your application is chosen to be featured in one of the many featured application listings. If it doesn’t have at least one promotional image, it there’s little chance of it being chosen as a feature application! Both images should use the same branding and identity as the rest of the images that you supplied, and have a dark or medium background with light text. The small image should be 210×140 pixels and the large 585×220 pixels, both with square corners and no padding. Additional details on promotional images can be found in the Chrome Web Store documentation.

Using the Chrome Web Store badge

On your application home page, you can let others know that your app is available in the Chrome Web Store by using the “Available in the Chrome Web Store” badge on your site and even going so far as to do browser sniffing to provide Chrome users with additional messaging. Be sure to check out

Conclusion

There’s a lot you can do to make sure that you make a great first impression with your Chrome Web Store listing that encourages users to buy or install your application. Good luck, and let’s go build some cool web apps!

[Update] – thanks to @mikewest for pointing out a few grammatical and other mistakes!
[Update2] – @sethladd reminded me that he’s got a great blog post titled 13 Tips for a Great Chrome Web Store Listing Page

Web Workers are part of the HTML5 specification and allow you to run scripts in the background, independently of the main browser thread. This means that you can do complex calculations or run scripts that may take a while to run without yielding to keep the page responsive.  The W3C spec has some great examples of use cases and other helpful descriptions that are worth reading for deeper details.  It also notes that workers are relatively heavy weight and are not intended to be used in large numbers.

In order to to maintain thread safety, workers run in an effective sandbox, which means they don’t have access to the DOM or many other components.  To get information back and forth between the worker and the main application, we need to use the postMessage method and listen for message events.

In TweeterFall, we used a worker thread poll Twitter for new tweets and then we ‘pushed’ those new tweets to the main thread.  Let’s have a look how we used workers.

Starting & Stopping the Worker

We only ever have one working running in our application, and to maintain an easy handle to it, we defined it’s variable in the global scope.  We then had two methods that would handle how the worker would behave – startWorker() and stopWorker(). The startWorker() method takes a parameter that provides information about the username or list that we want to pull tweets from, how often we should poll Twitter and the ID of the last tweet we saw.

var myWorker;

function startWorker(settings) {
  settings.cmd = "start";
  settings.lastTweetID = lastTweetID();
  console.log("WebWorker: Starting", settings);
  myWorker = new Worker("scripts/worker.js");
  myWorker.addEventListener("message", newTweetHandler, false);  
  myWorker.postMessage(settings);
}

function stopWorker() {
  if (myWorker != undefined) {
    console.log("WebWorker: Terminating");
    myWorker.terminate();
    myWorker = null;
  }
}

In our startWorker() thread, we create the new worker with myWorker = new Worker("scripts/worker.js");, and then add an event listener and listen for any messages that the worker wants to pass back to us – this is the only way we’re going to be able to communicate to the worker because it’s working off in it’s own little isolated world. At this point, the worker exists, and if it wants to tell us anything, we’re ready to listen, but now we need to tell it to do something, which is the myWorker.postMessage(settings);.

Stopping our worker is pretty similar, we check to make sure that we have a valid object, and as long as we do, .terminate() will immediately close the worker without giving it an opportunity to shut down properly or clean up after itself. This works in our case because we don’t have anything in memory and we’re not doing any calculations of any kind. If you may need to save state or want to clean up after yourself, the better way to shut down would be to send a stop message via .postMessage() and within your worker thread, shut down gracefully by calling self.close(); after completing any clean up.

The Worker Thread

Inside our worker thread, we need to set up an event listener to listen for messages from our parent thread and any other code that we want to execute.

self.addEventListener('message', function(e) {
	var data = e.data;
	switch (data.cmd) {
		case 'start':
		  self.postMessage("Worker: Starting");
			setConfig(data);
			readTweets();
			break;
		case 'stop':
		  self.postMessage("Worker: Stopping");
			self.close();
			break;
		default:
		  self.postMessage("Worker: Error - Unknown Command");
	};
}, false);

Our event listener listens for messages from the parent and will start or stop the worker as necessary. When we get the start command, we parse the settings data (setConfig), and then start reading tweets (readTweets()). For sake of readability, I’ll skip the code we used for setConfig(), but it’s easy enough to find if you want it.

function getURL() {
  var sinceID = "";
  if (parseInt(lastKnownTweetID, 10) > 0) {
    sinceID = "&since_id=" + lastKnownTweetID;
  }
  if (typeof userList === 'undefined') {
    return 'http://twitter.com/statuses/user_timeline/' + twitterUser 
      + '.json?count=' + tweetCount+ '&callback=processTweets' + sinceID;
  } else {
    //For a list
    return 'http://api.twitter.com/1/' + twitterUser + '/lists/' + 
      userList + '/statuses.json?callback=processTweets' + sinceID;
  }
}

function readTweets() {
  try {
    var url = getURL();
    self.postMessage("Worker: Attempting To Read Tweets From - " + url);
    importScripts(url);
  }
  catch (e) {
    self.postMessage("Worker: Error - " + e.message);
    setTimeout(readTweets, 120000);
  }
}

readTweets() is the function that does the dirty work, making a JSONP call to Twitter that requests the latest tweets. We encapsulated the URL generation into it’s own method so that we could use it even if we weren’t using workers. Because we don’t have access to the DOM, we can’t just insert a <script> block, so after getting the URL, we call importScripts(url);, which makes an synchronous call and injects the result into the worker. If we run into any problems, like over capacity, not being able to reach Twitter or anything else, it’s caught in the catch block, and we wait two minutes before trying again. Here’s the JSONP call we make http://api.twitter.com/1/petele/lists/chromedevrel-11/statuses.json?callBack=processTweets.

The request we sent to Twitter includes ?callback=processTweets in the query string which will cause processTweets() to be executed once we’ve pulled the new tweets from Twitter.

function processTweets(data) {
  var len = data.length;
  for (var i = 0; i < len; i++) {
    if (data[i].id_str >= lastKnownTweetID) {
      lastKnownTweetID = data[i].id_str;
    }
  }
  returnTweets(data);
}

function returnTweets(data) {
  if (data.length > 0) {
    self.postMessage("Worker: New Tweets - " + data.length);
    self.postMessage(data);
  } else {
    self.postMessage("Worker: New Tweets - 0");
  }
  setTimeout(readTweets, updateDelay);
}

processTweets() enumerates all of the tweets we got back to find the most recent tweet ID. That way, when we ask Twitter again later for tweets, we’re only asking for the ones that we haven’t seen. Once we’ve done that, we call returnTweets() to push the new tweets back to the application. We could have merged processTweets() and returnTweets(), and I don’t remember why I decided to do it as two separate methods. Once we’re returned the tweets via returnTweets() we use setTimeout() to call readTweets() again.

A couple of quick tips

A couple things to remember about web workers, no DOM access means that you can’t manipulate the DOM, so that means that if you want to create new UI components in threads, you can, but you need to do it in the thread, and then pass that back to the main application via postMessage(). Unfortunately, it also means that jQuery doesn’t work in threads, so generating those UI components becomes a little more complex. I’ve heard rumors of a worker safe jQuery library, but haven’t seen it yet. Hopefully!

The other good thing to know is that you can debug works in the Chrome Developer Tools by clicking on the Scripts tab, and scrolling down in the column on the right to Workers and clicking on the debug checkbox.

Summary

I found using workers to be really easy, and a good way of handling this. There are plenty of other good ways to use workers – and it gives us some pretty good power to be able to push complex work down to the client. Especially as browsers JavaScript engines are getting faster and faster.

Additional Resources

• Mozilla Developer Center – Using Web Workers
• W3C Web Workers Spec
• Web Workers on Wikipedia
• HTML5Rocks Web Workers Tutorial

Since notifications are still something that may change, in Chrome, they’re under the webkit vendor prefix. The Chromium implementation details can be found on the Chromium site.

There are two types of notifications that you can surface, what I’ll call simple notifications like the one on the left that contains an image, a headline and some text; and HTML notifications.  HTML notifications are much more powerful because instead of sending the image, headline and text, you send it a URL, and it will display the contents of that URL. That means you can style your notification to match your applications UI and even provide interactivity through links, javascript, etc.

Let’s have a look at how we implemented new tweet notifications in TweeterFall.

Requesting Permission

When the user turns on notifications in TweeterFall, we need to check to see if we have permission to show notifications and if we don’t we need to ask for it. Desktop Notifications pop open a new window and could quickly become an easy spam target if we didn’t provide some kind of permission system. When a user grants or denies permission, they do so for the domain.

function requestPermissionIfRequired() {
  if (!hasNotificationPermission() && (window.webkitNotifications)) {
    window.webkitNotifications.requestPermission();
  }
}

In requestPermissionIfRequired(), we check to see if the browser supports notifications, and if we already have permission. If we don’t have permission, but notifications are supported, Chrome prompts the user asking for permission to provide notifications.

Checking For Permission

I also use feature detection here to check to see if notifications are supported in the browser.  We will only return true if notifications are supported and the user has already given permission to show notifications.

function hasNotificationPermission() {
  return !!(window.webkitNotifications) 
    && (window.webkitNotifications.checkPermission() == 0);
}

Show the Notification

We’re finally ready to show our notification to the user.

function showNotification(pic, title, text) {
  if (hasNotificationPermission()) {
    var notificationWindow = 
      window.webkitNotifications.createNotification(pic, title, text);
    notificationWindow.show();
    setTimeout(function(notWin) {
      notWin.cancel();
    }, 10000, notificationWindow);
  } else {
    console.log("showNotification: No Permission");
  }
}

The method takes three parameters, the image to use, the title and the text do display. When the function is called, it checks to see if it has permission using our previously established permission check that also encompasses feature detection, so we know we’ll be safe calling this even if the browser doesn’t support notifications. We then create the notification with window.webkitNotifications.createNotification(pic, title, text) and show it with .show().

Immediately below that, we have a setTimeout call with an anonymous function that takes one parameter (the window handle to the notification) and will hide the notification after the timeout period has expired. If we didn’t do this, the notification would remain on screen until the user clicked the close button, or closed the browser. I’ve hard coded the timeout to be 10000ms, and you can change this to suit your needs.

Summary

As you can see, showing notifications is pretty easy, check & ask for permission, and then show the notification. You can use these to let the user know when a task is complete, when there’s new information that they might be interested in and so forth. Obviously these only work when a user is on your site, but you can overcome that limitation by publishing your app in the Chrome Web Store and using background pages.

Other Resources

Be sure to check out the notification tutorial on HTML5Rocks, it covers some additional things like the events that notifications fire and using HTML notifications.

What did we use to build TweeterFall?

HTML5 Semantics

We used the new HTML5 semantic elements as our primary markup elements.  The bar across the top is a <header>, the area on the left where the tweets fall is a <section>, the list of Tweets on the right and the configuration panel are both <aside>’s, and the individual tweets are <article>s.

GeoLocation

Since we figured that most people would be in SF, it’d be fun to use some kind of geo location to show how close the person was to your current position when they made their Tweet.  To do that, we pull the users current location using navigator.geolocation.watchPosition and compare that to the geo data in the tweet.  We used the GeoLocation tutorial from HTML5Rocks.com as our inspiration for this.

IndexedDB

Twitter only allows you to pull about 20 tweets at a time, so if you want to see anything before that, you either need to log in (and we didn’t really want to deal with OAuth for this presentation) or store the previous tweets locally.  IndexedDB was the perfect solution for this, as it allows you to store significant quantities of structured data.  Figuring out IndexedDB was probably my biggest challenge for this project, mostly because it’s pretty new and there isn’t a lot of documentation on it yet.  That and the fact that everything you do is asynchronous, so you need lots of fun callbacks!  Look for a whole post on this one shortly.

LocalStorage

IndexedDB works great for structured data, but we also wanted a place to store simple configuration data, so we used web storage for that.  I wanted to have my configuration data in an object so I could easily access things, so I used JSON to parse and stringify my config object as it went into and came out of local storage.

Notifications

We used simple notifications to alert users when there were new tweets, and also included a special handler so that they would disappear after a couple of seconds and not remain on screen for too long.  One of the updates I want to make here is to use HTML notifications, so that we can make things look a little more like the rest of the UI.

Speech Input

Okay, so this one was a bit gratuitous.  If you add x-webkit-speech to text inputs, Chrome will add a microphone icon to the text box.  When the user clicks on the icon, Chrome turns on the microphone, listens for input and then converts what you said into text!  No JavaScript, just all magic!

Web Workers

Web Workers are great for handing off complex or intensive processes off to another thread so they don’t block the rest of the browser. In our case, we wanted to isolate the requests we were making to Twitter into their own place and allow them to “push” notifications to us.  One thing to remember with Web Workers, is that they run off in their own separate thread, and don’t have access to the DOM or most other window objects (which means jQuery won’t work either).

Canvas

This was a bit gratuitous too, we’ve got a fun update in mind for this that is equally gratuitous, but much prettier.

2D Transforms

When you mouse over the list of Tweets on the right, they get bigger to make them easier to read.  To do this, we use the :hover pseudo selector and apply a scale transform to make it bigger, and then a translation to ensure it appears in the right place.  If we didn’t do the translation, part of the tweet would get cut off on the right side.

CSS Animations

When I first created the TweeterFall visualization, I was using CSS transitions and transforms to animate the tweet as it fell down, but then realized that the better way to do it would be CSS Animations and transforms.

Web Fonts

We used Web Fonts to spice up the look of the page somewhat, there are lots of great fonts available.  Typically I’ll either grab fonts from Font Squirrel or Google’s Web Fonts.  As Ernest presented the section on web fonts, he said something to the effect of developers have had only 8 fonts they can count on across multiple platforms/browsers, and because Comic Sans doesn’t really count, they only really had 7.

Chrome Developer Tools

So we didn’t really use this in the app, but let me say this, the JavaScript console was the biggest life saver as we were debugging and trying to understand everything that was going on.  Not only did we use a few console.log’s, we also were able to execute code and do all kinds of other great things.  In fact, Paul Irish blogged about the I/O session he did with Pavel Feldman, and linked to the video - definitely worth checking out!

Up next, a dive into each of these!

Last week at I/O Boot Camp, Ernest Delgado and I presented a session titled Getting Started with HTML5.

Rather than take folks through the laundry list cool new stuff that’s part of HTML5, we took them through a smaller subset of features, showing how we used them in a real world application – TweeterFall.

You can watch the video, check out the slides and try TweeterFall.  When trying the slides, be sure to try them in Chrome dev, Canary or Safari to get the full 3D effects!

Play Pong

The little “boink” noise is me. But it actually presented an interesting challenge, you’ll probably notice that the boink doesn’t happen every time the ball hits the wall. When the ball hits a wall twice, in quick succession, the browser is still playing the first boink, and doesn’t start a second boink [sad trombone noise]. While it’s still in early draft, this is a really great example of something the Web Audio API will be really useful for – playing sounds in quick succession.

Thanks to Chris Wilson for suggesting a painfully obvious optimization – I had two loops running in the game world, one for the paddle and one for the ball moving.  Chris suggested one loop and tracking which key is pressed and moving both the paddle and the ball at the same time.

I’ve tested the game in Chrome 10, Firefox 4, Opera 11, Safari 5 and Internet Explorer 9 and it worked well in all of them.

The one thing I didn’t include was a scoring system, and I didn’t really see any interesting ones on the ‘net anywhere.  I think the next update I’ll include one that is timer based, but if anyone has any better suggestions, I’m open!

Within a week, the movers showed up to pack my condo and help me move south to San Francisco.  A new challenge was awaiting me there, and something I’m really passionate and excited about.  Today will mark the end of week three at Google as a Developer Advocate on the Chrome Web Store team. 

There are a lot of aspects of the role that drew me to it and have excited to go into work every morning – for example, I get to write code again! I’m an engineer at heart, and would much rather write JavaScript than a value proposition.  Heck, I’d rather write low level assembly than write another value propositions again!  I get to participate in community events, conferences, hack-a-thons and meet ups (PS – if you’re looking for a speaker for an event, let me know)!  But most importantly, I get to work directly with the web developer community to build awesome new web applications using open web technologies like HTML5 and CSS3.

I’ve been really amazed with the Chrome Developer Relations team – they’re absolutely brilliant and I’ll learn a lot from them (hopefully they’ll learn stuff once I get over the information overload of the new guy on the team).   If you haven’t already, check out http://html5rocks.com, I sit within about a dozen feet of the guys who built it – not the agency, but the real people who did the work and keep the site up to date, adding new and fresh content all the time.  The site is a great jumping off place for all things HTML5, and includes an overview of what’s in HTML5 (through the slides), as well as all kinds of cool tutorials, and a code playground.  I’ve started writing my first tutorial on device orientation and hope to have it up shortly!

I admit that when I started I didn’t really know or understand the purpose of the Chrome Web Store, but as I talked to the team, and learned more about what we are trying to accomplish, I realized that it’s just another mechanism for web developers to use to get their web applications out there and used by people like my Mom.  It’s not about a pay wall, or browser war, but it’s about making great web experiences easier to find, giving developers a great distribution model, and putting your web applications in front of more than 120 million Chrome users world wide.

If you want to put your web application into the Chrome Web Store, there’s a great tutorial at http://code.google.com/chrome/webstore/docs/get_started_simple.html that will walk you through everything you need to do.  Basically, you create an application manifest file (a single JSON file), package a couple of icons in there, zip it up, and upload it to the Chrome Web Store.  If you’ve already got a cool web app and want to get it in front of more people, this is another great opportunity!

If you haven’t started playing with HTML5 yet, it’s definitely time to start – there are a bunch of great tutorials on HTML5Rocks at http://www.html5rocks.com/tutorials/.  And also check out Paul Irish’s HTML5 Boiler Plate, I’ve used it quite a bit on a couple of projects so far, and it’s super helpful.  And if you’re looking for inspiration – and want to see what’s possible with HTML5, check out http://makeawesomeweb.com/

PEte

PS – the Google campus, aaaa-mazing!  But I’ll save that for another post later!

PPS – Happy April Fools Day, I don’t know what the joke will be today, but I’m excited to find out!!

Live we’ve done in the past, there are five different images that we’ve made available…

• Internet Explorer 6 on Windows XP SP3
• Internet Explorer 7 on Windows XP SP3
• Internet Explorer 8 on Windows XP SP3
• Internet Explorer 7 on Windows Vista SP1
• Internet Explorer 8 on Windows Vista SP1

These images are a bit different then the previous ones we last released in June, the default user account is an admin on the machine, and you have to use a password to log on to the VHD.  The password and other important information is in the readme.txt file – so be sure to check that out.

As you test your sites, remember that with Internet Explorer 8 and Internet Explorer 9, you can switch the rendering mode with the F12 Developer Tools and get an almost perfect replication of IE9, IE8 or even IE7.  That way, you can save using the VHDs for when there may be an issue with something like Protected Mode, or you need to test IE6.

Introducing HTML5 by Bruce Lawson and Remy Sharp
Published By: New Riders
Available From: Amazon or Your Local Book Store
ISBN: 978-0-321-68729-6

It’s taken me a little longer than it should have to write the review of this book, and I’ll blame the fact that, oh I don’t know, we had a beta to get out the door, but now that that’s done – I’ve got a few minutes in my day again.  And I did promise Bruce that I’d write a review of the book, so here it is.

The short review – lots of great content, and even more puns and bad jokes!

The long review…

One of the most important things that HTML5 books can do these days is be up-front about how they’re defining HTML5 – what’s in and what’s not, because it can be somewhat confusing unless you’re really plugged in.  Bruce and Remy do this within the first few pages of their book, and while I don’t agree with their definition of HTML5, I see where they’re coming from.  In their book, the specs that they’re talking about are “HTML5 and the related specifications that came from the WHATWG.”  I tend to think about HTML5 as the specifications that come out of the W3C, and while the specs are very close, there are some things that the W3C hasn’t looked at or even talked about at this point.  The upside of having a book from the WHATWG perspective though is that you can see and hear things from a different perspective.

One of the things that impressed me the most about the book was the neutrality that the authors took – when something wasn’t implemented in one of the browsers, they didn’t call them out or make any of the oft easy jokes that can be made about certain legacy browsers.  Instead of saying “browser X doesn’t do Y”, they provided some really good work-arounds and even tips for helping bring legacy browsers up to snuff!  For example, in IE8 and below, if you specify a CSS style on an element that the browser doesn’t know about, it won’t style that element.  Bruce provides a great tip and some best practices for enabling the new elements in IE8 and below.

The book is filled with lots of good examples, some of which you’d probably show your Mom, and a few that you wouldn’t show your Mom.  In fact, I strongly encourage you to read the content of the samples, in addition to looking at them for what they’re trying to show. 

For example

The <i> element “represents a span of text in an alternate voice or mood, or otherwise offset from the normal prose, such as a taxonomic designation, a technical term, an idiomatic phrase from another language, a thought, a ship name, or some other prose whose typical typographic presentation is italicized.”

And the examples they use:

<p>The design needs a bit more <i lang=fr>ooh la la</i>.</p>
<p>You, sir, deserve a jolly good kick up the <i>gluteus maximus</i>!</p>

As I mentioned earlier, there are a few things they talk about that aren’t in the HTML5 spec and a few that aren’t really widely implemented, like Web SQL Databases, GeoLocation, Web Workers and Web Sockets.  I wish they had been a bit more clear here that these things are still pretty cutting edge and likely to change.  For example Web SQL gets about 1/2 a chapter, but it feels to me like it’s likely to die a slow painful death to be replaced by the Indexed Database API.  Sure it’ll work now, and if you’re building prototypes or using libraries to abstract that kind of stuff – no big deal, but if you’re trying plan a long term strategy around this, it’s not super clear what the status of it is.

Still reading?  Glad to hear! I think my favorite chapter of the book was the canvas section.  Canvas is one of those things that I think we’ve only really seen a scratch on the surface of what it’s capable of.  While in theory it seems pretty simple (it reminds me a lot of logo), when you start to see the cool stuff folks do with it, you realize it’s much more complex than it appears on the surface.  Remy does a really good job of laying out not only the basics, but also taking us a step further into some of the more fun, neat and complex things – like using video in canvas and the cool things that you can do with your videos when put inside canvas.

I’m really glad I got the book – it was worth my time to read it, and it’s not a complex or long read, though it’s certainly longer and goes into more depth than HTML5 For Web Designers does.  In fact, I’d suggest that book is great for PHB’s and folks who might write some HTML5 markup, but more than likely just want to be educated on the subject.  This is a book that does a good job for those of us who want to know what’s going on, and how we can start playing with it today.

At the beginning of this fiscal year, we changed the process that we use to create the VHDs.  First, we brought the work in house and are building them internally instead of using a vendor to do it.  Second, we found out a little too late that the old system we used for time-bombing had been retired and spent some time working to figure out if there was a replacement program in place or how we could continue to support the Windows XP VHDs.  Thankfully we were able to figure out a new process, but with any new process, there are always some hiccups.  And this time, there were more hiccups than I had expected.   

The big change between these images is that this Windows XP SP3 installation is a “trial sku” instead of the “full package product” (FPP).  That means that we don’t have to use the complex time-bombing process any more – though because it’s a trial sku, they do still expire after 90 days.  I haven’t tried these VHDs on other VPC hosts, so I can’t speak to if they’ll run without activation.

I finished the last few steps for creating the VHDs late last night, and am working through the release process now.  One good thing about moving them in house, I managed to get the download size way down again, and they’re running between 494meg and 583meg!  Hopefully the smaller size will be good news for those of you who don’t have super fat interweb pipes.

Hopefully they’ll be up tonight (Pacific time) or sometime early tomorrow.  I’ll either update this post, or post a tweet via Twitter when they’re up!

PS: I’m also working with @reybango to get a VHD or other system in place so that those of you not running Windows Vista or Windows 7 can try Internet Explorer 9.  Sadly when IE9 runs in a VPC host, you don’t get hardware acceleration, but it’s still an opportunity to try or test your site if you’re not running a supported OS.

Do

<a href=”http://petelepage.com/blog/”>Pete’s Blog</a>

Don’t

<a href=”http://petelepage.com/blog”>Pete’s Blog</a>

What’s going on?

When the browser makes a web request for a page without the slash, it responds with a 301 redirect response, which then causes the browser to make a second request for almost the exact same page, except it asks for it with the trailing slash!  On a client with a slow network connection, that’s going to be really painful!  Even if it’s not a slow connection, it is going to add some extra time to your page load!

I’ll admit that one of the blogs I read has the educational value of something you’d pick up at a grocery store check out, the pictures are really pretty, and it’s good inspiration, but I’d never actually walk out of the store with it.  Well today, they posted an article that changed my mind.  Almost!  One of today’s posts was a collection of cheat sheets for web designers and developers, and I wanted to share my favorites.

HTML4 and HTML5 Cheat Sheets

HTML5 Visual Cheat Sheet from http://woorkup.com/

I think came in as my favorite and prettiest cheat sheet.  It prints on an 11×17 piece of paper, and is a great reference for all of the HTML4 and HTML5 tags that you’ll ever need to reference.  It nicely includes the attributes that you can set, what version of the HTML spec they’re from and lots more useful information.

HTML5 Reference Guide from http://veign.com/ 

The Veign folks go into a lot more detail on their cheat sheet, or more accurately, cheat sheets because this guy is 4 pages long.  One of the things I like about this one was that it goes in to much further depth about the attributes, supported HTML versions (indicating elements that aren’t supported in HTML5 with a highlight), and a very brief description of the element.

HTML Character Entity Reference from http://addedbytes.com/ 

I’ve often found myself forgetting what the special character sequence is to get a particular character to show up, or I’ll be looking for a character to use in my breadcrumb navigation – this cheat sheet solves that and lists all of the characters and their sequence to get exactly what you want!

Canvas Cheat Sheet from http://blog.nihilogic.dk

Canvas is one of those things that’s super new to a lot of folks, so having a handy cheat sheet is really useful!  It’s not going to be super-useful for beginners since it’s basically just the API reference, but once you have a pretty good handle on Canvas, this will be a great desk reference until it gets cemented in your brain.

CSS2 and CSS3 Cheat Sheets

CSS2 Reference from http://veign.com

Those folks over at Veign are pretty good at putting together a reference sheet, maybe not as pretty as some of the other ones, but just as functional and makes my life easier, so I’m not complaining!  Their CSS2 reference is great and provides all the detail you’ll need if you need to look something up quickly!

CSS3 Reference from http://veign.com

The CSS3 reference isn’t quite as awesome as the HTML5 reference, because they don’t tell you what properties are CSS3 vs CSS2, so if you’re having to code for multiple browsers like most folks, you may accidentally add something and then scratch your head as to why it’s not working in an older browser.

Other Useful Cheat Sheets

JavaScript Cheat Sheet from http://addedbytes.com

For whatever reason, JavaScript and I don’t get along, I think it’s because I like strongly typed languages that tell me if I’ve done something wrong before it gets there.  If you’re building websites and not using a tool that doesn’t have intellisense, then having a cheat sheet like this would be super valuable.  All the APIs you’ll need, right at your fingertips!

SEO Cheat Sheet from http://www.seomoz.org

A week or so ago, I posted my tips and tricks for ensuring your site was best optimized to make it into search engines efficiently.  Here’s another great easy to follow cheat sheet that will help you make the best of the time and resources that you have on getting your site optimized.  It’s a great resource to look over and share with co-workers or friends when they ask why you’re doing something!

Summary

There you go, those are the quick reference guides that are now printed and sitting on my bulletin board beside my desk at work!  Hopefully you’ll find a good nugget or two in there as well!  If you’ve got other good references or cheat sheets, be sure to share them with me!

It took me a little while to wrap my head around the HSL color model because it’s quite different from the RGB model.  Instead of adding different amounts of each of those, the color is defined by three properties:

1. Hue [0 to 360] – defines the color according to a position or degree on the color wheel.  The color wheel is split into effectively three areas, with 0° being pure red, 120° being pure green and 240° being pure blue.  Therefore, if you wanted purple, it’d be halfway between red (0 or 360) and blue (240), or 300°
   
2. Saturation [0-100%] – defines the intensity of the color, zero, there is no instensity to the color and it shows as gray, and as the number gets bigger, the more intense the color.
3. Lightness [0-100%] – defines how bright, or dark the color is.  50% is the true color, the larger the number, the closer you get to white, and the smaller the number, the closer you get to black.
4. Alpha [0-1] – is the alpha transparency, and tells the browser how transparent or opaque the color should be.  The closer to 1, the more opaque, and the closer to 0, the more transparent.

Let’s See It In Action!

In the samples below, if your browser supports HSLA, you’ll see two color swatches, the first which sets the table cell background color via the HSLA property, and the second, an image of the same. If your browser doesn’t support HSLA, you’ll only see the image. Each color box is represented by the code sample below, in order from left to right.

Hue
background-color: hsla(0, 100%, 50%, 1.0); background-color: hsla(120, 100%, 50%, 1.0); background-color: hsla(240, 100%, 50%, 1.0); The value for hue is specified as a number between 0 and 359, but you can go above 359, which just cycles around the circle again. For example 480 represents green, because 480 – 360 = 120.

Saturation
background-color: hsla(300, 0%, 50%, 1.0); background-color: hsla(300, 25%, 50%, 1.0); background-color: hsla(300, 50%, 50%, 1.0); background-color: hsla(300, 75%, 50%, 1.0); background-color: hsla(300, 100%, 50%, 1.0); The saturation needs to be a percentage between 0% and 100% and defines the intensity of the color. At 0%, with no intensity, we end up with gray.

Lightness
background-color: hsla(300, 100%, 0%, 1.0); background-color: hsla(300, 100%, 25%, 1.0); background-color: hsla(300, 100%, 50%, 1.0); background-color: hsla(300, 100%, 75%, 1.0); background-color: hsla(300, 100%, 100%, 1.0); Like the saturation attribute, the lightness attribute is a percentage between 0% and 100%. Changing the value, allows you to easily create black or white, but you can also get very subtle shades of a color, for example by setting the lightness to 98%, will result in an almost white, with a hint of color in it.

Alpha
background-color: hsla(300, 100%, 50%, 0.0); background-color: hsla(300, 100%, 50%, 0.25); background-color: hsla(300, 100%, 50%, 0.50); background-color: hsla(300, 100%, 50%, 0.75); background-color: hsla(300, 100%, 50%, 1.0); Alpha transparency makes the object more or less transparent. This is very useful if you want to overlay something on top of another object, but still want to be able to see the object underneath. Like other places where you can specify the alpha transparency, the value is between 0 and 1, where 0 is completely transparent (effectively invisible), and 1 is completely opaque and you cannot see through it at all.

Black, Grays and White
background-color: hsla(0, 0%, 0%, 1.0); background-color: hsla(0, 0%, 25%, 1.0); background-color: hsla(0, 0%, 50%, 1.0); background-color: hsla(0, 0%, 75%, 1.0); background-color: hsla(0, 0%, 100%, 1.0); When defining black, grays and white, the hue doesn’t matter at all. The needs to be set at 0, to indicate that there should be no indication of the color showing through. Then, by changing the lightness you can adjust the shade of black, with 0% being black, and 100% being pure white.

Using It Today

If you want to use the HSLA color model today, but still have to support browsers that don’t support the HSLA color model, the fact that CSS styles cascade (crazy I know), allow you to do support both models.

div {
 background-color: #ff00ff;
 background-color: hsla(300, 100%, 50%, 1);
}

HTML5 For Web Designers by Jeremy Keith
Published by: A Book Apart
Available From: A Book Apart
ISBN: 978-0-9844425-0-8

I was super excited yesterday when I walked by my mailbox at work to see a small package in it – having completely forgot that I had ordered my copy of HTML5 For Web Designers by Jeremy Keith a while ago.  I had heard it was a nice, easy fun read and I wasn’t disappointed.  In fact, about 6pm last night I sat down to read it and had read it in full by about 7pm!

Wait! Stop! Let’s define HTML5 for a minute because it’s turned into a word that means different things to different people.  In Keith’s book, he’s referring to the W3C Specification that defines the next generation of the HTML mark-up language.  He isn’t referring to the buzz word HTML5 that includes CSS3, ECMAScript 5, Web Workers, and all that other stuff that sometimes gets lumped into HTML5.

I’ve always thought a little history is important to set the stage, and he does that by explaining where HTML5 came from, why XHTML 2.0 didn’t work, the difference between HTML5 and HTML 5 from the WHATWG.  Heck, I’ve been around the web world for over 10 years, and I’ll say I learned quite a bit and feel like I understand some of the challenges of HTML5 more now.  What’s also great is that he explains the design principals of HTML5.  There’s a couple of places where you may ask yourself why the heck they did something, and the principals help to clear it up.

The book did have a few minor let downs for me – the first was one I should have been able to glean from the title, but there is only one mention of the new JavaScript functionality in HTML5, and the mention is basically, that as a designer Keith doesn’t use many APIs, and that the new ones are “over my head.”

Instead of going deep into code, the book does a great job of explaining what the new features of HTML5 are.  There’s a section on Rich Media where he covers Canvas, <audio> and <video>, SVG and so forth.  And there’s some really good nuggets of info in there, for example the concept of boolean attributes.  Boolean attributes mean that no matter their value, the fact that they’re in there triggers the property, for example boolAttr=”true” is exactly the same as boolAttr=”false”!  That may take some getting used to.  He also introduces Web Forms and the new HTML tags that are added along with the semantics that they impose.

My other let down, and again I think this was somewhat intentional is that when referring to browsers, Keith didn’t mention version numbers at all.  In some cases that doesn’t matter, but when he says something like “Internet Explorer doesn’t support HTML5 feature X”, it’s like saying car’s don’t have airbags.  Sure the older ones may not, but the new ones do.  There’s a ton of HTML5 support in Internet Explorer 9, but that doesn’t come across in the book at all.  I know the book was started before we shipped the first of the Platform Previews, but the editing certainly wasn’t.

Keith closes the book trying to answer one of the most commonly asked questions that I think people have today, when can I use it?!  And if I can use it today, how?  Keith answers that question and gives a few best practices for being successful with HTML5 today.  I’ll give you a hint, one of them includes feature detection instead of browser detection!

If you want to understand what HTML5 is, whether you’re a designer or developer, this is a great book for you!  It makes the 1100+ page spec look like something a first grader could read and understand – when in fact it’s the complete opposite!  It’ll be GREAT to share with your coworkers and friends.  Whether you’re an old hat at this, or just getting started, you’ll be able to understand the new concepts and features of HTML5 with ease.  For hard core JavaScript developers, yah, it’s missing that, but I expect to see that in more books soon enough.  But for everyone else, web designers, and web devigners (hybrid developer designers), you’ll find a great resource on HTML5!

With books like this, I can’t wait to see what the guys at A Book Apart have up their sleeves next!

#7 – SEO: Isn’t Just For Highly Paid Consultants!

As web developers, we sometimes forget that tags are often more than just a way of styling text, they’re meant to provide some semantic meaning to the content that you’re putting on a page.  For example, some people think that an <h1> tag means that the text inside it is really large, instead of its true meaning of the primary heading for a page.

Search Engine Optimization or SEO is important to many, but not all sites, if all of your traffic is intranet and you only have one site, you probably don’t need to worry about it.  But, with more and more content appearing online, in the corporate intranet, the corporate extranet or the internet, it’s getting harder and harder to organically find content and search is becoming super important.  I remember a couple of years ago when the Microsoft Origami project name was leaked, and I wanted to know what it was – search made it possible, but because of poor SEO, it was more difficult than it should have been.  As you’re building out your site, you need to consider how folks will get to it, and what you want them to do once they get there.

One of the easiest ways to find some tips and tricks for search engine optimization is to just search for SEO Tips, either on Google or Bing, though some of them are complete bunk – my favorite so far has been “become a foreigner”.  One of the most important tips that I can recommend and that I’ve seen on other sites, is that content is king!  If the quality of your content is good, then you’ll likely have a better chance of ranking higher in search results.

After spending a significant amount of time reading and researching, here are my top 8 suggestions that will carry the most impact when coding your site:

8 Tips & Tricks for SEO

1. Title & Meta Tags – ensure every page has a unique and relevant title set, and that you’re using meta tags to provide descriptions and keywords about the content on the page.  Make sure that the keywords are relevant to the copy on the page – if they’re not, search engines will likely discount them, and rank your page lower.
2. Write copy for SEO – Search engines look at many parts of your page, looking for keywords, copy, how <h?> tags are used and so on.  It’s important to keep the use of the <h?> tags to relevant headings and other appropriate parts.  Think about how a search engine sees your page, it doesn’t execute JavaScript so make sure you content is accessible if JavaScript is turned off.
3. Provide a sitemap.xml file – there are several tools that will help create these, or you can hand code it (though it’s a bit of a pain).  I host most of my sites on GoDaddy, and they have a built in tool for creating sitemaps.xml file for me.  Site maps make it super easy for search engines to look at your site and determine the content and what you have without them having to do any work.  Oh, and don’t forget if you block access to your site by turning off spiders in the robots.txt file, search engines will not be able to access your site!
4. alt Tags attributes – search engines are really good at being able to “see” and understand text, but they cannot see images, or photos or graphics – so be sure to include alt attributes on all of your images.  And don’t include your content in images!  Check out one of the sites below for my favorite site that’s guilty of this one!
5. If you’re using Flash, Silverlight, or other rich media on your site, be sure that you supplement it with HTML content.  Search engines aren’t able to truly understand rich media and so finding the content in there will be almost impossible for them!
6. Verify internal links – when you’re providing links within your site to the default page, are you linking to http://site.com/index.htm or are you linking to http://site.com/ or http://site.com?  Each one of those may be seen as a link to a different page, and cause complexities for search engines.
7. Make Links Easy – when coding your site, if the content is going to be dynamic or accessible via URLs, make the URLs easy to read and understand.  The MSDN website is an AWESOME example of how NOT do to this.  For example, check out the URL http://msdn.microsoft.com/en-us/ie/cc405106.aspx – do you have any idea where it goes or what might be contained within that URL?  Instead use something more friendly – that URL can also be accessed via http://msdn.com/iecompat, much easier to read and understand – you know what you’re going to get from just looking at the URL and so does a search engine!
8. Use search engines web master tools – Bing, Google, Yahoo, and most other search engines have an area where they have best practices and help for ensuring your website ranks well in search.  I’ve listed a few of them below.

Useful Tools, Sites And Resources for SEO

Google

• Google 101: How Google Craws, indexes and serves the web
• Search Engine Optimization Help
• Google Web Master Tools
• Google Search Engine Optimization Starter Guide [PDF]

Bing

• SEO and SEM Basics
• Search Engine Optimizations for Bing
• Submit A Site [or page] To Bing
• Using the IIS SEO Toolkit [Video]

Let’s see some examples!

There is not a single word of text on this page, it’s all images! If you want to copy and paste the address into a mapping program, fail.  Want the search engine to know more about these guys, nothing!  Every single piece of content on this site is an image, and no signs of any alt tags.  If you’re coming to this site with a screen reader, again, nothing.  Sad panda!

This is another favorite of mine, go to Bing and search for X-UA-Compatible – you’d think that a Microsoft site would be the first link, in fact that we’d be the first couple of links.  Nope, in fact we’re not there until the third link.  A List Apart (which is fantastic, don’t get me wrong), is the first link!

Best Practice Suggestions

• Review and use the tips and techniques provided by the search engines themselves, they’re more likely to work than some of the fun stuff you’ll find on the internet.
• Don’t use link farms – they’ll often result in lower results.

Don’t Forget: If I pick on your website, I apologize! It’s meant as a learning opportunity for both of us, and I’m happy to help you move from my offending list, to my best practices list! I’ve only shared a few of my favorites in this blog post, and there are plenty more out there! What are some of your favorites? Leave your favorite offending sites in the your comments! For designers who may be reading, I’d love to hear your thoughts and comments! What bugs you, what makes your life hard when working with web developers?

Update: @pornelski tweeted me and said he thought my first tip on using keywords was wrong, and linked to a Google webmaster blog post where they explicitly say they don’t use keywords. I generally think it’s still worthwhile because it’s possible that other search engines do use it.

He also added the clarification, that the alt attribute (which I incorrectly mentioned as a tag), shouldn’t literally describe the image, but instead provide an alternative description of the image.

The CSS Tab

The CSS tab shows the all of the CSS files that your page includes via embedded, linked style sheets, or imported style sheets.  Like all of the other tabs, it includes the standard menu bar, the ability to change rendering and browser mode, and the standard buttons Select Element By Click , Clear Browser Cache and Save buttons .  Beside the standard buttons is a drop down list that allows you to choose which set of styles you want to look at.  It includes all of the styles that Internet Explorer loads for that page, including iFrames.

If you have multiple embedded style blocks, each block will be listed separately within the drop down list.  iFrame styles are denoted by the square brackets around the name of the [] stylesheet, for example [iframeSource.htm] stylesheet.css.  As you change the drop down, the contents of the CSS display box will show all the rules, along with their individual attributes.

Using the CSS Tools

Like the HTML tab, you can turn on and off rules, or the individual attributes as well as add, remove or edit all of their values and see the changes in real time. 

Getting Started

1. If you’re in Internet Explorer now, hit F12, if you aren’t switch over to IE8 and load a site that has a bunch of CSS and HTML on it then hit F12 (pretty much page).  See if you can find a site that has at least one iFrame on it so you can see how iFrames look as well.
2. Switch over to the CSS tab to see all of the CSS files that are loaded on the page you’re viewing.
   
   You’ll now see a list of all the rules that are defined within the selected style.

Turning Rules or Attributes On and Off

The easiest way to turn off style rules or individual attributes within those is to use the checkbox beside each node.  Unchecking the rule turns off all of the attributes for that rule, or you can simply choose to turn off the specific attributes.

Changing Existing Rules or Attributes

To change an existing rule, you can do the same thing as in the HTML tab, simply click on the item you want to edit and Internet Explorer will change that item into edit mode.  You can change the rule names, attribute names and the attribute values.  After you’ve made your change, hit enter and IE will apply the changes to your page.

Adding or Removing Rules or Attributes

This is one of the cooler features of the CSS tab that I often forget about because surfacing it isn’t super obvious.  If you right click on a rule or attribute, a content menu appears that allows you to add or delete attributes and rules.  You can choose where you want them to fit within the cascade via the Add Rule Before or All Rule After.

When adding an attribute, you do it pretty much exactly like you would type it in a style sheet or style block.  When I click Add Attribute, the dev tools, creates a new node for me in the tree view, and I type the style I want to add, followed by a colon, then IE pops me over to a new text box where I can type the value for that style followed by a semi-colon. Once I hit enter, IE will update the page with my changes.

Adding a new rule is similar, in that you click Add Rule After (or Before), and it creates a new node in the tree in the appropriate place.  Then using the same Add Attribute right click, you add the appropriate attributes to that node.

CSS Editing with Internet Explorer Developer Tools

There you go – hopefully this will make your editing and debugging of CSS a little easier!  Stay tuned for posts on debugging and profiling your JavaScript code!

#8 – Advertising Is A Reality, Sometimes

Somebody once said, “there’s no such thing as a free lunch.”  And the web is no different, someone has to pay for the content that we’re consuming online, whether it’s through me doing this in my own time, and paying for my own hosting, or by showing ads on a page, it takes time and money to create good content.  At this point, I think everyone has accepted that for many of the sites we look at each day, we’re going to see ads in addition to the content.  And when done at a reasonable level, I don’t have a problem with that – especially if the ads are targeted at me, so that I’m not seeing ads for products that aren’t really of much interest to me.

One of my favorite examples of a site with too many ads is The Diesel Stop forums.  It’s a site for fans of Ford trucks – lots of great community conversations, sharing of information, all the stuff that you’d expect from a forum site.  A little while ago, they did a re-design, and added a few ads to their site.  And by few, I mean, that I have to scroll over 740 pixels down my page before I can see any real content!  740 pixels!  Imagine how that looks on a netbook!

As you build out your website, it’s really important to remember what is driving people to your site, is it the content or the ads that people want to look at?  I’d be willing to bet that they’re probably not coming to your site to look at the ads!  One of the important things that you need to do is find a balance – content vs. ads. 

Another one of my pet peeves is blocking ads, ads that sit in front of the site and force you to close them before you can view the content – again, users are coming to your site for content, and ads are a way to help you subsidize your content.  Making it hard for users to get to content is going to discourage them from coming back. 

Then there are other options besides the regular ads – ask yourself when visiting a website, have you trained yourself to look past the typical ad locations and shapes that look like ads?  I know I’ve gotten myself pretty well trained to ignore certain places on a page or certain shapes!  The person who figures out an innovative, and unobtrusive way to get ads on a page is going to make a lot of money!

One site that has found a way to do that is the New York Times – it’s a site that I really appreciate for it’s design and layout.  They’ve done a number of things to put ads on the page, make them flow nicely into the page so that they catch my eye but don’t feel obtrusive or obnoxious.

Best Practice Suggestions

• Make your content the primary subject of your site, it’s what drives people to your site!
• Don’t hide content with ads and make users work to get to your content, they’ll remember that and go to other places where it’s easier to find the content they’re looking for!

Summary

Remember what drives people to your site, make the content the strong point, and integrate the ads into your site in a way that fits, putting too many ads on a page will drive people away!If you’re using an ad network like AdSense or pubCenter, be sure to read through their tips and tricks, they’re interested in helping you make money, because it helps them make money! Be creative! Figure out how to be a little different – be the person who finds the next advertising opportunity.    

Don’t Forget: If I pick on your website, I apologize! It’s meant as a learning opportunity for both of us, and I’m happy to help you move from my offending list, to my best practices list! I’ve only shared a few of my favorites in this blog post, and there are plenty more out there! What are some of your favorites? Leave your favorite offending sites in the your comments! For designers who may be reading, I’d love to hear your thoughts and comments! What bugs you, what makes your life hard when working with web developers?

Much like SVG, you can draw on the page using basic shapes, but you can also easily include rasterized images, videos and other objects.  But unlike SVG, when you draw on the page, the browser doesn’t remember any of the “drawings”.  With SVG, the “drawings” just become elements in the DOM and you can script them, change them, basically treat them like any other element.  Canvas on the other hand, doesn’t remember the state of the “drawings” so you can’t change them as easily.

Quick Code Sample

<canvas id="myCanvas" width="200" height="200" 
    style="border: 1px solid black;">
      Your browser doesn’t support Canvas, sorry.
</canvas>

    var canvasElement = document.getElementById("myCanvas");
    if (canvasElement.getContext) {
        // The Context exists, so we know we have a canvas element 
        // we can work with.
        var context = canvasElement.getContext("2d");
        context.fillStyle = "rgb(255,0,0)";
        context.fillRect(30, 30, 50, 50);
    }
    else {
        // There is no Context, so we can't do anything.
        // Put fall back code here.
    }

Results in…

Your browser doesn’t support Canvas, sorry.

The More Exciting Stuff…

Okay, so I can draw a little red box on a page, woop-de-doo right!  This is when I recommend you check out the IETestDrive.com website where the truly cool demos are.  Be sure when you’re looking at these demos that you take a minute to look at the source code as well – it’s pretty interesting to see how few lines of HTML are required, and in many cases how few lines of JavaScript as well!

• Amazon Shelf – A visualization of Amazon’s top books and a way to read a bit more into them
• FishIE Tank – Remember the Windows 7 beta fish, he’s back!
• Mr. Potato Gun – Mr. Potato plus what looks like an air canon is never good for Mr. Potato!
• Asteroid Belt – be sure to look at the HTML for this one, there really isn’t any!
• DeemZoom – this is truly making web apps native!
• Canvas Pad – An interactive canvas drawing app

Enjoy!
PEte

I’m going to save <canvas> for another post but wanted to get a post out tonight about some quick ways to try out the <video> tag and ways to encode H.264 video.

REMEMBER: This is still an early preview release and there may be some fun issues… For example, in my demos below, IE9 is showing both the video and the non-video content, it should only be showing the video. That’s why these are platform previews!

Putting <video> on your page is EASY!

    <video poster="http://www2.petelepage.com/videos/poster.jpg" src="http://www2.petelepage.com/videos/skydive.mp4" preload="none" controls style="border-radius: 10px; border: 5px solid black;">
        <div style="margin:5px;padding:5px;border:1px solid black;">
            <h2>Sad Panda: HTML5 Video Not Supported</h2>
            <p>This browser doesn't support HTML5 video with the H.264 video codec, so instead, you get the generic fall back.</p>
            <p>You could install the <a href="http://ietestdrive.com">IE9 Platform Preview</a></p>
            <p>In reality, you should probably put a Flash or Silverlight fall back here, 'cause not everyone will install a new browser just to see my/your video!</p>
        </div>
    </video>

Results In…

The video above was shot while I was in Australia earlier this year, a bunch of my friends and I went sky diving just outside of Sydney to celebrate Christian’s birthday.  Eric (the second one) compiled all of our videos together into one single video, put a sound track to it, and made this great video!  It’s about 35 megs for the 5:30 minutes worth of video. It won’t start until you hit play, so it shouldn’t cause stuff to start playing without your input!

So What Does Everything Mean?

• preload=”none” tells the browser not to preload the video file unless the user hit’s the play button – saves on bandwidth.
• poster=”" indicated where the browser should load the poster file from, that’s the image the browser shows until you hit play, or it finishes loading the video file
• src=”" – well, that one’s pretty obvious, it’s the video you’re trying to load
• controls – tells the browser to show the video controls. In IE9 PP3, if the video width is less than about 400px, it won’t show the controls because the image is too small, I fought with that one for more than a few minutes! Grrr! Also, I’m using the more relaxed HTML5 syntax here, and not giving the attribute a value, you could do controls=”controls” if you want to make sure your code validates as expected.

You could also add…

• autoplay – plays the video without the user having to click the play button.
• loop – loops the video infinitely, or until the user hits the stop button, or navigates away from the page.
• width or height – sets the width and height of the video element.

Encoding Videos

Getting the <video> element on your page is the easiest part! How big is the video, both from a screen size perspective, and from a file download size is the more challenging part! Is it encoded with the right encoder? Some point and shoot cameras record in H.264 mode, some (like my Canon SD780 IS) don’t .  Encoding the video is likely the most difficult!

So how what’s the best way to resize and encode your video? There are a bunch of tools available today, some free, some paid. Sadly, the free Windows Live Movie Maker won’t encode videos with the H.264 encoder . I’m going to walk through how to do this with Expression Encoder 4 Pro. It’s part of the Expression Studio set of tools. If you’re an MSDN subscriber, you can download it as part of your MSDN subscription. Otherwise, you can download the 60 day free trial from the Expression Site, after that you’ll need to purchase a license for it.

For the rest of the walk through, I’m going to assume you’ve already got Expression Encoder 4 Pro installed, and you’ve got the video file that you want to encode ready to go.

1. Start Expression Media Encoder, when it starts, it’ll prompt you with a “Load A New Project” dialog box.  Since we’re going to put our video online with the HTML5 video tag, not Silverlight, you want to create a new Transcoding Project.
   
2. Now that we’re in Expression Media Encoder, we need to import the video file that we want to encode.  Under the File menu, choose Import and find the file that you want to encode.  It’ll take a second to analyze and for Expression Encoder to read the file completely (especially if it’s a big file you want to encode).
   
3. Now we need to chose our output encoding settings, thankfully Encoder 4 Pro makes that pretty easy for us.  In the Presets box in the left, there are a bunch of pre-configured settings you can choose from.  Video can get really big, depending on the quality and length of video, so unless I need super high quality, I typically choose one of the Encoding For Online Services profiles, and from there I usually use an standard def profile, but again, you’ll want to experiment with this depending on your needs and the bandwidth of your users and your server.  For this example, I chose the “H.264 YouTube SD” profile, which results in a file that’s about 4megs per minute of video.  Be sure to click Apply once you’ve chosen your profile to apply the settings.  You’ll notice that the area in red now defines the output format, and other information.  You can go in and expand out any of those tabs to change how the video is encoded. The video that I’m encoding is 16:9, but you’ll notice the output format is 4:3.  Because of that, Expression Encoder will automatically add the black bars above and below the video, and give me a letter box look.
4. The other important tab you’ll want to make sure you’ve got set up how you want it is the Output tab – this is where Expression Web will save file that it just encoded. I change the output directory from my user folder to the web folder that I’m working on, and also turn off the Sub-folder by Job ID check box.  I don’t use Job ID’s, so there’s no need for that.
5. We’re now ready to encode!  Push the Encode button on the bottom left part of the screen and Expression Encoder 4 Pro will start it’s magic…  After a couple of minutes, you’re file will be done and ready to go!

Other Resources

There’s a fantastic post on DiveIntoHTML5.org with some really great info about the video tag and how to use it that I’d highly recommend checking out at http://diveintohtml5.org/video.html.  On there, he also talks about other encoders that you can use (including some of the free ones), and also the different issues surrounding codecs.

Some Other Fun Videos

I shot these videos last January while I was in St. Maarten.  If you’re an airplane buff like I am, it’s a place you HAVE to go at some point, watching a 747-400 land or take off less than 100 feet from you is AMAZING!  I never knew a Dash-8-Q400 could give such a good exfoliation when standing behind it

Enjoy!
PEte

PS: I tested these links and videos in Internet Explorer 9 Platform Preview 3, and Chrome 5.
[UPDATE 6/24/2010 @ 3:42PM PST] I added the preload=”none” attribute to all the videos so browsers that do support video don’t download the videos unless you ask for them.

Expression Web SuperPreview

Expression Web SuperPreview is part of the Expression Studio set of tools, and is a visual debugging tool that makes it much easier to see and debug different rendering engines side by side!  One of the coolest features of Expression Web SuperPreview is that it has the IE6 rendering engine built it, so if you want to see what your site looks like in IE6, without having to find a machine with IE6 on it, you’re good to go!  In fact, it’ll show you how your page renders in IE6, plus whatever versions of IE you have installed, as well as Firefox!

You can do side-by-side views of the different browsers, as well as visual overlays, sort of like an onion-skin mode.  This is really great if you’re trying to get pixel identical layout.  As you move your mouse over different elements in the page, SuperPreview shows you where that element would be in the other browser.  And when you click on the element, a little window pops up giving you information about that element.  What’s most useful about that is that it will show you the properties that are different.  For example, when I look at my site in IE6 and IE8, I immediately notice lots of extra space between the header and the content.  If I click on the “Home” link, in IE8, I can see the top is at “230” where as in IE6 it’s at 299. 

One thing Expression Web SuperPreview doesn’t really let me do is interact with my page beyond that.  I can’t click on links, navigate through pages, enter any information, and it doesn’t execute any JavaScript.  But for comparing layouts on static pages, or on pages where you can get them into a state that you want before loading them – this is the tool for you!

Expression Web SuperPreview is a paid product that comes as part of the Expression Studio set of tools.  If you’ve got an MSDN subscription, you can download it as part of your subscription, but if you don’t, you can get a 60 day free trial at http://microsoft.com/expression. 

Expression Web SuperPreview Remote

I’m calling out the Remote feature of Expression Web SuperPreview separately because it’s still in beta, and you have to sign up for it, but this is super cool.  Remote adds an additional browser to the matrix, adding Safari 4.0 for the Mac!  Now, if you’re a PC user and don’t have access to a Mac, you can see what your site looks like without having to find a Mac.

Just like you can with Expression Web SuperPreview, you can click on elements and see where they’re laying out on the page and interact with them like you can when running locally, but this way you’re not resource constrained based on the hardware you’re running on your machine.  A quick easy way to verify your pages in other browsers and other operating systems.

Expression Web SuperPreview Remote is part of Expression Web SuperPreview, and the only thing that you need to do to use is it is to activate it, which requires a valid email address.  Takes only a few seconds to get set up and working!  Again, you can get a 60 day free trial of Expression Web SuperPreview at http://microsoft.com/expression.

Expression Encoder Pro

I’ll just include a quick note here on this one, but one of the tools that comes with the Expression Studio set of tools is Expression Encoder Pro.  It’s a great tool for encoding video for the web.  It’s the primary tool for creating Silverlight video, but it will also encode to H.264 video, which is the codec used by Internet Explorer 9!  While I wouldn’t give it to my Mom to use, as someone who is reasonable tech savvy, you should be able to figure it out without any problems.

I’ve used it to encode videos from one format to another, or re-encode them to a smaller size.  Super powerful, and fun to play with!

Virtual PC Testing Images

People have often asked about installing multiple versions of Internet Explorer on the same machine, and while there are tools and utilities out there, there isn’t a supported, official way to do it right now.  The tools that are available are risky in a couple of ways:

1. You’re installing system files from a somewhat random website, are you sure you want to do that?  Are you sure they haven’t tampered with the files and inserted malware or anything like that?
2. Internet Explorer is part of the operating system, and there are several components that you need to replace to change versions including the JavaScript engine, parts of the network stack, in addition to the rendering engine.  If any of those get out of sync, or the OS tries to call an API that didn’t exist in a previous version, you could find your system becoming unstable and not quite working right.
3. How many real world customers are using these “Frankenbuilds”?  While it may be an interesting test concept, it doesn’t mimic how real world users are visiting your site. 

That’s why we strongly encourage you to virtualize your test environment, and we try to make that easier by providing VHD images that you can use to test what your customers will see and use.  We provide IE6, IE7 and IE8 on Windows XP, as well as IE7 on Vista and IE8 on Vista.  These images used to work on other virtualized hosts other than VPC, and right now, they’re not working.  I’m still looking for solutions, and haven’t given up!  I recommend that you build your own images in the mean time.  The XP hard drives are time bombed because, we’re basically giving away the OS, and that makes some folks here uncomfortable. 

You can download the Internet Explorer App Compat VPC Images from the Microsoft Download Center.  We’re updating the images today (6/22/10), and are just waiting for them to propagate out through the system.

Using XPERF To Really Dive Into IE Performance

During my TechEd presentation about browser performance, I talked about how if you knew where the browser was spending the most of it’s time, you could optimize for the most expensive parts.  The thing that I didn’t cover, was the tools you can use to understand where Internet Explorer is spending it’s time.

Well, last night, the IE team posted a great blog post titled Measuring Browser Performance with the Windows Performance Tools.  They’ve given you everything that you need to know in order to dive in here.  I won’t include the whole post here, or even recap it, but strongly recommend you check it out!

Enjoy!
PEte

The HTML Tab

The HTML tab shows the underlying mark up behind your page as seen by the Internet Explorer document object model (DOM), and not only shows the elements, and layout for the page, but also how the attributes affect how the page looks.  The HTML tab is split into two windows, the DOM tree view, and is a set of tabs that help you understand the way your page looks.

As I walk through these tools, follow along, hit F12 to bring up the developer tools, and try changing the way my site looks!   All of these screen shots are from the IE Dev Tools Intro post I made a few days ago.

Using the HTML Tools

Select An Element

There are several ways that you can select an element and then use the different tools in the HTML Tab to edit those elements.

1.  Select Element By Click (CTRL-B) – This is probably the easiest way to select an element and is pretty self explanatory.  Clicking on this guy, then clicking on an element will select that element.  Moving the mouse around the element you want to select will draw a blue line around the element, if you want to grab the parent element, move the mouse just outside of the element you’re trying to select.  Alternatively, you can select the element, then use the DOM view to move up and down the DOM.
2. You can use the “Search HTML” box to find all element with particular attributes or elements of a particular type.
3. The DOM Tree view is another way that you can select particular elements.  Usually I use a combination of Select Element By Click and the DOM tree.  When the developer tools open, and the page is loaded, you’re shown a view of the DOM, but the tree view isn’t expanded, you can click on the “+” sign to expand out the tree view and see all of the contents of each node in the DOM.  This is a really good way to get into and see how elements are related to each other and where they’re falling within the DOM.

If you just want to see an outline of the elements on your page, and see how they’re all fitting together, under the Outline menu bar item, you can select from Table Cells, Tables, DIV Elements, Images, Any Elements, or Positioned Objects. 

Changing Attributes and Elements

One of the powerful features of the IE developer tools is that they allow you to change properties and attributes of the elements live while looking at the page.  Once you’ve selected the element, you can use any of the tools below to change the element in memory.  Remember, this won’t serialize those changes back down to your source file – you’ll have to do that yourself, but it’s a great way to figure out what you do need to change. 

The developer tools do have the ability to save the changes you’ve made to your page, but they’re going to save out IE’s DOM version of your page, and not the beautiful code you wrote!

Style Tool

The Style tool shows how your CSS rules have been applied to the currently selected element.  By default, the tress is fully expanded, so you can see where the values are coming from.  For example, on the left, you’ll notice that in the BODY element, the color and font-size both are displayed with a line through them, those attributes are being overridden by another CSS rule further down in the cascade.  You can use the check boxes to turn the attributes on and off as you’re looking at the page to see how particular rules and attributes are being applied to that specific element.  Personally, I find this particular tool to be the least useful to me, and much prefer the next too, the Trace Style Tool.

Trace Styles Tool

Alright, like I said, this is the tool that I personally find most useful when I’m trying to figure out why my CSS isn’t rendering like I expect it to in the browser.  The Trace Style tool shows you all of the style attributes that are being applied to this element.  By expanding out the tree, you can see where the attributes are coming from, and how they cascade.  In this particular case, in style.css, the body style rule has been defined twice for some reason, and because of the cascade, the body color of #4e4e4e is being overridden and set to black.  If you click on the “style.css” link on the right side of the screen, you’re taken directly to the specific line in the code!

The Trace Style tool gives you two other things I really like – the check boxes so you can turn the styles on and off in real time to see how the rule changes the element.  The second one is that you can actually edit those CSS values inline and see how they appear.  If you click on the “black” and type “yellow”, you’ll notice the page updates in real time!

Layout Tool

I know I’ve said this before, but for whatever reason, I just can’t seem to remember the difference between margin and padding – every time I think I remember it right, I’m wrong again.  The single most helpful tool for me when I get into these types of problems is the Layout Tool.  It draws a visual representation of elements and their box model – it shows the size of the element (that’s the light blue in the center in this case the 574×32), the padding, the border, the margin and the offset.  All visually in a way that I can see and understand – without having to put “border: 1px solid black;” around my elements to debug them!  

Like the other tools, you can also edit the values in line.  The inline editor is somewhat picky though, and you have to enter the value in just like you would if you were putting it in as an inline style, so you need to use the value, the units and a semi-colon.  For example, if I click on the “32” above and want to change it to 75, I’d need to type “75px;”. 

Attributes Tool

Okay, so now we’ve seen all of the styles that are being applied to our page, all the styles that are being applied to the selected element, we’ve been able to visualize the box model for the selected element.  But there are attributes on elements that aren’t style, and we need a tool to be able to view and edit those.  That’s what the Attributes tool is for – it’s not just the style and CSS attributes, but all attributes that are on the selected element.  In this particular case, the Node box indicates we’re looking at an h1 tag, and that h1 tag has only one attribute, which is the class attribute.

To add an attribute to the element, you can click on the plus sign , it then moves the focus to the table, and provides you with a drop down list of all of the attributes that you can set for that element.  You’ll likely notice some attributes like “background (css)” – those attributes will be set as inline style attributes for the selected element.

HTML Editing with Internet Explorer Developer Tools

Well, that wraps up this post, hopefully you found it useful!  I’ll be back soon with another post covering the CSS Editing tools, and another for JavaScript! 

#9 – Hansel & Gretel would need bread crumbs to find their way!

Have you ever visited a site where you’re not quite sure what you’re supposed to do once you land on the site?  Or that as your surfing around, without using the back button in your browser, you can’t get back to where you were before?

There are a couple of ways to look at this when you think about building navigation on your sites.

• What are the actions you want visitors or users of your site to take?
• What’s the work flow for what they’re going to need to do?
• If there’s something you want them to read or learn about, are you making that easy to find?
• Is the navigation around your site easy to use and easy to find?

Are you making those options easy for them to find and accomplish?

The Offenders

http://lesailes.hermes.com/us/en/

Now maybe the problem is that I’m not exactly the target audience for Hermes, about the only thing I know about them is from The Devil Wears Prada, and that they make silk scarves, but I’m sure they do more than that.  So I figured I’d visit their site to see if I could learn more.  When the site loads, it shows me a really pretty Flash experience, and then there’s a whole bunch of tiles that I think I’m supposed to click on, but once I do, I don’t know what the actions that I’m supposed to take are.  After spending some time on the site, I really don’t know anything more about Hermes than I did before!  Give it a shot, try clicking on the any of the tiles, what are you supposed to do?

http://www.genicap.com/Site/

A friend of mine emailed me a while ago with with a link to this site.  His question to me what what they heck does this company do?  We both spent way too much time trying to understand the point of the site, what are they trying to sell or do?

There’s a bunch of text at the bottom of the screen that talks about some stuff that I don’t really understand, and the image tiles across the page, while pretty don’t really help me understand what they do.  As it turns out, this company makes ray tracing tools, but I can’t find any way to purchase or learn more about their tools!

Best Practice Suggestions

• Figure out the actions you want users to take when they visit your site, do you make those actions easy to find and easy to accomplish?
• Make it easy to learn about you’re the point of your site – put the mission statement or other important information on the home page of your site.
• Before starting to design your site, create a consistent navigation plan that you can implement across your site.  Make it easy for folks to find what they’re looking for without having to rely on search to find what they want.

Summary

If you don’t have a good understanding of what you want your visitors to do or if you make it hard to find, users aren’t going to be able to do it.  The navigation on your site needs to be consistent, and easy to follow.

Don’t Forget: If I pick on your website, I apologize! It’s meant as a learning opportunity for both of us, and I’m happy to help you move from my offending list, to my best practices list! I’ve only shared a few of my favorites in this blog post, and there are plenty more out there! What are some of your favorites? Leave your favorite offending sites in the your comments! For designers who may be reading, I’d love to hear your thoughts and comments! What bugs you, what makes your life hard when working with web developers?

[UPDATE 06/21/2010 9:34am PST] As I was reading my favorite blogs this morning, I came across a post about 9 Usability and UX Pitfalls, and How To Avoid Them and one of the sites they listed, was the Hermes site – looks like I’m not the only one to not get it!

I consider myself a web developer – not a web designer. I know when a site on the web looks good, and I know when a site has kick butt usability. But, for me to accomplish both of those things on a website, probably not something I do well every time.

And with that, let’s jump in to number 10…

#10 – Word Writes Better Code Than Me!

Yep! As web developers, sometimes we focus too much on getting the job done and adding that extra cool feature instead of focusing on the code and the usability. When we write non-web code, it has to be compiled, and there’s a level of verification before it’s run, but that’s not the case for the web. You put in online, and the the browser runs it – even if there are errors in our code.

Sometimes, the errors in the code aren’t our fault! When I present this session with a live audience, I always ask how many folks are using a content management system, and on average about 50% of people are. When that’s the case, you can’t guarantee how the code will be spit out? Did the person who last edited that one box close their tags right, did they use the rich editor, or did they hand code their HTML after reading HTML for Dummies?

Now, don’t get me wrong – I personally don’t believe that my code has to pass at 100% on any of the W3C validation suites. I do believe that it should be close – 1, 2, 3, maybe 5 errors; that I can deal with. If there are more than that, I have to ask myself what’s wrong here? It’s going to make dealing rendering issues a real pain in the butt!

The Offenders

http://continental.com
I’m a Continental flyer, I really love the airline and have had nothing but great experiences flying them, heck, I have often been known to fly out of my way to fly them! So, it kind of pains me to put them on my list of offenders, but hey, they’re an airline, not a web design shop and I can’t get too upset at them for their HTML. Their website from a design and UI perspective seems pretty good – it’s super functional, I can find what I’m looking for, get done what I need to do, and do it all pretty quickly. Seems like a good site on the surface.

But let’s try running the W3C HTML validator on the Continental web site. Normally I can deal with a couple of errors, but as of the time I wrote this blog post, there are 2050 errors, and if I refresh the site, the number changes!

That is absolutely going to make site maintenance very difficult, or trying to find out why my design isn’t looking quite like I expect – almost impossible!

Best Practice Suggestions

• Use the W3C Validators – http://validator.w3c.org to see how your code it outputting and if it would pass a “compiler” if it existed on the web.
• If you’ve got non-web folk putting stuff online, get them trained, or put systems in place so that they can’t edit the HTML and that the tools they’re using are spitting out correct HTML
• Be aware of your surroundings! Where is your code going to go, and how is it going to get used? That snipped you just typed, do all the tags close? Is it going into a proper container type? How is it getting used?

Summary

Keeping your code clean and professional is important – you may be the person who has to update this in 6, 12 or 18 months, but it may be someone else. Leave a legacy that you want someone to respect you for afterwards. Having messy code is going to make it maintenance near impossible! It may take some extra work in the short term, but will certainly pan out in the long term!

PS: If I pick on your website, I apologize! It’s meant as a learning opportunity for both of us, and I’m happy to help you move from my offending list, to my best practices list! I’ve only shared a few of my favorites in this blog post, and there are plenty more out there! What are some of your favorites? Leave your favorite offending sites in the your comments! For designers who may be reading, I’d love to hear your thoughts and comments! What bugs you, what makes your life hard when working with web developers?

IE’s Compatibility Features for Site Developers

They even went so far as to create a flow chart type diagram that shows how Internet Explorer chooses which rendering engine to use when displaying a page, both as a png (which I’ve included below) and as SVG diagram!

And in other cool news, the product management team (the team I’m on) also started a blog this week, Ryan Gavin posted the first post and it should be an interesting read.  If you’re a web designer or web developer, you’ll likely want to stick with the IE Engineering Blog, but pop over to our other blog once in a while, it should make for some interesting reading about things that aren’t quite engineering related! 

http://windowsteamblog.com/ie/

I’d highly recommend checking out Steve Souders’ two books:

In the coming days/weeks, I’ll get some additional details posted about the 20 tips and tricks that I talked about, and how you can make sure you’re using them on your site!

Starting the Developer Tools

There are two ways you can open the IE Developer Tools, you can either hit F12, or under the Tools menu icon, you can choose “Developer Tools”.  Both of these will open the Developer Tools, which you can either run in a separate window, or docked to the bottom of your browser window as I’ve shown below.

When the Developer Tools open, there are four main tabs that provide the major functionality of the tools

HTML Tab

This tab allows you to see and edit in real time the HTML and applied styles that make up your page as seen by the Internet Explorer DOM.  From here you can move through the DOM either via the tree view on the bottom left, or you can click on the little mouse pointer icon, and grab individual elements.  When you do that, IE automatically takes you to the element you’ve selected.  On the left side of the HTML panel, is another set of tabs, that show the Style and inheritance information for the CSS that’s being applied, an ability to Trace Styles, so you can see what particular style is being applied, and why.  The Layout tab is particularly useful if you’re forgetful like me and mix up margin and padding (for years, I’ve not been able to keep it straight, and every time I think I’m remembering it right, I goof it up again).  Finally the Attributes tab shows the attributes that are on that element.

The CSS Tab

Shows you all of the styles that are being pulled down for your site, how they cascade against one another and is useful to view and turn off styles individually or at the entire style level.  Like the HTML tab, you can edit your styles in real time to see how changing properties affects the page.  So if you’re not sure why something isn’t being styled right, this is a great place to look.

The Script Tab

Like any good development tools, debugging is a vital component of understanding why something isn’t working, or why you’re getting that a 3 instead of a 2.  The Internet Explorer 8 developer tools let you do everything that you’d expect in a full-fledge debugger (it’s almost as powerful as the debugging tools in VS2010 – not quite, but pretty good).  Like the HTML tab, there are several tabs on the right side of this window.  There’s the Console tab, so you can output to the console window if you’ve added debugging code to your scripts.  The Break Points tab, to help you be able to apply break points and debug into your code on specific lines.  There’s also the Local and Watched Variables tab so you can see what’s happening to your variables as your applications is running.  And finally the Call Stack tab to dig into the call stack.

The Profiler Tab

This is the one that I think is probably the coolest feature of the Internet Explorer 8 Developer Tools, and that’s the built in code profiler.  Want to know what’s happening, what functions are being called, why things are taking longer than you expect, or not getting called, the Profile is your guide to what’s going on.  Once you turn the Profiler on, you can run your code and IE will keep track of the number of times every method is called the length of time spend in that method (Exclusive Time), the length of time spend in that method and any methods called by that method (Inclusive Time), as well as where that method is.

Other Useful Developer Tool Features

There’s a couple other things that I want to highlight in this Internet Explorer Developer Tools introduction, that I think are really useful when I’m working on building a new site, or editing an existing one.

Browser Mode and Document Mode

Internet Explorer 8 shipped with two rendering engines, the Internet Explorer 7 rendering engine, and the Internet Explorer 8 rendering engine.  By default, as long as you’ve include the right DOCTYPE switch, Internet Explorer 8 will use the Internet Explorer 8 rendering engine.  But you can’t always guarantee your users are going to be using IE8, and you want to see how your site will look with the IE7 rendering engine.

Document Mode

Document Mode allows you to manually choose which rendering engine you want IE to render the page with; choosing the Internet Explorer 8 Standards mode uses the IE8 rendering engine, Internet Explorer 7 Standards Mode uses the IE7 rendering engine, or Quirks Mode uses the quirky, IE5.5 rendering engine. Changing the Document Mode does NOT change the user agent string that is sent to the server and is primarily used for testing and seeing how your site will look in IE7.

Browser Mode

Browser Mode changes both the Document Mode, and the User Agent string, which allows Internet Explorer 8 to lie about who it says it is.

• “Internet Explorer 8” uses the IE8 rendering engine and the UA string tells the server that the browser is IE8 by including the “MSIE 8.0” and “Trident/4.0” tokens in the User Agent String.
• ”Internet Explorer 8 Compatibility Mode” uses the IE7 rendering engine and the UA string tells the server that it’s IE7, but if you know better, it’s really IE8.  It does this by sending the “MSIE 7.0” token along with the “Trident/4.0” token.  That way, if the server is looking for “MSIE 7.0” and you get the expected IE7 behavior.
• ”Internet Explorer 7” uses the IE7 rendering engine and the UA string tells the server that the browser is IE7, it doesn’t include the “Trident/4.0” token, only the “MSIE 7.0”.

If you want to see what your browser is reporting for it’s user agent string, check out http://petelepage.com/samples/uastring.aspx.  Then open the Developer Tools and try changing the Browser Mode and Document Mode to see how the page renders in different ways.

Color Picker

Ever wonder what color is on another site, and don’t want to dig into their CSS to find it, or don’t remember what color you picked, the color picker is a little eye dropper tool that lets you click on a particular part of the page and it gives you the HEX color value, so you can just plug it right in where you need it.  You can find the Color Picker under the Tools menu!

More To Come!

In my future posts, I’ll dive deeper into each of the above features, and how you can use them to debug your websites!

There are two types of storage, sessionStorage and localStorage.  Session Storage is primarily intended for scenarios where the user is carrying out a single transaction.  Information that is put in the store is available across all windows tabs and frames for the entire session the browser stays open.  Local Storage persists across sessions, so even after closing and reopening the browser, the data is still available.

Using The Storage APIs

The Storage object use expando properties as the key.  As mentioned above, the data is name/value pairs, and only supports strings.  If you want to store data other than strings, you need to convert before storing it.  If you want to store binary data like images, Flash, Silverlight files and so forth, you can use datauri to display it on the screen.

Session Storage

As I mentioned already, session storage is great for circumstances where you need to store something on the machine only for that session, for example you might want to locally cache certain data so you don’t have to keep downloading it as the user moves through your site.  You might also use it for storing inputs the user may have provided on a previous page – maybe shopping cart information, or what comments a user has already seen.

Local Storage

Local Storage allows you to store information that goes beyond the session.  I might want to cache some of my user settings locally, so I don’t have to look them up every single time.  For example, I might store the users preferred name, their preferred color scheme and their favorite stocks, along with some historical data about those stocks.  That way, when the user arrives on my site, we don’t have to query that every single time.

Storage Events

Internet Explorer fires events when data is either stored or updated, so that you can be sure information is synchronized between multiple instances of the browser.  The onstorage is fired in a document when the storage area changes, and the onstoragecommit fires when Internet Explorer writes the localStorage data to disk.

Security and Privacy Implications of DOM Storage

Data in the local store is only available to sites within the domain in which they’re called.  For example, if NoCommonGround.com tries to access the localStorage data from PeteLePage.com, it will fail.  But, www.PeteLePage.com can access anything from PeteLePage.com.  There also isn’t any way to restrict the data by path, so anywhere site within your domain will be able to access from the data store of your domain.  Even if you use key names that are hard to guess, there are APIs that allow you to enumerate the keys.

Additional Resources

You can find lots more information about DOM Storage in the following places:

• W3C HTML5 Specification
• MSDN DOM Store Details

Browser Support*

*From CanIUse.com

TechEd 2010 in New Orleans is almost a wrap, I think all that’s left is the attendee party (and that’s taking place right now), the last session are over, the TLC stations are closed and folks are starting to head home.  My flight leaving in just over 12 hours – 6 hours of flying and time to get caught up on email.  It was awesome to meet so many new folks and see the excitement around Internet Explorer 9. 

One of the sessions I presented at TechEd this year was the IE9: A Lap Around For Developers.  It was an overview of all the new features and support that we’ve announced and lots of live demos.  In fact, it was entirely a demo.  I created a simple AJAX application that filled in a DIV with “slides” that were actually HTML snippets. 

I focused on three areas in my presentation…

• Performance
  • Performance improvements across all systems, not just the JavaScript engine.
  • The new JavaScript engine
• Same Mark Up
  • How the team engineering team designs, develops and tests the browser
  • How the team works with the W3C to ensure that the same mark-up you write works in all browsers
  • The announced features, including demos and code (I didn’t announce anything, I’ll save that for the IE Blog!)
• GPU Accelerated HTML
  • Why acceleration matters, and what it’s doing
  • How hardware acceleration will make your sites work better, without any changes to your code

As part of one of the demos, I’m using CSS3 Media Queries and set the page to only display when the browser window is between 1200px and 1300px wide.  If your browser window isn’t wide enough, it will show a different set of CSS that sets most of the content to display:none;.

You can find the deck online at http://petelepage.com/presentations/teched2010/ie9pp2/

As I said above, the code isn’t perfect, and I haven’t tested it in other browsers.  I’ll put money down that if things don’t work quite right,it a problem with my html.

The Internet Explorer engineering team spends a lot of time working to understand what developers and doing when building their websites, where the bottle necks are (both in the browser and in the code that developers write).  With all of the information that they gathered, they built set of 20 tips and tricks that will help your site run faster, and more efficiently.  While the research they did used Internet Explorer as the base, almost all of these tips and tricks apply to all browsers.

Jason Weber presented these tips and tricks at MIX2010 this year – the session web page is at http://live.visitmix.com/MIX10/Sessions/CL29 and you can also download the slides, or the video in MP4, Windows Media Format or High Quality Windows Media Format.  It runs about 80 minutes and should be required watching for every developer out there I think. I know I learned a few things and I think my site breaks some of the best practices that I’ve got listed below!  (I guess I’ve got some work to do! )

Without any further ado, I present to you…

20 Tips & Tricks To Improve Your Website Performance

1. Ensure server side compression is enabled on “text” like files
2. Use conditional requests
3. Provide cacheable content
4. Minify your JavaScript
5. Don’t scale images (I’m really guilty of this one)
6. Use image sprites
7. Link JavaScript at the bottom of your file, and avoid inline JavaScript
8. Add the “defer” tag when you have to link to JavaScript at the top of your page
9. Link Style Sheets at the top of your page
10. Avoid using @import
11. Minimize Walking Look Up Chain
12. Cache Function Pointers
13. Use the Native JSON object
14. Remove duplicate scripts
15. Minimize DOM interactions
16. Use efficient DOM Methods
17. Use querySelectorAll for groups
18. Only send required styles
19. Simplify your selectors
20. Minimize page layouts

PS: If you want a little laugh, go to the TechEd site, and look at my bio – it wasn’t quite supposed to read like that

[UPDATED 6/10/10 1:25pm PST] Fixed the link to the slides, sorry about that!

http://www.pcworld.com/article/198396/microsoft_browser_speed_not_all_about_javascript.html

I’ll be posting my slides later this afternoon – just want to finish my last presentation of TechEd!

A Quick Intro To Graphics Types

There are two different types of graphics vector graphics and rasterized graphics.  I’m sure there’s an official definition on Wikipedia or other place online, but the best way to think about them is that rasterized images are those that define pixels, and not how they relate to one-another.  For example a photograph or image that has a lot of intricate detail and few hard, solid lines optimally would be a rasterized image.  Vector graphics define images based on lines and shapes, where different items are related to one another based on size, shape and location.  Vector images work really well for images that are more line based, like logos, organizational charts, and drawings that don’t have very complex textures, backgrounds and so forth.

Another important difference is that vector graphics are typically described via a plain-text XML description.  If you were to try to open a rasterized image in a text editor, all you’d see is jibberish.

How To Create or Edit SVG Graphics

There are several tools available that can help you create or edit SVG images.  Since it’s just XML content you could easily create it in a text editor like notepad, vim or your editor of choice.  The Visual Web Developer Tools team created a schema that you can add to Visual Studio 2010 that will make things a bit easier if you want to hand edit your SVG.  Maybe not the most fun way of doing it but certainly one way.

Installing the Visual Studio 2010 SVG Schema

1. Download the SVG.XSD file
2. Create Schemas folder in your Web site or Web Application project root.
3. Place downloaded SVG.XSD in the Schemas folder.
4. Create a new XML file and save it with SVG extension, such as svg-test.svg.
5. Add basic SVG content and save the file, for example
   <svg xmlns=”http://www.w3.org/2000/svg” width=”500″ height=”500″>
   <rect x=”100″ y=”100″ width=”300″ height=”300″ />
   </svg>
6. Add new HTML file (say, svg-test.htm) in the root folder and add
   <object data=”svg-test.svg” type=”image/svg+xml” width=”500″ height=”500″ />
   to the <body> element. You can also use existing HTML or ASPX page.
7. Right-click on the svg-test.htm file in Solution Explorer and choose Browse With….
8. Pick an SVG-enabled browser (like IE9PP1 or greater) and click OK. You should see SVG content rendered as below:
   
9. Now try typing < in the SVG file. XML editor should now provide you wil intellisense for SVG elements and atributes:
   

Using Adobe Illustrator To Create SVG Files

Another option is to use Adobe Illustrator to create SVG images.  Once you’ve created your vector drawing in Illustrator you can do a File, Export and save the image as a vector drawing!

Other Tools

While I was surfing around, I found a few online tools that would convert rasterized images to vector images.  They seemed to do a decent job, nothing great ,but enough to get me started.  Unfortunately, I don’t remember what they were now, and I haven’t been able to find them  again

What do you use for creating and editing vector graphics?

[Q8UBWMA4HVM8]

Top Ten Design Mistakes Made By Web Developers (WEB04-INT)

We’ve all seen those sites where it’s obvious the developer didn’t consult a designer. There’s no user experience flow, the colors clash, you don’t quite know what to do on the site. During this session, we take a look at the top mistakes made by Web developers when they don’t have access to Web designers; and hopefully learn a few techniques for making sure your sites look great!
Monday June 7th, 2010 @ 1:00pm – 2:15pm – Room 350

I feel guilty listing the non-Microsoft sites here because I don’t really want to call anyone out in public, so instead, I’ll share a few of my “favorite” Microsoft sites.  If you make it to my TechEd session, I promise to make you laugh or maybe cry…

• http://msdn.microsoft.com/en-us/ie/cc405106.aspx – too much content on one page, IMPOSSIBLE!
• http://msdn.microsoft.com/en-us/library/ms816327(v=MSDN.10).aspx – try finding content in here, never an easy task!
• http://www.bing.com/ – looking for web master tools?  <cough> Computer says, noooo.

What are your favorite sites (either Microsoft or not) that you think think need the help of a good web designer?