Site guide

Site structure

The site is structured in 7 main sections:
  • The project
    An introduction to the how and why of the Utility System project;
  • Innovations
    The innovations and fundamental characteristics of the Utility system;
  • Elements
    A presentation of the main elements that make up the system, each accompanied by photographic examples of their applications in various Scavolini kitchens;
  • Choice and use 
    Simple tips on choosing and using elements in the Utility system;
  • Niguarda Hospital
    The construction of the kitchen space for the new Spinal Unit at Niguarda Ca' Granda Hospital in Milan;
  • About Scavolini
    An introduction to the company;
  • Scavolini, socially
    Awareness of and commitment to its surroundings and to social-cultural topics.

Structure of pages

The typical structure of the site pages, which is the same for all three types of documents illustrated further, is as follows:

Heading

The heading, which can be skipped by using the TAB key, comprises the following elements:

  • SCAVOLINI logo;
  • section containing meta-navigation links  (Home Page, accessibility, site guide, customise the view and site map).

Body of the document

The part relating to the body of the document essentially comprises two sections:

  • "you are here:" section 
    This section, which starts with the text "you are here:" contains all those elements that are useful to providing a context for the document in the site and thus allow easier navigation for users; it in turn essentially comprises two elements:
    • Path- Comprising the sequence of all those links, each separated by a >, which allow the user to navigate easily around the site (to trace back their steps or to retrieve documents concerning the same section as the one currently being examined);
    • Document title - Comprising the name of the section or of the document the user is examining; considering the importance of this element for the site navigation and content indexing, it has been implemented using a  tag H1.
  • Contents section - The section intended to host the document contents of the site.

Menu bar

The menu bar is visibly located to the left of the contents section. It contains the list of links to the 7 sections of the site.

Foot of page

Placed to delimit the end of the documents viewed, the foot of page section contains four elements:

  • link: "Back to top";
  • link to the Websolute srl website the company in charge of the technical creation of the site;
  • the e-mail address to send any questions, comments and suggestions regarding accessibility and usability to.
  • links to the W3C validators relating to  XHTML, to CSS and to WAI-AAA.;

Types of pages

As mentioned earlier, the site essentially comprises three typical pages which, compared to the structure of the pages described above, differ from one another only in the contents section; the following list describes the three types of page and the elements of the contents section which distinguish them:

  • Home page
    The home page of the site is split into three sections which preview contents that are developed in more detail in the specific dedicated sections of the site:
    • Utility System
      containing a brief introduction to the project;
    • About SCAVOLINI
      containing a short introduction to Scavolini as a company;
    • SCAVOLINI, socially
      containing a short introduction to the social-cultural activities conducted by the company.
  • Section pages
    The pages of each section are document pages; the contents section is therefore entirely dedicated to the presentation of these documents essentially comprise texts, accompanied in some cases by photographs and drawings.
  • Pages of the "elements" section 
    This is the only section that contains sub-sections, each of which illustrating an element of the Utility system:
    • The first page is a contents page and lists the links to the related sub-sections; this type of link can be recognised by its position (situated immediately beneath the path section) and by the TITLE associated to the link, which starts with the words "Go to the section on..."
    • Each sub-section consists of a document page illustrating an element of the system. On these pages, the contents section is split into two columns: the one to the left presents these elements by means of descriptive text and a photo example of its application to a Scavolini kitchen model; the column on the right contains links to view images of details; this type of link can also be recognised by its position (in fact, in the column on the right) and by the TITLE associated to the link, which starts with the words "View detail of..."

Presentation of pages

The site pages, which are essentially text-based, are presented using style sheets. With browsers that do not support style sheets or that support them incompletely, the decorative elements (implemented as background images) are not visible. The page contents are nonetheless legible, both whether the browser does not support style sheets as well as if the latter are disabled. The size of the characters was selected using the related font sizes, in order to enable users to select their favourite size, exploiting dedicated features of  graphic browsers. Visualisation is also further customisable using the dedicated page accessible from the heading menu (both in terms of text-background colour contrast and font size).

Accessibility

This website was developed according to the principles of accessibility for disabled users, specifically following the provisions set out in the WCAG 1.0 of the WAI; the following paragraphs illustrate some of the features implemented.

Link

All links were created using textual elements; some of these elements are shown, using style sheets, in graphic form; the other links can be recognised by the highlighting that appears when the cursor hovers over them. All links have been attributed a TITLE, which contains a significant description of the destination of the link; this description, for those links leading outside the site, end with the words "...[link to external site]".

Images

All images have been allocated the ALT attribute, which describes the contents in summary form; the insertion of purely decorative images has been avoided. 
For more complex images, the LONGDESC attribute, also known as a D-LINK, or descriptive link, may be present. The latter is created with a capital D placed immediately after the image it refers to, and it is a link to a file in which the image is described in great detail.

Tables

The use of tables has been limited to only those cases where these elements perform the function for which they were conceived: the presentation of data in a structured way; we therefore avoided using tables as a tool for the definition of the page layout . When tables have been used, they are always accompanied by all those features (SUMMARY, CAPTION, TH and definition of the direction of reading) necessary to make contents accessible to disabled users.

Texts

In order to offer the best possible support to speech synthesis browsers too, the following have been defined within each page:

  • the main language of the document;
  • the language relating to specific foreign terms.

Special focus was also placed on indicating, using dedicated tags, the meaning of any abbreviations and acronyms used throughout the text.

Standard conformity

The site pages, as can easily be verified thanks to the presence of a dedicated link, placed at the bottom right-hand corner of each page, have been written in conformity with XHTML 1.0 Strict language standards.

Valid XHTML 1.0!

The definition of the stylistic attributes of the site has been carried out in compliance with CSS 2 specifications; conformity of the style sheet can be verified using the link below.

Valid CSS!

In the majority of pages, we have striven to achieve accessibility level AAA (priority 3) of WCAG 1.0.