Amby's Tools & Resources:
WEBSITE DESIGN

Colors, Backgrounds & Images Using Colors, Backgrounds & Images
Graphics Utilities Graphics Utilities
Code Validators Code Validators
Website Accessibility Website Accessibility
OTHER Web Browsers OTHER Web Browsers


  Also available:   Writing HTML:   Tips & Tutorials
WHITE background?? Override document colors is selected (see "preferences" or options); deselect it or load images.

Colors & Images Graphics Utilities Code Validators Accessibility Other Browsers Tools Index SEARCH


Colors, Backgrounds & Images

Color Picker - by Professional Web Design
Here's the utterly easy way to experiment with Netscape's 216 color palette. Try different color combinations for background, text and link colors and immediately see the results on the screen. The EXACT code is included, once you like what you see, just cut-and-paste the code onto your page; you can specify font size and include your own background image!! AND Color Picker is available for download in zip format.
Joe Barta
http://www.pagetutor.com/pagetutor/makapage/picker/

Non-Dithering Colors in Browsers
This info about the browser-safe colors (provided by the author of numerous books on web design and graphics) includes explanations--with examples--of many key elements. Charts of color chips arranged by hue and also by value allow you to easily compare the non-dithering browser-safe colors; both R-G-B and hexadecimal codes are provided. A TIPS SECTION with QuickTime movie segments is also available.
Lynda Weinman
http://www.lynda.com/hex.html

Color
Provides the 16 color names (for HTML 3.2) as well as a list of the 140 color names for fonts and table backgrounds (with HTML code practice windows so you can SEE what your coding will actually look like). A helpful (229 K) GIF is also available which shows all the 216 Browser-Safe Colors and identifies the RGB code for each shade in a "paint chip" display.
David Merchant
http://www.mountaindragon.com/html/colors.htm

BG Color Menu
Select a 'browser-safe' background color from this page, then view samples of text in each of the 216 foreground colors. Experiment to be sure that the color combination you've selected isn't difficult for people to read. Remember, not EVERYONE will see your background image: Make sure your text is still visible with the BG color you've chosen (and be sure you've specified one --don't rely on the default value-- you don't know what they may have selected).
Jorn Barger
http://www.robotwisdom.com/colors/bgcolor.html

JavaScript RGB to Hexidecimal Color Converter
Type in the RGB (red-green-blue) code and this script will show you the color (in a pop-up window) and provide the 6-digit hexidecimal number. A real time-saver when working with graphics and background colors [requires a Java-enabled browser].
Eyeful Web Enterprises
http://amby.com/tools/rgb2hex.html

The Background Sampler -- Netscape
Netscape provides free background images for use on webpages -- you can download them OR access them directly from Netscape's servers!! Includes instructions for copying, coding and using the images.
Netscape
http://home.netscape.com/assist/net_sites/bg/backgrounds.html

Webpaper
Webpaper is a collection of GIF files each of which creates the illusion that the text is printed on one of several realistic paper choices. The effect is remarkably pleasant and actually encourages reading (unlike the distracting patterns used on many web pages). Webpaper uses no wood pulp and is made from 100% recycled electrons; it is free for non-commercial use.
Jay Boersma
http://www.ecn.bgu.edu/users/gas52r0/Jay/backgrounds/webpaper/webpaper.html

Julianne's Background Textures
Easy to use selection of textured images grouped in categories by predominant color. You can also take an automated tour of backgrounds.
Julianne Tolson - Websterina
http://www.sfsu.edu/~jtolson/textures/textures.htm

Tips and Tutorials for Beginners, Intermediate & Advanced Users
Laurie McCanna's Free Art Site provides tips and tutorials for users of ALL levels as well as software-package specific info. Find out how to make sense of that great new graphics program (before you throw your mouse). Learn how to Create a Transparent Gif or a Seamless Pattern Tile Background, etc. Find out about Text Effects, creating GIF Icons, and Animations. Includes the outstanding: How to Create a Perfect Screenshot Painlessly.
Laurie McCanna
http://www.mccannas.com/pshop/menu.htm

Photoshop Web Reference
Designed to be the definitive online source, if you need info about Adobe Photoshop (especially version 3 or 4), you'll find it here.
Austin Chang
http://www.adscape.com/eyedesign/photoshop/

Rozie's Illustrated Graphics Tutorial
Clear step-by-step instructions for downloading and using graphics; check out the Alpha-Bytes available for use on personal homepages.
Rozie
http://geocities.com/HotSprings/3055/tutorial.html

Web Clip Art
Collections of free clipart to use on personal or commercial Web pages; use the A-Z Clipart Topic List to find a particular type of material. Help Links & Tutorials are available to assist you in downloading images, using graphics, dealing with Web TV, AOL, etc.
Bobbie Peachey
http://webclipart.about.com/

NautiGal's Graphics Galore
Very well-organized, anotated listing of sites with FREE graphics for homepages.
Cathie
http://choice.net/~nautigal/07graphic.html

ABC Graphics
Free gifs, backgrounds, icons, buttons, bullet points, page dividers, arrows, etc.
ABC Graphics
http://www.abcgiant.com/

Free graphics for your web site
Nicely organized, all free for the taking, WITH directions for saving files. Includes:
Webtime Internet Tools
http://www.webtimetools.com/Graphics/graphics.shtml

The Corporation The Corporation: Icon Gallery
Okay, you know you deserve an award... go and select your own (feel free to hold a ceremony and send out announcements, if you wish)... just be sure to link back to The Corporation!!
The Corporation
http://www.thecorporation.com/icon/icon.html

ButtonMaker
Turn Any GIF Into A Free Button! You can easily create a nicely beveled button using this quick, online utility (it even works on animated GIFs!) AND you can then use them on personal OR commercial sites.
MediaBuilder
http://www.buttonmaker.com/

Animation Library
Have your heart set on a particular animated GIF (and no time or ability to make it yourself)? Locating GIFs on this site is easy with the menu system (and you can specify what you want to see before the graphics download, so you avoid those l-o-n-g waits).
Animation Library
http://www.animationlibrary.com/

 Top


Colors & Images Graphics Utilities Code Validators Accessibility Other Browsers Tools Index SEARCH



Graphics Utilities

 
GIFBot
A great FREE tool from NetMechanic, which provides up to a 90% reduction in the size of graphics!! Load an entire page by entering the URL or type in just the location of a specific graphic. An outstanding utility with clear, easy to follow instructions; works on JPEG, GIF, and animated GIFs.
NetMechanic
http://www.netmechanic.com/accelerate.htm

JPEG Wizard Online Optimizer
Avoid "generational loss" -- shrink and/or edit JPEG images (on the web or from your local drive) without the damage of uncompression and recompression; includes options to rotate/mirror JPEG files, also. Easy to use, fast and FREE!! Experiment online or download a trial version and use this easy WYSIWYG interface on your own computer.
Pegasus Imaging Corporation
http://www.jpegwizard.com/

GIFCruncher FREE GIF Optimizer
This GIF compression tool will reduce the file size of any single image from your computer or webpage; enter the specific location, or browse. Also, you can now crunch GIF, BMP, JPEG, TIFF and many other image formats to JPEG using the JPEGCruncher.
Spinwave.com
http://www.gifcruncher.com/

GIF Wizard
Go to this site and shrink your GIFs so they'll load quicker and take up less space on your server! Free for non-commercial use. [Registration required.] Will work with images already online or those stored on your own computer!
http://www.gifwizard.com/

Animation Online
Create Free Animated Banners and Buttons Instantly!! Who said you can't get anything for free?!! Be patient, though... this site allows you to make any of these these absolutely FREE:
  • Animated banner
  • Navigation bar
  • Animation display
http://www.animationonline.com/

GIF Animation Instructions
Provides a great two-level tutorial on GIF animation with a quick how-to overview (so novices can get started right away) as well as in-depth explanations (for more experienced animators). The author offers (FREE) personal assistance, too... just don't steal his graphics!!
SteveMD
http://home.eznet.net/~stevemd/animinst.html

Imagemap Help Page
This is an educational resource intended to provide assistance with the implementation of imagemaps; includes instructions and pointers to additional resources.
Steve Rogers
http://www.ihip.com/

Clickable Image Map Maker (CIMM)®
This easy-to-use Javascript utility allows you to quickly and easily generate the code ONLINE for accurate and comprehensive client-side imagemaps; excellent documentation and understandable instructions (even for the novice user).
Jeffrey W Baumann / LinkedResources Javascript Factory
http://www.linkedresources.com/tools/cimm.html

 Top


Colors & Images Graphics Utilities Code Validators Accessibility Other Browsers Tools Index SEARCH



Code Validators

Xenu's Link Sleuth [TM]
This spidering software checks Web sites for broken links AND you can check webpages on your local system, too. Verifies "normal" links, images, frames, backgrounds, local image maps, style sheets, scripts and applets. Color-coded results can be sorted by different criteria; very easy and quick!! Can be used on sites of ANY SIZE... free.
Tilman Hausherr
http://www.snafu.de/~tilman/xenulink.html

Link Checker
Check the links on your site using John Ray's outstanding Link Checker. It includes the patented Check-n-Browse feature which allows you to traverse your own pages (or the web) and instantly see which links are functioning properly.
John Ray
http://www.poisontooth.com/linkcheck/

NetMechanic
Check your HTML syntax and locate bad HTML tags; validate links, check your page load time, graphics, browser compatibility, spelling, etc. (Power User provides additional options). An astounding array of FREE services (and by-subscription plans); use any or all of these great tools to tune-up your website. Also available: GIFBot - up to a 90% reduction in the size of graphics!!
Enter the URL:  
NetMechanic
http://www.netmechanic.com/

SiteInspector
 
Use this FREE service to evaluate your site's performance. Check HTML design, browser compatibility, dead links, spelling, search engine readiness, popularity of your site, and the load time of your pages.
MSN LinkExchange Site Inspector
http://www.siteinspector.com/

Linbot
Linbot is the professional Site Management Tool (a FREE clone of Linkbot) which allows webmasters to periodically and automatically check their site's integrity:
  • View The Structure Of A Site
  • Track Down Broken Links
  • Find Potentially Outdated Web Pages
  • List Links Pointing To External Sites
  • View Portfolio Of Inline Images
  • Get a run-down of problems sorted by author.
  • Locate problems or pages that may be slow to download, etc.
Marduk
http://starship.python.net/crew/marduk/linbot/

LinkAlarm Free Test Drive
Try this program FREE for two months -- run a full check on the first 200 pages of your web site; receive detailed reports and see not only exactly WHICH links are broken, but WHAT error code is generated (so you can tell determine the problem).
LinkAlarm
http://www.linkalarm.com/testdrive/

W3C HTML Validation Service
Validate Documents by URL; browse other sources of information (HTML resources, various validation programs, etc.).
Gerald Oskoboiny
http://validator.w3.org/

Doctor HTML
Check your website for coding peculiarities with Dr. HTML. The single page analysis is available at no cost; you may purchase access to Site Doctor.
Thomas Tongue and Imagiware, Inc. [No frames version]
http://www2.imagiware.com/RxHTML/

ANYBrowser - Site Viewer
See your site (or ANY page) as others do!! Move from link to link viewing pages as they'd appear in a variety of browsers (version 2.0 on). Check for text-only purity (and be sure your pages are truly accessible). Also, the ANYBrowser Viewer allows you to select/deselect specific page elements and see the results.
ANYBrowser
http://www.anybrowser.com/siteviewer.htm

Web Page Backward Compatibility Viewer
See your site as others see it (or take a look at someone else's WITHOUT specific features; you can systematically remove one or more of the elements, such as
  • Images
  • Tables
  • Frames
  • Applet (java)
  • Script (javascript)
  • Marquee
Also available: Lynx Viewer -- see what your page would like when displayed in this common text-mode browser.
DJ Delorie
http://www.delorie.com/web/wpbcv.html

Bobby  
Bobby is a web-based tool that analyzes web pages for their accessibility to people with disabilities. You can use the online version to test one page at a time, or download Bobby to check an entire site.
CAST - Center for Applied Special Technology
http://www.cast.org/bobby/

W3C HTML Validation Service
Select from a variety of features including W3C Validator. Provides a comprehensive Reference Guide as well as links to WebLint and WebSite Garage. Options include:
  • Submit by URL
  • Submit Bits and Pieces of HTML
Also available: Validator for Cascading Style Sheets
The Higher Education National Software Archives
http://www.hensa.ac.uk/html-val-svc/

Website Monitoring Service
Netwhistle.com, is a FREE service designed to monitor your Internet hardware (web, email, e-commerce, router, etc.) and notify you if they become unreachable from the Internet. You'll regain control, save time and (if you have a commercial site) make more money.
Netwhistle.com
http://www.netwhistle.com/

 Top


Colors & Images Graphics Utilities Code Validators Accessibility Other Browsers Tools Index SEARCH



Website Design and Accessibility

 

Designing your website or creating your very first page? Either way, you'll find other useful information, tutorials, and resources on both the Website Development and HTML Tips and Tutorials pages.

It's tempting to throw in lots of bells and whistles once you learn how to create those effects on your page, but WAIT!! Those same nifty effects can have serious negative consequences on the loading speed or accessibility of your pages. Do you really want to annoy people or prevent some from being able to use your site at all? If not, the resources in this section may help you avoid common mistakes.

With that in mind, browse around and have a great time exploring this section.

 

Dan's Web Tips: Graceful Degradation
Daniel Tobias provides lots of little details that help make a web site better. This section tells how to incorporate the latest bells and whistles without impacting accessibility. Also available, an interesting overview of Brand "X" Browsers -- you may want to see what others experience when visiting your site....
Dan Tobias
http://www.softdisk.com/comp/dan/webtips/graceful.html

Design-O-Rama
Outstanding tips on constructing well-designed web pages that will be displayed the way you intend (or as nearly as possible). In addition to this Introduction, the site also includes:
  • HTML Basics
  • Construction
  • JavaScript
  • Style Sheets
  • Design
Lance Arthur
http://glassdog.com/design-o-rama/

Six Principles of Accessible Web Design
This is one component of the FedWeb Tutorials: Designing for Universal Accessibility with HTML 4.0 which also includes a set of Presentation Slides as well as this handout document in both HTML and Word 97 format.
Kynn Bartlett
http://www.hwg.org/resources/accessibility/sixprinciples.html

Web Site Design - Criteria for a Great Site
Clearly explains what to do (and NOT to do) when designing a site. Discusses "curb appeal" and offers suggestions that will help you develop a high-quality website.
Bruce Clay
http://www.bruceclay.com/web_crit.htm

HyperTerrorist's Guide to Design on the WorldWide Web
Great tips to consider while designing your pages and site. These suggestions were made in the early days of webpage creation, but many still apply.
Jorn Barger
http://www.robotwisdom.com/web/terrorist.html

Webmonkey: Design Collection
All the great design articles and Crash Courses from Webmonkey's talented authors are provided in this annotated listing, including a section on the Web Accessibility Initiative and a collection of articles about authoring : browsers.
Webmonkey
http://hotwired.lycos.com/webmonkey/design/

WebTV Design Guide
Did you know that WebTV doesn't support horizontal scrolling and that the screen width is 560 (actually 544... pages wider than this are scaled to fit the screen). Check out the Authoring Resources (including the downloadable WebTV HTML Reference Guide) to find out which tags and formats are supported so you don't lose those viewers (95 million subscribers are projected by the end of the century). To test your pages, download the WebTV Viewer.
WebTV Networks
http://developer.webtv.net/design/designguide/Default.htm

Designing for Different Resolutions
Excellent overview of the various elements to be considered when designing webpages to be viewable on the wide variety of screens currently in use.
Michael Kay
http://www.hotwired.com/webmonkey/99/33/index0a.html?tw=frontdoor

Web Access Resource Center
This web site is a centralized resource dedicated to the goal of making the internet accessible to persons with print handicaps; it includes
  • Web Pages of Visually Impaired People
  • Suggestions and Encouragements for WebMasters
  • Guides for accessible web page design
W. Loughborough; The Smith-Kettlewell Rehabilitation Engineering Research Center
http://www.ski.org:80/RERC/WebAccess/default.html

Making Your Website Accessible
Includes the Web Content Accessibility Guidelines as well as resources to Check Your Page
Center for Information Technology Accommodation
http://www.itpolicy.gsa.gov/cita/wpa.htm

Crafting A Nifty Personal Web Site
Billed as: A style guide for those with no style, this site provides great suggestions for developing a site that will be interesting rather than annoying.
Buy Jay Food Productions
http://www2.hawaii.edu/jay/styleguide/

Developing Low-Speed WWW Presentations
This article was written back in the good ol' days but still has much to offer.
Bob Cunningham
http://www.connect.hawaii.com/hc/webmasters/low.speed.notes.html

Composing Good HTML
An outstanding overview of document style, standard and non-standard HTML, techniques for meaningful organization, avoiding common (and not so common) errors, etc.
James "Eric" Tilton
http://www.cs.cmu.edu/~tilt/cgh/

Fonts, Fonts, Fonts
This article gives a good overview of some of the important considerations in selecting fonts for your site.
Jason Dunn
http://www.webutilities.com/community/fontzone/fz-jd-01.htm

FileLibrary FONTS COLLECTION
The File Library provides thousands of fonts; search to locate the one(s) you want.
File Library of Channel 1
http://www.filelibrary.com/Contents/DOS/100/62.html

Put GO Translator on your site
Allow your visitors to translate:
  • Your Web page
  • Other sites
  • Any user entered paragraph
SYSTRAN Translation Software
http://translator.go.com/?input_type=websnip

 Top


Colors & Images Graphics Utilities Code Validators Accessibility Other Browsers Tools Index SEARCH



OTHER Web Browsers

 

Most likely you are viewing this page using Netscape or MSIE, so you may well be thinking... "Why would I want ANOTHER web browser?" ...and that's a valid point if all you're doing online is browsing.

However, since you're reading this page on webpage design, you are most likely a fairly serious web page developer. While code validators and backwards compatibility resources are useful, nothing beats seeing what your page actually looks like in a variety of browsers, especially so you can experiment on your local machine BEFORE uploading your files for all the world to see, or NOT to see (if the coding is scrambled on their browser of choice...).

Most of these web browsers are free for educational and non-commercial use; be sure to read the user agreement before downloading. While these sites are "reputable" (to the best of my knowledge), it is always wise to run a virus scan on any downloaded software prior to installation.

 

Lynx Sources
Find the version that's right for your system! Also available: Web authoring and Lynx, a simple guide to the most essential HTML elements supported by Lynx, and ways to ensure that pages are "Lynx friendly."
Subir Grewal
http://www.crl.com/%7Esubir/lynx/sources.html

NCSA Mosaic
The Software Development Group at NCSA developed this web browser and now provides versions of this browser for several different operating systems as well as info about using the source code.
NCSA
http://www.ncsa.uiuc.edu/SDG/Software/Mosaic/NCSAMosaicHome.html

Mozilla
If you love Netscape (and who in their right mind doesn't...), then you may want to check out Mozilla.org - the code integrators. Since Netscape made their software and source code freely available, this group hopes to help people reach consensus, and thereby provide direction and coordination for future improvements. Participate in this open forum and be on the cutting edge of browser design. [Mozilla is used as a generic term referring to web browsers derived from the source code of Netscape Navigator.]
The Mozilla Organization
http://www.mozilla.org/

 Top


Colors & Images Graphics Utilities Code Validators Accessibility Other Browsers Tools Index SEARCH


Internet Tools Site Index [Full Itemized Listing]
Internet Basics
Online Resources
Finding Information
Search Engine Forms
HTML Tutorials & Editors
Website Design & Accessibilty
Development & Promotion
Javascript Resources




mail
Amby Duncan-Carr
webmaster@amby.com


Home Visit Amby's
HOME PAGE



Directory Brain Games Cat Site Education Internet Mensa Portfolios Test Prep Work Site Site Search


Last Update: 12 January '02 at approximately 23:00 GMT

© 1999 - 2002   Amby Duncan-Carr   All right reserved.

URL of this page:
http://amby.com/tools/design.html