 Having outlined the basic theoretical principles of content organization and navigation in our e-lecture preparing content part one, we will now turn our attention to the main aspects of page layout and text development. That is, to the principles underlying the design of websites and the structure of textural content. The following aspects will be discussed in detail. First, we will look at the components that are needed for a web page. And then we will concentrate on the designs and structures and the principles of using them. Layout techniques and layout constraints will be in the center of the following part of our e-lecture. And finally, we will look at text and how it is written for the web. Let us start with a discussion of the components needed on a page. The design of the page layout will start with a list of components needed on the page. This list includes features such as navigation elements, body text, headers, footers and so on. Furthermore, a prototype of the page design should be created containing all possible elements which might be used on a page. Even if not all of these elements are used on every page, the design should work with all elements. That means it should not be irritating or overloaded. Once the list is complete, the next step should be to arrange the elements in a logical way. Logical means that the most important elements should, for example, be put in the upper left corner. This is valid for Western audiences since they start to read in the upper left corner or in the middle of the whole design with all other elements pointing towards the middle. The arrangement, though, should be tested with the users. And then there is a principle, less is more. If it is stuffed, no user will feel comfortable at first visit on a page and there will be no room to expand the page in the future. Users will find their way through a website easier if the layout of each page is structurally the same. Thus, orientation on a page does not have to start from the beginning. Additionally, taking a look at other websites can help to determine whether certain layouts are more often used than others. Common layouts are used in the following examples. The first example is from the Süddeutsche Zeitung, a German newspaper. The second one has been taken from the University of Oxford in the United Kingdom. And finally, here is the homepage of Sona, a Spanish festival for electronic music in Barcelona. Reviewing different layouts will keep the website team from getting stuck in their own drafts and helps them considering other ideas. There are some techniques for page layout which have to be taken into account during the layout development. These techniques answer questions concerning the arrangement of the page elements. Let's look at these techniques in more detail. The first concerns the creation of so-called page templates. A template can be understood as a framework from which all pages can be derived. It does not mean that all pages have to follow exactly the same page layout. It would be dull if you had, let's say, a hundred pages looking all exactly the same. But if, for example, the navigation is in the same place on nearly every page, users will expect it to be there and will find it much quicker. Thus, the main benefit of templates is that they achieve consistency on a website. On the Virtual Linguistics Campus, all pages that present content follow a template-based design. The main menu is always on the left. The text is here in the middle with a picture primarily located to the right of it. And then we have the bottom menu on each page within our virtual sessions. A good way to increase the usability of a website is to increase the user's comprehension of the elements on each page. The simplification or reduction of the elements is one way to reach this goal. Buttons should be labeled with meaningful words such as help, ready, start, etc., and not just with empty phrases such as click here. The interactive tutor on the Virtual Linguistics Campus may serve as an example here. A second way is the reduction of the number of elements and the general page layout. For example, the number of vertical lines should be reduced in order to take unrest out of the page. Again, the tutor here, the initial page of a worksheet with few vertical lines may illustrate this point. Any element which breaks out of the overall design is a strong attention grabber. This can be an advantage as well as a disadvantage depending on the importance of the elements in focus. Contrast is important for the overall balance and structure on a page. Contrast can focus the user's attention on certain elements. A page that is full of text will be perceived as a solid mass with nothing for the user to hold on to. A page full of graphics with high contrast, on the other hand, will be perceived as restless and irritating. Contrast can exist in various visual aspects, shape, color, size, position, and so on. It should be used according to the importance of the elements on the page. Highly contrasted elements are the most important ones, whereas more subdued elements require conscious effort to be noticed. There is a general rule for the use of contrast. If a screenshot of the page in question is transformed into a grayscale image and the use of contrast still works, as you can see over here, it will also work in color. However, this rule leaves out that certain tones of red, a typical definition grabber, can be the same grayscale value as certain tones of green, which is only an attention grabber in contrast to other colors. So we have to be careful here. Balance is used to establish a feeling of consistency and a harmonious layout. A page is balanced when the elements on that page are ordered along a certain axis. Balance can come out of symmetrical and asymmetrical layouts. The symmetrical layout is easier to handle and allows less flexibility. The asymmetrical layout is more unique and more exciting. However, the asymmetrical layout is not recommendable if the content has to be changed often. To begin with, the design of a well-balanced page, a central axis should be found and all elements should be arranged around this axis. Certain elements should be repeated throughout the website. This adds to the consistency of the site. Repetitive elements could be the logo of a site. Here you see the VLC logo, which reoccurs in all central menus. Or you may have certain graphics or the main navigation bar. An additional element such as icons, which again hear the linguistic engineering team icon, which reoccur in many cases here in the submenu of the interactive tutor. And so on. So repetition can enhance perceptual grouping and thus reduces visual search time for the user. The user will find those elements first, which have been at the same place before. Also, there's a practical aspect. Graphic elements, for example, which have been downloaded before, will be found in the cache of the browser. Thus, download time decreases if other pages have the same design. The Gestalt laws describe principles of human perception. Compiled by psychologists at the beginning of the 20th century, they are still important for graphic layout. Here are some selected examples of Gestalt laws. For example, the principle of proximity. Elements, which are closer together, that is here the vertical line, are perceived as belonging together. In our example, the points are perceived as vertical rather than horizontal lines. Or look at the next one, the principle of similarity. Elements, which look alike, are perceived as belonging together. In our example, the orange points are perceived as a rectangle. Or take the principle of closure. Humans tend to perceive closed forms even if there are none. Applied to this example here, we tend to see a white triangle in the middle, adding lines in our mind to make it a whole. As with most guiding principles, it is important to know when they should be applied, ignored, and most of all when they should be broken. Here is an example. Now in this last example, the element breaking out of the line is the one the attention is dragged to. Now breaking the design and the arrangement can have the effect of enhancing the importance of certain elements. It can be used for elements which are changed often or which enable easy navigation through the website. However, breaking the rules should be used scarcely. If there are too many elements out of a line, a page can become very irritating. Having discussed various techniques, let's now look at some restrictions and constraints. Now computers are still limited in many ways. And this limitation influences web development, which has to take these limitations into account. These constraints concern the order of page elements, the problem of scroll bars, page resolution, aspects of page width, and the use of fonts. Let us look at these aspects in more detail and let's start with the ordering of elements. Now often, loading a page takes some time and the elements on the page are displayed successively. Thus developers have to decide which elements should be displayed first. In our example, which displays the opening screen of an eLearning unit, the eLearning unit start site, we can associate the components with the following ordering. Now obviously the main menu has to be seen first, because as I said already, western users will inspect the top of a page first. And they will start in the upper left corner when they scan a page. But also because the browser will load elements according to the place of the element. So then the next possible element will be the title and then of course the main text. When loading a page, the browser will start downloading and displaying those elements on the top of the page. Exceptions are graphical elements like these over here, which will probably be loaded later because they need some time to download because of their size. Those elements will be displayed after all textual elements. Thus the top of the page is the first impression of the page the user gets and this decides about his or her behavior. So elements with shorter download times should be placed on the top of the page. Let's next look at the problem of scroll bars. Now experiments have shown that inexperienced users often do not use scroll bars since they're not used to do so. There are two ways to avoid that those users will miss certain information. Well, sometimes scroll bars cannot be avoided. In this situation the page layout should give specific hints that the content of the page is exceeding the browser window. For example, one could insert an arrow here indicating that there's more content below. This can be done by special elements such as an arrow, which lead the way down to the bottom of the page. The other way to avoid this problem is to drop scroll bars altogether. This has another advantage. The user can access the information on a page without further action. One problem of website design concerns the page width and this is the fact that different users have different computer setups. Today a resolution of at least 1024 by 768 pixels can be assumed as a standard. Nevertheless, a resolution lower than that seems even safer. An ideal page completely visible on all configurations would thus not exceed 800 by 600 pixels. However, here only older browsers are taken into account. One way to avoid the problem of screen resolution is to design a variable page width. HTML gives us the opportunity to design a page using page width in terms of percentage. Thus in our case we would choose the parameter attribute 100% of the window space. In most browsers users can alter the font type size displayed on a page. Bigger or smaller fonts, well here you see the size differences. Bigger or smaller fonts are likely to change the overall page layout and the spacing between items and the line spacing on the page. Although font size can be made in variable aspects of accessibility have to be taken into account. People with visual disabilities will want to increase the font size in order to be able to read the information on a page. Having discussed the central techniques and the constraints of page layout let's now look at the writing of texts for the web. Now when writing for the web certain aspects concerning the nature of web-based texts have to be taken into account. Starting from general considerations on writing style, writing guidelines can be developed for the authors of a website. Obviously there are several differences between writing texts for the web and writing texts for print so let us look at these first. Writing texts for the web is not entirely different from writing texts for print yet there are differences. Now one type of difference concerns the use of textual hints. In web-based texts many textual hints can be hidden so that they only become visible through interaction. Examples are the outer attribute within the image tag or tool tips such as the one displayed over here where on roll over this particular tool tip is displayed. Another problem concerns text lengths. Now long offline texts should be broken down into small portions of similar content since users will not read long text on screen. Alternatively one can make longer texts available for printout for example in the PDF format. And then we have hypertext. Hypertexts can extend the limitations of linear texts allowing the user to navigate through a text freely. Special hypertext features such as links should be used extensively. The next problem we have to solve concerns stylistic issues. Maintaining consistency in the writing style improved the consistency of the site as a whole. In general however the style used should derive from an extensive user analysis and several points have to be kept in mind in this respect. For example one question concerns the voice that is used. The active voice should be preferred to the passive voice. Now the example we offer the following services creates a higher degree of familiarity than the passive counterpart the following services are offered. The second stylistic variable concerns the choice of person. Here the first person plural creates more familiarity than the third person. We want to provide you with the best software sounds much more familiar than the XY corporation provides you with the best software. And then of course you have the choice of register. Depending on your website's target group the register used can be casual or formal personal or impersonal hip or traditional. However to reach a maximum audience a colloquial register should be avoided. Furthermore humor and comical effects should generally be avoided since some users might be offended by it. Last but not least there's the orthography where the standards of spelling and punctuation should always be adhered to. Furthermore consistency is important. Use either British English or American English orthography but not both avoid dialectal variation. Let's finally look at text formatting. Even though we can precisely define typefaces and font sizes in HTML their appearance in particular web browsers is not entirely predictable. This is due to the default settings of each browser as well as to personal preferences of the user. Let's look at typeface as an example. Now here it is recommended to use only one typeface throughout the site and on one page one should maximally use three typeface faces. So here's a selection of typefaces with series here or without but don't use too many of them. Also type size should be chosen according to readability concerns. So different sizes of course should be used very carefully. And italics should be avoided due to display problems. HTML comes with four basic alignment values left, right, center and justify. Left is commonly used because the reading speed is fastest. Right should only be used as a design feature fitting into the page structure. Justify is ignored by older browsers and can slow down reading speed since gaps between words sometimes vary. So it is recommended to use the left justified option wherever possible. And what about columns? Well, multiple columns can speed up reading when used appropriately. Shorter lines of text are generally easier to read. However, if the length of a text exceeds the browser window, columns should be avoided since the user is forced to scroll down and then up again in order to read the entire text. As a summary, here are some guidelines. Be clear, concise and unambiguous. Write according to the inverted pyramid style. This means that the most important things have to come first, details and less important elements second. Follow the communication maxims by Hubert Paul Greis, linguists among you will know what I'm talking about. Headlines should be rich in content, not clever. Emphasize key words either as hyperlinks in bold style or colored. Use lists with bullet points to structure content. Use one idea per paragraph. And then finally, one page should present one topic only. Let us summarize. With our two e-lectures preparing content part one and preparing content part two. You should now have some basic knowledge about web design principles and should have got an idea what is important if you want to prepare and structure content for the web. I know that far more details should have been added to achieve a more profound understanding of web development principles. However, you should now be in a position to create your first website or to upgrade existing ones. So, I recommend that you now take the next step. That is consult our HTML, CSS, e-lectures and screencasts or even better register for our next VLC class HTML and CSS basics unless you have already done so. Well, see you there.