3 Tips for keeping your ASP.NET Starter Kit site cross-browser and cross-platform compatible

In each version of Visual Studio 2005, including the free Visual Web Developer Express Edition, ASP.NET 2.0 goes a long way to help you author websites that have a broad reach across web browsers and platforms. 

Many web developers exploring Visual Web Developer begin with ASP.NET's free Starter Kits to build their first website.  The Starter Kits, which offer useful templates for creating a site, come out of the box highly cross-browser and cross-platform compatible. 

To see for yourself, take a look at these two sites which I've posted.  These are effectively fresh copies of what you get out of the Personal Web Site Starter Kit and the Club Site Starter Kit.

Personal Web Site Starter Kit Template - Live Site
Club Site Starter Kit Template - Live Site

I spent some time this week testing those sites on Windows XP (Internet Explorer 6, Internet Explorer 7 Beta, Firefox and Opera) and Mac OS X (Firefox, Safari, Opera).  I know that this list of browsers is far from exhaustive, but as you can see, both of these Starter Kit sites display and operate just fine on all of those configurations.

Of course, you don't want your Starter Kit to remain exactly as it came out of the box, and that's where the challenge lies.  With ASP.NET's great power and flexibility comes the potential to cause portability complications. 

Here are three tips from my experience that may help you build a site that is cross-browser and cross-platform compatible.  If broad reach is among your goals, it may help you to know a little bit about what's going on under the hood.

1. Understand the basics of Master Pages and CSS

The Master Page is an ASP.NET 2.0 concept that let you define a look and feel for your whole site.  Visitors to your site never navigate to a Master Page itself.  Instead, they navigate to Content Pages, with the extension .aspx, which are based on your Master page.  For most typical sites, you only need a single Master Page which contains the content that should go on all your pages, such as headers and footers and maybe sidebars.  Content that goes on each individual page should be stored in the .aspx pages themselves. 

If you want to add a new page to your site, in the Website Menu on the Menu bar in Visual Studio, select "Add New Item...", choose "Web Form," and then be sure to tick the box that says "Select Master Page", as in this image:

If you're interested, here is a link to more information about Master Pages.

Master Pages in the Starter Kits are backed by an industry standard called a Cascading Style Sheet, which defines how the elements in your site are laid out.  I would highly recommend that you lay out your site using CSS.  You'll see <div> tags in your ASP.NET code which define the different CSS classes.  For instance, in this snippet the default.aspx page in the Club Site Starter Kit, you'll see a region defined for the right-hand column.  The text "Recent News" is going to be displayed in the h2 (Heading 2) font, and laid out as per the cumulative effect of the "rightblock" class, the "columnright" element, and any other div requests below that in the document hierarchy.

Even if you don't fancy yourself a designer, check out your site's CSS Stylesheet and see what it contains.  Explaining CSS is way beyond the scope of this blog article (I mean, it's Friday and all), but here is a decent introduction to CSS and also a CSS tutorial with quizzes.

Also, usefully, Visual Studio has Autocomplete (and also a dialog-based interface) to help you edit CSS.

Finding the Stylesheet for your Starter Kit:

In the Club Site Starter Kit, the CSS Stylesheet is stored in the root directory in a file called clubsite.css. 

In the Personal Web Site Starter Kit, the CSS Stylesheet is part of an ASP.NET feature called a Theme.  By default, the Kit uses the White theme, and the Stylesheet is found in App_Themes\White\Default.css.  If you want to switch to the Black Theme, change <pages styleSheetTheme="White"/> to <pages styleSheetTheme="Black"/> in the file Web.Config.

To summarize: The most compatible way to lay out your site is using Master Pages which are backed by CSS Stylesheets.  That's the technique used by the Starter Kits.  If you're using the Starter Kits, take a moment to explore the CSS file for your site, modify it if necessary, and steal CSS code... as necessary.  Since I'm not a designer, I always tend to work from existing, free Stylesheets (such as the ones in the Starter Kits) and tweak them from there. 

And when adding features to your pages, use the <div> tags to invoke CSS and lay things out.

2. Keep your pages XHTML-compliant

The arsenal of over 50 Controls that come with ASP.NET are designed to emit valid, industry-standard XHTML code.  But you are perfectly capable of adding code to pages which is not XHTML compliant.  This could significantly reduce cross-browser compatibility.

When you're adding your own code to pages, the development environment produces warnings in real time to let know if you've created code that isn't XHTML-compliant, like this use of "atomicselection", an attribute that only IE6 seems to know about:

Use the squigglies that Visual Studio produces to help you catch and remove XHTML Validation warnings.

By the way: One in-the-box control I've seen people get into trouble with is the asp:Menu control when it's used in dynamic mode.  In that mode, the asp:Menu control produces a pop-up menu when you hover over it.  Because the pop-up menu tends to occlude part of your web page, it's probably not an ideal design for the web in the first place.  And, in that mode, it seems to malfunction on Safari on the Mac.  The Master Page of the Personal Web Site Starter Kit uses an asp:Menu control, and it renders on Safari perfectly.  So don't avoid the Menu control -- just avoid that particular behavior.

3. Test your site cross-browser!

There is no substitute for firing up a few browsers and making sure your site works across all of them!  Differences in the way browsers interpret CSS can cause a perfectly-functioning site to malfunction on a particular configuration.

For instance, the "Links" page on the Personal Web Site starter kit worked perfectly on all my configurations on both platforms -- except for the Internet Explorer 7 beta!  But a minor tweak resolved the issue.  And while Firefox seems draconian about respecting CSS "height" requests, even if that meant occluding text content, Internet Explorer seems to expand a region to fit additional content. 

Hopefully these tips will help those of you working with ASP.NET and Visual Web Developer to give your sites the broadest possible reach!