A few of us from the Expression Web team attended a talk by Steve Krug, usability consultant and author of Don't Make Me Think, at an event hosted by the Puget Sound Special Interest Group on Computer-Human Interaction (SIGCHI) in Seattle.
Steve believes there is a short list of design conventions that make some web pages inherently more usable than others, and his talk presented two of these conventions:
Effective "You Are Here" indicators
Steve suggests that subtle design distinctions that some designers love to craft simply don't work in practice and are less effective than "louder" design choices that clearly establish where you are in a website. To demonstrate how quickly website visitors can plow through a website and overlook subtle design elements, he showed an interesting video of software that tracked his eye movements as he navigated a website in search of information. The software drew red lines all over the web pages, showing the paths of his eye movements, how fast his eyes scanned the page and where his eyes dwelled.
Steve is a big fan of tab-based site navigation, especially when the tab color blends into the page color. For good examples, he pulled up http://www.stumbleupon.com/ with this tabbed navigation:
and http://www.cnet.com/ with this navigation:
Based on usability studies he's reviewed, Steve contends that subtler global navigation menus that are placed on the edge of a web page, such as this:
are often overlooked by users, who will click around within the main content area of the page and not discover the main navigation menu until some time later.
Prominent and well-placed page titles
Steve's second recommendation to help improve the usability of your websites is to simply ensure each page has a primary heading that is bigger (although not necessarily the biggest) and bolder than other headings in the page, and clearly identifies the title or content of the page. He'll give you bonus usability points if your website supports "WYCIWYG" or "what you click is what you get" which means a hyperlink's label and the title of the destination page are the same or virtually the same.
Hewlett Packard is providing a free online training for Expression Web 1 (not version 2 of Expression Web) by Virginia O'Connor. Even though the course is for version 1 of Expression Web, I didn't see anything in the content that can't be applied to version 2.
The training consists of four lessons from May 8 - June 13th, 2008 and their website indicates the training materials will be taken down when the course ends so be sure to sign uo and get the content before June 13th, 2008.
Here's the course description from the HP website:
Building websites with Expression Web This class covers the basics for creating a website with Microsoft's Expression® Web with features such as toolbars, formatting, page layouts and link creation. With this easy website creation software, you'll apply cascading style sheets, then learn how to create complex queries, how to configure the software for different browsers and how to create interactive web pages with ASP.NET 2.0 capabilities.
Building websites with Expression Web
This class covers the basics for creating a website with Microsoft's Expression® Web with features such as toolbars, formatting, page layouts and link creation. With this easy website creation software, you'll apply cascading style sheets, then learn how to create complex queries, how to configure the software for different browsers and how to create interactive web pages with ASP.NET 2.0 capabilities.
Microsoft Expression Web Service Pack 1 (SP1) delivers important customer-requested stability and performance improvements for Expression Web 1.0, while incorporating further enhancements to user security. You can download the SP1 for Expression Web and get more details about it on this page:
The MIX website at http://www.visitmix.com was recently redeployed and was developed with, but of course, Expression Web.
Here’s a random image that I love ( and don’t understand ) from the website:
But enough of that silliness, here’s the official announcement:
Today we are announcing an update to MIX Online at visitmix.com.
MIX Online is a community site for web designers and developers who are building and believe in the innovative web. In the past, the site has given a varied perspective of what is happening on the web, a view into our conference called MIX, and interviews with amazing people with incredible ideas and stories on how designers and developers can take advantage of the web. MIX Online has always been a year-round companion to the event.
MIX Online moves forward by taking more of a scenario focus around emerging web trends. For example, Microformats is an interesting movement in the web community and we want to introduce you to it and give you some practical guidance around it. MIX Online will continue to showcase our traditional blog, but we are renaming it under the heading “Opinions” that provides a more natural conversation with our small team. Also, MIX Online now provides practical articles with each scenario that are written by people in the community, not always Microsoft’s perspective. Best of all, MIX Online is providing freely downloadable, open source, and immediately useable prototypes. You are encouraged to use these prototypes for your own projects, but to also submit code to the prototype project on CodePlex to share with the community.
Please check it out at www.visitmix.com and be sure to register for the MIX conference at www.visitmix.com/2009 .
Renee Yong just emailed me to let me know the last day for 50% off of the price for Expression Web 2, Expression Blend 2, or Expression Studio 2 is:
Saturday, January 31, 2009.
This offer is only available in the United States and through the Microsoft online store which I link to below. If you’ve been on the fence about this offer, now’s the time to jump off the fence one way or the other!
The Expression website was relaunched yesterday with a fresh new look and experience to coincide with the release of Expression Studio 2. Now you can get your hands on free trial versions of each program in Expression Studio 2 including Expression Web 2 or buy the program.
So what's new in Expression Web 2?
You can buy the upgrade for version 2 for only $99 if you own any of the following:
Once you've installed Expression Web 2, discuss the program with others at the newish Expression Web forum., check out learning options at the newish Expression Community website, or checkout the newsgroup for Expression Web. And submit feedback at the Connect website for Expression.
Raena Jackson Armitage , SitePoint Community Leader and hand-coder, recently checked out the code editor and PHP support in Expression Web 3 and wrote up a review of her experience:
Minal Agarwal is a web and graphics designer who maintains a helpful blog at http://saffronstroke.com/ which is full of tips and tricks for Expression Web users as well as CSS hacks and web page templates. Minal has also contributed several articles to http://www.dotnetcurry.com for their Expression Web category. Check it out:
Hi, I'm Michelle Rosenthal, a new tester on the Expression Web team.
My recent work on Expression Web has brought to my attention the importance of document type declarations (referred to as DOCTYPEs) and understanding the effect of these declarations on how content is displayed in different web browsers. There are a handful of DOCTYPEs you can declare at the top of your html that will vary the way a browser interprets your page. Here are a few examples:
HTML 4.01 Strict: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
XHTML 1.0 Transitional: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
(You can find out more regarding the differences between strict and transitional DOCTYPEs in this article at 24ways.org, as I will not be going into that distinction.)
A well-formed DOCTYPE will trigger the browser to render the page in “standards” mode (or sometimes the self-explanatory “almost-standards” mode.) If a page does not contain a DOCTYPE declaration (or if the DOCTYPE is incorrectly defined), most browsers will enter "quirks mode". Quirks mode is essentially a backwards-compatibility mode that enables a browser to interpret and display content in the way that pre-"standards-compliant" browsers did. In other words, the browser doesn’t stick to HTML and CSS specifications outlined by W3C (World Wide Web Consortium).
What better way to demonstrate this than with a personal example. Last year I created a photo portfolio website, coding the HTML and CSS from scratch. Like many web developers, I designed and tested the site with Firefox in mind as the end user’s browser (because Firefox reliably renders standards-compliant pages as they are intended to be rendered). The site was a mess when I previewed it in IE. At the time, I wasn’t aware that I was missing a DOCTYPE or that this omission was causing the browser incompatibility. The following snapshot of the site in IE7 quirks mode shows a few of "quirks" that can manifest.
First, an IE browser in quirks mode suffers from the Internet Explorer box model bug causing it to interpret padding and borders differently than it would in standards mode. The horizontal panel with thumbnail images is narrower than intended due to quirks mode incorporating padding into its explicit width rather than adding padding on top of that width. Additionally, the CSS trick to center content (setting margin: auto; on the containing div) is not processed:
Once I realized what the problem was, I quickly added a DOCTYPE as the first line to all of my html files. (I chose the default type in Expression Web, XHTML 1.0 Transitional.) Now when I preview it, IE will render my page in “standards mode”:
IE and Firefox now show nearly identical illustrations of my site! One problem solved in the fight for complete browser compatibility.
One great feature in Expression Web is all the calculated information displayed on the status bar at the bottom of the application. Here you can see your document type declaration and the mode in which a browser will display your content:
It will also detect and warn you about incompatibility (the left arrow in the image below):
You can double-click on the icon on the left and Expression Web will bring you to the incompatible code.
Once you see that you need to add a DOCTYPE, place your cursor before the <html> tag in Code view and press CTRL-ENTER to bring up a nifty dropdown menu of DOCTYPE code snippets:
New pages in Expression Web always contain a default DOCTYPE. You can control this default by going to Tools-> Page Editor Options under the Authoring tab:
Here are a few great resources to learn more about quirks mode:
Quirks Mode Explanation at quirksmode.org Mozilla's Quirks Mode Behavior
The Expression community website has a new portal devoted exclusively to helping FrontPage users transition to using Expression Web: http://expression.microsoft.com/frontpage
The FrontPage to Expression Web portal currently features:
The initial launch of this website was done with the input of FrontPage MVPs and Expression Web MVPs, as well as Microsoft employees. To make this portal as useful to FrontPage users as possible, we need YOUR ongoing input to ensure we’re providing FrontPage users with the resources they need to successfully move to Expression Web. To suggest article ideas and other content for the FrontPage to Expression Web community website please email email@example.com.
We have a new Connect website setup for you to submit suggestions and bug reports about Expression Web or any other Expression product, including Expression Blend, Expression Design, Expression Media, and Expression Media Encoder: https://connect.microsoft.com/Expression
Up until now, the Expression Web team has used the Connect: Expression Web site to gather bug reports and suggestions from Expression Web users like you. The team behind Expression Web regularly reviewed these submissions – and you have sent us some excellent feedback, thank you! On Friday August 17th, 2007 we will take down the existing Expression Web program in Connect and transition over to the Connect website we have setup for all Expression Studio products.
The Connect website for Expression Studio provides a feedback form that allows you to submit feedback for any program in the Expression Studio line of products, including Expression Web. The feedback you submit for Expression Web continues to go directly to the Expression Web development team, and you can still vote on, validate, and comment on the feedback of others.
Although feedback you and others have submitted to the original Connect website for Expression Web is not available within the new Expression Studio Connect website, all previous feedback remains active in our internal database which we use to track issues and feature requests.
Thanks again for all of your feedback, please continue providing it, and we look forward to your participation in the new Connect: Expression Studio website!
This is Paul Laberge, Web Platform Advisor for Microsoft Canada.
I wanted to share this with you as it shows some great work by Morten Rand-Hendriksen, an Expression Web MVP out of Vancouver. Morten is a web designer and feels the pain of supporting multiple browsers (and multiple versions of each browser) when building a web solution for his clients. As a result of this, he’s decided to take an idea that was implemented in one of the news sites from his home country of Norway (for story see http://blog.wired.com/business/2009/02/norwegian-websi.html) and implement it for his own sites.
He believes that IE6 is a browser that ought to be retired given IE7 is out and since IE8 will be available very soon. As a result, he has written a piece of JS code that he is hosting on http://StopLivingInThePast.com that will hopefully get people to upgrade to the newest version of IE.
Below is the post he has written for his blog describing this work: http://www.designisphilosophy.com/browsers/stoplivinginthepastcom-is-live-join-the-movement-to-phase-out-ie6-forever-20090221/).
And here is a link to the public forum for Expression Web where Morten and others are earnestly discussing Morten’s http://StopLivingInThePast.com website and his efforts to phase out IE 6:
What do you think? Should web developers continue to ensure their designs work in Internet Explorer 6 or should they push their site visitors to upgrade their browser? Join the discussion! --> http://social.expression.microsoft.com/Forums/en-US/web/thread/b83381a9-859b-479e-882c-0dcee8bf2601
web platform advisor | microsoft canada | blog: http://blogs.msdn.com/seesharp
Four members of the Expression Web team are headed to MIX 2008 in Las Vegas, and would like to meet up with anyone who will also be there. Please comment on this post if you'd like to get together and chat with us...we'd love to hear from you.
Tyler Simpson, our Principal Test Manager, will be leading a session at MIX with Nishant Kothary titled "Microsoft Expression Web: From Comp, to CSS, to Code!". They'll be showing how they designed a WordPress blog template with Expression Web for Nishant's Rainy Pixels blog - http://www.rainypixels.com/ . Here's the session's description from the MIX 08 website:"Explore key features of Microsoft Expression Web through real-world scenario-based exercises focused around building a great blog template. The topics cover PHP support, Photoshop comp import workflow, CSS features, and more."
Visit the MIX 08 sessions page to get the location and time of this and other sessions:https://content.visitmix.com/public/sessions.aspx
If you're not going to MIX, you'll be glad to know that the Tyler and Nishant's session will be recorded and available on the MIX website after MIX. We'll blog about it once the recording is available.
Again, if you're going to MIX, let's get together!
Last month we blogged about a Firefox bug our customers encountered using SuperPreview with Firefox version 3.5.5. This bug caused Firefox 3.5 to stop working with SuperPreview on Windows XP and Windows Server 2003. With the newest release of Firefox 3.5.6, the Mozilla team has fixed the aforementioned bug. We recommend that you update to this latest version of Firefox 3.5 to use it again in SuperPreview. If you followed the steps in the previous blog post to revert to an earlier version of Firefox, you may now turn auto-updates back on.
Michelle Rosenthal Microsoft Expression Web
Update to this blog post – this offer is extended through Jan 31, 2010!
For a limited time there is a discount of 30% on all Microsoft Expression version 3 products (Microsoft Expression Studio + Expression Web, both full and upgrade versions) when purchased through the Microsoft Online Store. A special promo code is NOT required and this is available only in the *US*. This offer is valid through December 28, 2009 11:59 p.m. Check it out:
I used Expression Design to layout and create the elements for my wedding homepage (see my blog Composing a Wedding Page in Expression Design) and then used Expression Web to position them on the page. In this post I will describe how to use Expression Web to add image swapping behavior to the page.
Selecting one of the images from the page and opening the Behaviors task pane via the Task Panes menu allows you to define a number of different kinds of behaviors for that image or element. Press the “Insert” button and select “Swap Image” from the menu.
To read the full post go mosey on over to my blog: Little-Endian.
Greg Smith, Expression Web Software Tester (I'm a PC)
Tyler Simpson, our Principal Test Manager, and Nishant Kothary, Expression Technical Evangelist, presented a lively talk and demonstration of Expression Web 2 at MIX 2008 earlier this week. The recording of the session is already available online:
Here's the description from the MIX website:
Explore key features of Microsoft Expression Web through real-world scenario-based exercises focused around building a great blog template. The topics cover PHP support, Photoshop comp import workflow, CSS features, and more.
Explore key features of Microsoft Expression Web through real-world scenario-based exercises focused around building a great blog template. The topics cover PHP support, Photoshop comp import workflow, CSS features, and more.
Let us know what you think!
Oh, and hey, have you had a chance to download the Expression Web 2 Beta yet? You haven't? Get on it then! PHP, AJAX, Custom ASP.NET controls, Photoshop support ...and more, await you here: http://www.microsoft.com/expression/products/download.aspx?key=web2beta
Have you ever been puzzled by the tip “Newer constructs are recommended” while working in the Code view of your page in Expression Web? If so, check out my blog post Better error messages “are recommended”, which is devoted to helping users decipher that tip!
Microsoft Canada has a great offer for any Canadian web solution provider that isn’t already a Registered Microsoft Partner.
For a limited time, we are offering a free copy of Expression Web 2, our premier web design tool for building compelling web sites.
All you need to do is go to this site, register as Microsoft Partner on the site (which is completely free) and enter your Partner ID to get your free copy of Expression Web 2.
There are many other benefits with this offer as well. We are offering access to free training on Microsoft web platform technologies, great hosting offers and other benefits as well.
In addition to all that, by registering as a Microsoft Partner, you get other offers for training, deeply discounted software to help you start your business as well as support from Microsoft to help you grow your business.
If you haven’t registered as a Microsoft Partner yet, this may be a great time to do it!
A public BETA of Internet Explorer 8 is now available for download at http://www.microsoft.com/ie8. The Internet Explorer team provides a good overview of what you’ll find in BETA 2 at:
Especially note these paragraphs under “Platform” in that post:
IE8 is more interoperable with other web browsers and web standards. The contribution of CSS 2.1 test cases to the W3C is an important in order to really establish a standard way to assess standards support. We think that CSS 2.1 remains the most important place to deliver excellent interoperability between browsers. We think developers will enjoy the improvements to the built-in tools, as well as the other opportunities to integrate their sites in the user’s daily life with Accelerators and Web Slices. You can find more information at the IE Development Center, http://msdn.microsoft.com/ie. After deciding to default IE8 to the most standards-compliant mode available, we wanted to be sure to address compatibility concerns for organizations and individuals. Would websites that expect IE8 to behave the way IE7 does create a problem for end-users? Since March, we’ve been telling developers about a small change they can make to their sites to tell IE8 to show their sites as IE7 does. Many have – but there are a lot of sites that may have not yet addressed this. The Compatibility View button (new to IE8 Beta 2) is a good solution to provide end-users a good experience as the web transitions.
IE8 is more interoperable with other web browsers and web standards. The contribution of CSS 2.1 test cases to the W3C is an important in order to really establish a standard way to assess standards support. We think that CSS 2.1 remains the most important place to deliver excellent interoperability between browsers. We think developers will enjoy the improvements to the built-in tools, as well as the other opportunities to integrate their sites in the user’s daily life with Accelerators and Web Slices. You can find more information at the IE Development Center, http://msdn.microsoft.com/ie.
After deciding to default IE8 to the most standards-compliant mode available, we wanted to be sure to address compatibility concerns for organizations and individuals. Would websites that expect IE8 to behave the way IE7 does create a problem for end-users? Since March, we’ve been telling developers about a small change they can make to their sites to tell IE8 to show their sites as IE7 does. Many have – but there are a lot of sites that may have not yet addressed this. The Compatibility View button (new to IE8 Beta 2) is a good solution to provide end-users a good experience as the web transitions.
Joshua Eklnud recently published a series of training videos on how to use Expression Web, including videos on:
All are available at http://www.microsoft.com/web/search.aspx?tagcb=Expression%20Web
I used Expression Design to layout and create the elements for my wedding homepage (see my blog Composing a Wedding Page in Expression Design.) In this post I will describe how to use Expression Web to layout those elements on the page based on the composition image.
Using a Tracing Image is one way a web developer can be sure that the web page that they’re marking up will look like the page the designer intended.
The Expression team has launched a new Community website where you can learn, share, and be inspired.
In order to help us understand web designers better, the team has created a very short (15 questions) anonymous survey about web designers. If you fall into that category, and would like to help influence the future direction of Expression Web please take a minute and go fill it out. It can be found at http://connect.microsoft.com/ExpressionWeb/Survey/Survey.aspx?SurveyID=3456.
The Expression Web team is conducting a survey on hosting and publishing to learn more about how web professionals publish and host websites. The survey is anonymous and does not collect any personal information.
All feedback is used to help improve future versions of Expression Web.
The survey is located on Microsoft Connect:
We appreciate your time and feedback. Thank you for helping us make Expression Web a better product.