Web Design

A course like this is more an introduction to 'Web Mechanics' than it is 'Web Design'. At VCU, it's only the students who can present a portfolio that meets the legendary entrance requirements for the School of the Arts or Ad School that get access to real courses in 'Web Design'. Occasionally, twice in ten years, they've let a Business School student take the class. A few students a year come to EBUS202 from the Art School, show me excellent, usually simple and elegant Visual Designs, and tell me that they are pleased to be learning raw HTML & CSS, where most students over there opt for DreamWeaver to impress their style into their web design.

Lots of our School of Business students have good 'design sense', can gain useful insight from books and articles about web design such as these, and are competent for work as 'web designers'. It's always a pleasure to see somebody who's just learned XHTML/CSS put their new-found tech and design skills to work for $$. Current trends are towards simplicity and getting max impact from what XHTML and CSS can do, and there are lots of websites needing to be re-worked in XHTML/CSS or HTML5/CSS3 so that they'll be accessible on portable devices' small screens.

Separate Style from Content

Much of good web design in 2011 is adopting the mantra 'Separate Style From Content'. In the '90s most web pages were _static_ with the content keyed into html documents with no awareness of 'semantic markup' or the great cost of liberating content from pages that survived into the new millenium! Most modern pages are _dynamic_ with the content retrieved from a database or some remote source. It is time-consuming to remove content from an old-fashioned _static_ pages useing presentational markup like <font color=red size=+3>, <table> & <td>, or <br><br> instead of semantic markup to indicate the headings and paragraphs that are natural elements of content in any language.

Meet Accessibility Requirements First!

This is an over-arching requirement for web design! Any website that gets federal, state, or local funds is required to be accessible by blind and visually handicapped people. Any company or organization that makes a website _should_ be 'accessible'. Accessibility that benefits blind folks is good policy and business, and also makes web pages accessible via the small-windowed devices like smartphones, pads, and tablets that use websites today.

Some partially blind people use 'screen magnifier' software that follows the headers, paragraphs and sentences and greatly magnifies the content on a dark background so that an inch or two square from the web document fills the screen. They see a word or two at a time, and greatly appreciate semantic markup because their software uses it to organize the presentation. If a page is sloppily marked up and mashes style and presentation the screen magnifier has no 'compass' to interpret the content and the partially-blind user goes searching for the thread of the content, sometimes frustrated in the effort.

Others, more or completely blind, use 'screen reader' software extensions to their browsers that _read_ the content from the web page to them, or put it to a braille tablet if they're also deaf. The screen reader software uses semantic markup _and the Order in which the content appears in the raw HTML document to provide navigation aids verbally and allow quick access to the content.

It's Easy to be Accessible & Stylish!

Any web designer can turn on the accessibility features of Internet Explorer and hear what the page _sounds_ like to someone with limited vision. All of us should...

Using Semantic Markup and Separating Style from Content are almost 100% of the effort for making sites accessible! These same techniques improve the readability and navigability of web pages for sighted people, too, and help make them easier to use with portable devices.

The general rule for screen readers and magnifiers is that they attempt to read the page from the top to the bottom, ignoring any presentational markup and styles. So, the HTML in the document should make sense from top to bottom. You can access your page using elinks or lynx at the command line and see how a blind person hears it.

Navigational elements should be consistenly placed and simply constructed! Buttons and links should not be visual, graphical elements that have button or link capability provided by JavaScript! They should be anchor tags, submit buttons arranged as items in a list, or other plain elements of HTML that are _styled_ with their appearance for the sighted people using the site.

Visual design is added after making sure that the page makes the best sense in small browsers and screen magnifiers & readers. Divs are used to divide up the page so that it looks the best and makes the best sense for sighted web browsers. The positioning of divs

Practical Design Considerations

Some Web Design References

Please strive for a clean, easy to read, business-like look. Avoid busy backgrounds behind text that make it hard to read. Use references like these as you design your web site for this class. If your site needs columns, strive for a simple design that will render appropriately in all current browsers, desktop and smaller.