Setting up an internet site need not cost the earth. Andrew Bond charts the development of the new web site of the International Society of Soil Mechanics & Geotechnical Engineering.
The International Society of Soil Mechanics & Geotechnical Engineering (ISSMGE) is the world's leading professional society for geotechnical engineers, promoting the advancement and dissemination of knowledge in the field of geotechnics and its engineering and environmental applications. To improve communication between the geographically spread members of the Society, the ISSMGE commissioned a new web site (www.issmge.org) that could:
be easily and speedily accessed from anywhere in the world;
be updated regularly with topical information about the Society's activities; and
not cost an arm and a leg to produce.
This article describes the design of the web site and highlights its key features and benefits.
About the ISSMGE
The ISSMGE and its affiliated societies organise a wide range of conferences on all aspects of soil mechanics and geotechnical engineering. There are over 50 conferences planned over the next four years, covering topics as diverse as foundations for major bridges; engineering geology, hydrogeology, and natural disasters; and geotechnics for high water content materials.
The ISSMGE has 71 member societies representing 16,000 individual members worldwide, including practising engineers, teachers, researchers, equipment designers and manufacturers. There are 10 member societies in Africa, 16 in Asia, two in Australasia, 30 in Europe, three in North America and 10 in South America.
The ISSMGE's 30 technical committees (Table 1) cover all aspects of geotechnics, including instrumentation for geotechnical monitoring, deformation of earth materials, landslides and indurated soils and soft rocks.
Designing the site's structure
For a web site to serve its function well, its structure must reflect the natural divisions in the information it carries. The previous ISSMGE site (now withdrawn) attempted to do this using a traditional hierarchical directory structure (Figure 1). Although this structure is easy to create and maintain, it makes navigating the site rather awkward and leaves visitors with no clear image of the site's purpose or content.
Looking afresh at the what the ISSMGE does, it is obvious that two activities dominate: the organisation of conferences and the work of its technical committees. Added to that, there is a need to record the activities of the Society (its 'news'), carry details of its member societies and set out its aims and constitution. To accommodate these elements, I chose to arrange the web site as a ring of interconnected mini-webs, as shown in Figure 2.
Each of the mini-webs has been designed with a structure appropriate to its content. Thus Regions and Technical Committees simply spread out as a series of spokes (each page independent of the others), whereas the News and The Society are true spider's webs (each page connected to all the others).
A visitor to the site can reach any of the mini-webs by clicking on an icon on the Home page (Figure 3). Every page in the site is accessible within three or four clicks of the mouse.
Making a site easily navigable is a webmaster's key challenge. The ISSMGE site employs two main devices:
The ISSMGE logo in the top left-hand corner takes the visitor back to the home page with one click of the mouse
The secondary icon in the top right-hand corner (Figures 4, 5 and 6) takes the visitor back to the home page of the corresponding mini-web
In addition, subsidiary pages within each web are accessible via the dynamic menu that appears in the grey sidebar on each page (Figures 5 and 6).
'Look and feel'
It is important when designing a web site to maintain a consistent 'look and feel' throughout and to clearly 'brand' the site so that visitors know where they are. The obvious motif to use for the International Society's site was its oval logo. Unfortunately, the official version of this logo was not designed for the World Wide Web and tends to go unnoticed when placed alongside more vibrant images. To remedy this, I decided to embed the logo into the other screen furniture, in particular the (maroon) horizontal banner and the (grey) vertical sidebar. Making the logo a constant feature across the site and using it as a hyperlink to the site's home page reinforces its branding effect.
To make the site inviting to visitors, I chose an informal style throughout. The headline font is Comic Sans MS 14pt and body text is set in Verdana 10pt. The latter was designed especially for the Web because it is eminently readable at common screen resolutions. Both fonts are part of Microsoft's set of core web fonts and are supplied with Internet Explorer 3 (and later) and Windows 98. If you don't already possess them on your computer, you can download them free of charge from www.microsoft.com/OpenType/fonts/webcore.htm. The banner colour (maroon) is R204/G51/B51 and the sidebar colour (dark grey) R82/G82/B82. Both colours are Web-safe.
The clip-art images used for the mini-web icons were taken from freely available sources and then retouched in the site's colours (maroon) using Corel PhotoPaint 7.
Regional society maps
The quickest way to lead visitors to information about the ISSMGE's regional societies is to present them with progressively more detailed maps, which are hyper-linked together (Figure 4).
The maps originated as a vector drawings (taken from Visio 5 Professional Edition) which showed the national boundaries within each region. I added colour to the maps in Visio and then saved the vector images in raster format as uncompressed GIF files. Then, using PhotoPaint, I cropped and resampled each map to obtain an image 300 pixels wide at 81 dots per inch resolution. To ensure the maps would not suffer from palette flash (which can cause them to appear 'oily'), I converted them to 8-bit format using PhotoPaint's browser-safe palette for Internet Explorer. Finally, I saved each map as a compressed/interleaved GIF with transparency colour white. The size of the largest file thus produced is 9172 bytes, an acceptably small file to download, even on the slowest systems.
I inserted each map on its corresponding page and then added polygonal hot-spots with hyperlinks to text lower down each page. The final image enables users to click on a country and be taken directly to information about the ISSMGE's regional society in that country, including links to the regional society's own web site (if one exists).
By date, by venue, by subject
The ISSMGE's web site currently contains summary details of 54 conferences relating to geotechnical engineering. Visitors to the site need to be able to locate a particular conference by:
Date (1998, 1999, 2000, 2001, 2002)
Venue (Africa, Asia, Australasia, Europe, North America and South America)
Theme (eg deep foundations, earthquake geotechnical engineering, geosynthetics and earth reinforcement, environmental geotechnics, etc)
A typical page for a listed conference is shown in Figure 5. It includes details of the conference's aims, date, venue, topics, when abstracts and papers are due, languages, and contact details for the organisers. If the conference has a dedicated web site of its own (as does this month's forthcoming European conference in Amsterdam), then a link to that web site is included.
Keeping the site topical
The success or failure of a web site depends to a large degree on how topical is the information it carries. Webmasters want visitors to their sites to return regularly and therefore strive to add new and interesting articles as frequently as possible. The News page serves this function on the ISSMGE's web site. It carries information and news from around the world on the activities of the ISSMGE's affiliated societies, technical committees, and key events.
The section on the society itself is still under construction, but will in the future contain information about the society's aims, corporate members, and short biographies of key personnel (see, for example, Figure 6).
Visitors to the ISSMGE's web site can submit information to the webmaster (me) using a form that can be accessed via any of the 'Post-It' notes that are strategically placed around the site (see the bottom of the Regions page on Figure 4).
Building the site
The site was built using NetObjects Fusion 4, a professional web site design tool available from www.netobjects.com. I prefer this program to Microsoft FrontPage (www.microsoft.com/frontpage), owing to its strong support for the management of large and complicated web sites.
Reaction to the web site
The ISSMGE's new web site contains approximately 200 pages of information, which will be updated at monthly intervals. Visitors to the site so far have been very complimentary about the site's operation and appearance and several people have commented that this will be a valuable resource for geotechnical engineers. I commend the site to you.
Andrew Bond is managing director of Geocentrix (www.geocentrix.co.uk), a new company specialising in the development of geotechnical software and web site design and hosting. His e-mail address is email@example.com.