Workspace improvements

Expression Web now supports any number of custom workspaces. You can save, restore and reset workspaces—which are collections of panel configurations. You can find the Workspaces feature on the Panel menu.

With Expression Web 4 SP2, we’ve built custom toolbars into Expression Web. This feature allows you to create any number of custom toolbars using any of the built-in (internal) Expression Web commands. The Custom Toolbars feature is found under the View menu.

Expression Web now provides a preview thumbnail of the currently selected file in the folder list panel. No more hunting around for image dimensions or sizes. In addition, the convenient link text under the size display lets you quickly copy an <img> tag or the CSS dimensions to the clipboard to paste into your markup.

If a CSS file is highlighted, you get clickable links for creating @import and <link> syntax; if a JavaScript file is selected, you can make a <script> tag with a click.

Code Editing Improvements

jQuery is the world’s most popular JavaScript framework. And now, Expression Web users can enjoy one of the best jQuery IntelliSense implementations around. One of the nicest elements of this feature is the intelligence we’ve built into creating selectors. With jQuery, you target methods at HTML elements that are identified using CSS selectors—tags, ID’s and classes.

Expression Web knows the IDs and classes that are available in your document, and will present you with the appropriate list (HTML tags, IDs, or classes), based on what you’ve started typing as a selector. In addition, Expression Web’s jQuery IntelliSense also supports IntelliSense while chaining multiple methods. In jQuery, methods can be executed one after the other within the same expression. In the example below, the css() and prepend() methods are chained, with IntelliSense operating within each chained method.

Our new Snippets panel lets you store and access snippets in a folder-based hierarchy. It comes with dozens of useful snippets in a variety of languages, and will automatically convert and load any existing custom snippets you’ve already built.

Also, the new feature was designed to preserve the ergonomics of the current snippets feature. Ctrl-Enter will bring it to the foreground with focus in the Filter field. Typing will automatically filter the list. You can use the arrow keys to navigate, and hit Enter to insert. Expression Web also now supports “wrap” snippets—where you specify code that goes before and after a selection—as well as the standard “replace” snippets.

A common pain point for web developers is the effort it takes to comment and uncomment bits of code you’re testing. Our Universal Comment/Uncomment feature will comment or uncomment code with Ctrl-j, Ctrl-Shift-j, from within whatever language you’re working with—PHP, JS, CSS, HTML.

Interactive Snapshot

In Expression Web 3 we introduced the Snapshot panel which uses SuperPreview rendering technology to allow you to preview Web pages in any version of IE (and Firefox 3.x) as you’re authoring them. This is great for layout issues, but doesn’t help if you need to test page interactivity. In Web 4 SP2, we’ve added an Interactive mode to our stable of IE renderers (as well as an interactive Firefox 3.x). Interactive mode essentially puts Internet Explorer in a panel, allowing you to see and interact with web pages during the authoring process. Mouse-overs, lightboxes and animations all work. Simply saving your changes triggers a refresh of the panel. IE Interactive uses the current version of Internet Explorer installed on your machine.

We hope you enjoy this new Expression Web service pack. It is available via the download link on the Expression Community site at https://expression.microsoft.com and will also be delivered via Microsoft update.

Alex Moskwa
Program Manager
Microsoft Expression Web

Typically, we come out with a service pack release to fix bugs, address performance problems, and add a bit of polish to a product.

In the case of Expression Web 4 SP1—we really couldn’t wait. We saw all the cool stuff that’s happening around HTML5—we  knew the release of IE9 was coming—and we said to ourselves, “We need to get some Expression Web HTML5 goodness out, ASAP!”

And, here it is, built into Expression Web 4 SP1.

We’ve added IntelliSense for the complete HTML5 specification, IntelliSense for the (evolving) CSS3 draft spec, support for all new CSS properties in the CSS Properties palette, and support for selected CSS properties in the Style dialogs (like the Border Radius dialog below).

There is a lot of stuff in here. And now, you have no excuses for not jumping on the HTML5 bandwagon.
We’ve also got support for IE9, so that you can Snapshot your page and preview it directly within Expression Web.

 
If you haven’t checked out SuperPreview in a while, you’ll want to. There are quite a few improvements including support for Chrome (via our online service) as well as IE9 rendering. One request we heard a lot was the need to compare pages that are behind a login screen. SuperPreview SP1 includes a new feature called “Page Interaction Mode” that lets you browse interactively to your page of interest, and then submits that page to your set of chosen browsers.

 
This allows you to use SuperPreview on password-protected pages on your Intranet, or on authenticated Internet sites.
We’ve updated our PHP support with hundreds of functions from PHP5, added a number of new niceties like “Open as PHP,” “Open folder in Windows Explorer,” “Copy File Path,” and others. We’ve also added IntelliSense for extended characters—so, as soon as you type a “&”—you’ll get a list of the HTML character entities that filters as you continue to type.

 
We automatically look for Chrome, Safari and Opera and conveniently add them to the list of browsers you can use to preview.

 
Expression Web 4 SP1 is available now via the Microsoft Download Center at https://www.microsoft.com/downloads/details.aspx?FamilyID=f6e1bbd9-2b1b-40e8-948b-1276e3b5daa3. Enjoy!

Steven Guttman

Another way you can reach us is through the new SuperPreview User Voice site.

Here you can submit your feature ideas and also vote on the ideas others have submitted.  Through this we will continue to grow our understanding of you, our users, and create a product that does what you want.

Let us know what you think and be heard.

Alex Moskwa
Program Manager
Expression Web and SuperPreview

Install the HTML5 Schema Configuration Add-In

1. Quit Expression Web 4 if it is open.
2. Download the HTML 5 Schema Configuration Add-In here and save it to your local computer.
3. Start Expression Web 4.
4. Choose Tools > Add-Ins .. to display the Manage Add-Ins dialog box.
   
   
5. In the Manage Add-Ins dialog box, click the Install.. button.
6. In the Open Expression Web Add-in File dialog box, select the HTML5Schema.xadd add-in file you downloaded, and click Open. Be sure to click “Yes” when Expression Web asks you to enable the add-in.

If the add-in is correctly installed, it will appear in the Manage Add-In dialog, and the Standard toolbar will display a new “HTML5” button.

Using the HTML5 Schema Configuration Add-In

1. Start Expression Web 4 with administrative privileges (Right-Click the start icon and select“Run as Administrator”).
2. Click the HTML5 button in the standard toolbar. The Configure HTML 5 Schemas dialog box lets you enable or disable the new HTML5 schema.
   
   
3. Click the Enable HTML 5 button to update the Expression Web HTML 5 schemas. Click the X in the upper right corner of the dialog box to close it.
4. Restart Expression Web 4.
5. Change your editor options by choosing Tools > Page Editor Options. On the Authoring tab, set both the Document Type Declaration option and Secondary Schema options to HTML5.

If you set your Doctype and Secondary Schema options to HTML5 in the Page Editor Options, then whenever you create a new web page in Expression Web, the new page contains the HTML5 doctype:

<!DOCTYPE html>

If you don’t change the default doctype to HTML5 in the Page Editor Options, you can still create a new HTML5 page by hand in the Code view of a page or open existing HTML5 documents and edit them in Expression Web 4.

Either way, when you edit an HTML5 document in code view, Expression Web 4 now provides IntelliSense for HTML 5 elements, attributes and their values.

The Expression Web team is very excited about the the new generation of great web applications built on HTML 5 and is happy to support you with this free add-in for HTML5!

Known Issues

• If you uninstall this add-In from Expression Web, files are left behind and will cause subsequent installations of the Add-In to break. The work-around is simple: Delete any HTML5Schema folders in your %APPDATA%\Microsoft\Expression\Web 4\Addins directory. Then re-install the Add-In.
• The current SVG schema is provided by the add-in, however, SVG markup is incorrectly flagged as invalid by Expression Web 4. The work-around is to use an online code validator, such as provided by the W3C. 
• Expression Web 4 sometimes flags closing HTML 5 tags as mismatched tags even though the markup is valid. The work-around is to use an online code validator, such as provided by the W3C.
• Enabling or disabling HTML 5 with the Add-in requires Expression Web to be run with administrative privileges. 

Install the Custom Toolbars add-in for Expression Web 4

1. If Expression Web 4 is open, quit the application.
2. Download the Custom Toolbars add-in from the Expression Gallery at https://gallery.expression.microsoft.com/en-us/CustomToolbars.
3. Double-click the CustomToolbars.msi file, and follow the onscreen instructions to install the add-in.
   
   
4. Start Expression Web 4.
5. The Favorites toolbar, labeled Customize Toolbars, appears below any open toolbars at the top of Expression Web 4. Select View > Toolbars > Favorites to close this toolbar. This “Favorites” toolbar that appears is known to be buggy if you try to customize it so we recommend closing it and creating a new custom toolbar from scratch, as demonstrated in the following steps.
   
     

Create a custom toolbar

1. In Expression Web 4, on the Tools menu, click Customize Toolbars.
   
    
2. Click New, enter a name for your custom toolbar, and click OK.
   
   
3. In the Customize dialog box, in the column on the left, select the items you want to add to your toolbar, and click Add. To change the order of items in your toolbar, in the column on the right, select an item you want to move, and then click the up or down arrows. When you are done editing your toolbar, click OK.
   
   

Your custom toolbar now appears below other toolbars open in Expression Web 4, with all of your favorite buttons at the ready! To show or hide your toolbar, select the toolbar’s name from the View > Toolbars menu.

Expression Web team

Internet Explorer 9 Beta	Safari 5 for Mac

If you’ve already signed up for the online service you will receive notification of these new browsers the next time you launch SuperPreview.  You can then choose them from the browser selection screen and begin previewing your sites with the new browsers.

If you haven’t signed up yet, you can do it right inside SuperPreview.  Just click the Sign up button on the toolbar.

Access to the SuperPreview online service Beta is available to users who’ve purchased or upgraded to Expression Web 4.  If you still haven’t upgraded from Expression Web 3, version 4 is a free upgrade with many improvements.

Alex Moskwa
Program Manager
Expression SuperPreview Team

What does the SEO Checker do?

The SEO Checker analyzes static page structure and content, compares each page against 50 different rules to ensure the page is search engine-friendly, and produces a detailed report of problems and solutions.  To come up with the 50 SEO rules, the Expression Web team researched the current best practices in SEO which generally emphasize authoring well-formed markup and providing relevant content.  The SEO Checker’s rules provide guidance in these categories:

• Content is not where search engines expect to find it
  • e.g., the page is missing the <title> tag, or has an empty <h1> tag
• Content or markup follows patterns that may be associated with deceptive practices
  • e.g., the content of the keywords meta tag is very long or contains duplicate keywords
• Content or markup interferes with the ability of search engines to analyze a page
  • e.g., the page is not well-formed and may be parsed incorrectly
• Content or markup reduces the appeal of a page in search-engine results
  • e.g., <title> is too long, or meta description is missing
• Content causes search engines to consider two or more pages to be relevant to the same search term
  • e.g., inconsistent use of trailing slash (“/”) when linking to pages
• Content or markup blocks search engines from analyzing your site
  • e.g., hyperlink contains too many query string parameters

What does the SEO Checker NOT do?

The SEO Checker provides guidance to help you improve your site’s markup and content, but that guidance alone is not sufficient in building a fully optimized site.  In addition to making changes to your pages based on the errors and warnings reported by the SEO Checker, there are many other tasks to consider, including:

• Assessing your site’s ranking for targeted keywords (check your page rank in multiple search engines)
• Providing compelling, original content in your site
• Building links to your pages (from external sites and within a site)
• Canonicalizing URLs (such as making sure search engines treat <yoursite>.com the same as www.<yoursite>.com)
• Using descriptive filenames for your images

These tasks and more are covered on the Bing Webmaster Center blog in their five-part series on improving page rank.  There are many specific recommendations in these posts, so take a look:

• Is your site ranking rank? Do a site review – Part 1 (SEM 101)
• Is your site ranking rank? Do a site review – Part 2 (SEM 101)
• Is your site ranking rank? Do a site review – Part 3 (SEM 101)
• Is your site ranking rank? Do a site review – Part 4 (SEM 101)
• Is your site ranking rank? Do a site review – Part 5 (SEM 101)

If you’d like to drill deeper into understanding external link building and just how important it is for search ranking, see Link building for smart webmasters (from the Bing Webmaster blog) and Quality links to your site (from the Google Webmaster blog).

You should also ensure that all of the content you want searched on your site is reachable via internal hyperlinks, or by creating a sitemap.  You can use the Unlinked Files report in the Expression Web Site View to find pages that are not internally reachable.  Otherwise, for Sitemap best-practices, see “Reveal the heart of your site with a Sitemap” in Part 5 of the Bing SEO blog posts.

Be aware that the SEO Checker was built for analyzing static HTML content.  If the majority of your site’s pages are dynamically created by ASP.NET or PHP, you’ll see more meaningful SEO analysis results by using the free IIS Search Engine Optimization Toolkit.  Although the IIS Toolkit is not integrated with an editing tool, you can use Expression Web to easily find and fix any SEO issues that are reported by the tool.

Example: SEO for a mobile app site

I recently wrote a mobile phone application, and then considered how I wanted people to discover the app.  Some people will find the app on the phone’s app store, but the app store is not indexed by the big search engines.  Publishing a corresponding web site for my app adds the possibility that someone will discover the app via a web search.  In creating this very simple brochure site, I used the Expression Web 4 Compatibility Checker and SEO Checker to ensure the site is as search-engine friendly as possible.  I’ll walk through how I used each checker, and how I fixed the issues the SEO Checker found.

First, I reviewed and fixed code errors and markup compatibility issues on the site.  You might wonder why, since we’re talking about SEO.  This Bing Webmaster Center blog post explains:

Is your HTML source code valid? Just because it displays more or less correctly, are you sure it's solid? (Some browsers are much more tolerant of HTML coding errors than others are, so you may not actually see the problems. However, search bots are typically not as forgiving as those tolerant browsers, which is why this issue is important.) Errors in your page source code can have a detrimental effect on your page rank if the search engine doesn't understand and thus can't effectively crawl your code. For example, if you didn't properly format the <head> tag code […], all of the work you put into enhancing its content for keyword usage could be for naught.

Additionally, fixing code and compatibility issues first helps ensure that the SEO Checker will find all of the issues it can in your site.

The status bar at the bottom of Expression Web 4 displays the HTML Incompatibility icon (on the left in the following screenshot), Code Error icon, and doctype of the current page.  The HTML Incompatibility icon lets you know if your page has markup that isn’t compatible with the page’s doctype (HTML5 in this case).

You can click Go To Error to jump to the first compatibility error on the page, or Run Compatibility Checker… to get a site-wide report of compatibility issues.  See our previous blog post Improve Your Site’s Search Ranking for more info on running the Compatibility Checker.

Running the SEO Checker

Now it’s time to tune my website for searchability.  I selected SEO Reports... from the Tools menu to display the SEO Checker:

The Learn more about SEO link takes you to Expression Web’s built-in Help documentation on SEO and the SEO reporting feature.  Be sure to take a look at this Help, as it has a wealth of information on SEO best practices and a detailed explanation of all the SEO rules that are used by Expression Web 4 to analyze your site.

After clicking Check, the Search Engine Optimization report showed these results for my site:

By default, the SEO report is sorted by page and line number, showing you issues encountered starting at the top of each page.  Each reported issue shows a problem summary, a link to a Help topic on the reported problem, the page name and line number, and the issue’s importance (Error or Warning).  While you should strive to fix both Warnings and Errors to maximize your SEO results, you’ll reap the most benefit from fixing issues marked as Errors.  For my site, I’ll show you how I fixed all of the SEO issues, including Warnings.

Fixing searchability issues

Warning: No keywords are defined for the page

My site’s first searchability issue is the warning “No keywords are defined for the page.”  If you haven’t worked with HTML keywords before, this statement may be a bit cryptic.  Fortunately, you can hover your mouse pointer over an issue in the Search Engine Optimization panel to see more detailed information, like so:

You can also double-click on an issue to go directly to the line of code that contains the problem in your page.  In this case, double-clicking causes the code editor to highlight the <html> tag on line 2 of index.html.  The <html> tag itself is fine, but it’s highlighted because the checker did not find any keywords within the document.  So, how do we fix this issue?  If the guidance in the tooltip was sufficient for you, you could add the missing meta tag and keywords directly in the code editor.  But let’s say you wanted to learn more about this topic, in which case you could click on the WEB1034 hyperlink in the Search Engine Optimization panel’s Help Topic column.  Each SEO rule’s Help topic contains a detailed explanation of the issue, as well as example HTML for fixing the issue.  Here’s the Help topic’s example HTML for fixing the missing keyword issue:

The following is an example of a correctly formatted <title> tag, with <meta name="description"> and <meta name="keywords"> tags in the <head> tag section.

<head>
    <title>Contact Proseware, Inc.</title>
    <meta name="description" content="Contact information for Proseware, Inc., including addresses, phone numbers, and email"/>
    <meta name="keywords" content="Proseware,Proseware applications,Proseware utilities,Proseware tools,Proseware server tools"/>
</head>

Now that we understand the keyword issue and how to fix it, we could either simply type in a new <meta name=”keywords” content=”...”> statement in the code editor, or edit the keywords in the Page Properties dialog, which presents commonly used page meta content for editing.  To open the dialog, select Properties... from the File menu:

From here, I simply typed a comma-separated list of keywords in the dialog, and Expression Web updated the HTML accordingly.

Warning: The title and description for the page are the same

The Page Properties dialog is a convenient way to also fix the third searchability issue listed in the result pane: “The title and description for the page are the same.”  The page description is generally shown below the page title in search results, and is an opportunity for you to summarize the page’s contents to entice people to visit your page.  Without a page description, it’s up to the search engine to choose what text to show.  Perhaps the worst thing you can do here is what I’ve shown above, where the title and description are the same.  This gives the person searching absolutely no additional information about your page, and is a lost opportunity to direct search traffic to your site.  Take a moment to fill this out and write a meaningful description.

There are two related SEO Checker rules: WEB1052 (“The <title> tag contents are not unique within the site”) and WEB1028 (“The <meta name=”description”> tag contents are not unique within the site”).  These rules remind you to keep these tags unique across all pages on your site.  Pages with duplicate page titles in your site compete with each other for search engine keyword relevance, reducing each page’s search ranking as a result.  Unique descriptions ensure that users see meaningful descriptions for each page, and can more easily identify the content they want.

Error: The <noscript> tag is missing

As part of marketing this mobile app, I created a Twitter account to keep people up-to-date with the latest changes to the app, and for users to give feedback.  Twitter provides canned widgets you can embed in your web pages to show the latest posts from your Twitter feed.  The beginning of the widget looks something like this:

These widgets rely on Javascript, but search engines (and some users’ browsers) will not run this Javascript.  In these cases, where the script is intended to generate user-visible content, you can provide a <noscript> block with alternate text to show the user or provide additional information for the search engine.  For this case, I added this just below the second <script> block:

<noscript>Read the latest tweets: <a href=”https://twitter.com/mapminders”>@mapminders</a></noscript>

Don’t bother providing a <noscript> block if you’re simply using <script> for analytics tracking, though.

Warning: The <meta name=”robots”> tag contains illegal values

The robots meta tag instructs the search engine if and how it should index your page content.  The rule’s help topic lists all of the recognized directives, and what each one means: nofollow, follow, noindex, index, noodp, noydir, noarchive, cache, nocache. Think carefully before using a directive like nofollow (which stops the crawler from following any of your page links) or noindex (which prevents the current page from being indexed).

For our mobile app website, I had copy/pasted a robots meta tag with an invalid directive:

<meta name="robots" content="all, index, follow">

Fixing this issue is as simple as removing the invalid “all” directive from the content attribute.

Error: The <img> or <area> tag does not have an ‘alt’ attribute with text

This is an oft-cited HTML recommendation – you should always provide alt text for your images, not just for accessibility, but also for search engine relevance.  The logo image in my header and the screenshots from my app were all missing alt text, so it was easy to add this in and fix the issues.

And here’s a tip for optimizing your images for SEO which the SEO Checker won’t tell you about: you may improve your image search relevance by using hyphen-separated names for your images, such as “location-detail-screenshot.png”, in addition to having meaningful alt text.  We considered adding this as a rule in Web 4, but found it very tricky to correctly automate this check in all of the languages we support in Expression Web.

For more information, see the Bing Webmaster Center blog post Images and Flash and Script, Oh My! (SEM 101) for the SEO best practices when using images in your site.

Error: The <a> tag text is too general to provide search benefit

And now we’ve come to the final SEO issue in our example.  These lines were flagged for having content that is too general:

<li><a href="#">Home</a></li>
<li><a href="[app store link]">Download</a></li>
<li><a href="#contact">Contact us</a></li>

I wasn’t sure how to resolve this, so I clicked on the WEB1058 help topic link and read the following:

The <a> tag appears to contain generic text, such as "link" or "click here." If a hyperlink points to content that is relevant to the site, the search ranking of the site may be reduced unless the anchor text accurately describes the target of the hyperlink.

Search engines use the contents of <a> tags to provide details about the page to which the <a> tag links.

For a decent-sized site, it’s worth improving the search relevance of internally linked pages, so we could spend some time rethinking link names to make them more contextually descriptive.  For example, we could replace “Download” with “Download the MapMinders app”, and replace “Contact us” with “Email the MapMinders developer”.  But, for such a small site, this may be of little search value and ends up making the link text more visually cluttered.  For your own sites, you may need to make this trade-off, as well.

And with that, I’ve fixed all of the searchability issues identified by the SEO Checker!

Beyond the SEO Checker: measuring SEO improvements

Now that you’ve optimized your website for search using the SEO Checker and published your changes, what next?  Well, your goal was to have a higher search engine page rank for certain keywords, and to drive more traffic to your site as a result of higher page rank, right?  If so, you need to measure your keyword ranking, site traffic, and so on over time.  There are many SEO analytics tools available for this purpose, each with their pros and cons.  (See “Baseline your site’s current performance” in this Bing Webmaster Center blog post for a comprehensive list of metrics to pay attention to.)  Two free tools to consider are Bing Webmaster Tools and Google Webmaster Tools.  After some initial configuration, they will report data on the number of indexed pages, your top pages, keyword relevancy, and clicks from search results to your site.  These tools are fairly lightweight, so depending on the size of your site and what data you want to track, you may very well find that you need more fine-grained search tracking software.

Regardless of the analytics tools you choose, just remember that SEO is an iterative process.  You’re unlikely to see improvements overnight, but rather over weeks and months.  During that time, check your SEO analytics reports, keep improving your site content, and periodically re-run the SEO Checker to make sure you’re not missing an SEO opportunity.

Eric Wright, Principal SDE
Microsoft Expression Web

https://gallery.expression.microsoft.com/en-us/GreenBusiness

The core layout of every page in the site is based on a 960 grid which provides a flexible structure I can use to quickly develop most any layout.

I’ve developed the Green Business pages so you can easily remove elements from a page (images, text, etc.) and swap in your own content without breaking the page’s underlying layout. For example, in the following screenshots, I deleted all the filler text and content from the page. As you can see the structure of the page is still left intact, giving you the freedom to swap in and out whatever content you want.

On the other hand, if you want to use the existing photographs provided in the site template, you are free to use and publish them.

The Green Business site includes a master.dwt (Dynamic Web Template) file which you can use to make new pages that have the same look and feel as the rest of the website, and to make changes to the header and footer of all pages that use the DWT. (If you are new to working with DWT files, read this tutorial: https://expression.microsoft.com/en-us/dd939172.aspx. If you’d rather not use DWTs, choose Format > Dynamic Web Template > Detach from Dynamic Web Template while a page is open or selected in the file list.)

The site template also includes e-mail spam bot protection code for your e-mail address, and, naturally, standards compliant XHTML mark-up and CSS2.1.

The Green Business template is packaged for Expression Web 4 and includes simple and easy to follow instructions in a file named ReadMe. It also provides information on how to install the template on Windows XP, Vista and Windows 7.

I hope you enjoy this template! Let us know if you have any questions or comments.

Jimmy Lee, front-end web developer
Microsoft Expression Web

 For quick access the Special Characters tab lists only the most commonly-used characters, such as the copyright symbol, em dash, en dash, registered and trademark symbols:

Unlike earlier versions of the Symbol dialog box, the Symbol dialog box in Expression Web 4 inserts only the entity name for the character you select and adds nothing else; the Symbol dialog does not add paragraph or span tags, and does not apply a font and style to the character you insert. Consider that reason #11 to get your (potentially free) copy of Expression Web 4 today!