This document contains the technical specification to be followed on all Expatriate Payroll web pages.  It also contains suggestions labeled as [optional].

This document will be updated on a regular basis, and all developers of Expatriate Payroll pages are responsible for keeping their pages in compliance with the current standards.

Minimal Expatriate Payroll Web Document

file at /design/template.html

NOTE:  The template prescribes a table with a fixed height of 295 pixels.  This is not a requirement, but the main portion of your page must appear in the first 295 pixels for effective presentation.

<META> tags as shown above should be used to document pages for intranet search engine cataloging.  HTML Versions and Layout HTML Standard:  HTML 4.0 Transitional (allows deprecated HTML 3.2 elements) is currently the version for Motorola HTML.   Tables are allowed and encouraged for spacing and layout.  Use of HTML 4.0 Cascading Style Sheets for formatting of pages is strongly encouraged due to Motorola presentation requirements.

Due to the often isolated and limited internet/intranet resources of our expatriates, the following are not allowed:

• Frames
• Java
• Netscape or Microsoft IE specific tags
• Sounds that play when pages are loaded
• <h1> - use a maximum of <h2>
• <center> - use the proper form <container-tag align="center"> - except for tables, which cannot be centered with align="center"

All HTML should be spaced and indented as in the minimal HTML document.  Container tags should be spaced in 2 spaces from the outer tags.  All end container tags must match up vertically with the opening tag.  Any continued line should also be spaced in so that it is clearly a continuance of the above line.  [Optional] Use all uppercase or all lowercase for all HTML tags.  (Note that future versions of the standard may require uppercase for HTML tags.)

All pages should be designed to fit within a 600 pixel wide space, no image, page, or table should ever be wider then that.  All pages must be fully usable in Microsoft Internet Explorer.  [Optional] All pages should be fully usable in Lynx.

Optional tags, "center", "left" etc. must be in double quotes or will not function correctly on many browsers. 

All pages should be tested in the following configurations, and must function 100% correctly:

• Netscape 3.0 - 640x480 256 colors full screen
• PC - MS Internet Explorer 3.0 - 640x480, 256 colors, full screen
• PC - Netscape or IE, 1024x768, 256+ colors, full screen
• Mac - Netscape 3.0/MS Internet Explorer 4.0 - any resolutions Support for 2.0 or earlier versions of graphical browsers is encouraged but not required.

Images, Colors, Backgrounds, and Logos

Images: GIF89a or JPEG should be used for all images.  (Line art = GIF89a;   Photos = JPEG) 

All images must have height/width tags.  Height/width tags must match the actual dimensions of the image; they cannot be used to resize images (with the exception of transparent gif's used specifically as space holders or margins). 

ALT tags are required.  This will ensure the images have meaning for audio browsers and is necessary for compliance with the Americans with Disabilities Act. Example image: <img src="images/image.gif" alt="an image" width=60 height=20>

Image size is a VERY critical factor in loading times, JPEG compression should be set as high as possible without serious image loss.  Remember that for every 1kB of data, the user will have about one second of download time.  No page should ever take more then 60 seconds to download, hence no page should be larger then 60kB in HTML + images.   Again, no image should be wider then 600 pixels.

For image maps both client and server side mapping should be used.  Note that the use of image maps is discouraged due the worldwide nature of our audience.  GIF's should be reduced to minimal colors and put into the "Netscape-216 Color Cube."   This palette is widely available, and can be obtained from the Webmaster.   With the exception of solid color images used for spacing or as horizontal or vertical lines, do not use height= or width= modifiers in your <img> tag to set the size of images.  All images should be created in the size intended for display.   The <img> tag should always include height= and width= modifiers reflecting the actual size of the image as this helps speed up page loading time.

All images should be placed in an images/ subdirectory so that they are not mixed with HTML files.

Logos and Buttons:  The Motorola Logo (or any variation thereof) should not be used as a background image.  If you have questions regarding the appropriate use of the Motorola Logos, please contact the Webmaster.  Buttons should be designed with readability in mind, as the text is usually small.  Using gradients or textures buttons generally leaves them unreadable, and also increases their size.

Colors and Backgrounds:  Only colors with RGB multiples of #33 [51] are valid (#00 [0], #33 [51], #66 [102] , #99 [153], #CC [204], #FF [255]).   This means #66FF66 is valid, and #406080 is not.  All body text must appear legibly over background images/colors when in black.  This means that dark background colors and/or images are not allowed.  Background image should always be " Mapworld.jpg " unless spefically approved (included in style sheet).  Other types or background images interfere with the readability of text and are not allowed.    Requests to use other background images must be submitted to the Webmaster with need for use and a sample page.  All background images are subject to approval by the Webmaster and Standards Committee and may be removed without notice.

Design Consistency: All areas should be of a consistent design.   This means that all pages should have the same "feel" to them, the same image scheme, fonts, and background image (if appropriate).  Inconsistency causes confusion to the user as to when they are entering or leaving a site. 

Additional Documentation:  The following additional standards documents are part of the Expatriate Payroll Web standards:

Website Standards Expatriate Payroll Web Page Template
Expatriate Payroll Cascading Style Sheet
Expatriate Payroll Web Site Main Menu
Expatriate Payroll Images

Back to Top