Multiple Writing Strategies for Hardcopy, and
For Creating Web-Based E-Books and Articles
By David Alderoty © 2014
Chapter 3) Aesthetics, Readability, and Layout of Complex
E‑Books and Articles in HTML and PDF Formats
2,175 Words
To contact the author left click for a
website communication form, or use
E-mail: David@TechForText.com
If you want to go to the previous chapter,
left click on the link below
www.TechForText.com/MW/Chapter-2/PDF.pdf
If you want to go to the table of contents
of this chapter, left click on these words
Aesthetics and Readability in Relation to Graphics, Background and Font Colors
What are the Best Font and Background Colors?
The ideal color combination for readability is black fonts on a white background. This applies to the web-based format as well as hardcopy. However, other color combinations can be used, providing there is a great deal of contrast between the fonts and background colors. Using color combinations other than black and white is quite feasible with HTML and PDF formats. Unique color combinations can be useful for creating an aesthetically pleasing or artistic effect, or for emphasizing portions of the text. Some of these colors may be especially useful for cover pages or opening-pages. See the following three examples:
Dark Backgrounds with Lightly Colored Fonts
In most documents and webpages, the text is dark colored, and the background is light-colored. However, it is possible to create readable text by using font colors that are light, and background colors that are dark. This can produce an interesting and attractive effect, and it can be useful for emphasizing portions of the text, as well as creating interesting title pages. It may also be useful for short articles in the HTML or PDF formats.
However, it is not advisable to create lengthy documents with these color combinations. Some readers may be annoyed with the nontraditional colors, especially if the document is lengthy. Dark Backgrounds with light fonts should not be used for HTML or PDF documents that are going to be printed, because it will consume a huge amount of ink.
Below there are three examples of dark backgrounds with light font colors.
Backgrounds with Rectangular Borders
Web-based e‑books and articles can be created with rectangular-enclosures that contain the text. The rectangles can be white, or any other color that produces a good contrast with the font color. With this technique, areas outside of the rectangles can be any aesthetically pleasing color. This is the ideal, especially for the HTML format. To illustrate this design concept, I created the following ten examples.
Avoid small or fancy fonts, which might interfere with readability, especially in the web-based format. Sometimes fancy fonts can be used as headings without causing difficulties. If the font is not likely to be on most computers, they should be converted to a graphics format.
Avoid using grey or light color fonts, on a background that is white or has a light color. Do not place the main text on backgrounds that have coarse textures. Backgrounds of this nature can sometimes be used successfully as cover pages or opening pages, if the introductory text is only a couple of lines, and it is presented in extra-large fonts.
Avoid decorative graphics that are distracting and irrelevant to the text. The only graphics that should be placed in e-books and articles are illustrations or photographs that relate directly to the text. However, decorative graphics can sometimes be used in title pages, without causing difficulties.
The Utility and Problems of HTML Versus PDF
Layout of Text, and Related Problems
Another important concept is the layout of the text, which can sometimes be a challenge with the HTML format. The problem with HTML is it is viewed through a number of brands of web browsers, and computer screens at various resolutions. As a result, fonts, text layout, and graphics, can be displayed on the users computers in a variety of ways, some of which maybe unattractive. This can involve changes in the overall layout of the document, which is never a problem with the PDF format. For example, with HTML, a heading that neatly fits the writer’s computer screen may be problematic when viewed on the user’s screen. The following two screen shots illustrate this difficulty.
Dell ST2010, at a screen
resolution of 1900 by 900 pixels,
displaying an HTML webpage.
Hitachi 814, at a screen
resolution of 1024 x 768 pixels,
displaying the same HTML webpage,
as was shown in the above screenshot.
I used Internet Explorer 9, 64 bit
version for both of the screenshots
The Dell screen displayed the heading on one line. The Hitachi screen was set at a much lower resolution for this demonstration, and it displayed the heading on two lines. I repeated this experiment with the PDF format, using Adobe Reader X, and the results were very different, as can be seen from the following screenshots.
Dell ST2010, at a screen
resolution of 1900 by 900 pixels,
displaying a PDF document.
Adobe Reader X, automatically
displayed this document at 58.2%.
Hitachi 814, at a screen
resolution of 1024 x 768 pixels,
displaying the same PDF document,
as was shown in the above screenshot.
Adobe Reader X, automatically
displayed this document at 37%.
As can be seen from the screenshots above, the Dell and Hitachi screens displayed the same PDF document, with different levels of magnification. (Dell 58.2%, and Hitachi 37%) This provides the functionality needed display the heading on one line, without any change in text layout. To demonstrate this functionality, I repeated the experiment with the Hitachi at an even lower resolution, which should result in a magnification that is less than 37%.
Hitachi 814, at a screen
resolution of 800 x 600 pixels,
displaying the same PDF document,
as was shown in the above screenshot.
Adobe Reader X, automatically
displayed this document at 28.7%.
The above was automatically displayed by Adobe reader X. at 28.7%, without causing any changes in text layout. I manually changed this setting to 50%, and took another screenshot, which is presented below.
Not all of the text could be displayed, at 50% magnification, with the low-resolution setting of 800 x 600 pixels. However, the layout of the text was not changed, and all of the text could be seen by scrolling to the right. I scroll to the center of the heading, for the above screenshot.
The screenshots shown above demonstrates one of the major disadvantages of HTML, and the primary advantage of the PDF format. HTML webpages can be displayed and printed in unpredictable ways. PDF documents are displayed and printed precisely as they were structured on the writer's computer screen.
In HTML format, you can have an attractive layout of text and graphics for all screen resolutions, and all web browsers, by using the five techniques presented in the following paragraphs. NOTE: If you create simple webpages, with little text, the following techniques are probably unnecessary. However, if you are creating e-books or lengthy articles in the HTML format, then the following steps are necessary, to obtain an optimum layout and appearance. This is especially the case, if you work contains graphics and/or mathematical notation.
TECHNIQUE 1: Examine your work while you are creating it, with low and high screen resolutions. For the low screen resolution, use 1024 x 768 pixels, or 800 x 600 pixels. For the high screen resolution, use 1900 by 900 pixels. Ideally, it is best to have two computer screens operating simultaneously at the resolutions presented above.
TECHNIQUE 2: Examine your work while you are creating it with at least two or three commonly used web browsers, such as Internet Explorer, Firefox, Google chrome, or Opera.
TECHNIQUE 3: Avoid using excessively large graphics. All graphics should be small enough to fit on a screen with a resolution of 1024 x 768 pixels. (The ideal is 800 x 600 pixels.)
TECHNIQUE 4: Create headings that are not excessively long, from left to right. However, if your heading is longer than optimal, it might be broken into two sections, and displayed on two lines, when viewed by a user with a low-resolution screen. By using non-breaking spaces in your heading, you can designate the point where the break will take place. This is clearly illustrated with the following example:
THIS HEADING IS AN EXAMPLE OF A RELATIVELY LONG HEADING
The above heading will break in half as shown below, if it is too long for the computer screen. This is because I connected all the words together with non‑breaking spaces, except for the junction between EXAMPLE and OF. As a result, the heading can only break at this junction, which can be seen below:
The above heading is in a graphics format. As a result, you can see the non‑breaking spaces, which are the small circles between the words. Normally these circles cannot be seen in the HTML or PDF formats.
TECHNIQUE 5: When you do not want the text of HTML webpages, to be rearranged by the user's computer screen, convert it to a graphics format. This will prevent computers or browsers from rearranging your text. This technique can be used to convert a single line of text to over a dozen paragraphs, to graphics. However, the resulting graphics should fit on a computer screen with a resolution of 1024 x 768 pixels, (or IDEALLY of 800 x 600 pixels). The height of the graphics ideally should not be more than three quarters of the height of the computer screen.
You should not convert more than a few pages of text to graphics, because the file size of the webpage will be excessively large. Very large files can be problematic and the resulting webpage will open very slowly.
You can keep the file size down, by converting the text to a compact black-and-white format, without using an excessively high resolution. If you are using Microsoft Word, or similar software, you can convert text to a compact graphic format, with the cut and paste functions. This involves pasting the text as “Picture (Enhanced Metafile)”.
Another useful advantage of this format, is when text is pasted as “Picture (Enhanced Metafile)” you can easily adjust the size of the graphic, put a frame around it, and color it. See the following examples:
Horizontal or Vertical Layout of HTML webpages
The layout of webpages are almost always horizontal, which requires scrolling down or up if the webpage is more than one screen length and height. However, this is NOT the only possible layout of an HTML webpage. That is webpages can be created in a vertical configuration, which requires scrolling from left to right, and vice versa. A webpage designed in this way is wider than the computer screen.
To demonstrate the above, I am providing a link at the end of this section to access a website that I created about four years ago, which is over 8 feet wide, as measured from left to right. This is an interesting design concept, which might have aesthetic or practical utility, for presenting unusual web-based material. For example, the eight-foot wide website I created was for an experimental calculation device. This device had to be over 7 feet long as measured from left to right, because it performs over 45 trigonometric calculations simultaneously. However, for most purposes I prefer the conventional webpage design, where the scrolling is down, or up.
See the following example of an 8-foot wide website.
www.TechForText.com/Trig1 This website contains the Multiple Trigonometric Calculator. This device carries out a set of calculations, when the user enters an angle and height, for a right triangle, and left clicks with the mouse.
The Utility of PDF Versus HTML
The Problems of HTML can be Eliminated by Using PDF
Most of the problems of HTML that were discussed above can be eliminated by creating web-based material in the PDF format. However, HTML has some advantages over PDF, such as it opens directly in a web browser, with little or no delay. With HTML, you can embed videos, calculation devices, and other applications directly in a webpage, without using special software.
Advantages of PDF for E-Books and Articles
PDF is a very useful format, which can be distributed through the web, by e-mail, or on CDs or DVDs. With PDF to text is not rearranged by the user’s computer, and the documents are usually printer friendly. The size of PDF documents is automatically adjusted to fit the resolution and size of the computer screen. This was demonstrated with the Adobe Reader X, and screen shots earlier in this chapter.
It is relatively easy to create PDF documents with graphics, mathematical notation, and hyperlinks. Embedding videos and software applications in PDF documents is not practical, based on current technology. However, you can easily create hyperlinks to videos and software applications in PDF documents. Hyperlinks might not look as attractive or as sophisticated as an embedded device, but it functions just as well.
Dual Formats for Complex E-Books and Articles
When creating complex e-books and articles in the HTML format, it is advisable to create the same material in PDF. This will give your readers a choice. It is probably easier for most people to read a PDF document. This is because it is easy to adjust the size of the document on the viewing screen, and PDF can usually be printed with little difficulty.
If you want more information, alternative perspectives or explanations, see the following websites and videos from other authors. To access this material left click on the blue links, or the URLs presented below.
If a link fails, enter the indicated search phrase, or the *words that are displayed from the website, into the search engine presented on the left of each entry. If there are many words displayed from the website, select a few of the words that seem most useful for a search phrase. Then, carry out a conventional web-based search.
*Note the words from the website are indicated with Words on website: If you examine the following entries all of the above will be clarified.
Webpages from other Authors, to Support and Supplement The Concepts and other Material in Chapter 3
www.Google.com Search phrase: HTML This is a Google search page, which indicates 5,810,000,000 results.
www.Google.com Words on website: PDF Portable Document Format
URL is: www.alliancegroup.co.uk/pdf.htm
www.Google.com Words on website: HTML4 and HTML5 Tutorial URL is: www.w3schools.com/html
www.Google.com Words on website: HTML Beginner Tutorial URL is: http://htmldog.com/guides/html/beginner
www.Google.com Words on website: Working with Ranges in Your HTML5 Web Pages URL is: www.htmlgoodies.com
www.Google.com Words on website: Progress Events is a W3C Recommendation URL is: www.w3.org
www.Google.com Words on website: News and Opinions about HTML URL is: www.w3.org/html
Videos from other Authors, to Support and Supplement The Concepts and other Material in Chapter 3
When you left click on a link for a video, a webpage will open, and the video will start automatically in most cases. The webpage that opens with the video will usually have 10 or more RELEVANT videos. If the video does not start automatically, and the webpage opens, left click on the link provided by the author of the video. This link is usually in the center of the screen.
www.Video.Google.com Words on website: How to illustrate documents with Windows Metafiles, URL is: http://youtu.be/-J4_QLZ-6PA
www.YouTube.com Words on website: EMF (Enhanced Metafile) format for Microsoft Clipart. Benefits and drawbacks,URL is: http://youtu.be/VrXibWC8hbA
www.YouTube.com Words on website: Create Clipart Using MS Word, URL is: http://youtu.be/-Heg9P2DY3M
www.YouTube.com Words on website: Converting A Microsoft Word Document To Adobe PDF Format, URL is: http://youtu.be/zerocdgGB2g
www.YouTube.com Words on website: Microsoft Word 2010: Saving a document in PDF format, URL is: http://youtu.be/nTaO3W7Hm7Q
www.Video.Google.com Words on website: Microsoft® Word 2010: How to convert documents into HTML URL is: http://youtu.be/ZKSh2-ic0Jo
www.Video.Google.com Words on website: Using Microsoft Word to Build Websites, URL is: http://youtu.be/M5ZG7-BlG6Q
To go to the first page of this
e-book left click on these words.
Below is the hyperlink table of contents of this chapter. If you left click on a section, or subsection, it will appear on your computer screen. Note the chapter heading, the yellow highlighted sections, and the blue subheadings are all active links.
Aesthetics and Readability in Relation to Graphics, Background and Font Colors
What are the Best Font and Background Colors?
Dark Backgrounds with Lightly Colored Fonts
Backgrounds with Rectangular Borders
The Utility and Problems of HTML Versus PDF
Layout of Text, and Related Problems
Horizontal or Vertical Layout of HTML webpages
The Utility of PDF Versus HTML
The Problems of HTML can be Eliminated by Using PDF
Advantages of PDF for E-Books and Articles
Dual Formats for Complex E-Books and Articles
Webpages from other Authors, to Support and Supplement The Concepts and other Material in Chapter 3
Videos from other Authors, to Support and Supplement The Concepts and other Material in Chapter 3
To go to the first page of this
e-book left click on these words.
If you want to go to the next chapter
left click on the link below
www.TechForText.com/MW/Chapter-4/PDF.pdf
If you want to see a list of all
the chapters in this e-book go to