January 2004 General Meeting
Website Design Considerations
Visual design and code development:
Where to begin? Use paint program or paper?
- Website designers often create the visual style using Photoshop. Then turn over responsibility to the coder to create the final product.
- What you choose depends upon your own strengths. Not being a designer, I use existing sites to influence the design, perhaps sketching on paper, then model in HTML to fit my objective of elegance through simplicity.
- Read. Yes, read all that you can about Web design. Many Websites on these topics include tutorials. If on-line reading isn't for you, get a good book, with a recent publication date. Some suggestions are included on the Links page.
Learn by example
A good approach to learning is to review the code behind pages you like (view source). Figure out "how they did that?" Unfortunately most current sites are so complex, this can be daunting. In April 1998 I wrote an article published in microCHIP that described the MHCUG site design. It is included here because it represents much current design.
Better might be to examine the underlying code for these pages. As mentioned in the Introduction, you should download each of these pages using "File | save as | Web Page, complete" to your computer, where you can examine the XHTML code and, in particular the CSS files, using any text editor. The file "link.css" contains all the CSS information for these pages. The comments within the file may prove to be helpful.
Why change?
Accessibility, forward compatibility with future browsers, ease of design changes, less code, improved page load time, reduced bandwidth -- are among the many reasons.
Regarding accessibility, see Rehabilitation Act Section 508
What programs do you need?
Begin by learning (X)HTML. Then, all you need to create HTML and CSS is a basic text editor; however there are many applications that make this job easier. Do be aware that some "visual editors" tend to overprotect you from underlying code. NotePad or WordPad work very well, and they are included with Windows. I happen to use a shareware editor, UltraEdit.
What is XHTML?
Hyper-Text Markup Language (HTML) has been the language for Web pages since (Sir) Tim Berners-Lee developed the World Wide Web in 1991. More recently, XML (Extensible Markup Language) has emerged as a language for creating other languages. XHTML is the result of the World Wide Web Consortium (W3C) rewriting HTML using XML.
If you know HTML, you already know the lexicon of XHTML. Most of the difference is in a few syntax rules (e.g., all tags must be lower case and all tags must have a closing tag). Note that my 1998 example had all tags UPPER CASE and only tags which require closing at the time were closed. Browsers were, and will continue to be, quite forgiving. Those old pages are sure to display correctly for some time to come.
Still, unless XHTML rules are followed, browsers will not display many CSS features correctly.