Skip Navigation LinksHome > SSW Standards > Rules > SSW Rules to Better Websites - Development

There was an error displaying the testimonials. Please report this error to SSW and include the following text:
- A network-related or instance-specific error occurred while establishing a connection to SQL Server. The server was not found or was not accessible. Verify that the instance name is correct and that SQL Server is configured to allow remote connections. (provider: Named Pipes Provider, error: 40 - Could not open a connection to SQL Server)

 

Do you agree with them all? Are we missing some? Email us your tips, thoughts or arguments. Let us know what you think.

Important Indicates important rule

Rules to Better Websites - Development
  1. Is your website designed to improve your Google Ranking? Important
  2. Is your website structured? Important
  3. Do all your employees know the quickest way to fix small web errors? Important
  4. Warning: Do you edit right files? Important
  5. Who tells you about bad links - customers or an automated program? Important
  6. Do you run load tests on your website? Important
  7. Do you have a Validation Page for your web server? Important
  8. Do you make your site so it is easy to maintain? Important
  9. Do you synchronize files and folders using FTPSync or Beyond Compare? Important
  10. Do you use a staging server? Important
  11. Do you always use query strings? Important
  12. Do you restrict your web pages to a reasonable size?
  13. Do you use a stats program?
  14. Do you build criteria by using a where clause?
  15. Do you avoid using mailto: on your website?
  16. Do you replace the 404 error with a useful error page?
  17. Do you replace the 404 error with a useful error page? (Part 2: And avoid changing the URL)
  18. Do you use a customized error page to handle an unhandled error occurs on your website?
  19. Do you always use the MaxLength property to the same as the length of the field in the table
  20. Do you name web pages to be consistent with database tables?
  21. Do you use a style sheet for all your formatting?
  22. Do you make sure every page has a heading tag - H1, H2 or H3?
  23. Do you use <DL> tag for captions?
  24. Do you avoid FONT tags throughout your site?
  25. Do you avoid using ASP/ASP.NET tags in plain HTML?
  26. Do you know the best way to display code on your website?
  27. Do you check if your page contains malformed Html?
  28. Do you always have a default/index page?
  29. Do you know that Anchor's are case sensitive?
  30. Do you know that Anchor's cannot contain spaces?
  31. Do you know that Anchor's cannot contain text or other tags?
  32. Do you know that Anchor Name must not start with a #?
  33. Do you avoid using UNCs in HREFs?
  34. Do you make sure that your page can be saved offline?
  35. Do you use the "type" attribute in <object> tags?
  36. Do you make sure you remove the debug page attribute?
  37. Do you use Markup Validation Service to check your HTML and XHTML code?
  38. Do you use CSS Validation Service to check your CSS Style Sheet?
  39. Do you close quotations of all your html attributes?
  40. Do you close your html tags?
  41. Do you check for funny characters (including apostrophes)?
  42. Do you have generic exception handler in your Global.asax?
  43. Do you understand that there are 2 other types of errors
  44. Do you precompile your ASP.NET 1.1 and 2.0+ sites?
  45. Do you avoid using Web Site Projects?
  46. Do you use AJAX on your web site?
  47. Do you check if your website is running?
  1. Is your website designed to improve your Google Ranking? Important

    Google is by a country mile the most popular search engine in the world. It's popular because it seems to rank pages so accurately and quickly time and time again. The secret to its success is its top secret PageRank Algorithm. Google developed its page ranking system in an effort to increase the quality of search results and has left all of its competitors for dead. As a result search engine optimization (SEO) gurus are always looking to find new ways to increase their Google rankings. As we all know, a website is a pretty nifty thing to have for a myriad of different reasons. But the truth is that it's worth is derived from the people that surf it, and if no one is surfing it, then it becomes useless. So who's the biggest website referrer? The answer is Google in almost every case.

    So design your website with this in mind. In the eyes of a search engines, there are good and bad ways that you can design your website. Here's a list of suggestions to improve your Google ranking and other search engine optimization tips

  2. Is your website structured?Important

    I think the following structure allows you to keep your website clean of clutter:

    • /Images - for all static images
    • /Images/Dynamic - for all images used in dynamically generated pages
      NOTE: the reason we use two images directories is so we can exclude images used by dynamically generated pages from our link checking program. This is so we can work out the TRUE orphan images (and believe me, like coat-hangers they multiply quickly ...)
    • /Includes - for all include files
    • /Bin - for mdb's, dll's and udl's
    • /Shop - for the shopping basket and related pages
    • /Clients - for the client login page and related pages
    • /Reports - for any SQL Server Reporting Services
    • /zsMaintenance - for the administration section to modify web site settings
    • /zsValidate - for all web server status and validation checks

    The root directory should be clean, having only:

    • default (.aspx, .asp, .htm)
    • global.asa
    • application.sln
       
  3. Do all your employees know the quickest way to fix small web errors? Important

    Firstly, I am appalled at how many companies I see that do NOT use a GUI for editing HTML pages. They use some text editor to get their HTML perfect. In addition the Mary from Marketing doesn't change intranet pages herself. She sends text changes she wants to the control freaks that run the web site.

    Imagine this scenario... Mary notices a small error on a page in her intranet http://Intranet/Marketing/PressReleaseStandard.aspx She is a good employee... She fires up an email and reports the spelling error to info@s*w.com.au. As she sends it she says to herself "That it took more time to report the error than it would have taken me to fix it".

    Well this should NEVER be the case if you have IE6 or IE7 and Microsoft Expression Web installed. IE allows the current page to be modified by loading up the source file in Microsoft Expression Web. That means that making quick changes to your website are truly just a few clicks away. Microsoft Expression Web will take a web address like http://intranet/marketing/PressReleaseStandard.aspx and opens the actual source code file (not the HTML output), if the website is a local network shared directory.

    IMPORTANT: When using this function to edit pages always make sure the page is being viewed from an intranet server, eg 'bee'. If the page is being viewed on an external server, (eg. http://www.ssw.com.au), then Microsoft Expression Web will have problems capturing the server side script. This missing server side script will automatically be substituted for HTML, which will create errors when trying to save. Potentially loosing all the updated data.

    Note: To be able to edit pages through Microsoft Expression Web the file extension must be associated with Microsoft Expression Web. The steps to do this are:

    1. Create a new text file
    2. Change the extension from .txt to .aspx or .htm (depending if your website is in .NET)
    3. Right click and choose "Open With" and "Choose Program..."
    4. Select "Microsoft Expression Web" and tick "Always use the selected program to open this kind of file"
    5. Click OK
    Default Microsoft Expression Web
    Figure: First you need to' make Microsoft Expression Web the default for .aspx files

    Now you need to add the edit icon to your IE6 or IE7 toolbar. Once this has been added those small changes that you need to make to your website should only be one click away.

    Microsoft Expression Web
    Figure: Now you can open the web page with Microsoft Expression Web automatically

    NOTE to Administrators: If your employees are only able to edit pages in their rendered form (HTML file that is rendered from the original file), your FrontPage Server Extensions may have become corrupt. To resolve this problem remove and reinstall FrontPage Server Extensions from IIS using Windows Setup in Add/Remove Programs. After completing this it is important to configure and extend the FrontPage Server Extensions on any web that is required to be accessed through Microsoft Expression Web.  You may also need to Recalculate your web and Tighten Security by running the Detect and Repair option on the Check Server Health administration page.

    Installing FPSE Error
    Figure: Error when installing FrontPage Server Extension

    You might get this error when you install FrontPage Server Extension. If so, then below is the solution:
    1. run regedit.exe
    2. go to KEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\Session Manager\
    3. delete pendingfilerenameoperations
                        

    **WARNING: You need to install the FrontPage Server Extension on the web server, not on the client **
    **WARNING: You should not install FrontPage Server Extension on a Reporting Services box, because there will be potential conflicts**
    **WARNING: You first need to check out the page by using MS Visual Studio**

  4. Warning: Do you edit right files?

    If you use Microsoft Expression Web (was FrontPage) as your editor, and you copy and paste formatted text (especially from Microsoft Word) into Microsoft Expression Web, it will paste in unwanted tags as it intelligently (joke) decides to keep the formatting. If your site uses CSS for formatting this is going to cause problems. Therefore always paste in unformatted text.

    Original aspx file
    Figure: Original .aspx file with one click editing
    Rendered HTML file
    Figure: Rendered HTML file from original .aspx file


  5. Who tells you about bad links - customers or an automated program? Important

    Many webmasters work with sites that have grown large over time and have consequently become difficult to maintain. They fix problems as customer report bugs. A better approach is to use a utility that will analyze your whole site and report any problems. Details

  6. Do you run load tests on your website?

    Once you have a website up and running, it is important to make sure that it keeps running under load. Local testing of the website will not always reveal the latent problems in the website when it is subjected to thousands of users. Typical issues that result from inadequate load testing are:

    • 503 Service Is Temporarily Unavailable
    • Very slow load times
    • Application Crashes due to:
      • Insufficient resources - so application pools are recycled
      • Too many concurrent users causing race conditions
      • Too many users trying to connect to the database

    Load Tests help you avoid these issues by prempting them before you go live. Some issues might be resolved by getting a better web server, while others might require code changes and optimizations.

    In Visual Studio 2005 - Software Testers Edition, there is a built in Test Project to conduct load testing.

    1. From the Test menu select New Test
    2. Select Web Test and Create a new Test Project
      Add a new Web Test
    3. Name the Test Project <Namespace>.WebUI.Tests
    4. An Internet Explorer window will open with a recorder toolbar. Navigate to the web pages that need to be Load Tested
      Record the pages you want to Load Test
    5. Click Stop when you are finished recording the pages to be tested
    6. Click the Run button to make sure the tests run
      Test our recorded test
    7. Add a new Load Test
      Add Load Test
    8. Follow the Load Test Wizard:
      • Load Pattern - Define the number of users hitting the site
      • Test Mix - Select the web test you recorded earlier
      • Browser Mix - Specify different types of browsers (leave as default)
      • Network Mix - Specify connection speeds of users (leave as default)
    9. Click Finish
    10. Click Run to run the load test
      Run Load Test
    11. This will kick off the load test and show a live graph of user load, requests per second and response time

  7. Do you have a Validation Page for your web server? Important

    How can you know that all components are working correctly on your site? We believe it is vitally important to have a 'Validate Setup' page. This page will check the server and make sure:

    • all the dlls are present (and registered for COM ones)
    • all the web services are working
    • all the databases are alive, etc.

    You would be surprised how many dependencies a large webpage can have.The advantage of this page is if you ever need to redeploy your application on another server or you have some pages that are just not working as planned you can load up this page and get a quick diagnostics of your website.

    Validation Tests
    Figure: Automatically validating our website
    Validate Setup
    Figure: One of the components on this web site is down

    See SSW Rules - Do you have a zsValidate page to test your website dependencies?

  8. Do you make your site so it is easy to maintain? Important

    If you have database driven pages on your website, you need a way of updating the data quickly and easily. Each page should have an 'Edit' link at the bottom, which is only visible when the site is running internally, that takes you directly to the page for editing the content on that page.

    Maintenance Demo
    Figure: Embedded links allow SSW Employees to maintain testimonial entries easily

    We also have a section of our website for automatically validating the web server settings, checking for broken links, validating data, setting configuration options and for checking that all necessary COM components and other dependencies are installed and working. Details

  9. Do you synchronize files and folders using FTPSync or Beyond Compare?Important

    An ftp site is just a copy of what you've got locally. Using a "dumb" ftp program allows you to update files you remember have changed, but that's not very efficient. FTP Sync and Beyond Compare are ftp programs that compare all the files on the web server to a directory on a local machine. Once FTPSync or Beyond Compare has completed an analysis of the files on the web server, it will compare things like date updated and file size and report which file is newer and what files will be overridden by uploading or downloading. We ONLY make changes on the local machine, so we can always upload files from the local machine to the web server.

    This process allows you to keep a local copy of your live website on you machine - a great backup as a side effect.

    Whenever you make changes on the web-site, as soon as they are approved they should be uploaded. You should tick the box that says 'sync sub folders', but when you click sync be careful to check any files that may be marked for a reverse sync. You should reverse the direction on these files. For most general editing tasks, changes should be uploaded as soon as they are done. Don't leave it until the end of the day. You won't be able to remember what pages you've changed. And when you upload a file, you should synch EVERY file in that directory. It's highly likely that un-synch'ed files have been changed by someone, and forgotten to be uploaded. And make sure that deleted folders in local server are deleted in remote server.

    If you are working on some files that you do not want synced then put a _DoNotSyncFilesInThisFolder_XX.txt file in the folder. (Replace XX with your initials.) So if you see files that are to be synced (and you don't see this file) then find out who did it and tell them to sync. The reason you have this txt file is so that people don't keep telling the web master about the unsynced files.

    NOTE: Immediately before deployment of an ASP.NET 2.0 application with FTPSync, you should ensure that the application compiles - otherwise it will not work correctly on the destination server (even though it still works on the development server).

  10. Do you use a staging server?Important

    After you've done your work locally using TFS, upload the site to a staging server and send an internal "Test Please" pointing to it. At SSW we use http://mockup.us.ssw.com.au/.

    Client then can review the site on this URL too. Once approved, simply sync the website to the live server.

  11. Do you always use query strings? Important

    When you build a web application, any dynamic page you think a user may wish to bookmark directly should be controlled through querystring values rather than form values. In other words, search mechanisms should use the HTTP GET Request and Querystring values, rather than a POST with Form values. This allows:

    • Bookmarking of the pages
    • Gives the user to the ability to change the querystring values in the address bar, rather than having to go back to the input form.
    URL
    Google Text box
    Figure: The URL should always have all the parameters the user enters. Here Google is a good example.

    You may hear that query strings are bad and they leave you wide open to SQL Injection Attacks (especially when you use SQL statements in the URL). I don't subscribe to the security issues being the determining factor... if I am determined enough, I can write a little application to send POST data to the webpage instead of in the query string. Both methods are open to SQL injection and invalid parameters, so you need to code to prevent that either way.

    The bottom line is that if you are not giving appropriate parameters in the query string then you are reducing functionality.

    Note: We all agree bookmarks are useful - it's the same for query strings.

  12. Do you restrict your web pages to a reasonable size?

    Web page size is an important factor. You want your page to look really good and have lots of nice looking images and large detailed backgrounds BUT this all comes at a cost. Not everyone is on broad band Internet and not everyone is prepared to wait for a large page to load. On average you should not have a web page that is over 101k in size. (This includes everything that a user has to load on that page. i.e. images, html, etc.)

    It's also good practice to keep your pages less than 101k because that is the size of the Google cache. See our Rules To Better Google Rankings for more information.

    Using Flash is a great way of having a visually intense web sites small enough for people to download. But if you wish to go down this alley, you must have an alternative site because not everyone can see flash on their browser. In addition Google doesn't index flash websites. See our Rules To Better Google Rankings

    Only have large file sizes when you know that users will be expecting to download a large file (for example, product documentation)

  13. Do you use a stats program?

    Site Tracking is an important part of any active web page. You need to be able to see what your visitors are viewing, what they aren't, what they spend large amount's of time on, what pages are causing errors, what pages are directing visitors to you, etc. All this information help you better structure your site to what your visitors like. It also allows you to compare site traffic from one month to another.

    I think that the following reports are most useful:

    • Which are your most popular pages
    • Which sites are referring the most hits to you
    • Which key words are bring users to your site
    • If you have downloads, which are the most popular

    If you're looking to decide which web stats program to use, we've tested a few so check out the web stats programs we recommend. Depending on your stats software, you can even use them to get the web reports emailed to you on a regular basis.

  14. Do you build criteria by using a where clause?

    It is very common to come up with ways to filter data.
    As an example you could do it like this.

    ClientSearch.aspx?Client.ClientID='ssw'&Client.CoName='S'
    Figure: Filtering Data

    >This allows you to easily extract fields and values, but it only works for the fields you hardcode. You could get around it by writing complex code to build a sql query, or ignore the ones that don't match.

    But this gives exact matches. e.g.

    ClientID=ssw
    What if you want to give the ability to allow the user to be able to use a like e.g.
    ClientID like '%ssw%'
    Well then I could add something like
    ClientSearch.aspx?Client.ClientID=ssw&Client.ClientID.SearchMode=OR

    But why do this when a WHERE clause in SQL can do all this
    e.g.

    ClientSearch.aspx?Where=Client.ClientID%20like%20'%ssw%'
    Figure: Similar matches

    Try this - ClientSearch.aspx?Where=Client.ClientID%20like%20'%ssw%'

    The Pros for do this are:

    • Quicker development time.
    • SQL is very powerful - say I want to JOIN another table in the WHERE, I could use an IN statement and do a sub query - no extra code by the developer.
    • Matches HTML syntax (named value pair) and as a developer you can get it easy. e.g.
      Request.QueryString("Where")

    The CONS:

    • It shows the database schema to the users - there maybe some security concerns by allowing users to see the structure of the database.
    • Security - the where clause could show data we don't want users to see.
    • Got to add a little extra code to avoid sql injection.
  15. Do you avoid using mailto: on your website?

    Don't ever display valid individual email addresses or mailto:'s on a web site. Nasty people on the web have created "Email Harvesting" tools. These programs search public areas on the Internet to compile, capture, or otherwise "harvest" lists of email addresses from web pages, newsgroups and chat rooms. Any email address that is spelt out can be captured and therefore gets attacked with spam.

    The best way to avoid it is not to display valid individual email addresses in text format (especially in the form of "mailto:") on your website.

    Your Options:

    • Bad way: using email address in text format

      e.g. 
                                  FirstnameSurname@s*w.com.au
      Figure: Bad way - normal email address in text format
    • OK way: use image

      e.g. FirstnameSurname
      
      Figure: Just an OK way - using an image –not friendly for a user as they can’t just click the link to create a new email
    • Old way: use "*"or other symbol in the domain

       e.g. FirstnameSurname@s*w.com.au
      Figure: Just an OK way – users can click a link to create a new email – however many don’t understand the instructions to remove the *

      Note: Please change "*" in "s*w" to a "s".

      This way works well. Unfortunately, it is not understood by everyone and have had problems in the past.


    • Best way: use JavaScript

      The best way is a combination of 'good way' and 'better way'.

       e.g. FirstnameSurname@s*w.com.au
                              
      Figure: Best way - users can click a link and spam harvesters cannot read the email (see no email in the status bar)

    • How do you apply this encryption technique:

      1. Store email addresses in the web.config file
        <configuration>
           <appSettings>
              <add key="CC" value="Adam Cogan (adamcogan@s*w.com.au)">
        Figure: Add to Web.Config

      2. Encode them on the server using the BitConverter class
        Dim email As String = ConfigurationSettings.AppSettings("SampleEncodedEmailAddress")
        Application("SampleEncodedEmailAddress") = BitConverter.ToString( _
        ASCIIEncoding.ASCII.GetBytes(email)).Replace("-", "")
        Figure: add to a class and then call it to encode the email address

      3. Decode on the client with a JavaScript function in the JavaScript
        <a id="linkContact" href="javascript:sendEmail('44617669644073616D706C652E636F6D2E6175')">Contact
        Adam</a>
        Figure: Add to each .aspx page that shows an email

    • See the sample in action

      Here is an example of the email technique to avoid spammers.

    We have a program called SSW Code Auditor to check for this rule.

  16. Do you replace the 404 error with a useful error page?

    Error page, you say? You worked hard to make sure my site has no errors!! Well, surfers don't always type URLs accurately. No website is immune to such errors.

    A well-designed custom error page encourages surfers to remain in your site and help them to the right page. Although it's possible to redirect error codes straight to your home page, that doesn't tell visitors what's going on. It's more user-friendly to explain that there was a problem and provide some alternatives. Supply a link to your home page or other links, or offer your site's search function if you have one.

    To see an example of our error page click this link Error Page

    <customErrors mode="Off"></customErrors>
    BadFigure: This is the default code in the web.config (Bad)
    <customErrors mode="RemoteOnly" defaultRedirect="/ssw/ErrorPage.aspx">
        <error statusCode="404" redirect="/ssw/SSWCustomError404.aspx">
    </customErrors>
    GoodFigure: this is the current code in the web.config of the SSW Site (Good)
  17. Do you replace the 404 error with a useful error page? (Part 2: And avoid changing the URL)

    When you request a URL of a file that doesn't exist, you will get an error message. You have to consider that this error message differs depending on which kind of server you are running.

    On the IIS the default "HTTP 404 error" page will be shown. This page looks quite ugly, it is not customizable and has nothing to do with the layout and design of the rest of your site. The advantage of this solution is, that it doesn't change the URL in the Address text box of you browser. So it's easy to correct for a user if it's e.g. just a spelling mistake or a forgotten or mixed up letter and the user doesn't have to retype the whole URL.

    Here is a standard 404 error pageOpen In A New Window of the IIS. It does not change the URL.
    It should look like this in Internet Explorer 6:

    standard 404 error
    BadFigure: The default 404 error page of the IIS in IE6 (Bad)

    Or look like this in Internet Explorer 7:

    standard 404 error
    BadFigure: The default 404 error page of the IIS in IE7 (Bad)

    In .NET you are allowed to define a custom error page. When a user tries to access a URL which doesn't exist, .NET changes the URL and redirects to the custom error page. The original URL is passed as a parameter to the new URL.

    The advantage of this solution is, that the page looks nice and you can customize it according to the design and layout of your whole site.

    The disadvantage is, that .NET changes the URL. So if the user wants to correct the URL he entered, for example because he just mixed up a letter, then this means quite a lot of work for him. He has to retype the whole URL or at least copy and paste the parameter out of the new URL. This is very uncomfortable for the user.

    Here is a customized .NET 404 error page. It changes the URL.
    It should look like this:

    URL ASP
    BadFigure: A customized .NET error page (Bad as the URL changes)

    Our solution is to show the customized error page while not change the original URL. So if the user wants to do any corrections, e.g. a mixed up letter, he can do that by just editing the URL in the address bar.
    The advantages of this solution are, that the site looks nice and matches the design of the whole site and that the user can easily change the original URL he typed.

    You can try any page name that doesn't exist like xxxx.asp on the URL and it will open our 404 error page. The original URL is not changed in the address bar. It should look like this:

    Our 404
    GoodFigure: Our customized 404 error page without change the URL (Good)

    In order to show the customized error page while not change the original URL, you can use Server.Transfer() to keep the original URL.

    Server.Transfer("/ssw/ErrorPage.aspx")
    Figure: Custom error page handler in Global.asax

  18. Do you use a customized error page to handle an unhandled error occurs on your website?

    For ASP.NET website, the detailed information would be presented to the remote machines when an unhandled error occurs if the customErrors mode is off.

    This error information is useful for developer to do debugging. However, it would leak out some confidential information which could be used to get into your system by the hackers. We can assume that if a SQL exception occurs by accident, which may expose database sensitive information (e.g. connection string; SQL script). So, to prevent these leaks, you should set the "mode" attribute of the tag to "RemoteOnly" or "On" in the web.config file and create a user friendly customized error page to replace the detailed error information.

    <customErrors mode="Off"></customErrors>
    BadFigure: Setting "customErrors" attribute to "Off" is security risk (Bad)
    <customErrors mode="RemoteOnly" defaultRedirect="GenericErrorPage.htm"></customErrors>
    GoodFigure: Turning on "customErrors" protects sensitive information against Hacker (Good)

    Unhandled Error
    BadFigure: Unhandled Error (Bad)
    Customized Error Page
    GoodFigure: The Customized Error Page (Good)

    To see an example of our customized error page click this link Customized Error Page

  19. Do you always use the MaxLength property to the same as the length of the field in the table?

    Rule 1: Whenever you have a data entry page you should always use the MaxLength property to the same as the length of the field in the table (except for numbers).

           State:(maxlength="3")

    Rule 2: Whenever you have a situation where you are using:

    • the HTML TEXTAREA (does not have the maxlength property), or
    • have a SQL Server table exceeding the limit of 8060 bytes. (Developers sometimes define the table with char/varchar sizes that exceed this, in order to give the user flexibility in which fields they want to store the data).

    Figure: Design view of Products table in Northwind

    Then you need to:

    • add the JavaScript function eg. ValidateLength(control)
    • add 2 properties to every data control  eg. dataType="char" onkeyup="validateLength(this)"

    See demonstration

  20. Do you name web pages to be consistent with database tables?

    In a database driven page, it is important that the name of the page is based on the data that the page contains. For example, if a page shows client details and is based on the Client table, then the page should be called Client.aspx Another examples are:

  21. Do you use a style sheet and heading tags for all your formatting?

    Formatting rules shouldn't be specified in each individual page of your website. A style sheet should be used to dictate how the fonts, tables etc should be displayed.

    This makes your site very easy to maintain. If you ever want to change the entire look and feel you should only have to change one file.

    Here at SSW we ensure every page has this line: <LINK href="/ssw/Include/ssw.css" type="text/css" rel="stylesheet">

  22. Do you make sure every page has a heading tag - H1, H2 or H3?

    Every page should have a <H1>, <H2> or <H3> tag. This has the following benefits:

    • Improves the ranking with the search engines (extra weighting is given to text in H1 and H2)
    • Makes cleaner and leaner html
    • You can edit the page in FrontPage (ctrl+alt+2 same as MS Word) or Dreamweaver without going to the HTML view

    <p><span class="Heading">Introduction</span>
    
    <br>Lets chatter about...</p>
    Bad Figure: Bad as it is using span tags and CSS classes to put headings in.
    <h2>Introduction</h2>
    GoodFigure: Good as it is using heading styles

    To adjust the formatting of the heading tags, you should redefine them in your style sheet:

    H2
    
    {
    font-size: 16px;
    font-family: Arial, Helvetica, sans-serif;
    }
    GoodFigure: Good as it is using heading styles
  23. Do you use <DL> tag for image captions?

    Image captions can present a bit of a puzzle to people trying to do proper markup. This results in either the completely wrong markup gets used (a caption is not a paragraph) or captions are simply wrapped in <table>s, <div>s and <span>s tag.

    The proper way to insert a caption is to use the Definition ListLeave Site tag

    <table>
     <tr>
      <td>
      <img border="1" src="Images/picture.jpg" alt="Default Front Page" />
      </td>
     </tr>
     <tr>
      <td>
      <b>Figure: this is the image caption</b>
      </td>
     </tr>
    </table>
    Figure: Incorrect caption as it is using <table> tag
    <dl class="image">
     <dt><img src="Images/picture.jpg" alt="Default Front Page" /></dt>
     <dd>Figure: this is the image caption</dd>
    </dl>
    Figure: Correct caption as it is using <dl> tag
  24. Do you avoid FONT tags throughout your site?

    And as a consequence of the style sheet no page on our site should have the <Font> tag.

    <font face="garamond, times" color="#FF0000" size="+1">
     this text uses font tag
    </font>
    Figure: Bad and inflexible text formatting using <font> tag
    <div class="redText">this text uses css instead</div>
    Figure: Good text formatting using CSS
    We have a program called SSW Code Auditor to check for this rule.
  25. Do you avoid using ASP/ASP.NET tags in plain HTML?

    ASP and ASP.NET tags have no place in plain HTML pages. They simple increase the size of the file and are ignored by browsers, because the need to be processed on the server. When converting ASP.NET pages to plain HTML you must be careful to remove all of these tags.

    <%@ Page Language="C#" %>
    <html>
    <ssw:inctop id="inctop" runat="server"></ssw:inctop>
    Figure: Bad Example - ASP.NET tags accidentaly placed in a plain HTML documents

    We have a program called SSW Code Auditor to check for this rule.

  26. Do you know the best way to display code on your website?

    Any website designer that needs to display code should be aware that there is a very simple method for simply formatting code, and there is a slow and complex method.

    The complex method requires formatting each line with HTML tags (such as <br> and &nbsp;) to ensure the code looks nice and pretty.

    The simpler method uses <pre> tags. Pre (standing for "preformatted") means that the code is formatted exactly as it is written in the HTML window. This means the page designer can format code in a very simple fashion, without worrying about tags.

    I think it's also better to put code in a table, so it's easy to distinguish.

    NOTE: <code> tags should not be used because they only provide the font courier - you still have to manually indent all of your code as in the bad code display example below.

    <font face="Courier, Times, Arial, Verdana" size="3">
    
    public class Configuration<br>
    &nbsp;{<br>
    &nbsp;&nbsp;public static string MySetting<br>
    &nbsp;&nbsp;{<br>
    &nbsp;&nbsp;&nbsp;get<br>
    &nbsp;&nbsp;&nbsp;{<br>
    </font>
    Figure: Bad Code Display Example - using <font>
    <code>
    
    public class Configuration<br>
    &nbsp;{<br>
    &nbsp;&nbsp;public static string MySetting<br>
    &nbsp;&nbsp;{<br>
    &nbsp;&nbsp;&nbsp;get<br>
    &nbsp;&nbsp;&nbsp;{<br>
    </code>
    Figure: Bad Code Display Example
    <pre>
    public class Configuration
    {
       public static string MySetting
       {
          get
          {
    </pre>
    Figure: Good Code Display Example

    Tip: Do not use auto-format (Ctrl-K, Ctrl-F) in Visual Studio when updating page with <pre> tags, or it will destroy all the code formatting. We have made a suggestion to Microsoft to fix this.

  27. Do you check if your page contains malformed Html?

    Today's web browser are very lenient when it comes to malformed HTML, but such malformed HTML should still be avoided at all cost, otherwise the rendering of your pages will become unpredictable. But such malformed HTML are not easy to pick up, especially if the page is a generated server page, such as .asp or .aspx pages.

    At SSW we integrate an utility call Tidy with SSW Code Auditor to provide a powerful and robust solution to this problem. This way Code Auditor can automatically validate our websites and provide an informative report on all malformed html found on our site.

    We have a program called SSW Code Auditor to check for this rule.

  28. Do you always have a default/index page?

    Many times a website contains directories that doesn't have an index page. Traditionally, this is usually index.html, but depending on the webserver configurations, default.asp, Default.aspx or index.htm are also common.

    403 Directory View Error
    Figure: A user should never see something like this...

    We have a program called SSW Code Auditor to check for this rule.

  29. Do you know that Anchors are case sensitive?

    Are http://www.ssw.com.au/ssw/NETUG/DeveloperLinks.aspx#usergroups and http://www.ssw.com.au/ssw/NETUG/DeveloperLinks.aspx#UserGroups the same? Well most developers slip up on the case sensitivity of Anchors because they are not case sensitive when they test them in IE. But in Netscape and Opera they are so you need to find them and fix them. The only efficent way of doing this is to run Xenu Link Scanner and fix the errors reported in the broken local links' section.

  30. Do you know that Anchors cannot contain spaces?

    When you are defining an anchor name, make sure there are no spaces within the name.

    Bad: <a name="Some Anchor Name">

    Good: <a name="SomeAnchorName">

    We have a program called SSW Code Auditor to check for this rule.

  31. Do you know that Anchor's cannot contain text or other tags?

    If you add text or tags among an anchor name, this will make the text or tags look like a link, but actually, an anchor name is not a link, if users click the appeared link, no target will go to

    Bad: <a name="AnchorName">Text</a>

    Good: <a name="AnchorName"></a>

    We have a program called SSW Code Auditor to check for this rule.

  32. Do you know that Anchor Name must not start with a #?

    When you are defining an anchor name you DO NOT use a #.
    When you are referencing an anchor you DO use a #.
    This is a common mistake.

    Bad: <a name="#SomeAnchorName">

    Good: <a name="SomeAnchorName">

    We have a program called SSW Code Auditor to check for this rule.

  33. Do you avoid using UNCs in HREFs?

    Initially I thought errors of this nature would be picked up in the link checking utility. However that is not the case, because the link checker will not report any problems if you run it locally - which is the normal method. The reason it won't see the problems, is because the link checking utility does not check hard coded links to local servers (e.g. http://localserver/ssw/Default.aspx), so therefore it is testing a page that will exist internally, but the page will not exist when uploaded to the web (eg.http://www.ssw.com.au/ssw/Default.aspx).

    Bad: <a href="//ant/ssw/LookOut.htm">

    Good: <a href="/ssw/LookOut.htm">

    We have a program called SSW Code Auditor to check for this rule.

  34. Do you make sure that your page can be saved offline?

    After the security update MS02-023 or later (including Internet Explorer 6 Service Pack 1), Internet Explorer now blocks access to StyleSheet code if the code is on a different domain/server. This means page with external CSS reference will fail to save offline and will receive a "Error when saving webpage" error message. So if you want to save your page offline, copy the css file to the same server.

    <LINK href="http://anotherserver/ssw/ssw.css" type=text/css rel=stylesheet>

    BadFigure: Cannot save offline

    <LINK href="/ssw/ssw.css" type=text/css rel=stylesheet>

    GoodFigure: Can save offline

    We have a program called SSW Code Auditor to check for this rule.

  35. Do you use the "type" attribute in <object> tags?

    Rather than specifying CodeBase or ClassID attributes in an object tag, the preferred method, for portability reasons, is to specify the MIME type. For instance, with Flash, you would specify a type of "application/x-shockwave-flash". This allows the browser to load the user's preferred plugin instead of specifying a particular object. This also reduces the number of security warnings a user may see.

    <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
    codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0"
    width="120" height="120" id="Untitled-1" align="middle">
    </object>
    BadFigure: Bad as it is using the "CodeBase" and "ClassID" attributes

    <object type="application/x-shockwave-flash" width="120" height="120" id="Untitled-1" align="middle">
    </object>
    GoodFigure: Good as it is using the "type" attribute

    We have a program called SSW Code Auditor to check for this rule.

    We have a program called SSW Link Auditor to check for this rule. We offer a rule sample page for demo scan.
  36. Do you make sure you remove the debug page attribute?

    The debug attribute in the web.config file is very useful for ASP.NET developers. When an error occurs the developer gets detailed error report containing the stack trace, line number and what the error is.

    <%@ Page Language="vb" Debug="true" %>

    But when debug attribute in the Web.config file is set to true (by setting debug="true" in your web page), it generates symbolic information (.pdb file) every time the compiler compiles your .aspx pages as well as disables code optimization.,So, it slows down the execution of every page.

    So if you are a developer remember to remove the debug attribute and instead use custom error messages for your web pages

    We have a program called SSW Code Auditor to check for this rule.

  37. Do you use Markup Validation Service to check your HTML and XHTML code?

    Markup Validation Service allows you to check your webpage against the W3C recommendations. When developing webpages you want to create a clean and valid web page. It makes it easyier for someone else to read and add new parts to a web page. Every web language like HTML has its own Syntax it must follow in order to produce a clean and valid web page, Markup Validation Service allows you to achieve that goal. Go to Markup Validation Service

    1. Enter the URL or Upload HTML file and click Check
    2. Review the Results and make changes if web page is not Valid
    Markup Validation Service
    Figure: You can Choose to Validate by entering a URL or by Uploading a File
    Information from your check
    Figure: Displaying Information about your check
    Displaying Results and areas that need fixing
    Figure: Displaying Results and Errors with web page checked
  38. Do you use CSS Validation Service to check your CSS Style Sheet?

    CSS Validation Service allows you to check your webpage against the W3C recommendations. When developing web pages you want to create a clean and valid web page. It makes it easyier for someone else to read and add new parts to a web page. Every web language like CSS has its own Syntax it must follow in order to produce a clean and valid web page, CSS Validation Service allows you to achieve that goal. Go to CSS Validation Service

    1. Enter the URL or Upload file or by Direct Input and click Check
    2. Review the Results and make changes if web page is not Valid
    Markup Validation Service
    Figure: You can Choose to Validate by entering a URL or by Uploading a File
    Displaying Results and areas that need fixing
    Figure: Displaying Results and Errors with web page checked
  39. Do you close quotations of all your html attributes?

    It is always better to make sure there are equivalent closing quotations for HTML attributes. A small mistake of missing a quotation could lead to undesired results on the web page.

    Bad Example :
    <SPAN style="VS FONT-SIZE:12 pt; BACKGROUND: #cccccc;>
    BadFigure: Can you see the missing quote? Code Auditor can. (bad code)

    Good Example :
    <SPAN style="VS FONT-SIZE:12 pt; BACKGROUND: #cccccc;">
    GoodFigure: All OK (good code)

    As you can see from the above example, just missing a quotation makes the whole layout of the text different. So be very careful that you make sure you have closed all opening quotations of attributes with equivalent closing quotations.

    We have a program called SSW Code Auditor to check for this rule.

  40. Do you close your html tags?

    It is always better to make sure there are equivalent closing HTML Tags. A small mistake of missing a close tag could lead to undesired results on the web page.

    Bad Example :
    <title>SSW Rules to Better Websites - Development
    BadFigure: Can you see the missing tag? Code Auditor can. (bad code)

    Good Example :
    <title>SSW Rules to Better Websites - Development</title>
    GoodFigure: All OK (good code)

    We have a program called SSW Code Auditor to check for this rule.

  41. Do you check for funny characters (including apostrophes)?

    When you copy text from Microsoft Word or Outlook to Visual Studio or Expression Web, it puts in funny characters. A good example is weird apostrophes.

    • shouldnt (Words apostrophe), rather than
    • shouldn't (Front Pages apostrophe)

    The reason for this is Microsoft Word puts garbage apostrophes. Another common reason is Chinese Characters sets.

  42. Do you have generic exception handler in your Global.asax?

    Add your code to handle generic exception of your ASP.NET application in Application_Error.

    Sub Application_Error(ByVal sender As Object, ByVal e As 
    EventArgs)
    
    Dim objLastError As Exception = Server.GetLastError()
    If 
    objLastError.InnerException.ToString.IndexOf("IO.FileNotFoundException") 
    > 0 Then
    
    Dim strQueryString As String = Request.Url.Query.ToString()
    If strQueryString.Length = 0 Then
    '404 error. Append .error so that IIS will take over it and 
    log it in log file correctly.
    
    Response.Redirect(Request.Path + ".error", True)
    Exit Sub
    End If
    End If
    
    Dim strSubject As String = "Error"
    
    Dim strEmailMessage As String
    strEmailMessage += "An error occured on the SSW Website. 
    Please send this to the Web Page admin." & vbNewLine & 
    vbNewLine
    strEmailMessage += "Server Name: " & 
    Request.ServerVariables("SERVER_NAME") & vbNewLine
    strEmailMessage += "Server IP Address: " & 
    Request.ServerVariables("LOCAL_ADDR") & vbNewLine
    strEmailMessage += "Client IP Address: " & 
    Request.ServerVariables("REMOTE_ADDR") & vbNewLine
    strEmailMessage += "Error In Page: " & Request.Url.ToString() 
    & vbNewLine
    
    If Request.UrlReferrer Is Nothing Then
    strEmailMessage += "Referring URL: <non available>" & 
    vbNewLine
    Else
    Dim strUrlReferrer As String = 
    Request.UrlReferrer.ToString.ToLower
    strEmailMessage += "Referring URL: " & strUrlReferrer & 
    vbNewLine
    ' we don't want to know if the user comes in from a bad link 
    outside our site - we can't fix that
    If strUrlReferrer.IndexOf("ssw.com.au") = -1 And 
    strUrlReferrer.IndexOf("ant") = -1 And 
    strUrlReferrer.IndexOf("localhost") = -1 And 
    strUrlReferrer.IndexOf("seal") = -1 Then
    strSubject = "Warning Only (bad link outside our site so 
    probably not worth fixing)"
    strEmailMessage += "Warning Only (bad link outside our site 
    so probably not worth fixing)" & vbNewLine
    End If
    End If
    
    strSubject = "SSW Web Site: " + strSubject + " in page: " + 
    Request.Url.ToString
    
    strEmailMessage += vbNewLine & "Error Message: " & 
    objLastError.Message & vbNewLine & vbNewLine
    strEmailMessage += "Error Stack: " & objLastError.ToString & 
    vbNewLine & vbNewLine & vbNewLine
    SSWMT.GlobalFunctions.SendEmail(strEmailMessage, strSubject, 
    "info@s*w.com.au", "sswErrorLog@s*w.com.au", False)
    
    ' Move this error to the error page so i can get the error 
    message			
    If Not 
    Convert.ToBoolean(SSWMT.GlobalFunctions.GetWebConfigString("DisableCustomError")) 
    Then
    Server.Transfer("/ssw/ErrorPage.aspx")
    
    End If End Sub
    Figure: Exception handler in Global.asax.vb
  43. Do you understand that there are 2 other types of errors that cant be caught and handled by the global exception handler in Global.asax?

    Bad
    Figure: BEE is not an application - there is no way you can put code in the global.asax because it does not exist
    Bad
    Figure: BEE is not an application - there is no way you can put code in the global.asax because it does not exist

    We have a program called SSW Link Auditor to check these two errors.


  44. Do you precompile your ASP.NET 1.1 and 2.0+ sites?

    It always much better for your developers to find errors rather than your clients and end-users. ASP.NET 2.0 has precompilation built-in. However, you can perform similar validation in ASP.NET 1.1 as well. For more information go to Precompile ASP.NET Sample in SSW Knowledge Base.

  45. Do you avoid using Web Site Projects?

    If you’re creating new web apps in ASP.NET 2.0, do you still use Web Site projects? We strongly recommend using the new Web Application projects.

    What’s the difference between the two? There is a detailed comparison here, but to summarize:

    • Web Site projects have no project file and it creates multiples assemblies. (This result in a lot of annoying scenarios.)
    • Web Application projects have a physical project file and along with all other standalone classes within the project are compiled into a single assembly.

    Please see our kb - How to upgrade VS 2005 Web Site Projects to be VS 2005 Web Application Projects? to do the upgrade.

  46. Do you use AJAX on your web site?

    ASP.NET AJAX is a new Web development technology from Microsoft. With ASP.NET AJAX, developers can quickly create pages with sophisticated, responsive user interfaces and more efficient client-server communication by simply adding a few server controls to their pages.

  47. Do you check if your website is running?

    If you want to know your website is working or not, you need to add a ping check to the machine also a HTTP Content Scan to the website in WhatsUp. We use WhatsUp to do real-time monitoring.
    Follow these steps to check your website in WhatsUp:

    1. Add your website as a new device.
      Figure: New device
    2. Ping monitor is added automatically.
      Figure: Ping monitor
    3. Add a HTTP Content Scan monitor.
      Figure: HTTP Content Scan
    4. Edit the scan script. In the script you can see 2 key words "Send" and "Expect".
      "Send" expression is a http request to your website.
      "Expect" expression is a regular expression to check the key word in response from your website.
      Figure: Edit scan script
    5. Add the monitor to your device.
      Figure: Add monitor

    Once a device is down or up, a WhatsUp action will tell SQL Reporting Services to send out a notification report.
    Our report looks like this:

    Figure: Website works
    Figure: Website doesn't work

Acknowledgements

Adam Cogan
Tim Fletcher
Daniel Hyles


Benefit from our knowledge and experience!

SSW is the industry leader in Custom Software Development, Software Auditing & Developer Training.

Call us on +61 2 9953 3000 or email us for a free consultation

What does it cost? I’m not in Australia. Can you still help?