High-Performance Development - C#, VB, SQL, ASP.NET

Slogan Text

Overview

These guidelines help to reduce project development, costs, and frustration. If you have questions or concerns please contact us.

Table-Based Design

Use Html tables to layout the design.

Do not use a CSS-based design to layout the major elements of the web forms.

We have discovered that an Htnl table-based layout is easier and quicker to create than a CSS-based layout.

Validation

Please validate all Html syntax and CSS syntax using a validation service prior to delivering these items to us.

In the long-term we will provide an Graphic Design Validation Tool which will validate Html and CSS to our requirements.

 

Fonts

Use these fonts:

  • Font 1?

Do not use fonts located on another server. For example, do not reference the Beteckna font on the Kernest.com site.

We must approve in writing all fonts you select for the design.

CSS

  • Use Class="ClassName"
    We use the Microsoft ASP.NET controls for displaying HTML on web pages. The server-side code references the HTML elements, such as, input text boxes, via the ID attribute. When HTML references a CSS class via the ID attribute there will be a conflict between the ASP.NET use of the HTML ID attribute and the CSS use of the ID attribute. This conflict causes huge problems.

    Please use CSS class names in the class attribute when referring to CSS classes.

    Bad:

    .Planets
    {
        color: Blue;
        font-family: Verdana;
    }

    <div id="Planets">
        Jupiter
        Mars
        Saturn
    </div>

    Good:
    <div class="Planets">
        Jupiter
        Mars
        Saturn
    </div>
     
  • One CSS stylesheet
    Please provide a single CSS stylesheet. Exception: If the project requires a "printer-friendly" version of the web pages a second stylesheet containing the "printer-friendly" CSS styles is acceptable.
     
  • Alphabetical Organization
    Please organize all CSS classes in alphabetical order (disregard the leading "." (period) when ordering classes).

    Please organize all CSS attributes in alphabetical order. Organize each attribute on a single line.
     
  • Descriptive Class Names
    Please name CSS classes with a descriptive name.
     
  • Class Name Naming Convention
    See Naming Convention below.
     
  • Formatting
    Preferred formating:
    		
    .FooterBackground
    {
    	background-image: url(/Images/Planet_Footer.jpg);
    	background-position: left;
    	background-repeat: repeat-x;	
    	height: 47px;	
    	width: 984px;
    	z-index: 1;
    }
    

Html

  • Do not use these tags:
<address>    <dd>    <pre>
<b>   <dfn>   <q>
<base>   <dir>   <s>
<basefont>   <dl>   <samp>
<bdo>   <dt>   <small>
<big>   <em>   <strike>
<blockquote>   <fieldset>   <strong>
<caption>   <font>   <sub>
<center>   <kbd>   <sup>
<cite>   <i>   <tt>
<code>   <ins>   <var>
<col>   <legend>    
<colgroup>   <menu>    
  • List Html tag attributes in alphabetical order.
     
  • Use an Html validator to verify you have generated correct Html.
     
  • Add height and width attributes to all img tags.
     
  • Format Html.
Html - Using <H> Tags

The header tags H1, h2, etc can be used to format header titles on the page.

However, keep in mind we use ASP.NET controls, such as, the DataGrid to format data in a grid or table format. Generally, a grid will have column header text. We can not use the header tags <h1>, etc to format header text in DataGrids. You'll need to create a CSS class for DataGrid headers.

Images

  • Composite Images
    Trying to align several related images in CSS can be challenging and time-consuming. For example, suppose the design contains a menu tab. Within the tab resides a centered icon and a menu title. CSS needs to be written to position the tab, the icon, and the menu title.  

    Please create composite images for these types of situations.
     
  • Ready to Go Images
    All images must be "ready to go" to be placed into the web site without any additional image processing. Images must be cropped, resized, processed, etc.
     
  • Descriptive File Names
    Determining the purpose of image file names, such as, 01.gif, A.png is challenging and time-consuming.

    Please name image files with descriptive file names:

    See Naming Convention below for details and examples.
     
  • Royalty Free Images
    All images should be royalty-free unless authorized in the written project specifications.
     
  • Purchase Images
    For images provided by stock image online retailers please purchase the image. 

Design - Common Issues

  • Shallow Nesting
    Debugging deeply nested tables is challenging and time-consuming. 

    Please keep nesting of tables as shallow as possible.

  • Minimal Images
    Correctly aligning multiple images can be challenging and time-consuming. For example,  one project we worked on included over 80 tiny images which needed to be properly aligned for correct display.

    Please minimize the number of images in the design, or create composite images where possible.

Design - Commonly Overlooked Elements

When creating the design please remember to design these items:

  • Login Page
    Usually includes:
    • Username TextBox
    • Password TextBox
    • Error messages in bulleted list at top of page
    • Error messages below each TextBox
    • Required field indicator: "Required *"
    • Login Button
       
  • Error Messages
    • Page-wide error messages.
      Generally displayed at the top of the page. Formated as a bulleted list. Error messages displayed in red.
       
    • Input field specific error messages.
      Generally displayed below the input field.  Error messages will appear dynamically when user leaves input field or clicks on the form Submit button. Error messages displayed in red.

Design - ASP.NET DataGrids

We use ASP.NET controls, such as, the DataGrid control to display information on a web page. There are special issues to consider when creating a graphic design for these controls.

Please consult with us prior to designing a web page with a data grid so we can discuss and suggest options which will reduce frustration all project members.

Several issues (may not include all issues):

  • Command Button Types
    DataGrids usually contain command buttons in the right-hand columns that allow the user to perform specific actions.

    Command buttons usually are: Edit, Update, Cancel, & Delete.

    The easiest button types to set in the ASP.NET data grid controls are LinkButton, or PushButton. A LinkButton will show as a hyperlink, while a PushButton will display as a standard HTML button.

    It is challenging to use an image as a button in a data grid. Avoid image buttons.

    Solution: Choose one of the LinkButton or PushButton types and create CSS to style the button.
     
  • Header Row
    The header row contains the header text for each column. Create a specific CSS class to format the header row text, background color, text alignment, etc.
     
  • Alternating Item CSS
    Create a specific CSS class to set the background color of alternating rows.
     
  • Error Messages
    Error messages will be dynamically displayed under the input element. These error messages may cause the data grid table to expand horizontally or vertically. Please be aware of this behavior.
     

Design - Master Template

We use the ASP.NET master page (template) capability to ensure all web pages in a web application have a consistent layout. 

We will create a master page and includes the header, navigation panel, footer, and define a "content well" for content specific to each page. Then we will create sub-pages and apply the master template to each sub-page. ASP.NET will combine the master page HTML with the sub-page HTML and send the combined HTML to the browser. The user sees the same header, navigation panel, and footer in the same location on all pages.

Please keep these suggestions in mind when designing:

  • Consistent Design
    Please keep the design consistent across as many pages as possible.

HTML Templates

Please produce an HTML template for each unique page in the project. 

Testing

Please test the HTML templates as specified in the project requirements in these environments:

  • Browsers
  • Browser versions
  • Browser fixes (if required by design).

Deliverables

Please supply these items:

  • Image Files
    All image files required for the project. 
     
  • HTML Templates
    The HTML template files.
     
  • Design Guide
    A design guide listing the design styles and guidelines for integrating the design into the web application.


    • Browser Fixes
      Describe any browser issues that might be encountered with the CSS or images.

      List browsers and browser versions with the problem.

      Provide a solution to fix the problem, or a link to a web page which contains a solution to the problem.

      For example, IE6 does not correctly display the transparent area of PNG images. Provide a link to the JavaScript to fix the problem.
       
    • List of Files
      Supply a list of files and a short description of each file.
       
    • Special Instructions\Information
      Describe any special instructions\information the web developer should know to integrate the graphic design into the web application.
       
  • CSS Stylesheets
    The CSS stylesheets containing all CSS classes.
     
  • Design Files
    The Photoshop (PSD), or other graphic design files.
     
  • Screenshots of design

Naming Convention

A good naming convention helps us to easily and quickly locate and understand the purpose of each graphic asset.

We prefer you name each graphic item using the naming convention described in the section. However, if you give descriptive names to each element that will go a long way to helping us. 

File Names:

  • Project Name
    The first part is the project name.
     
  • Group Name
    The second part identifies a group of related items.
     
  • Item Name
    The third part identifies the specific item.
     
  • State Name
    Use as needed.
    Example: Use "Off" for unselected tab items, use On for selected tab items.

Examples:

  • Planet_Button_Edit.gif
  • Planet_Button_Cancel.gif
  • Planet_Icon_Jupiter.gif
  • Planet_Icon_Saturn.gif
  • Planet_Logo_Small.gif
  • Planet_Logo_Large.gif
  • Planet_Menu_ContactUs_Off.gif
  • Planet_Menu_ContactUs_Off.gif

CSS Class Name:

Similar to File Names but leave off the leading Project Name.

Examples:

  • Footer
  • FooterBackground
  • GridTable
  • GridHeaderRow