CSS TABLE-LESS DESIGN

The UMARS site has been redesigned completely using cascaded style sheets (CSS) and strict XHTML. It uses no HTML tables [Grah97] to achieve the positioning of its elements. Instead, it uses the cascaded style sheets (CSS) [Andr07], [Bowe07], [Croft06], [Ecch07], [Schen00]. Tables are used only as semantic elements to form table of contents. The design is fixed width, but the fonts can be adjusted in size.

Notice that XHTML requires lower case for all the HTML elements and attribute names because XML is case sensistive. All elelments must have closure tags. All attributes must be quoted.

Scripting in JavaScript [Edwa06], [Good96], [Heil06] has been minimized to improve accessibility (see below)..

Some attempts have also been made to introduce the PHP ( which stands for PHP: The HTML Preprocessor, [Shaf07]) scripting language into this design.

The original design was done in HTML 3.0, then HTML 4.0, and the latest embodiment was done in XHTML 1.0 Transitional, before moving to Strict.

CSS FRAME-LESS DESIGN

Frames are not used in the design as they do not pront well.

Croft06

DESIGN FOR ACCESSIBILITY

The site has also been redesigned with accessibility in mind. Since people who cannot use the mouse cannot use JavaScript driven pull-down menus, the main navigation is done with buttons, not menus, in the left column. Although the column is located on the left, the contents appear before the column is visible to the non-visual browsers -a result not available from a table-based design. Each button displays its semantics automatically, and has an alternative name.

Focus is used for keyboard navigation, particularly in forms.

The CAPTCHA (completely automatic public Turing test to tell computers from human apart) security protection is not used because it is an empidement to accessibility [Edwa07]. It appears an example of passing the responsibility for our problems to users.

POPUP WINDOWS

One of the major challenges in the design of this site was the implementation of links in controlled popup windows, without any reference to inline event handlers. Each link looks as a standard link.

Read more »

LOGO DESIGN

The main logo, the small logo, and the tiny (favicon) UMARS logos have been designed and implemented by W. Kinsner, VE4WK. They are described separately.

MINI PORTAL

The home (entry) page has a small portal to link with the Radio Amateurs of Canada (RAC) and other pertinent organizations, including Industry Canada with its repository of the legal documents related to radio communications. It has also weather and propagation data for calculating long-distance (DX) communications. It also includes QRZ ("who called me") service to find who holds a specific call sign and if a parson is a ham operator.

METADATA

Extensive metadata have been included to describe each page adequately.

RESET

The tags of each page are reset, using a modified Faruk Ates reset. The Yahooo User Interface reset is too strict. The Mozilla reset is too extensive.

PRINTING

The pages do not print backgrounds to save ink.

EXTERNAL LINKS

All the links that connect to resources outside this site are displayed in new windows. The easiest way to return to the main UMARS site is to close the external window.

CODING

Coding was done by hand using BBEdit versions 8.26, 8.5.2 and 8.7, running on OS X 10.3.9 and OS X 10.4.8. XHTML syntax was verified in BBEdit. The CSS syntax was verified in CSSEdit 2.6. Minimal JavaScript was also employed in the code.

TESTING

The site has been tested on the folowing browsers:

• Firefox 2.0.0.8 to 2.0.0.11
• Opera 9.24
• Internet Explorer 5.2.3 (Mac) and IE 7
• Safari 2.4