Expression Web Designer - Expected Release Update

A recent article about Microsoft's Expression family of products, including Expression Interactive Designer, Expression Graphic Designer, and Expression Web Designer, created some concern about the expected release date of Expression Web Designer. In the article, they reference an announcement by Microsoft that the Expression Suite is going to be pushed back until next summer and likely 2008.

Fortunately, this announcement does not include Expression Web Designer. Our sources at Microsoft reassured us that Expression Web Designer is still scheduled to be released before the end of the year. Microsoft has not set a specific release date for Expression Web Designer (or EWD as we like to call it), but remains confident that the product is still on schedule. From my experience with the products at Mix06 in March, it's apparent that EWD is not strictly tied to Expression Interactive Designer or Expression Graphic Designer, which are more dependent on each other. There are definitely elements that interact between the three products, but EWD can really stand on its own.

Based on this information, PixelMill will continue to move forward with developing and providing education and support information about EWD and continue further development of templates for EWD.

One update we have already made to the site is the addition of product specifications that allow PixelMill Product Developers to mark if a product is compatible with Expression Web Designer. You will start to see products marked as compatible with 'EWD' and/or 'Expression-ready'. These represent that the product has been tested to work with the current beta version of Expression Web Designer. You'll also see that many of these compatible products are also marked as compatible with 'SD 2007' (SharePoint Designer 2007) and/or 'SharePoint Designer-ready,' so these products have also been tested to work in the current beta version of SharePoint Designer 2007.

We hope this clears up any concerns about the expected release date of EWD. We are committed to keeping you informed about future developments with Expression Web Designer and SharePoint Designer 2007. Watch the newsletter and our blog for more.

Keeping XHTML-Validated Templates Validated

The scenario: You purchase a template from PixelMill that is marked as XHTML 1.0 validated. You add your content. You publish your site. You run your template through the W3C validator. You get a big red bar saying that your site isn't valid XHTML. What happened?

Unfortunately, FrontPage 2003 isn't very good at keeping your code XHTML-validated. (Expressing Web Designer and SharePoint Designer 2007, in contrast, are very good at keeping your code XHTML-friendly.) So here are a few common things that you'll need to do in your pages for valid XHTML. (There may be others not listed here - if you have a specific question, post a comment!)

1. First step - right-click in the Code View pane and choose Apply XML Formatting Rules. What this essentially does is to add closing slashes to empty tags -- for example, your <br> tags will be automatically transformed to <br />. This will probably fix 80% of the errors generated by the HTML validator that are along the lines of &qout;end tag for ... omitted, but OMITTAG NO was specified" It will also take any uppercase HTML code and make it lowercase.
2. Now, go through and click on each of your images (that are actually embedded on the page -- you will see the <img ... /> tag in code view). Look at the HTML code. If you see anything that looks like border="0", you will have to delete it. For example -- <img border="0" src="image.gif" alt="My Image Here" /> will need to be changed to <img src="image.gif" alt="My Image Here" />. This should fix all of the "there is no attribute 'border'" errors.
3. Sometimes FrontPage will drop the closing paragraph tag (</p>). If you see errors that say: "end tag for 'p' omitted, but OMITTAG NO was specified," then look at the line and column number of the start tag (the validator conveniently lists it as the next item) to track down the opening of the paragraph. Then, in the HTML code, look for the end of the paragraph and manually type in the closing tag. For example, if you find code that looks like this: <p>This paragraph is causing errors!</div>, you will want to add the closing paragraph tag at the end of the paragraph, which would be before the closing div tag in this example... <p>This paragraph is causing errors!</p></div>.
4. Did you add any FrontPage Link Bars to your template? If you did, they will not validate. You should remove the link bars and put in hard-coded links instead. (You might want to put those links into an Include Page for easier editing later.)
5. Did you add any Flash or Swish movies? If you pasted in the typical HTML code (it's a big block of code, with <object> and <param> tags all over the place), then it won't validate properly. Instead, use a solution like Deconcept.com's SWFObject embed solution. We have a tutorial on PixelMill that takes you through the basic steps of how to use it: http://www.pixelmill.com/support/al0/kb101619.htm .

By following the above steps, you should be able to get most of your site fully validated. There may be some other issues if you have used various scripts or components which will need to be dealt with on a case-by-case issue.

CSS Tableless Templates

Our selection of CSS tableless templates is growing, so I thought that now would be a good time to talk about the difference between tables-based templates and tableless templates.

Tables-based layout describes the use of HTML table tags to create columns and rows for a grid layout that then allows you to have a column layout and more complex interface graphics (like rounded corners or drop shadow info boxes) than you would be able to without a tables-based layout. You can tell if you have a tables-based layout by looking at the HTML code -- if you see a lot of <table>, <tr>, and <td> tags in the code, then you have a tables-based layout. Web developers began using tables to "force" layout because of the limitations in HTML for having cool designs. (HTML is primarily a "markup language," which means that it brings meaning by labeling things as paragraphs, headers, quotes, etc., but within just HTML there is no way to describe how something should then "look.")

With the advent of cascading stylesheets (CSS) a few years ago, however, and with all the major browsers finally implementing CSS, HTML could go back to doing what it was first intended to do -- provide meaning to the content of a site. CSS handles the layout, the colors, the fonts, the interface graphics. So now, we have what we call CSS-based layout, or table-less layout -- layouts that are designed and formatted completely with a stylesheet instead of with tables. CSS-based layouts are more flexible, more powerful -- one could easily make a layout change across your entire site by editing the stylesheet, whereas with a tables-based template one would have to go through each page and edit the code (or copy and paste the content from each page into the new layout). CSS-based templates provide cleaner code without all of the <table> and <tr> and <td> tags, which helps with better search engine ranking and accessibility.

At PixelMill, we are encouraging all of our developers to begin developing more and more CSS-based layouts instead of using tables, although we know it will be a slow transition. One of the biggest factors for developers continuing to use tables-based layouts is, frankly, the terrible CSS rendering that FrontPage 2003 Design View has, especially when it comes to relative font sizes (where the fonts can resize when the user changes the text size in their browser). Customers who are used to using tables-based layouts usually have a bit of a shock when they open their first CSS template, where columns sometimes appear below other columns instead of lining up neatly in a row. It takes a bit of a shift to get used to working to a CSS template, although the benefits (cleaner code, better accessiblity and validation, see above...) far outweigh the initial frustration. (Dreamweaver MX and MX2004 users may experience some frustration as well with shifting content areas, but Dreamweaver 8 is quite solid in its rendering of CSS layouts.)

With the coming release of Expression Web Designer and SharePoint Designer 2007, CSS templates should overtake tables-based templates. EWD and SD2007 were created with powerful CSS layout in mind, and come with many tools to help refine and edit the stylesheet. The templates display perfectly in Design View. Templates made for FrontPage 2002 or 2003 work just fine in EWD and SD2007 so upgrading shouldn't be a concern.

If you are looking for cleaner code, better search engine ranking, accessibility and validation, CSS templates are worth the look.