Handbook Design

The motivations and resources behind the design used for the Course Handbook for Introduction to Speech Science.

Responsive web design

Web pages are no longer just viewed on large screens attached to desktop computers or laptops. More and more users are accessing the web through their tablets and smartphones. However the traditional web page layouts, with multiple-columns, side menus and large images do not work comfortably on small screens and with touch input. The challenge is to design web pages that work well on all screen types and with mouse or touch input. This is called Responsive web design.

For the course handbook, a responsive design has been developed in which the layout of the pages changes according to screen size. The design is based on the Skeleton grid layout. To this we have added the typical UCL header and a printer-friendly layout in which the navigational elements are removed. Try this out now by changing the width of the browser window or by printing the page.

Phonetic symbols

Using web pages for the course handbook allows a portable means for displaying phonetic symbols. We can avoid the common problems with Word or PDF documents containing phonetic symbols where the user may not have the correct font. In the course handbook we use the font-face styling command to provide access to the Doulos SIL font to all browsers.

/ hɪə ɑː sʌm ɪɡzɑːmpəl fənetɪk kærəktəz /.

Editing web pages with phonetic characters is made easier through the use of a text editor that supports Unicode format text files (we use RJ-TextEd), and with the UCL Unicode Phonetic Keyboard. These web pages are stored in UTF8 character coding.

Multimedia

Another advantage of a web format over other document formats is that web browsers now have quite good native support for embedded audio or video.

Here is an example of an embedded audio clip:

Here is an example of an embedded video clip (served from YouTube):

Interactivity

Finally, the newest web browsers, such as Chrome and Safari support the new Web audio API which allows web applications to be written that manipulate audio signals directly. This allows new web-based applications for the recording, display, processing and replay of speech signals.

An example of what is now possible can be seen in the Web ESystem tool for learning signals and systems theory.

Word count: . Last modified: 13:09 03-Jan-2019.