Real World Branding with SharePoint Server 2007 Publishing Sites (Part 1 of 2)

Article
10/16/2013

Summary: Learn the essential concepts needed to create an engaging user interface design in Microsoft Office SharePoint Server 2007 publishing sites. This article is part 1 of 2. (21 printed pages)

Andrew Connell, Critical Path Training, LLC

Randy Drisgill, SharePoint911

July 2009

Applies to: Microsoft Office SharePoint Server 2007, Microsoft Office SharePoint Designer 2007

Contents

Introduction to Creating a Brand in SharePoint Server
Gathering the Design Requirements
Planning for SharePoint Branding
Additional Resources

Read part 2:Real-World Branding with SharePoint Server 2007 Publishing Sites (Part 2 of 2)

Download the code sample that accompanies this article:MSDN Sample - Real World SharePoint Branding

Introduction to Creating a Brand in SharePoint Server

Microsoft Office SharePoint Server 2007 publishing sites make use of the Office SharePoint Server Publishing Features to provide capabilities for creating engaging Web content management (WCM) sites. Frequently used as Internet-facing Web sites, these sites require the use of custom-designed user interfaces to establish an online corporate identity. This process, whether it is used on a traditional HTML page or in Office SharePoint Server, is known as Web site branding. Publishing sites make use of master pages, page layouts, Web Parts, and CSS to enable designers and developers to create branded Web sites that can rival the designs of many popular Web sites today. This article focuses on the mechanics of properly planning and creating a design for an external, Internet Web site by using a publishing site. The article uses as a specific example a fictitious travel company, Adventure Works Travel, which needs to create a heavily branded SharePoint site. Figure 1 shows this publishing site.

Figure 1. Branded Adventure Works Travel publishing site

Branded Adventure Works Travel publishing site

Gathering the Design Requirements

When you want to create a great design for a SharePoint site, it is often a good idea to invest a significant amount of time up front to ensure everything is planned as you need. By properly understanding what the business objectives are before starting to code master pages and page layouts, you can avoid difficult and time-consuming revisions to your design.

This process begins by performing a formal requirements-gathering session. Whether the site you are designing is for 10 users or 100,000 users, you must meet certain requirements before the project is considered a success. The level of detail to which this requirements gathering session should go or "dive" can be tempered by the assumed complexity of the site. Large sites (either large in number of pages or large in number of users) can require more time for gathering requirements than a simple small site. Requirements gathering should always involve key business, marketing, and IT stakeholders to ensure that their ideas are considered and to ensure complete approval on the project. Often this process can be difficult for a branding project. Sometimes it is delegated to the marketing department, or even outsourced to external consultants. Although involving key stakeholders is important, consider that when more people are involved in the decision-making process, both the time needed for gathering requirements and the overall complexity of the project can quickly increase. For this reason, you should carefully determine which members of the team will have relevant input to the requirements-gathering process.

The following sections discuss some of the more important concepts that you should understand before starting any SharePoint branding project.

SharePoint Server Publishing Sites vs. Windows SharePoint Services 3.0 Sites

One of the first decisions to make is whether this Web site will be based on Windows SharePoint Services 3.0 or whether it will be a SharePoint Server Web site with the Publishing Features enabled. Although publishing sites are built on top of Windows SharePoint Services 3.0, there are many advantages for building engaging Internet-facing Web sites with SharePoint Server. The following list contains some of the benefits to creating a brand with publishing sites versus Windows SharePoint Services 3.0 sites:

Publishing sites enable content authors to create Web pages with a more robust rich-text editing experience.
Master pages that are targeted for publishing sites can take advantage of specific code assemblies that use Publishing Features.
Navigation can be more easily controlled from the Web user interface and more options are available to the designer.
Publishing sites enable you to change out a master page by using the Web user interface.
Publishing sites enable developers and designers to create page templates by using page layouts.
Master pages in publishing sites can take advantage of the $SPUrl token to target HTML assets via URLs that are relative to either the site collection root ($SPUrl:~sitecollection/) or site root ($SPUrl:~site/).
Publishing sites provide specific storage mechanisms for design assets that are not automatically available to Windows SharePoint Services 3.0 sites.

Note

For the purposes of this article, a publishing site refers to a SharePoint Server 2007 Web application with a site collection in the top-level folder (root) that has the Publishing Features enabled. For simplicity, the built-in (out-of-the-box) Publishing templates, Collaboration Portal, and Publishing Portal have the Publishing Features already enabled. In this article, The Adventure Works Travel example uses the Publishing Portal template.

For more information about setting up Web applications and site collections, see Prescriptive Guidance for SharePoint Server 2007 Web Content Management Sites.

Targeted Browsers and Platforms

Another major decision you must make early in your planning is what browsers and operating system platforms to target in the design. Although every design should strive to be as close to perfect as possible in every browser and on every operating system, it is often impossible or impractical to even test this capability to any measure of success. Typically, you should pick certain browsers and operating systems to specifically test and code against in your branding effort. A good way to choose a level of browser and operating system to support is to consult industry Web sites that study and provide Web traffic analysis. Net Applications Market Share lists the top 10 Web browsers by total market share, as shown in Table 1.

Browser Version	Total Market Share
Internet Explorer 7.0	44.51%
Firefox 3.0	20.25%
Internet Explorer 6.0	17.52%
Safari 3.2	4.29%
Internet Explorer 8.0	3.99%
Safari 3.1	1.90%
Firefox 2.0	1.80%
Chrome 1.0	1.32%
Safari 4.0	0.80%
Netscape 6.0	0.75%

Microsoft designates browsers by the level of SharePoint support. Level 1 browsers support all levels of SharePoint functionality, while Level 2 browsers support only limited reading and writing SharePoint functions. For more information, see Plan Browser Support (Office SharePoint Server) on Microsoft TechNet.

For the Adventure Works Travel example, the decision is made to focus on an end-user browsing experience that is as close to pixel perfect as possible in Internet Explorer 7, Internet Explorer 8, and Firefox 3, while also ensuring several other modern browsers (including Chrome and Safari) have a similar user interface experience, within reasonable-effort limits.

Targeted Screen Size

Another area that is often hotly debated is what screen size to target for a new design. Monitors used to support only a very small subset of resolutions, such as 640 x 480. As monitor prices have descreased, it is not uncommon to see Web site visitors browsing in 1920 x 1200 and higher resolutions. Most Web designers consider 1024 x 768 to be the most common screen resolution, followed closely by 1280 x 800. When creating a design to display in a SharePoint site, you must balance the desire to display much information at one time with a typical user's screen resolution. The available space for displaying content becomes even smaller when you consider that browser toolbars and scroll bars also take up a percentage of the screen area.

For the Adventure Works Travel example, the target minimum screen resolution is decided to be 1024 x 768. The design also needs to allow for some padding to accommodate scroll bars. Because of this, the design should be no wider than 960 pixels.

Defining the Audience and Success Criteria

Before you can consider a branding initiative successful, it is a good idea to define some of the more subjective goals for the design. What type of users will use the site? What is the typical user of the site trying to do? How will a user want to navigate the site? Does the user want to do business with a company that has a more traditional image or one that is more cutting edge? Unlike software development, the design process is subjective for every different business situation. Business stakeholders often dispute these decisions until they can determine a general brand identity. Because these ideas can be difficult to gauge, it is also a good idea to identify what the success criteria will be for a new brand. Success criteria could be as simple as attracting more visitors or as complex as calculating an increase in sales across major demographics. The more quantifiable and measurable the success criteria are, the easier it is to determine the success of the branding effort.

In the Adventure Works Travel example, the design should cater to a younger user-base that is looking for an edgy look and feel. These users will be comfortable navigating the site by using top navigation and left navigation, and by using Microsoft Live Search (which is now Bing by Microsoft). The users' primary reason for visiting the Web site is to learn about adventure destinations and to book vacations. The general brand is that of a travel company that caters to an audience that seeks a more "adventurous" vacation than an average hotel on the beach.

Planning for SharePoint Branding

The process of actually coding branding in a SharePoint site involves several complex steps, such as creating master pages, page layouts, and CSS. This complexity often necessitates an initial planning phase to ensure that you avoid time-consuming rewrites. The planning process for building a SharePoint brand can also include several steps, such as creating black-and-white wireframes, full-color Web site design comps, and even functioning HTML and CSS versions of key pages. The following sections discuss these activities as they relate to creating a branded SharePoint user interface.

Creating Simple Wireframes

A wireframe is typically a black-and-white block diagram that visually describes the overall structure of a Web site, including the layout, navigation, functionality, and, in some cases, even the content. Because of the subjective nature of Web design (or even design in general), it is good to discuss these topics in wireframe form rather than get mired in colors and photo preferences. When completed correctly, wireframes can provide a guide for developers and designers for the functionality and layout to apply in later stages of the branding process.

Wireframes can be created by using many different methods, from simple pen and paper to dedicated software tools such as Microsoft Office Visio 2007 or Adobe Illustrator CS4. Dedicated software tools can be very helpful in creating wireframes because they can use prebuilt stencils that relate to specific functions of software such as SharePoint Server. When creating SharePoint wireframes, a simple search, such as the following, can return many hits for freely available Visio templates and stencils:

https://www.bing.com/search?q=sharepoint+visio+stencil

When creating wireframes, carefully decide what SharePoint functionality the brand will support. Not everything that SharePoint Server shows by default is appropriate for every Internet-facing Web site. Figure 2 shows a built-in SharePoint user interface with each of the major areas of functionality labeled, from A through O. Table 2 describes these major areas.

Figure 2. Major functional areas of a SharePoint interface

Major functional areas of a SharePoint interface

Table 2. Major functional areas of a SharePoint interface

Label	Functionality
A	Global navigation A link to the home of the site collection.
B	Title area image Typically shows the icon for the current site but can also show a user-defined logo.
C	Site title Text that tells the user the title of the current site.
D	Global navigation Also known as the top link bar, this is the main means of site navigation.
E	Welcome menu Places a welcome message and is important for enabling users to log off.
F	My Site A link to the My Site functionality that enables end users to have personalized portals with their favorite content. My Site is typically appropriate only on intranet sites.
G	My Links Similar to My Site, enables end users to collect links that are important to them. My Links is typically appropriate only on intranet sites.
H	Help icon An icon that links to generic SharePoint help. Usually not appropriate on an Internet-facing site.
I	Search area In publishing sites, you can use a couple types of search boxes; they can include the search scopes and the advanced search link.
J	Site Actions menu Used by all administrators and content authors. It is the main menu for interacting with a SharePoint site.
K	Left navigation Also known as Current Navigation or Quick Launch. Usually used for secondary navigation.
L	Tree View navigation Provides a Windows Explorer–style representation of the site. Because of its appearance, the Tree View is often better suited for intranet sites.
M	Recycle Bin A link to the Recycle Bin for the site. A collection of items that were deleted from the site. Usually not appropriate on an Internet facing site.
N	Page breadcrumbs A breadcrumb showing the optimal path to the current page.
O	Main content area The PlaceHolderMain content placeholder. Required for the actual content of the page.

When creating wireframes for a SharePoint site, you must consider several types of pages that could be supported by SharePoint Server. Examples of the various types of pages that can exist in SharePoint Server include a home page, landing pages, search results pages, and articles.

Figure 3 shows the Visio 2007 wireframe for the Adventure Works Travel Web site.

Figure 3. Visio 2007 wireframe for an Adventure Works Travel page

Visio 2007 wireframe for page

From this wireframe page, you can see that the Adventure Works Travel site will support some but not all SharePoint functionality. For example, in this example, search will use Microsoft Live Search instead of the built-in SharePoint searching mechanism. By making these decisions at the wireframe stage, developers do not have to build unnecessary functionality.

Creating Realistic Design Comps

Creating wireframes can help with the planning of a new SharePoint site, however, for any serious branding effort you should create a true design comp or prototype before any coding begins. Unlike wireframes, most Web design comps are intended to mimic the branding (look and feel) of an actual Web site as closely as possible without actually creating any code. Comps include realistic static versions of photos, logos, colors, fonts, form elements, and anything else that might appear on the page. For a SharePoint site, this means emulating many of the functional areas of the SharePoint user interface.

Although you could create design comps with any graphics program (or even with pencil and paper), applications such as Adobe Photoshop or Microsoft Expression Design can help to make the task easier.

Note

For example purposes, this article frequently references features of Adobe Photoshop. However, similar features may be available in other design applications.

Following are some of the capabilities of a graphics program, such as Adobe Photoshop described here, that you can use to create an easy to maintain and reusable design comp for SharePoint sites:

Layers and Layer Groups Can be used to separate design elements into specific units. Instead of creating design elements in a "flat" file, layers act as if each new layer is actually on top of the previous layer. Designers can hide and show, manipulate, move, and even apply effects such as drop shadows and borders to individual layers without affecting the other design elements. When using a tool such as Photoshop to create a design comp, it is a good idea to make new layers for every element in the design. Figure 4 shows the Layers panel in Photoshop.

Figure 4. Layers panel in Photoshop
Editable Text Can be created by using a wide variety of fonts, sizes, and styles. Without this feature, text that is created in basic design programs is static and must be erased before each change. In a modern design tool, text can be resized, made bold, given color, have its font changed and much more without erasing the previous state. Figure 5 shows text being edited in Photoshop.

Figure 5. Editable text in Photoshop
Web-Safe Images Images can be saved easily into various Web-safe file formats, such as JPG, GIF, and PNG. Many design programs assist with the creation of these assets in a small Web-friendly file size without compromising their quality. In Photoshop, you can save graphics for the Web by using the Save for Web & Devices menu (see Figure 6). An example of using the Save for Web & Devices menu can be seen later in this article.

Figure 6. Save for Web & Devices menu

Keeping a Design Comp Realistic

When creating design comps in a tool such as Photoshop, it is tempting to use its power to create designs that are very polished. However, be careful not to create a design that is so polished that it looks better than a browser can actually render for a SharePoint page. One such limitation concerns text. In Photoshop, each piece of text can use different antialiasing techniques (antialiasing is a mechanism that reduces distortion of images at lower resolutions). Specifically, small text looks much smoother in Photoshop than browsers can replicate. To keep expectations manageable, it is a good idea to switch small text to use no antialiasing. In Photoshop, you can do this in the Character window, under Anti-Aliasing. Figure 7 shows the Character window with the Anti-Aliasing menu selected.

Figure 7. Character window in Photoshop

Character window in Photoshop

In addition to the text antialiasing, when creating design comps for SharePoint sites, consider the actual SharePoint functionality itself. To accurately replicate SharePoint functionality in a design comp, you can take screenshots of each of the pieces of SharePoint functionality and paste them into the design.

Be careful to ensure that the limits of the SharePoint application are not stretched by the implications of the design comp. For example, navigation tabs should have consistent color for each item at the top level because the built-in SharePoint menus cannot have individual styles applied to each item.

As the Adventure Works Travel design comp is created, you would finalize various colors and styles. Stock photos need to be acquired, fonts need to be selected, and logos need to be created. Each element is created in its own layer and effects such as gradients and borders are created as layer effects so that future changes are easier to make. You would take screen captures of SharePoint elements such as the Site Actions menu and the Welcome menu, paste these into Photoshop, and arrange them in an appealing way. Figure 8 shows the final design comp in Photoshop.

Figure 8. Design comp in Photoshop

Design comp in Photoshop

As you create the design, you can decide how to replicate the various concepts in SharePoint Server. Figure 9 shows the same design comp with labels applied to highlight each functional area; the function areas are described in Table 3.

Figure 9. SharePoint functional areas in the design comp

SharePoint functional areas in the design comp

Table 3. Major functional areas of the design comp

Label	Functionality
A	Site Actions
B	Welcome menu
C	Microsoft Live Search (instead of SharePoint search, as decided earlier)
D	Link back to the home page
E	Global navigation
F	Left navigation
G	Web Part
H	Page breadcrumbs
I	Page title
J	Rich-text field control
K	Web Part

Converting a Design Comp into Working HTML and CSS

The next step in planning for SharePoint branding is to take the design comp and convert it into a functioning HTML page. You could skip this step for simple designs, but for complex designs, this step enables the designer to work inside of a familiar environment. This HTML code can be used later to create the actual master page in a tool such as Microsoft Office SharePoint Designer 2007. By first creating a working HTML version, you can fine-tune the HTML for the master page without being burdened by trying to work around the code that SharePoint Server adds to the display. After this step is done, you should have a functional, complete HTML version of key pages in the site. All CSS for the basic layout are complete and all images are sliced from the design comp and saved to individual files.

For the creation of HTML, there is a wide array of toolsets available to designers. Tools can range from text editors, such as Notepad, in which to simply code the HTML by hand, to a professional Web page development tool such as Adobe Dreamweaver or Microsoft Expression Web. Following are some of the advantages that a professional Web page development application can offer to designers:

Support for HTML and CSS code completion
WYSIWYG (what you see is what you get) design views
Tools that help with the creation of cross-browser Web pages

DOCTYPEs and SharePoint Server

When it comes to creating cross-browser compliant HTML, one key concept to understand is how a DOCTYPE works. A DOCTYPE is a command that instructs a browser or validator to use a specific language to interpret the HTML or XML code that it describes. Although you can create HTML and master pages that do not have a DOCTYPE declared, without one, browsers can render HTML code in unexpected ways. For example, without a valid DOCTYPE declared, Internet Explorer 7 renders an HTML page in Quirks Mode (which is similar to how Internet Explorer 5.5 would render a page).

There are several DOCTYPEs in use today that can cause a browser to render content in a predictable way. Following are the most popular DOCTYPEs:

HTML 4.01 Strict Allows all HTML elements but does not allow deprecated elements such as the <font> tag.
HTML 4.01 Transitional Allows all HTML elements including deprecated elements.
XHTML 1.0 Transitional Similar to HTML 4.01 Transitional, but all tags must be well-formed XML. Deprecated elements are allowed but must also be well-formed XML.

Which DOCTYPE is right for SharePoint Server? There is no straightforward answer to this question. Some built-in master pages have no DOCTYPE applied to them, while others have the HTML 4.01 Transitional DOCTYPE applied. Although either Transitional DOCTYPE could be used with SharePoint Server, Strict DOCTYPEs can be problematic because the browser will ignore any deprecated HTML, and there is a chance that deprecated HTML will be displayed by SharePoint Server. It is important to notice that SharePoint sites will NOT validate through any W3C checker with either DOCTYPE assigned. However, though the pages will not validate, the design experience will be more reliable if a valid DOCTYPE is used. For the examples in this article, the HTML 4.01 Transitional DOCTYPE is used.

To use the HTML 4.01 Transitional DOCTYPE

In Dreamweaver, click File, and then click New.
Select Blank Page, select Page Type: HTML, select Layout <none>, and then click DocType: HTML 4.01 Transitional.

Click Create.

Dreamweaver opens a blank HTML page with the following code.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Untitled Document</title>
</head>
<body>
</body>
</html>

From here you can create the remaining HTML. Be careful to follow the W3C guidelines for creating valid HTML 4.01 Transitional code. For more information about HTML 4.01 and the Transitional DOCTYPE, see the W3C HTML 4.01 Transitional Specification. The remaining topics in this section focus on specific points related to creating HTML for a SharePoint design. For more information about creating HTML code, see the MSDN HTML and DHTML Overviews and Tutorials.

Tables vs. Table-less Design

Another design choice that is often debated is whether an HTML design should use tables for layout or whether the design should use <DIV> tags with CSS. Historically, all HTML layouts were created with tables to enable a rich user interface, but as browsers have evolved so has the support for CSS-based layouts. Because HTML tables were originally intended to display tabular information and not to create layouts, they have begun to fall out of favor with Web designers.

When creating a SharePoint design, consider that the default rendered SharePoint page contains many tables that are used for layout. This is a result of the underlying ASP.NET controls that are used to generate the SharePoint user interface. Despite this, it is a best practice to create HTML designs for SharePoint Server with as few HTML tables as possible. Because of this, the Adventure Works Travel HTML code uses <DIV> tags and CSS for its entire layout.

SharePoint HTML and Internet Explorer 8

With the release of Internet Explorer 8, there are some special things to consider when creating HTML for SharePoint Server. Because Internet Explorer 8 displays Internet-facing Web sites in full "Standards" mode when a DOCTYPE is declared, some of the legacy HTML that is behind the scenes in SharePoint Server can have problems. To correct these, the Internet Explorer 8 team has created the following two meta tags:

<meta http-equiv="X-UA-Compatible" content="IE=7" />

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

The first tag forces a page to render in Internet Explorer 7 mode no matter what, and the second forces a page to render as Internet Explorer 7 would have rendered it historically. The difference is the EmulateIE7 meta tag forces the browser to look for a DOCTYPE before rendering in IE7 mode and if it does not find one, it renders in Quirks Mode. This is the correct behavior for how Internet Explorer 7 used to render pages in SharePoint Server, so the second meta tag should be used whenever possible.

The Adventure Works Travel HTML includes the EmulateIE7 meta tag to ensure that Internet Explorer 8 displays the SharePoint code properly.

For more information about Internet Explorer "Standards Mode", see Introducing IE=EmulateIE7.

Slicing the Design Comp into Web Images

Although creating a design comp is useful for understanding how the Web page should look, you can also use it to create all of the individual images that will be loaded by HTML. In Photoshop, one good way to break up a single large image into individual Web images is to use the Slice tool. Figure 10 shows the Slice tool in the Tools window.

Figure 10. Slice tool in Photoshop

Slice tool in Photoshop

Following is a general procedure for using the Slice tool to create Web images from a design comp.

To create Web images from a design comp by using the Slice tool

In the Tools window, select the Slice tool.
Create rectangular selections around all of the areas that must be made into Web images. Be sure to hide any Layers that you do not want in the final images (such as mocked-up text that SharePoint will create). Figure 11 shows the slices in Photoshop.

Figure 11. Slices in Photoshop
Click File, and then click Save for Web & Devices.
With the Slice Select Tool selected, click each slice and select an appropriate Web image format from the Optimized File Format drop-down list. Typically JPGs should be used for photos with many colors, and GIFs should be used for artwork and text or images that require transparent backgrounds. PNGs offer a lot of flexibility, but support for them is limited in older browsers. For slices that you do not want to turn into images, double-click the slice, and then select Slice Type: No Image. Figure 12 shows the Save for Web & Devices window and the Slice Select Tool.

Figure 12. Save for Web & Devices menu and the Slice Select Tool
Click the Save button. Ensure Save as Type is set to Images Only and Slices is set to All Slices.
Click Save.

This creates a folder and saves each of the slices as individual images in the folder.

Creating the Adventure Works Travel HTML

Now that you have created all of the individual Web images, the next step is to code the HTML and CSS for Adventure Works Travel. As described earlier, Dreamweaver was used to create an HTML 4.01 Transitional HTML file. Then, the rest of the HTML was created, resulting in the HTML code that you can find in the associated files available for download with this article (MSDN Sample - Real World SharePoint Branding).

Notice that this HTML uses no tables for layout and instead makes frequent use of <DIV> tags for segmenting the logical areas of the page. Also notice that this HTML was checked by using the W3C Markup Validation Service and is HTML 4.01 Transitional compliant. For the most part, this HTML is straightforward, with the possible exception of the ECMAScript (JavaScript) code at the top.

<script type="text/javascript">
function doSearch() {
top.location.href = 'http://search.live.com/results.aspx?q=' + 
document.getElementById('livesearch').value + '+site%3A' +  
'microsoft.com';
}
</script>

This code takes whatever text is entered into the "livesearch" Input box, sends it to Live Search, and displays the results in a new browser window when the search button is clicked.

Creating the Adventure Works Travel CSS

Because CSS will be used for all layout design, the HTML code alone will not create an attractive Web page. The CSS created to style all of the colors, fonts, images, and positions for the elements in the HTML can be found in the associated files available for download with this article (MSDN Sample - Real World SharePoint Branding).

This CSS was linked from the Adventure Works Travel HTML file via the following code in the <head> section.

<link rel="stylesheet" href="style.css" type="text/css">

For more information about creating CSS to style an HTML Web page, see MSDN CSS Reference.

Testing in Multiple Browsers

Now that all of the HTML, images, and CSS are created, you can test the Web page to ensure that it looks as similar as possible to the design comp. Figure 13 shows the finished Adventure Works Travel Web page in Internet Explorer.

Figure 13. Completed Adventure Works Travel Web page in Internet Explorer

Completed Adventure Works Travel Web page in IE

Before converting an HTML design into a functional SharePoint site, you should test the design in as many browsers as possible. By installing Mozilla Firefox, Google Chrome, and Apple Safari for Windows, it is possible to test a Web design for many different browsing scenarios. One particularly difficult browser to test is Internet Explorer 6. Because Internet Explorer 6 cannot be installed on the same computer as Internet Explorer 7 or 8, Microsoft is building a product known as Expression Web Super Preview. This free application, which is currently in beta, can display pages side-by-side using both the Internet Explorer 6 rendering engine and either Internet Explorer 7 or 8 (depending on which is installed on the computer). Figure 14 shows the Adventure Works Travel site rendered in both Internet Explorer 6 and Internet Explorer 7 in Super Preview.

Figure 14. Adventure Works Travel site in Expression Super Preview

Site in Expression Super Preview

Next steps

This concludes part 1 of this two-part article series.

Next step: Read Real-World Branding with SharePoint Server 2007 Publishing Sites (Part 2 of 2)