Web design and HTML authoring

Description

Web Design is the creation of documents, usually in the form of webpages, that can be electronically published to a computer server. These webpages can be accessed over the internet either by searching for it using a search engine (such as Google) or by simply typing the website’s unique address (Uniform Resource Locator, or URL) into an internet browser.

Background Information

Web design uses principles (or elements) of design similar to the ones used in print publications: layout, white space, font, typography, etc.. But unlike designing for print, web design is much more dynamic. It allows designers the ability to display or embed interactive tools, applications, video, audio and other media onto the webpage.

Authoring a webpage in the past required designers to understand HTML (hypertext mark up language) coding. But now there are a number of software tools and WYSIWYG (What you see is what you get) editors, which allow a novice web designer to design a simple webpage as easily as formatting content in a word processing document.

Also with the introduction of Content Management Systems (CMS) and blogging software such as Joomla) or [http://www.wordpress.org/ WordPress, anyone can design their own webpage without any knowledge of HTML. In terms of e-learning, Learning Management Systems (LMS) are a special type of CMS for online education; LMSs also have web design capabilities built-in.

Regardless of how webpages are created, proper web design still requires applying best practices and principles for designing for the web.

Design Questions/Issues

The key design questions you need to think of when designing a website are:

What is HTML? HTML stands for HyperText MarkUp Language; HTML is the programming language used to create webpages. HTML files are uploaded to a computer server that can be accessed by others via the internet and viewed by web browsers. By applying HTML tags around the elements within the content of the webpage, the document serves as a set of instructions to the web browser on how to present the content on the screen. In the early 1990’s, web designers had to understand HTML in order to design websites. However, due to the availability of HTML editing software, most web designers today prefer using WYSIWYG HTML editors to design their webpages rather than typing in the HTML codes by hand. Newbie web designers can design a webpage without even knowing one HTML tag. For more information about HTML, visit this HTML tutorial site.
Cross platform compatibility. Your audience (primarily students in e-learning contexts) will be viewing your webpages using different types of computer operating systems, and different browsers—even different versions of the same browser! Make sure that your web site is compatible by following W3 standards so that your students can focus on the content instead of struggling with the technology.
Think of your audience and ensure ease of navigation and readability of your content. Make sure that you storyboard how people will be navigating through your website. Ensure that webpages are consistent with one another. Provide options for the student to return to the home page from anywhere within the website.
Do not add any unnecessary media no matter how interesting you think it may be to your students. The content should be the focus of the webpage, not the distracting rotating animated flash image that your cousin Bjorn sent to you!
Never embed an audio or video file that autoplays once someone lands on the page. Worse yet, do not let your animation and/or audio file keep looping endlessly (you will drive your students bonkers with this!).
Understand the use of typography in your design. Simplicity in design goes a long way. Use lots of white space, as well as readable font style and size. The quality of a site’s typography can improve or impede the readability of your content.

Use sans serif fonts for your webpage content. Serif fonts have tails or strokes at the end of the letters which make the content on the screen more difficult to read. The Arial, Geneva and Verdana fonts are the easiest to read; most computers usually have this font installed as a default.
Try to stay with black font on a white background for your text. For your images, if you are applying text on the image, use high-contrast colour combinations for the font and the background to ensure readability. There are certain colour combinations to avoid using because persons who are colour blind will be unable to differentiate the colours. For more details click here.
White space! White space! White space! Looking at a webpage that has little or no white space between text lines and other objects is very tiring for the eyes. Break up the text on your webpage with consistent lines of white space (example: after a paragraph, make sure you have two lines of space, between each line; if using a CSS stylesheet, try to make the line between the text bigger than the font size). The same rule for white space applies in graphical images. Consider the white space between textual and graphical elements when designing the banners or home page (splash page) images. Without proper white space, your banner or splash page image can become very cluttered and busy. Try to limit the amount of elements in your graphical images so the focus of what your image is not lost to the student.
Divide your content or lessons into individual webpages, rather than one long page. Long scrolly webpages can be overwhelming for students to read through, and difficult to reference. In addition, more and more students are accessing online course content using mobile devices such as smartphones or personal digital assistants. Web sites divided into readable smaller pages are easier to view on a hand-held device than are longer webpages.
Try to contain your content into around 700 pixels wide. When you are viewing content that is stretched on a very wide screen or monitor the eye has to travel from left to right over and over, which makes it very tiring for your eye muscles. Narrowing the content width allows the eyes to relax at the end of the line before going to the next line.

Design with accessibility in mind. Here are some guidelines:

Be consistent with things such as ensuring that all image "ALT" text and "Title" tags are descriptive and meaningful. This is very helpful both for those who turn off the graphic display option on their browser for faster loading of the webpage, and for visually impaired persons who use a screen reader to access the content. If the image serves a function (ie. back to the top), include this information in the "ALT" text. Simply saying "icon" in the "ALT" text is meaningless to the user.
Use captions under your figure images to describe what the image is, including acknowledgement or credit for the image’s source.

Provide text (alongside or as subtitles) and/or narrative transcripts for audio or video media files for students who have a hearing or visual impairment, as well as for those who do not have the technology or plug-in to view or hear the media file.
When linking to other webpages or other websites, use descriptive links. Simply stating "Click here" is less meaningful than saying, "To find out more about the geology of the Grand Canyon, click here."

Use Cascading Style Sheets (CSS)

Cascading Style Sheets (CSS) are a means of controlling the look and feel of your site design by defining formatting style rules for elements in your content, while keeping this information independent from each HTML page. CSS files have the suffix .css.

Keeping all the formatting style rules in one document is a cleaner way of designing a website: it reduces the repetitive application of formatting styles for every individual element in your HTML file. When you change a style rule in the .css file, the changes are reflected throughout the entire website. For example, if you change the font colour for the Heading 1 element, all content that has the HTML code will change on the screen automatically.

Leverage LMS functionality If you are building pages that will be hosted in an LMS environment, leverage features like navigation menus/buttons and "breadcrumbs" to make the user navigation experience more straightforward. It is annoying when every link opens in a new window: it also slows down a computer, since each window requires more RAM...

Examples

Below are some different online resources that offer examples of how to (and how not to) design websites.

Web Design Tutorials

Although designing a website has become much easier with the introduction of WYSIWYG editors, it’s helpful to understand some of the technical aspects of HTML and web design. The following tutorials provide you a hands-on introduction on topics such as HTML coding, to how to embed videos onto your webpage, and how to storyboard:

How to Build Websites Tutorial http://www.how-to-build-websites.com/
How to Storyboard https://nmasse.com/courses/ecom205/storyboard.php

Web Design Software

The Adobe Dreamweaver CS4 web premium suite (collection of software) includes an entire range of tools for web design. However, its main web design tool is Dreamweaver. In fact, Dreamweaver is the main tool that professional web designers use to create webpages. It allows you to edit your page either in WYSIWYG mode (What-You-See-Is-What-You-Get) or HTML code mode. In addition, you can also create and edit CSS files. You can find more details about Dreamweaver at Adobe's website: Adobe Dreamweaver CS4

Amaya and NVU are open source (free) WYSIWYG HTML editors which are available for both Mac OS X and Windows operating systems. They are designed for the non-technical user who has little or no HTML knowledge. Although these editors are not of the same calibre as Dreamweaver, they are fairly robust and easy to use. Most importantly they are 100% free to download and use. You can find more information about these software programs from their websites at:

Amaya
NVU

Web Design Checklists Looking at bad web sites is a very good way to help you understand the importance of applying good design principles to your own website. Web Pages That Suck is an excellent site that provides you with lots of resources that will help you take an objective look at your website so that you can improve its design. Below you will find useful checklists that help determine if your webpages "suck".

Storyboarding

Storyboarding is the process of planning, creating and outlining the website structure prior to actually creating a webpage. After determining the overall structure of your course site, you should begin creating the structure of each Module or Lesson. Storyboarding your content helps you focus on ensuring that the content in your Modules or Lessons are consistent. For example the first page in each module can be a brief introduction to the module; the second page can then be a list of objectives for the module; the third page can be a list of readings, and so on. Planning the structure of your online course will help you visually see how your students will navigate through the content. As a web designer, you must ensure that the navigation in your website is consistent and easy to to understand. Students need to be able to go through your course easily without spending time trying to figure out where to find things such as their Course schedule or assignments. You can find out more about storyboarding here.

Web Design Basics

Jennifer Kyrni’s site is an excellent resource, where you will find information about elements of good design, web design basics, fonts and typography, use of colour, graphics and images, navigation, layout and interface design and accessibility. [1]

CSS

The following website from the University of Aberdeen explains what CSS are and how to use them. Learning how to work with CSS can be somewhat daunting for a newbie web designer; this in easy to understand English and uses informative screenshot images: What are Cascading Style Sheets and why should I use them?

Accessibility

The following article by Todd D. Schwanke, Bhagwant S. Sindhu, and Roger O. Smith (from the University of Wisconsin) addresses web design and accessibility, and is directed specifically to instructors who teach online using an LMS such as WebCT/Vista, Blackboard or Learning Spaces: [2]

Activity

Explore

A great way to analyze your website design is to follow a best practices checklist. The following exercise is a fun way of understanding the common web design mistakes that designers make.

Web Design Principles Exercise

Go through the "Web Pages That Suck" checklist #1 and checklist #2.
If you have already designed a webpage, go through the list and check off the items that apply to your web page. Please note: If you check off any of the items, this automatically means that your webpage "sucks".
If your webpage does not suck, consider how you might make even better.
If your webpage sucks, read OK, My Web Site Sucks. What Do I Do Now?.

Storyboarding Exercise

Jot down a quick hand drawing of how you would storyboard the structure of your webpage.
Feel free to make changes after your initial drawing. Look for consistency and ease of navigation within the structure of your course website.

Activity

Create a webpage first by simply drawing a storyboard of what you imagine your website's structure. Remember the tips you learned in the Storyboarding Exercise above. Once you are satisfied with your storyboard, create a simple webpage using any of the tools recommended above. Refer to the "Web Pages that Suck" checklists as a guide on how NOT to design your webpage. Try to keep your design simple, easy to navigate and content-focused.

Now check your site with at least two different web browsers (such as Chrome, Safari or Firefox) and see if the webpage looks the same in both browsers. Test the accessibility of your webpage by going to the WAVE Tool (Web Accessibility Evaluation Tool).

Reflection

Write an entry for your course weblog about your experience here (on your "Home" page and posting a new entry). How labour intensive was the process? What worked well? What was challenging? What surprised you?

Resources

These are all embedded above!