| EN 6960 |
by Samantha Li (used with permission)
In this Sample |
As the Internet has gained worldwide popularity over the past few decades, thousands of books about HTML, which is the backbone of the World Wide Web, are available in the market. Facing extremely keen competition, publishers try very best to get the lion’s share in the market. The popularity of a book is not only determined by its content and writing quality, but also its document design. In this article, I will examine a programming book HTML & JavaScript: Programming Concepts and analyze how effectively the book is designed.
South-Western Educational Publishing, a division of International Publishing, publishes a series of programming books offering beginning, intermediate and advanced courses to meet different needs. In their book, HTML & JavaScript: Programming Concepts, E. Shane Turner and Karl Barksdale introduce basic programming concepts behind the creation of Web pages. The intended audience of this book are beginners who are expected to finish self-paced tutorials in 20+ hours.
HTML & JavaScript: Programming Concepts is divided into two sections, each of which contains three chapters. The first section is devoted to standard HTML. The second section addresses the JavaScript language. The section opener provides a brief overview of each chapter in that section. Each chapter starts with a chapter opener which provides objectives, terms, and an introduction to the chapter content. Five hands-on programming activities in each chapter give concrete examples of how these concepts can be applied to actual Web pages. At the end of each chapter, the chapter review consolidates key concepts presented in the chapter whereas the net project puts the user’s new tools and skills to work by applying them to a Web-based business project. Throughout the text, sidebar features including Net Fact, Netiquette, Net Ethics and Internet Milestone are placed to present supplementary concepts. At the end of the book, a glossary and an index are included.
An attractive front cover can capture readers’ attention and lure them into the body text. The cover designer of HTML & JavaScript: Programming Concepts puts the title about one-third of the way down from the top of the page. The violet title HTML & JAVASCRIPT, in 36 points, is capitalized and the black kicker Programming Concepts, in 24 points, is in italics.
Pictures of a keyboard, monitor and the Earth dominate another two-thirds of the full front cover. The pictures are placed beneath some JavaScript codes with violet background. Through these pictures, the designer intends to tell potential buyers that the book is about programming.
Generally speaking, the title and pictures are appropriately placed since the optical center is usually at the third-eighth down from the top of the page. Therefore, the placement gives a sense of balance to readers. However, the dark colour and ghosting effect of the pictures cause visual hindrances. At a single glance, readers may not be aware of the message conveyed by the pictures even though they are very prominent on this page. If fewer pictures with lighter value of colours are adopted on the front cover, readers can identify the book type more quickly and easily.
The preface appears after the title page and edition notice in HTML & JavaScript: Programming Concepts. The preface consists of two parts. The first part describes special features in the book and the second part is introducing the purpose, audience and organization of the book. The first part is composed of four violet pages and the second part is composed of two white pages.
The colour pages act as navigational aids to users. These four pages are only violet pages in this book, so users can easily locate this part when flicking through the entire book. It is understood that these special features, which may be unique, are selling points of this book. Therefore, the publisher draws the attention of potential users by using costly colour pages and detailed illustrations for this part, hoping that they will like the book and buy it.
The table of contents in HTML & JavaScript: Programming Concepts needs some improvements. The table of contents includes 4 heading levels. Level 1, in orange, shows the two sections in uppercase. Level 2, in violet, shows the six chapters in each section in lowercase. Level 3, in orange again, indicates the subtopics in each chapter in lowercase. Out of 12 headings, six are indented. Level 4, in black, indicates the activities under each subtopic. The heading for the net project at the end of each chapter is shown in lowercase in orange, implying that it belongs to level 3. Users may feel confused when they use the table of contents to locate information. Firstly, the rationale why some headings but not all are indented is not clear. Secondly, at the first sight, black level 4 is more eye-catching than orange level 3. Users’ attention is drawn to the lower heading levels, which usually consist of less important information.
To avoid confusion, the designer should include 3 heading levels only and use darker colours for higher levels and lighter colours for lower levels. Alternatively, two tables of contents are devised to include general and detailed information respectively.
The main typeface used in the body text of HTML & JavaScript: Programming Concepts is 10-point Times New Roman. Besides, italics, bold and capitals are used to emphasize some text. Basically, they are sparingly used and can serve the function of emphasis.
The most sophisticated typeface appears in the section openers, chapter openers, chapter reviews and net projects. The titles are made up of letters, with different background colours, typefaces and font sizes, like ransom notes. Though these colour letters only occur in the titles, they successfully add liveliness and vividness to this mainly black-and-white book.
The layout of the two section openers is different from that of the body text. The title, which looks like a ransom note, runs vertically on the edges of the page. When users flick the book, they can locate the beginning of a new section quickly. Although the table of contents for the following section is placed at the bottom of the page, users easily spot it out, which is separated from the main text by a rule.
In HTML & JavaScript: Programming Concepts, the only two section openers are orange in colour. It is suggested that the second section opener should be in another colour, for example, green. It is easier for users to differentiate one section from another section. The texts belong to that section should be in the same colour as that of the section opener.
In each chapter opener, three elements i.e. objectives, terms and an introduction to chapter content are included. They are placed in three columns and separated from each other by using rules and different typefaces. The uses of rules are typefaces help users identify three different parts on this page easily.
In the section and chapter openers, because of the uniform structure, users are guided through the information effectively. It seems that a page structure can be found in the body text. A brown box at the top corner of the page in which the objectives of the following activity are listed marks the beginning of the body text. Sidebar features, which are in border or shaded boxes, are placed around the body text, but the sizes of the boxes depend on the length of the texts. As a result, the body text or sidebar box may come to the edge of the page, in some cases, just 5 mm left. The margins vary a lot from page to page. It may be explained that the designer needs to insert relevant sidebar features close to the main text.
The designer should not arrange the text at the expense of white space. White space allows readability and gives users a break from the lengthy text. It is suggested that much wider margins are left to make the body text stand out. It is ideal that 25% of the page is devoted to white space. To make the sidebar boxes more prominent, they can be set apart from the body text in the format of hanging.
Headers and footers are useful navigational aids in reading. In this book, the footers are placed at the bottom corner but the chapter titles are printed close to the inside margins of two-page spread. Unless users open the book flat, they may not be aware of the chapter they are reading. It is advisable to place the chapter title in a more prominent position.
In the market, HTML & JavaScript: Programming Concepts competes with thousands of programming books. In terms of the content, this book is abundant. As far as the organization is concerned, this book is good in the sense that it provides step-by-step instructions with a wide range of activities.
Though this book is effective in visual communication, there is still room for improving its visual elements to guide users through the information more effectively. The designer should reconsider the uses of white space and colour. The production cost certainly will be increased if more space and colours are added. But the publisher can use some economical ways to achieve the same purpose. For example, instead of full colour pages, colour edges or borders can help differentiate different sections.
In conclusion, good uses of visual elements in a document help achieve the goal of communication. Otherwise, a good document may be spoilt by poor visual design.
Syllabus | Assignments | Schedule | Resources | Site Map | Home