Create your first Windows Phone app in Expression Blend (Part III)

Create your first Windows Phone app in Expression Blend (Part III)

Posted by Pam on September 12th, 2011

You can create Windows Phone applications quickly and easily by using Expression Blend for Windows Phone, the WYSIWYG visual editor for creating Windows Phone 7 OS projects.

In this article, we’ll show you how to build a simple Windows Phone app that will help you become familiar with the Expression Blend for Windows Phone user interface, and the tools available for building Windows Phone apps.

This is part three of a three part series. In part one, we created the visual aspects of the app. In part two, we added the interactivity.

Part three is “extra credit,” where we’ll show you how to modify a control template to customize a button that switches between states.

Our app so far

At the end of part II, we had a fully functioning app with two buttons, one that plays Hello_Storyboard and another that plays Goodbye_Storyboard.

But wouldn’t it be nice to use one button rather than two? A single button that switches between Say hello to the penguins and Goodbye, penguins when it’s clicked?

To modify a control in Expression Blend, we add a system control (in other words, a default control with the default template and styles applied), and then edit a copy of the template to make the control look the way we want it to look.

Visual states

Interactive system controls have default visual states associated with them. A visual state is the appearance of a control based on user interaction. For example, you can modify the appearance of a button, defining different visual states for MouseOver, Pressed, Hover, or Disabled. When you modify a control template, you can also modify the appearance of the control for each of the associated visual states.

When you are in editing mode for a template, you can view the default states of the selected control in the States panel. You can modify the individual states by selecting the state, then making the changes that you want for that state, and then saving those changes by ending the state animation.

We’ll keep the basic Metro appearance (the default appearance as recommended by the User Experience Design Guidelines for Windows Phone guidelines) for our button. However, we’ll modify the Content property for our selected states so that our button switches from displaying Say hello to the penguins and Goodbye, penguins based on user interaction, in other words, the click of the button.

Add a new button

To begin, delete the two existing buttons by right-clicking each button and clicking Delete. When you delete the button, the Button control and all of its children (in this case, the behaviors) are deleted. The storyboards and audio file that were referenced by the behaviors are still a part of the project.

Now we’re ready to add the new button.

If you type “button” in the Search box in the States panel, multiple Button controls appear in the results. These buttons represent the different types of buttons available as part of the Silverlight platform.

Tip: Hover over the button in the Results list to display a description of the control.

Our app switches between two states. We could use a standard Button control. However, the ToggleButton, a button that switches between two states (such as On/Off or Checked/Unchecked), is ideal for our needs.

Note: Although called ToggleButton, the ToggleButton control is not a Button control, but a type of CheckBox control.

Tip: It’s a good idea to choose the right control for the job. You can explore the different controls available and the various states defined for those controls in Control Styles and Templates on MSDN.

To add a ToggleButton control

• With StackPanel selected in the Objects and Timeline panel, double-click ToggleButton in the Assets panel to add it to the project.

  

Modify the ToggleButton template

To customize the ToggleButton control, we need to edit a copy of the control template. After we’ve finished, the customizations will be applied to the control we’ve added to our app.

When you view the default states for ToggleButton in the States panel (step 4 in the following procedure), you’ll see the following state groups: CommonStates, CheckStates, and FocusStates. Each of the state groups have individual states associated with them. For our app, we’re interested in the CheckStates group.

Note: The state groups and associated states will change depending on the type of control you have selected in the Objects and Timeline panel.

Each state group contains a state that represents the default state for that group. For CheckStates, the default state is Unchecked. It is a good practice to set the default properties that you want in Base, so that no changes have to be made in the default state.

To edit a copy of the ToggleButton template

1. In the Objects and Timeline panel, right-click ToggleButton, point to Edit Template, and then click Edit a Copy.
2. In the Create Style Resource dialog box, you can type a new name for the edited template in the Name (Key) text box. We’ll use the default name, ToggleButtonStyle1.
3. Under Define in, select where you want the template to be defined:
   • To make the template available to a button object in any document in your application, select Application.
   • To make the template available only to button objects in the current document, select This document.
   • To make the template available only to this button in this document, select Button from the drop-down box beside This document.

   We’ll use the default selection, This document. Click OK.

   

4. With ToggleButton selected in the Objects and Timeline panel, select the States panel to view the default states.

   If the tab for the States panel isn’t visible, in the Windows menu, make sure a check mark appears next to States.

5. In the Objects and Timeline panel, expand EnabledBackground, and then select EnabledContent.

   

6. With EnabledContent selected in the Objects and Timeline panel, select Base in the States panel. In the Common Properties category in the Properties panel, click Advanced options next to Content, and then click Reset.

   The ToggleButton text disappears from the button.

7. In the Common Properties panel, in the Content text box, type “Say hello to the penguins,” and then press Enter.

   We have just defined the Base for our ToggleButton control. We won’t make any changes to the Unchecked state, letting Unchecked inherit its appearance from Base.

8. In the States panel, click Checked. In the Common Properties panel, in the Content text box, type “Goodbye, penguins” and then press Enter.

   

9. Click Base in the States panel of the record mode indicator to end state recording.

   

Now that we’ve defined the states for our ToggleButton, we need to add the behaviors so that the button behaves in much the same way that our previous two buttons behaved.

Add behaviors to the ToggleButton

We’ll add PlaySoundAction and ControlStoryboardAction behaviors to our ToggleButton control. Because we have two storyboards that we want to play, we’ll add two ControlStoryboardAction behaviors. We’ll change the Trigger properties to control when each of the storyboards are played.

To add the PlaySoundAction behavior

1. In the Assets panel, click Behaviors, locate PlaySoundAction, and then drag it onto ToggleButton.

   The Trigger and the Common Properties categories appears in the Properties panel.

2. The default event for a Button control, Click, appears in the Event drop-down list. You can click on the arrow to view the other common events for a button, but we’ll use Click.
3. In the Common Properties category, in the Source drop-down list, select the audio file (in this case, Penguins.mp3). You can also click Browse to locate the file.
4. In the Common Properties category, in the Volume box, type 1.

To add the ControlStoryboardAction behaviors

1. In the Assets panel, click Behaviors, and then drag ControlStoryBoardAction onto ToggleButton.

   The Trigger and the Common Properties categories appear in the Properties panel.

2. In the Trigger category, in the Event drop-down list, select Unchecked.
3. In the Common Properties category, in the ControlStoryboardOption drop-down list, select Play.
4. In the Storyboard drop-down list, select Hello_Storyboard.
5. To add the second ControlStoryboardAction, in the Assets panel, click Behaviors, and then drag ControlStoryBoardAction onto ToggleButton.
6. In the Trigger category, in the Event drop-down list, select Checked.
7. In the Common Properties category, in the ControlStoryboardOption drop-down list, select Play.
8. In the Storyboard drop-down list, select Goodbye_Storyboard.

Test your app in the Windows Phone Emulator

Press F5 to view your app in the Windows Phone Emulator. Press the Say hello to the penguins button. You’ll not only see the penguins appear, but you’ll also see that the button switches to a Goodbye, penguins button.

Publish your app to the Marketplace

Think our penguins app is something everyone needs? To publish your finished app, begin by submitting your application to the Windows Phone Marketplace.

For more information on how to do this, see Publishing Your Application in the Marketplace.

Create your first Windows Phone app in Expression Blend (Part II)

You can create Windows Phone applications quickly and easily by using Expression Blend for Windows Phone, the WYSIWYG visual editor for for creating Windows Phone 7 OS projects.

In this article, we’ll show you how to build a simple Windows Phone app that will help you become familiar with the Expression Blend for Windows Phone user interface, and the tools available for building Windows Phone apps.

This is part two of a three part series. In part one, we created the visual aspects of the app. In part two, we’ll add the interactivity.

Part three is “extra credit,” where we’ll show you how to modify a control template to customize a button that switches between states.

Name the controls

To begin, we want to make sure that all of our controls have names associated with them so that we can easily identify them when we add interactivity. The names of the controls can be anything we want them to be. For example, we can name the Image control “Image” or we can name it “Penguins.” This is particularly useful when you have more than one of the same kind of control and want to be able to easily identify which one is which.

To name the controls

• In the Objects and Timeline panel, do the following:
  • Click StackPanel. In the Properties panel, in the Name text box, type StackPanel.

    

  • Click TextBlock. In the Properties panel, in the Name text box, type TextBlock.
  • Click Image. In the Properties panel, in the Name text box, type Image.
  • Click Button_Hello. In the Properties panel, in the Name text box, type Button_Hello.
  • Click Button_Goodbye. In the Properties panel, in the Name text box, type Button_Goodbye.

Add an audio file

The process for adding an audio file is the same process we used to add the image file in part one. To follow along with this example, you can download the Penguins.mp3 file by right-clicking the link and clicking Save target as.

Important: Silverlight, the platform for Windows Phone projects, supports only the MP3 and WMA audio file types.

To add the audio file

• On the Project menu, click Add Existing Item. Browse to the location of the audio file that you want to add (the location where you saved Penguins.mp3, for example), and then click Open.

Add a PlaySoundAction behavior

Behaviors are reusable pieces of packaged code that can be dragged onto any object, and then fine-tuned by changing their properties.

We’re going to use PlaySoundAction, a built-in behavior that plays a specified audio file when an action is performed, in this case, when the buttons are clicked.

To add the PlaySoundAction behavior

1. In the Assets panel, click Behaviors, locate PlaySoundAction, and then drag it onto Button_Hello.

   

   The Trigger and the Common Properties categories appears in the Properties panel.

   

2. In the Trigger category, notice that the default trigger type (EventTrigger) is selected. In addition, because we dragged the PlaySoundAction onto Button_Hello, the SourceName and SourceObject are Button_Hello.
3. The default event for a Button control, Click, appears in the Event drop-down list. You can click on the arrow to view the other common events for a button, but we’ll use Click for this example.
4. In the Common Properties category, in the Source drop-down list, select the audio file (in this case, Penguins.mp3). You can also click Browse to locate the file.
5. In the Common Properties category, in the Volume box, type a number between 0 and 1 (0 is no volume, and 1 is full volume). For best results with Penguins.mp3, type 1.
6. Repeat steps 1-5 for Button_Goodbye.

Build and then run the project by pressing F5. You can now listen to the sound by pressing either of the buttons when the app appears in the Windows Phone Emulator.

Add animation

We’re going to add a simple animation. The idea of the app is to have the penguins appear when we click Say hello to the penguins, and disappear when we click Goodbye, penguins. To create the animation, we’ll create a new storyboard, and then define the animation in the animation timeline.

We want the image to not be visible until after we press the Say hello to the penguins button, so we’ll begin by setting the opacity of the image to 0.

In the Objects and Timeline panel, click Image. In the Appearance category, type 0 in the Opacity field.

We’re now ready to begin recording the animation.

To record the animation

1. With Image selected in the Objects and Timeline panel, click New .The Create Storyboard Resource dialog box appears.
2. In the Name box, type Hello_Storyboard, and then click OK.

   

3. In the Objects and Timeline panel, click Record Keyframe . A keyframe appears on the timeline in the row that corresponds to the selected object, in this case, Image.

   Note: Expression Blend enters timeline-recording mode with the playhead at the 0-second mark. When in recording mode, any property that you set will automatically record a keyframe on the timeline.

4. Drag the playhead to the point in time where you want the animation to finish. Because we want the animation to last as long as the audio file, which is about 4.5 seconds long, move the playhead to 0:04.500.

   

5. Because we want the animation to go from invisible to visible, with the playhead at 0:04.500, in the Appearance category, change Opacity to 100. Now, when the animation is triggered, the image will fade in gradually over 4.5 seconds.To test the animation, click Play .
6. Click Record mode indicator to end the timeline recording.

Hello_Storyboard animates the fading in of the penguins. We need another storyboard to animate the fading out of the penguins. We can easily create this animation by duplicating the existing storyboard, and then reversing it.

To duplicate the animation

• With Hello_Storyboard open in the Objects and Timeline panel, click the drop-down button next to New, and then click Duplicate.

A new storyboard (Storyboard_copy1) that is identical to Hello_Storyboard is created.

Now that we’ve created a copy of the original storyboard, we’ll rename it, and then reverse it to create a fade out animation.

To rename the animation

1. With Storyboard_Copy1 open in the Objects and Timeline panel, click the drop-down button next to New, and then click Rename.
2. The storyboard name is highlighted. Type a new name for the storyboard. For this example, type Goodbye_StoryboardTip: You can also type the new name in the Name box in the Properties panel.

To reverse the animation

• With Goodbye_Storyboard open in the Objects and Timeline panel, click the drop-down button next to New, and then click Reverse.

Goodbye_Storyboard is replaced with a reversed version of itself.

You can now close the timeline by clicking the Close Storyboard .

Add a ControlStoryboardAction

Now that we’ve created our animations, we need to be able to control when the animations play. We can do this quickly and easily by adding a ControlStoryboardAction behavior to each button.

As with the PlaySoundAction behavior, we’ll drag ControlStoryBoardAction from the Assets panel onto the button, and then fine-tune the behavior by modifying the properties.

Add a ControlStoryboardAction behavior

1. In the Assets panel, click Behaviors, and then drag ControlStoryBoardAction onto Button_Hello. The Trigger and the Common Properties categories appear in the Properties panel.
2. In the Trigger category, notice that EventTrigger (the default trigger type) is selected. In addition, because we dragged the ControlStoryboardAction onto Button_Hello, the SourceName and SourceObject are Button_Hello.
3. The default event for a Button control, Click, appears in the Event drop-down list. You can click on the arrow to view the other common events for a button, but we’ll use Click for this example.
4. In the Common Properties category, in the ControlStoryboardOption drop-down list, select Play.
5. In the Storyboard drop-down list, select the storyboard that you want (in this case, Hello_Storyboard).

   

6. Repeat for Button_Goodbye, except in step 5, select Goodbye_Storyboard.

Adding polish

To add polish to our app, we can modify the default text, modify the orientation, and enable scrolling.

Modify the default text

To modify the default text, do the followiing:

1. With the Selection tool selected, double-click MY APPLICATION on the arboard, and then type MY FIRST APPLICATION.
2. With the Selection tool selected, double-click page name, and then type i ♥ penguins. To insert a ♥ into the text box, with the cursor in place, press ALT then press the number 3 on the numbers keypad.

Modify orientation

By default, our app only works in the Portrait orientation mode. To enable our app to work in either Portrait or Landscape mode, do the following:

1. In the Objects and Timeline panel, click PhoneApplicationPage.
2. In the Common Properties category, in the SupportedOrientation drop-down list, select PortraitorLandscape.

   

Press F5 to build and run the app. You can now click to rotate the Windows Phone Emulater and the PhoneApplicationPage will rotate on the screen.

Enable scrolling

When you view our app in the Windows Phone Emulator in Landscape mode, you’ll notice that you’re unable to scroll the screen to see the entire page. To scroll the page, we need to add a ScrollViewer control.

To add a ScrollViewer control

1. With the ContentPanel selected in the Objects and Timeline panel, in the Assets panel, locate the ScrollViewer control by typing ScrollViewer in the Search box.The ScrollViewer appears in the Objects and Timeline panel.Tip: If the ScrollViewer is a child of the ContentPanel, the TitlePanel will not move when you scroll through the page. To make the TitlePanel part of the ScrollViewer, select the PhoneApplicationPage rather than the ContentPanel when you insert the ScrollViewer.
2. Drag the StackPanel to the ScrollViewer to make the StackPanel a child of the ScrollViewer.
3. With the ScrollViewer selected in the Objects and Timeline panel, in the Layout category of the Properties panel, next to Width, click Set to Auto.

You can now scroll the page when it is open in the Windows Phone Emulator in Landscape mode.

Our app so far

We now have a fully functional “Hello, Penguins” app for Windows Phone! But wouldn’t it be nice to use one button rather than two? And have that button switch between Say hello to the penguins and Goodbye, penguins when it’s clicked?

Stay tuned for part three, where we’ll show you how to customize a Button control template, and make it do just that!

*****

Further reading

For more information on the concepts and tools introduced in this article, see the following User Guide topics on MSDN:

• Inserting audio and video
• Working with storyboards and timelines
• Working with built-in Windows Phone behaviors
• Modify the device settings

Create your first Windows Phone app in Expression Blend (Part I)

You can create Windows Phone applications quickly and easily by using Expression Blend for Windows Phone, the WYSIWYG (what-you-see-is-what-you-get) visual editor for creating Windows Phone 7 OS projects.

In this article, we’ll show you how to build a simple Windows Phone app that will help you become familiar with the Expression Blend for Windows Phone user interface, and the tools available for building Windows Phone apps.

This is part one of a three part series. In part one, we’ll create the visual aspects of the app. In part two, we’ll add the interactivity.

Part three is “extra credit,” where we’ll show you how to modify a control template to customize a button that switches between states.

Getting started

Expression Blend for Windows Phone is available as a stand-alone application when you install the Windows Phone 7 developer tools. Windows Phone projects are also available in Expression Blend when you install the Windows Phone 7 developer tools in addition to an existing installation of Expression Blend 4.

Install the Windows Phone Developer Tools to get started with this example.

Create a new Windows Phone project

A Windows Phone project in Expression Blend functions just like other Expression Blend projects. Expression Blend supports the several Windows Phone project types.

For this example, we’ll use the Windows Phone application to create a standard Windows Phone application.

1. On the File menu, click New Project.
2. In the New Project dialog box, under Project types, click Windows Phone.
3. In the list on the right side of the dialog box, select Windows Phone application.
4. In the Name box, type a name for the project. We’ll use HelloPenguins.
5. In the Location box, browse to the folder where you want to store the project.
6. In the Language box, choose the language that you want to use. For this example, we’ll use C#.
7. In the Version box, select the Windows Phone version that you want to target.

   Important: Version 7.1 is only available when you install the Windows Phone Developer Tools 7.1 Beta. This example also works with Windows Phone version 7.0.

8. Click OK.

A new Windows Phone project with the Windows Phone template applied opens on the artboard.

Add a StackPanel

A Panel is a container that is used to group and lay out UI elements. A StackPanel lays out each element one after the other, either vertically or horizontally, depending on the Orientation.

1. With the ControlPanel selected in the Objects and Timeline panel, in the Assets panel, locate the StackPanel control by typing StackPanel in the Search box.
2. Double-click the StackPanel to add it to the artboard.Tip: You can also drag the control to the artboard, or draw the control directly on the artboard with your pointer after you have selected the control in the Assets panel.

Note that the StackPanel is only 100 pixels by 100 pixels. We’ll fix that later.

Add a TextBlock

The next step is to add a TextBlock to the project.

1. With the StackPanel selected in the Objects and Timeline panel, in the Assets panel, locate the TextBlock control by typing TextBlock in the Search box.
2. Double-click the TextBlock to add it to the artboard.Tip: You can also drag the control to the artboard, or draw the control directly on the artboard with your pointer after you have selected the control in the Assets panel.

Add text to the TextBlock

You can add text to the TextBlock by clicking the Selection tool, then double-clicking directly in the text block, and then typing the text that you want, or by clicking the TextBlock and then locating the Common Properties category in the Properties panel and typing the text in the Text field.

For this example, we’ll use the Properties panel, where we’ll also format the text and change the properties of the TextBlock to better suit our template.

1. With the TextBlock selected in the Objects and Timeline panel, locate the Common Properties category in the Properties panel. In the Text field, type Hello, Penguins.
2. In the Text category, in the FontSize drop-down list, select 48 pt.

You’ll notice that the text in the TextBlock is cut off. What we want is for the entire StackPanel and its contents to fill the height and width of the ContentPanel.

Modify the size of the StackPanel

1. In the Objects and Timeline panel, select the StackPanel.
2. In the Layout category of the Properties panel, next to the Width property, click Set to Auto. Do the same for the Height property.

Now the StackPanel fills the space allotted for the ContentPanel, and the TextBlock displays all of the text we just typed.

Add an image

You can either drag a supported image file from outside of Expression Blend, or use the Project menu to add files to your project. Image files are added to the artboard as Image objects.

To add the image, do one of the following:

• On the Project menu, click Add Existing Item. Browse to the location of the image file that you want to add to the current project (for this example, locate Penguins.jpg in the Samples Pictures subfolder of the Pictures folder), and then click Open. Drag the image file from the Projects panel onto the artboard, or right-click the image in the Projects panel in the and then click Insert.
• Drag the file from a folder in Windows Explorer or from your desktop onto the artboard.

The image we’ve chosen is larger than 250 KB, so Expression Blend will prompt you to embed the image in the XAP file. When the message appears, click Yes.

The image we’ve selected is too big to display properly in the window. To modify the size of the image display, do the following:

1. Select the image in the Objects and Timeline panel, and then, in the Properties panel, in the Layout category, click Set to Auto next to the Width box.
2. Click Set to Auto next to the Height box.
3. In the Common Properties category, in the Stretch drop-down list, select Fill.

Add a Button

The next step is to add a Button to the project.

1. With the StackPanel selected in the Objects and Timeline panel, in the Assets panel, locate the Button control by typing Button in the Search box.
2. Double-click the Button to add it to the artboard.

   Tip: You can also drag the control to the artboard, or draw the control directly on the artboard with your pointer after you have selected the control in the Assets panel.

Add text to the Button

You can add text to the Button by clicking the Selection tool, then double-clicking directly in the text block, and then typing the text that you want, or by clicking the Button and then locating the Common Properties category in the Properties panel and typing the text in the Text field.

For this example, do the following:

1. In the Tools panel, click the Selection tool and then double-click the Button on the artboard.
2. Type Say Hello to the Penguins.

Repeat the two previous procedures to add a second button to the artboard, and then type Goodbye, Penguins in the second button.

For the second button, type Goodbye, penguins in the second Button by clicking the Selection tool and then double-clicking the Button on the artboard.

Now we’re ready to make our app interactive! In part two, we’ll add audio, define visual states, and apply behaviors to make the app even more interesting. Stay tuned!

*****

Further reading

For more information on the concepts and tools introduced in this article, see the following User Guide topics on MSDN:

• Managing solutions, projects, and files
• Arranging objects
• Drawing text
• Inserting images and art
• Working with objects and propertie

Using HTML5's New Semantic Tags Today

HTML5. Everybody’s talking about it. If it isn’t my friend who threw together a pretty sweet <audio> drum kit, it’s that buzzword-loving Vice President of Marketing who read somewhere that Flash is dead and HTML5 is the future. But just because everybody’s talking about it, doesn’t mean everyone understands it.
So, let’s address that first: what is HTML5?

HTML5, A Brief History

At its most basic level, HTML5 is simply the latest flavor of the universal language of the web. We started with HTML 2.0 (nope, there was no 1.0 version) and landed at the relatively stable HTML 4.01 in 1999. Then the syntax got stricter, based on the rules of XML, and we had XHTML 1.0.
XHTML 2.0 was short-lived, as the aim for an XML-based web diverged from what developers and designers were doing in the real world. And then after much infighting and brouhaha amongst the powers that decide these specifications, we end up with HTML5. Sorta … It’s a draft today. It won’t become a “candidate recommendation” until 2012.

Dates Don’t Matter

Yes, 2012 is over a year away. But that’s not so long, is it? Certainly not an excuse to avoid understanding what HTML5 offers you (and your sites and your clients) … today and tomorrow.
And don’t forget, browser makers aren’t beholden to standards bodies. Whatever date the W3C needs to make a spec official is pretty much moot if all the browsers are adding or increasing support for HTML5 today. Which means, at a minimum, HTML5 should be on your radar.

A Mashup Language

HTML5 is more ambitious than its predecessors. It was developed with not only designers and developers in mind, but also browser makers and other implementers.
And it isn’t just a markup language for content. It’s a language that supports rich media with new elements like <canvas>, <audio> and <video>. It offers <form> interaction enhancements without JavaScript. It offers web storage for applications.
At the same time, HTML5 embraces its past. Its syntax is backwards compatible with previous flavors of HTML. Want to code loose and free, unconstrained by casing, quoted attributes and closed tags? Go for it. If you are like me and prefer that lovely structure of XHTML 1.0’s syntax, nothing is stopping you.
Yet, although HTML5 doesn’t tell you how to write your markup, it does encourage you to think about what markup you are writing. HTML5 is more semantic than previous versions, giving us POSH lovers a bigger and, I think, better arsenal.
Some elements have been deemed obsolete, other elements have been redefined, and new semantic elements have been introduced. All of which give markup authors more power to describe content, not only for human users but those machine users like search engines, browsers, screen readers and mobile devices.
I love how Molly Holzschlag phrased it on Twitter:

HTML5 is a mashup. It brings together the best of markup with the forward-thinking ambition of tomorrow’s semantic and interactive web. And all with a flexible approach that attempts to meet the needs of what designers, developers and implementers are doing today and what they might do tomorrow.

Start with Structure

One of the best (and, in my opinion, easiest) ways to get started with HTML5 is by using its new semantic elements for describing the structure of page content:

• <section> is used for content that can be grouped thematically. A <section> can have a <header>, as well as a <footer>. The point is that all content contained by <section> is related.
• <header> typically contains the headline or grouping of headlines for a page and/or <section>s, although it can also contain other supplemental information like logos and navigational aids. Notice that I said “page and/or <sections>s.” That means you could have multiple <header>s on a page.
• <footer> is used for content about a page and/or <section>s, such as who wrote it, links to related information and copyrights. And, like <header>, you could have multiple <footer>s on a page.
• <nav> is used to contain major navigation links for a page. While it isn’t a requirement, <nav> will often be contained by <header>, which, by definition, contains navigational information.
• <article> is used for content that is self-contained and could be consumed independent of the page as a whole, such as a blog entry. <article> is similar to <section> in that both contain related content. The best rule of thumb for deciding which element is appropriate for your content is to consider whether the content could be syndicated. If you could provide an Atom or RSS feed for the content, <article> is most likely the way to go.
• <aside> indicates the portion of a page that is tangentially related to the content around it, but also separate from that content, such as a sidebar or pull-quotes. A good method for deciding whether <aside> is appropriate is to determine if your content is essential to understanding the main content of the page. If you can remove it without affecting understanding, then <aside> is the element to use.

Doctype Just Got Easy

But before you can start using these new elements, you first need to declare the HTML5 doctype:

<!DOCTYPE html>

No joke. That’s seriously it.
I can’t remember the last time I actually typed out the DOCTYPE. It was always cut and paste. I never remembered it. That’s not a problem with HTML5’s simplified syntax.
Even better: this doctype works in every browser you may have to support … Yes, even IE6.

A Simple Structure

Now that you know the doctype, let’s take a look at those new semantic elements. But first, let’s consider content. Remember, the point of HTML5’s semantic elements (and POSH, in general) is to describe content. To do that effectively, you need to know and, I daresay, understand your content before you dive into markup.

The Content

Let’s focus on the home page content for a fictitious lawyer’s web site. It will have:

• Logo
• Name of lawyer
• Navigation
• Welcome message
• Featured services
• List of legal resources
• Copyright and legal notices

On a web browser, the home page would be organized like so:

The HTML5

Since HTML5 requires more consideration of content, I like to add an additional “planning” step before I start writing markup. Here, I decide which of the new HTML5 semantic elements will come into play by “mapping” them to my content:

Content	Relevant HTML5 Element
Logo	<header>
Name of lawyer	<header>
Navigation	<nav>
Welcome message	<section><article>
Featured services	<section><article>
List of legal resources	<aside>
Copyright and legal notices	<footer>

Most of this I do in my head, but if you want to write it out go for it. The point is to take the time to think.
Also, this mapping is by no means final, but it does give me a sense of the initial elements I may use. Applied to the web layout from Figure 1, you can see how HTML5 helps define the content structure:

And now, for the markup:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>The Law Office of Jimbob Smith</title>                     
</head> 
 
<body> 
    <header>
        <a href="http://jimboblegal.com">
            <h1>The Law Office of Jimbob Smith</h1> 
            <img src="logo.png" alt="Jimbob Legal">
        </a>
        
         <nav>
            <ul>  
                <li><a href="/News/">News</a></li> 
                <li><a href="/Services/">Services</a></li> 
                <li><a href="/Resources/">Resources</a></li> 
                <li><a href="/About/">About</a></li> 
            </ul>
        </nav>
    </header>
    
    <section>
        <article>
            <h2>Welcome</h2>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
        </article>
        
        <article> 
            <h2>Services &amp; Expertise</h2>
            <p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p> 
 
            <p>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.</p>
            
            <p><a href="/Services/">Learn more</a></p>
        </article>
    </section>
    
    <aside>
        <h2>Legal Links</h2> 
  
        <ul> 
            <li><a href="http://dc.com">District Courthouse</a></li>
            <li><a href="http://da.com">District Attorney</a></li>
            <li><a href="http://la.com">Legal Advocates</a></li>
        </ul>
        
        <p><a href="/Resources/">See all</a></p> 
    </aside>
    
    <footer>
        <p>This is an attorney advertisement, not legal advice. Please do not share information, through this site or otherwise, that you wish to keep confidential.</p> 
        <p>Copyright &copy; 2010 Jimbob Legal. All rights reserved.</p>
    </footer> 
</body> 
</html>

Lastly, be sure to validate:

• W3C Markup Validation Service
• Validator.nu

Still a Place for <div>

Just because you have all these new elements at your disposal, doesn’t mean you have to use them all.
Focus on your content.
If you don’t have content that is appropriate for a <footer> don’t add it just to have a “hook” for styling. Using a <section> or <article> purely for presentation, defeats the point of using these semantic elements. You can still (and should) use <div>s for those presentational purposes. I only encourage you to beware of div-itis.

Dealing with < IE9

All current versions of today’s major browsers allow you to use (and style) these new semantic elements. Firefox, Chrome, Safari, Opera and IE 9. But it just wouldn’t be the web we designers and developers know and love if we didn’t have to make some sort of accommodation for earlier versions of IE.
Fortunately, it is pretty easy thanks to the html5shimpolyfill, which provides fallback functionality to older browsers. All you have to do is call this script in your <head>, using conditional comments to target older IE browsers:

<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

And for those IE haters out there, don’t add this to your ongoing list of reasons of why IE sucks. Older Gecko browsers like Firefox 2 and Camino 1 have the same problem recognizing these new semantic elements. Get past your vitriol, use the shims and workarounds, and encourage your users and clients to upgrade, even to IE 9.
Also, as I mentioned, the HTML5 doctype works in all browsers, including IE6without this shim.

As You Like It

Now, you may not be ready to dive completely into these new semantic elements. Maybe you have a large IE6 user base and can’t rely on JavaScript. Maybe you just want more time to experiment. Maybe you have a huge site where a complete markup restructuring isn’t possible. Whatever the reason, you can still start using HTML5 today, whether for a new site or an existing one.
Remember HTML5’s backwards-compatibility? You can take advantage of that by simply changing your doctype and nothing else. With a single change to <!DOCTYPE html>, your pages are HTML5.
In the case of an existing site, this simple change ensures that your existing markup will still work, while you can implement HTML5 elements as needed. Moving to HTML5 doesn’t require a complete overhaul of a site’s markup.
Another steps towards embracing HTML5 without committing to the new semantic elements is to adjust your class/IDnaming conventions to mirror the new elements. For example, instead of how I marked up the <section> content for my fictitious lawyer, I could:

<div id=”section>
    <div class=”article>
        <h2>Welcome</h2>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
    </div>
        
    <div class=”article”> 
        <h2>Services &amp; Expertise</h2>
        <h3>Criminal Case Evaluation</h3> 
        <p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p> 
 
        <h3>Indigent Defense</h3> 
        <p>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.</p>
            
        <p><a href="/Services/">Learn more</a></p>
    </div>
</div>

To HTML5 or Not to HTML5?

Despite its draft status and issues with older browsers, every single project I’ve done over the past six months has been in HTML5.
For projects where I have full freedom, I’m fully implementing the HTML5 semantic elements (and sprinkling in ARIA roles and adding some <form> enhancements). For more limited client projects, I’ve been taking this less aggressive approach of using the HTML5 doctype and naming conventions.
Why? Because I dig the direction of HTML5. Semantics are hugely important to me, particularly semantic markup. And I also appreciate the flexibility it offers authors in regard to syntax and backwards-compatibility.
But there is one more reason …

Amplified Anchors

In HTML5, you can wrap a link (<a>) around block-level elements. In HTML 4.01 or XHMTL 1.0, you might have:

<h1><a href="http://jimboblegal.com">The Law Office of Jimbob Smith</a></h1> 
 
<a href=”http://jimboblegal.com”><img src="logo.png" alt="Jimbob Legal"></a>

But, as you can see in the previous example, HTML5 lets you apply the link as the parent:

<a href="http://jimboblegal.com">
<h1>The Law Office of Jimbob Smith</h1> 
    <img src="logo.png" alt="Jimbob Legal">
</a>

Granted, a small change in syntax, but a powerful one. And one that, for me, entirely justifies using the HTML5 doctype now.

No More Excuses

If I’ve done my job with this article, you don’t have any excuses left for not experimenting with HTML5 … as little or as much as you feel comfortable with. So, get to it. I’m even giving you my favorite resources to help you along the way:

• HTML5 for Designers
• Introducing HTML5
• HTML5 Doctor
• HTML5 Accessibility
• When can I use
• The Beauty of Semantic Markup, Part 3: Headings

Building Apps with HTML5: What You Need to Know

HTML5 is here, and the Web will never be the same.

You’ve no doubt heard that before, or something like it. I’d guess that when you did, you got excited, rolled your eyes, or mouthed the word “why?” and furrowed your brow a bit. Perhaps your reaction was a mix of all three.

I wouldn’t blame you for any of these. HTML5 is exciting, and it does have the potential to change the Web as we know it, but it also gets blown out of proportion. What’s more, its true meaning can be elusive. I’ve experienced each of those reactions myself while building applications with HTML5. It’s a broad topic, so it’s difficult to wrap your head around HTML5, much less know where to begin with this exciting new set of technologies.

This is the first article in a series for MSDN Magazine, and the goal is to give you a complete picture of why the first sentence in this article is true—and important. Over the next several months, I want to help you understand what HTML5 means to you—both as a Web developer and as a developer who uses Microsoft tools and technologies. I hope to simplify some of the complexity around HTML5 for you, and demystify much of the hype. I’ll also introduce some HTML5 features that are available today, as well as some exciting technologies that, though a bit further out, are worth paying attention to. Finally, I’ll leave you with some tips that will help you adopt HTML5 technologies now, while you continue to 
provide great experiences to users with older browsers.
If you’re excited about HTML5, I want to help you turn that excitement into ideas you can put into practice immediately. If you’re skeptical, I want to help you understand just why HTML5 is important. And if you’re just confused about what HTML5 even means, fear not: that’s our first stop in this series.

What Is HTML5?

You might have discovered by now that HTML5 means different things to different people. To some, it just means new tags like <header> and <footer> and a handful of new attributes available in markup. To others, it means everything that’s new and interesting on the Web, including technologies implemented in just a single browser or other specifications not officially part of HTML5. To be sure, understanding the real meaning of HTML5 is often the first roadblock many of us face.
And, honestly, there’s some justification for the number of varying definitions. HTML5 is huge! Formally defined by an international standards body known as the World Wide Web Consortium (W3C), HTML5 consists of more than 100 specifications that relate to the next generation of Web technologies. By putting all 100-plus of these specifications under the moniker HTML5, you could argue that the W3C oversimplified things. And while it’s hard to take something as broad as HTML5 and define it in an unambiguous way, I believe that the W3C was trying to address the scope of what’s changing on the Web by introducing HTML5 as a unifying concept for that change.
In fact, HTML5 is an umbrella term describing a set of HTML, CSS and JavaScript specifications designed to enable developers to build the next generation of Web sites and applications. What’s notable in that definition is its three parts: HTML, CSS and JavaScript. They define how developers use improved markup, richer style capabilities and new JavaScript APIs to make the most of new Web development features. Simply put, HTML5 = HTML + CSS + JavaScript.
And that’s it. HTML5 is about changes to HTML, CSS and JavaScript. Rather than worrying about all 100-plus specifications, those three terms describe the breadth and scope of HTML5. Still think that’s a bit simplistic? It may be, but as you’ll soon see, a comprehensive definition of HTML5 doesn’t matter as much as the technologies you choose as worthy of your time and effort to adopt.
With a definition in hand, let’s spend a few moments talking about where Microsoft fits into the HTML5 space.

HTML5 and Internet Explorer

As I mentioned, the set of specifications that make up HTML5 are stewarded by the W3C. The W3C consists of staff, organizations and individuals invested in helping to drive and define the future of the Web. The WC3 is a consensus-based organization, and typically operates by forming committees (called working groups) to divide up chunks of work on related specifications. Specifications can be proposed by any member, and all specifications owned by the W3C—more specifications than those that fall under the HTML5 umbrella—move through a five-stage process from first draft to official recommendation.
Microsoft is a member of the W3C and plays a very active role in the specification process for many HTML5 standards and working groups. Just like all of the major browser vendors, Microsoft is heavily invested in HTML5 and is working with the W3C and other vendors to ensure that developers can count on HTML5 technologies being reliably implemented in an interoperable way on all major browsers.
In the context of Microsoft the browser vendor, the approach is fourfold:

1. Deliver the best site-ready HTML5 today via Internet Explorer 9.
2. Expose upcoming features to developers via Internet Explorer Platform Previews.
3. Invest in interoperability through tests submitted to the W3C.
4. Prototype unstable standards via HTML5 labs.

“Site-Ready HTML5” is the term Microsoft uses to describe HTML5 technologies that you can use today because they have broad support across all major browsers. Technologies like the new HTML tags, Canvas, Scalable Vector Graphics, Audio and Video, Geolocation, Web Storage and many new CSS3 modules all fall into this space, and they’re implemented in Internet Explorer 9, as well as the other mainstream browsers. We’ll spend a fair amount of time in this series discussing these technologies, as well as how you can adopt them today.
Beyond what’s available at present, Microsoft is using public Platform Previews to inform developers of what’s coming in the next version of the browser, as well as to gather feedback. For Internet Explorer 9, Microsoft released Platform Previews every six to eight weeks, each time announcing new HTML5 enhancements, features and performance improvements for developers to try out and evaluate. Internet Explorer 9 was released in March and as of early July, Microsoft has released two Platform Previews for Internet Explorer 10, signaling that Microsoft is continuing a regular release cadence for Internet Explorer previews. As a developer, you’ll want to take advantage of the latest previews to learn, test and influence how the browsers evolve. You can download the latest Internet Explorer Platform Preview at IETestDrive.com.
To ensure that HTML5 works consistently across all browsers, Microsoft has invested heavily in interoperability, creating and submitting the single largest suite of test cases related to HTML5 to the W3C. For the first time, this suite of test cases will be used by the W3C as the authoritative source of HTML5 “readiness” in each browser. The end result for you and me as developers is that we can adopt and implement HTML5 technologies once, and trust that they’ll work consistently across all browsers. For more information on Microsoft’s work around interoperability, go to bit.ly/dxB12S.
While some HTML5 technologies already exist in Internet Explorer 9, and others are being announced for Internet Explorer 10 via Internet Explorer Platform Previews, some popular and newsworthy specifications need a bit more work by the W3C and the browser vendors before they’ll be ready to implement in our applications. One such example is Web Sockets, an exciting specification that lets developers open bidirectional communication channels with back-end servers, thus enabling a level of “real-time” connectivity not previously available in Web applications. As a developer, you can no doubt imagine countless uses for Web Sockets in the applications you’re building right now. But the Web Sockets specification is still changing at a rapid pace, with key aspects still in flux and being discussed within the W3C. Given that situation, it would be difficult to provide this feature consistently and reliably across all browsers today.
For unstable or evolving specifications like Web Sockets (which we’ll cover in depth in a future article), Microsoft created HTML5 Labs, a site for developers to experiment with draft implementations of these technologies. The site provides prototypes you can download and try locally, as well as hosted demos for some specs. The goal is to give you a place to try these specs out for yourself, and for you to give both Microsoft and the W3C feedback on these specs as they stabilize and near implementation in browsers. For more information on HTML5 Labs, go to html5labs.com.

HTML5 and Microsoft Developer Tools

Beyond Microsoft’s involvement with the W3C and the HTML5 technologies supported in the browser, there’s another dimension to Microsoft’s approach to HTML5 that’s important for developers: its approach to HTML5 tooling.
In early 2011, Microsoft updated two of its development tools with service packs: Visual Studio 2010 and Expression Web 4. The service packs for both of these tools provided an HTML5 document type for validation, as well as IntelliSense for new HTML5 tags and attributes. If you’re using Visual Studio 2010 SP1, you can enable the HTML5 Schema by clicking Tools | Options | Text Editor | HTML | Validation, and then selecting the HTML5 option in the Target drop-down list, as shown in Figure 1. You can also set HTML5 as the default schema from the HTML Source Editing Toolbar in any HTML file, as shown in Figure 2.

Figure 1 Enabling the HTML5 Schema via the Options Dialog

Figure 2 Setting the HTML5 Schema on the HTML Source Editing Toolbar
Once your default schema is set, you’ll gain IntelliSense support in Visual Studio for the 28 new semantic tags in HTML, as well as new tag-specific and global attributes, as show in Figure 3.

Figure 3 HTML5 IntelliSense in Visual Studio 2010 SP1
Microsoft further updated its HTML5 support with its release of the Web Standards Update for Microsoft Visual Studio 2010 SP1 in June 2011. This extension, which works with all editions of Visual Studio 2010, adds further HTML5 IntelliSense and validation to Visual Studio, includes JavaScript IntelliSense for new browser capabilities like Geolocation and DOM Storage, and provides comprehensive CSS3 IntelliSense and validation. You can download this extension, which will be regularly updated to provide enhanced tooling for HTML5 development, from bit.ly/m7OB13.
For Expression Web 4 SP1, setting the HTML5 schema under Tools | Page Options offers the same IntelliSense, and the tool also provides CSS3 IntelliSense for several draft CSS3 modules like border-radius, box-shadow, transform and the like.
If you’re using WebMatrix (see web.ms/WebMatrix), you may have noticed that all new .html, .cshtml or .vbhtml documents you create contain default markup similar to what’s shown in Figure 4. As I’ll discuss in the next article in this series, this is a basic, valid HTML5 document. Most notably, the doctype and meta charset tags have lost a lot of cruft. Using this simple doctype triggers HTML5 mode across all modern browsers, and WebMatrix makes it easier for you by providing an HTML5 document by default.
Figure 4 A Default HTML Document in WebMatrix

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title></title>
  </head>
  <body></body>
</html>

If that’s not enough new HTML5 tooling for you—all since January 2011, by the way—ASP.NET MVC recently got in on the fun with the ASP.NET MVC 3 Tools Update announced at MIX11 in April. Along with a number of other great new tooling features, the ASP.NET MVC 3 Tools Update provides the option to use the HTML5 doctype for new projects—and ships Modernizr 1.7 in the Scripts folder of new applications. Modernizr is a JavaScript library that greatly eases HTML5 development; I’ll discuss it in depth in a future article.
The takeaway here is that even though HTML5 is just emerging in our browsers, official tool support is quickly being added, and Microsoft is even adding support for libraries (like Modernizr) from the community. You can target HTML5 with some help from Microsoft tools today, and expect that that HTML5 support will continue to grow and improve over time.

‘Adopting’ HTML5 in Your Applications

By now, you should realize that HTML5 isn’t a single entity that you can adopt or migrate to in one fell swoop. Adopting HTML5, rather than being a wholesale choice, is about making a technology-by-technology evaluation and determining which technologies are right for your application. For each HTML5 technology you evaluate, look at (at least) the following factors when deciding whether that technology is ready for you to adopt:

1. How widely implemented across all major browsers is the technology?
2. How would you adopt this technology and “polyfill” support for browsers that don’t support a given feature?

The first factor is the most important, and when combined with an understanding of the browsers commonly used by visitors to your site, should give you a clear picture of which subset of the 100-plus specifications is worth evaluating further. That subset should consist of a set of stable specifications you can reliably adopt today for your users.
However, even with that stable set of HTML5 technologies, you shouldn’t ignore your users who haven’t moved to a newer browser. If you’re heavily involved in the day-to-day development for your site, you no doubt have some rough idea of the percentages of users visiting your site with a given browser. For most of us, it would be easy to look at the percentage of users visiting with an older browser and come to the conclusion that adopting any HTML5 technologies would negatively impact those users. Luckily there’s “polyfilling” to save us from waiting until some foggy date in the future to adopt HTML5.
Paul Irish (a developer on the jQuery and Modernizr projects) defines a polyfill as “… a shim that mimics a future API, providing fallback functionality to older browsers.” A polyfill is like spackle for your Web sites; it’s a way to determine if a given HTML5 feature is available to the user currently browsing your site, and to provide either a shim that “fills in” that support or a course of graceful degradation that enables your site to still function fully.
The most popular library associated with polyfilling is Modernizr, the JavaScript library I mentioned earlier. Modernizr provides some basic polyfills for semantic markup, feature detection for major HTML5 technologies and support for conditional CSS based on supported features. As noted, Modernizr will be the subject of an upcoming article; it will also feature prominently (along with many other polyfilling libraries) throughout this series. To learn more, download Modernizr at modernizr.com.
When it comes to choosing which technologies to adopt, your final list may be a combination of widely supported specifications and other specifications for which you’ll have to polyfill support for certain browsers. Only you will know the exact makeup of that list based on your current needs and context.
In the coming months, I’ll discuss several notable specifications, from Geolocation and Forms and Canvas, to Web Workers, Web Sockets and IndexedDB. Some of these are widely supported and “site-ready,” and some, like Web Sockets, are too groundbreaking to ignore, regardless of where they stand today. With each specification, I’ll discuss current and known future support, some basics about how you can implement the specification’s features on your sites, and how to polyfill support for browsers that don’t support a given feature.
If you want to dig more into HTML5 today, I suggest you pick up a couple of books on the subject. In particular, I recommend “Introducing HTML5” (New Riders, 2010) by Bruce Lawson and Remy Sharp and “HTML5 Up and Running” (O’Reilly Media, 2010) by Mark Pilgrim. Also, be sure to visit W3C.org for up-to-date information on all specifications, as well as BeautyoftheWeb.com and IETestDrive.com to download Internet Explorer 9 and the Internet Explorer 10 Platform Preview, respectively, and learn more about the great HTML5 experiences Microsoft is delivering through the browser.
Above all else, start adopting HTML5 today. The Web won’t ever be the same, really, and you can be part of the catalyst by building the next great Web applications using HTML5.

Web Design, Development, Managment & Analysis: How to Launch, Promote & Optimize Your New Website...

Web Design, Development, Managment & Analysis: How to Launch, Promote & Optimize Your New Website...: Launching a new website is one part of a process of continually refining and improving your digital offering. Website Review Pri...

How to Launch, Promote & Optimize Your New Website

Launching a new website is one part of a process of continually refining and improving your digital offering.

Website Review

Prior to commissioning or building a new website, you should always conduct a website review of your existing site and develop a full scope. The website review will identify your existing content, top tasks and enable you to refine your Information Architecture (IA), user journeys and design.

Additionally you will need to consider:

• Web CMS
• Analytics
• Hosting
• Mobile and standard website designs and processes

The build phase of the website will bring all your functional ideas together. Good Web CMSs will have features to ensure your content is W3C compliant for accessibility, plus have automated metadata tagging and link checking.

You will also need to ensure your hosting provider is delivering you a robust solution and will cope with any additional traffic demand.

Analytics tracking code should be added to the site to measure standard usages as well as custom code for tracking actions, goals and funnels. It is critical to monitor this information regularly and act on what it is telling you.

Your mobile website will need to be built and tested. The solution that gives you the best combination of easy content management, value for money and ability to engage is to deploy a sub-site version of your website. Here the content can be shared with your main site or tailored for mobile consumption, but only top tasks are included to give a slicker, more engaging experience to customers.

Launch and Promotion

Once you have completed your testing in a development environment, you will be ready to launch and promote your website as the optimum channel for customers to use your services. Channel shift from phone and face-to-face contact to online delivery can save 80% of service costs, so it is important to push the web channel as the main contact method.

Promotion is typically carried out by the marketing or communication team and would include campaigns for:

• Search Engine Optimization (SEO)
• Social Media
• Pay Per Click (PPC)
• Email
• Offline material

Testing for Usability, Optimization

Once your website has been live for a while and any snags have been fixed, you can start the ongoing processes of refining user journeys and website optimization.

These will enable you to squeeze the last bit out of your website and convert as many customers as possible and create a better user experience.

Usability testing is done in two ways: Quantitatively and qualitatively.

Quantitative

A combination of multi-variate testing and analytics insight will give you the understanding needed to make significant and meaningful improvements to your user journeys. Multivariate testing is used to refine page layout. This is a process in which users are dynamically presented with different versions of a page and the resultant behaviors are subjected to statistical analysis to determine which is the best version of the page to adopt. This is not a one-off process, but a continually evolving and iterative one where alternative variants are tested regularly.

Qualitative

Observing real users is also a valid way to gain feedback on your website. It is best to measure live behavior remotely rather than group or individual interviews/focus groups. Using remote testers means that they will be able to test in their natural environment with a PC that they are comfortable with. It also avoids anyone “looking over their shoulder,” which can be off-putting and lead to testers doing/saying what they think the tester wants to see/hear. You can then combine your quantitative and qualitative research and base decisions on facts and data.

Conclusion

If you have conducted a thorough website review prior to building a new website, your launch and promotion should be successful. But once live, your website will really need to be sweated. In-depth usability testing and analytical research will enable you to increase conversions and ultimately sell more or deliver more services.