Home
Products and Services
Customer Support
Delete Cyberbullying
Internet Smarts
Charity Champions
Reading Lounge
Programs
In Your Community
Blogs
For Teachers
For Parents
For Students
Games
En español

Join Us on Facebook


Advanced Search >>        



Sign up for the Power to Learn Educator and Parent newsletters to receive information about our free educational programs, events, and contests.     Go
About Powertolearn.com
Powertolearn.com Powertolearn.com E-mail Login School Calendars School Web Sites

   HomeArticles / Teaching With Technology / Looking Good Online


Teaching with Technology

Teaching with Technology
Current Article
All Articles
About the Author
Q&A
Podcasts
Subscribe to Teachnology Blog Teachnology Blog
Looking Good Online
by Prof. Jim Lengel, Boston University College of Communication (http://www.bu.edu/jlengel and http://www.lengel.net)

As our schools and our society become more connected, we find ourselves communicating less on paper and more on the computer. Students turn in their papers* in digital form, and their teachers read them from the computer screen. Teachers reproduce fewer paper handouts but publish more documents on the Web. New resources for education often appear on the Internet first, and only much later (if at all) on paper. How can we make sure that what we publish online is as useful and easy to read as possible? How do the rules and conventions change when we move from the 8.5" by 11" page to the 1024-pixel computer display? This week's article provides some guidelines for preparing works for publication online.

Readability

Much of the information that teachers and students produce is in text form, destined to be read directly from the computer screen. So we should do all we can to make the text as readable as possible. When preparing documents in Word or PowerPoint or other applications in which you set the format of the text, or if you are preparing style sheets to display text from TXT, XML, or HTML files, considerthese guidelines::

  • Text size: use nothing smaller than 12-point, or HTML size 2, for body text.
  • Line width: body text should be displayed with 10-12 words per line.
  • Alignment: body text should be aligned flush left, ragged right.
  • Word spacing: should be consistent throughout the text.
  • Fonts: use no more than two different fonts on a page. The most readable fonts for the computer display are Verdana (sans-serif) and Georgia (serif).
  • Paragraphs: Separate paragraphs with a blank line. Avoid indenting the first line.
  • Heads and subheads: Set these in a font and style and size to contrast with the body text. Use more of them than you would in a book or article.
  • Text style: Use italic text for book titles, article titles, and foreign words. Use bold for key words that might be in the glossary. Use plain text for all the rest. Never use underline or ALL CAPITALS.
  • Margins: Don’t run the text right up to the edge of the page. Text is more readable with white space surrounding it on all sides.

More details on displaying text in your document can be found in the article Displaying Text, in this series.

Screen Size
Most computer screens are wider than they are tall, as opposed to the way we use paper, taller than it is wide. And the newest displays are wide like the cinema. So we must consider anew how we format our online documents. Think of the computer display more like a television than a piece of paper. In fact, if you take a piece of standard paper, and placeit sideways over your computer screen, you will see immediately the difference. Design your documents for this sideways view.

And not all of your readers will enjoy the same size display. Computer screens are configured in several sizes, measured in pixels. If you create documents that are too big to fit on the screen, you will not serve the needs of your audience. And for Web pages, the screen size is further limited by the space taken up by the edges of the browser window, which are often full of buttons and sliders and bars. Your document must fit within this smaller available window. This table shows the most popular computer screen sizes, the area reamining inside the browser, and the approximate percentage of people using each size. All sizes are in pixels.

Display Size
Usable browser window
% of Users
800 x 600
760 x 450
~40%
1024 x 768
980 x 618
~55%
1280 x 1024
1240 x 874
~5%

So if you want your Web page or diagram or animation or photograph to display well for all users, keep it smaller than 760 by 450 pixels.

Simplicity

Keep documents and graphics as clean and uncluttered as possible. Avoid colored backgrounds, textures, framing, and shading unless it is absolutely necessary to explain the content. Like the first documents out of the laser printers in the early days of desktop publishing, many early Web pages display a perplexing plethora of fonts and features that while easy to create with the new media, are distracting to read. Keep your documents clean and simple. Don't use a visual device or a new font unless without a good excuse.

Word documments

In preparing documents in Microsoft Word, follow the readability guidelines above. In most cases, this will require you to set the margins a bit wider, and the size of the body text a bit larger than the default. Before saving the file, set the View to Page Layout and the Zoom to 100%. Save with a filename that will work on the Web: no spaces, no periods, no accents or special characters.

On most computers, the Word file when downloaded from the Web will open automatically with Word, in it's own window, from which the user may read it or print it. To make a Word document easiest to read within the online environment, set the bottom margin to four inches. This makes the pages shorter, so that all of the text fits on the screen, and the reader can move from page to page with one click, without scrolling. Such a document, however, will waste paper if printed.

PowerPoint

PowerPoint files work best if you keep the layout simple and uncluttered. And if you are publishing your PowerPoint slides from a lecture or a student project, keep in mind that most PowerPoint slide shows that are used for classroom presentations will not be useful to users online, without the narration that goes with each slide. An easy way to add this narration is to type it into the Notes area for each slide. To add notes, choose View -- Normal from the menubar, then enter the notes in the frame at the bottom. Make sure that the document is displayed in the normal view as you save it.
On most computers, the PowerPoint file when downloaded from the Web will open automatically with PowerPoint, in its own window that will size the contents dynamically to fit the student's screen size. So you need not worry about document size.

PDF

When creating Portable Document Format files, first make sure the original follows the readability guidelines described above. PDF works best for files that will be printed on paper by the student. If you are creating PDF files that will be read from the computer display, consider setting the bottom margin to four inches as described above under the guidelines for Word documents. This will allow the reader to page through the document naturally, without scrolling. Test your PDF file from a browser to make sure it is useful and readable on the screen.

Web pages

In creating HTML documents such as Web pages, keep things simple. Avoid proprietary Javascript and HTML tags that only work with certain operating systems or browsers. (The rollover buttons created with FrontPage are especially suspect in this regard.) When setting fonts, HTML, CSS, or other display styles, follow the general readability guidelines above, so that the result works well within the online environment. Avoid fixed-width tables unless they are smaller than 600 pixels, as explained above under Screen Size; use relative sizing instead. If you work in a Web page editor such as Dreamweaver, set the Window Size of the document window to 760 by 420 pixels, so you will see exactly what will show on your display of your least-pixeled user.

 

Even though the paperless school for most of us remains a dream, the forces of digitial display expand daily. If we want to look good and work well in the online publishing environment, we must shift to landscape mode and develop some new rules of thumb.

--------------------------------

* They are not papers at all, since many of them are never printed. See Going Paperless, Parts 1, 2, and 3 in this series.



View Teaching with Technology Archive

back to top



Teachnology Blog  Podcasts  
Printer Friendly Page  Email this Page

 



© Copyright CSC Holdings, LLC | Terms of Usage | Privacy Policy | Children's Privacy Policy | Contact Us