Resources for Website Design

The Resources for Website Design section contains links to many of the sites I have used in learning website design and sites I use in designing and maintaining my sites currently. Do you know of any good articles, tutorials, tips, or other resources that might be helpful. Please feel free to submit your recommendation to be included on this Resource page.

Responsible Computer Use

Martha Bagwell is one of the instructors in the Tech Training Class which is part of the SEO Training Class. She has some excellent advice for Responsible Computer Use.

Web Design in General

  • THE DO'S AND DON'TS OF WEB DESIGN IN 3 PARTS
  • Common Web Page Mistakes - Mistakes in Web Design
  • Dive Into Accessibility 30 days to a more accessible web site - This book answers two questions. The first question is "Why should I make my web site more accessible?" If you do not have a web site, this book is not for you. The second question is "How can I make my web site more accessible?" If you are not convinced by the first answer, you will not be interested in the second.
  • Google Information for Webmasters - Following these guidelines will help Google find, index, and rank your site. Even if you choose not to implement any of these suggestions, we strongly encourage you to pay very close attention to the "Quality Guidelines," which outline some of the illicit practices that may lead to a site being removed entirely from the Google index. 
  • Quality Tips for Webmasters - Short, simple bits of knowledge for better Web design, authoring, and use, on quality issues related to W3C technologies such as HTML, CSS, HTTP. 
  • Web Style Guide - 2nd edition. This is the online version of the book by the same name.
  • Web Design Made Simple - tutorials for the beginning web designer.
  • Basic Guide to Web Design - There are many elements to web design. Among the most important are the layout and navigation, the text styling, colors, and images. This article contains a number of links to further your study of basic web deisgn.

HTML Coding - Hypertext Markup Language

  • W3Schools
  • HTML Document Structure
  • HTML Cheat sheet
  • A Bare Bones Guide to HTML - The Bare Bones Guide to HTML lists every official HTML tag in common usage, plus Netscape and Microsoft extensions. Version 4.0 of the Guide is designed to conform to the HTML 4.0 specification. For official information on the development of HTML, see the World Wide Web Consortium's HTML activity statement. 
  • HTML Basic Tutor - This is a website targeting small business owners, beginner web designers and hobbyist web site owners. The theme of the site is to promote good web design practices and coding by implementing the recommendations of the W3C (World Wide Web Consortium) in a fashion that a person with little or no knowledge of web design can learn from.  Each HTML tutorial is written with the HTML beginner in mind. Currently, HTML Basic Tutor is actively involved in the Website Development Training yahoo group, where HTML lessons written by S.R. Emerson are posted. 
  • HTML Code Tutorials - Free Reference Guide for Help with HTML Tags Including Form, Frames, Tables, and more!
  • HTML Dog  - Very useful HTML and CSS tutorial place, teaching You everything step by step - best practices, standards and code with “easy to understand” example.
  • HTML Goodies - HTML Goodies intended purpose is to help new and growing website developers learn their trade, and to provide them with tips, guides and reference sets for their use.
  • Your HTML Source - Teaches you not only how to create your very first homepage, but how to style it with CSS, add spice with Javascript and create it accessible and SEO friendly.
  • Is you are using MS Word to building your web pages read the following articles

XHTML - EXtensible HyperText Markup Language

  • XHTML Tutorial - XHTML is a stricter and cleaner version of HTML. 
  • HTML Tidy - Tidy can correct the markup in a way that matches where possible the observed rendering in popular browsers from Netscape and Microsoft. Here are just a few examples of how TIDY perfects your HTML for you. NOTE: I have not yet used this program.

Style Sheets and their Use

Color

Graphics

  • A Tutorial For Getting Graphics Onto Your Web Pages
  • FREE programs for graphics
    • Easy Thumbnails - Easy Thumbnails is a popular free utility for creating accurate thumbnail images and scaled-down/up copies from a wide range of popular picture formats. By the makers of  NoteTab and NoteTab Lite.
    • A Smaller Image - With the intuitive, single-screen interface of A Smaller Image, reducing digital photos is a really easy. Select the output size and pick just the right part of a picture to keep.

Layouts and Templates

Need a good source for layouts to get you started? Try any of the listings below. Remember, when just starting out - simple is better. Some of the templates may require a link back to the designer's site.

Search Engine Optimization Techniques

SEO is an acronym for "search engine optimization" or "search engine optimizer."

Tools

  • Web Developer Toolbars - If you are a developer of web pages, then one of the indispensible tools you can use is the web developer toolbar. There is one available for Firefox, Internet Explorer, and Opera. I also use the Web Accessibility Toolbar and the Link Checker for Firefox.

Web Authoring Software

Here are just a few of the web authoring software listings found by searching the web. Check out Google's Search Engine Optimization Starter Guide!

Free Editors

Expression Web is the successor for FrontPage and is the web editor I am currently using. Build your Web sites your way. Microsoft® Expression® Web gives you all the tools you'll need to produce high-quality, standards-based Web sites the way you want them. Take advantage of the best of dynamic Web site design, enabling you to design, develop, and maintain exceptional standards-based Web sites. Expression Web Tutorials and Templates. As of Dec 20, 2012, Expression Web is available as a FREE download.

The CoffeeCup Free HTML Editor is a full-featured Web design system. With built-in FTP uploading, wizards for tables, frames, fonts, and more, and 100% valid code output, it's a great tool for anyone who wants to design their own Website.

Araneae (pronounced ah-RAN-ee-ay) is a simple, yet powerful text editor, providing only the features necessary to create websites and scripts using the latest web technologies. Best of all, Araneae is absolutely free for non-commercial use. Use it as long as you like for your personal projects.

KompoZer is Nvu's unofficial bug-fix release and is a complete web authoring system that combines web file management and easy-to-use WYSIWYG web page editing. KompoZer is designed to be extremely easy to use, making it ideal for non-technical computer users who want to create an attractive, professional-looking web site without needing to know HTML or web coding.  NOTE:  I have removed NVU from the list as it is not being updated.

NoteTab Light - Freeware. A slimmed down version of NoteTab Pro. This is a NotePad replacement and a capable HTML editor. You select tags from a menu of icons. much as you would in a word processor.

Html Kit - Here's a  freeware HTML editor that's aimed at advanced Web designers. You can use HTML-Kit to create, edit, validate, preview and publish Web pages and scripts. It offers loads of features including hundreds of free plugins and built-in FTP support.

1st Page -  This powerful program from Australia is loaded with handy features and is suitable for everyone from newbies to experts. Offers four different interfaces, ranging from Easy mode to Hardcore mode. 1st Page includes full support for WebTV, ASP, SSI, Cold Fusion, DHTML and more. Includes 450 free JavaScripts, as well. (For Windows).

Arachnophilia - Arachnophilia is an outstanding Web editor, bursting with features. It'll import fully formatted text, tables, and outlines from any Windows-compliant application and automatically convert it to HTML. It also has built-in FTP capabilities that can automatically upload files (although it can't delete files, like a true FTP client can). Powerful keyboard macros can include system commands---even other macros, for maximum flexibility. (For Windows) NOTE: I have used this program in the past.

BlueGriffon is a new WYSIWYG content editor for the World Wide Web. Powered by Gecko, the rendering engine of Firefox 4, it's a modern and robust solution to edit Web pages in conformance to the latest Web Standards. It's free to download (current stable version is 1.1.1) and is available on Windows, Mac OS X and Linux. BlueGriffon is available in English, Dutch, French, Czech, German, Hebrew, Italian, Japanese, Korean, Simplified Chinese, Spanish and Traditional Chinese. Dick Eastman recently reviewed it in his genealogy newsletter. You can read BlueGriffon, a WYSIWYG HTML Content Editor

CSSED  is a small developer editor and validator, that tries to ease the CSS editing. It is an Open Source project, it means that you can download the program but also its source. It features syntax highlighting, syntax validation, MDI notebook based interface, quick CSS properties and values insertion, auto-completion and dialog-based insertion of CSS complex values. Being a CSS editor, it's not limited to this language. cssed haved some support for HTML (with embbeded Javascript), XML, Javascript, Java, PHP, JSP, C, C++, Apache configuration files, .htaccess, Python, Perl, SQL, SH and other languages so it can serve quite well as multi-purpose editor.

Bluefish is a powerful editor targeted towards programmers and webdevelopers, with many options to write websites, scripts and programming code. Bluefish supports many programming and markup languages. See features for an extensive overview, take a look at the screenshots, or download it right away. Bluefish is an open source development project, released under the GNU GPL licence.

Expression Web

Expression Web is Microsoft's web editor that replaces FrontPage. It creates standards-based Web sites more quickly and easily and is now available for free download. Expression Web Free Edition. It is a professional level web editor and expects you to know the basics of writing html and css BEFORE you start using it.

If you use Expression Web to design and maintain your website, the following resources will proved helpful:

FrontPage -

FrontPage is a Microsoft product. While it can create bloated code - as can any editor if not used wisely - it will produce cleanly coded pages that will validate if you know which features to avoid.

If you use FrontPage to design and maintain your website, the following resources will proved helpful:

Return to Planning a Genealogy Website