This publication is published by the Web Development Section of KDLA's Commissioner's Office.

A Web Design Guide for Kentucky's Public Libraries

Essential Online Resources for Web Designers

When you're frustrated or looking for inspiration, it can be quite taxing to filter through hundreds of search engine results for applicable information. Below are resources used by respected web developers that you might find helpful. Enjoy!

A List Apart: http://alistapart.com
When to use it: when you're brainstorming ideas
Why use it: A List Apart is known as a publication "for people who make websites." It is a great resource in that it provides tutorials on implementing innovative web ideas, with special attention to insuring that the implementation is both accessible and according to web standards.
Comments: Sometimes the coding is quite complicated - for advanced web designers. However, many of the authors will describe the problems they also encountered, making you not feel quite so "dumb" when you attempt working with the techniques.
Color Blender: http://www.meyerweb.com/eric/tools/color-blend/
When to use it: when you're trying to create a new color for a scheme
Why use it: The Color Blender allows you to choose two colors and blend them to create a third.
Comments: You will need to know the hexadecimal number codes of the colors you plan to use. There is a palette provided, but the choices in it are limited. (Editor Note: I usually set the midpoint field to "5" to get a good sampling. Leaving it at the default "1" doesn't produce many results.)
Color Palette Generator: http://www.degraeve.com/color-palette/
When to use it: when you're trying to create a color scheme from an image, such as a library logo, poster, etc.
Why use it: The Color Palette Generator allows you to enter an image path into its search box, and it will upload the image and produce two color palettes - dull and vibrant - based on the colors in your image.
Comments: This is an easy way to create a customized color scheme. The only complication is that your image will need to be on your (or another) web server. The service will not upload images from your hard drive.
Color Schemer: http://www.colorschemer.com/online.html
When to use it: when creating a color scheme of bright colors
Why use it: The online Color Schemer provides 16 colors guaranteed to coordinate with your chosen shade.
Comments: This is a good resource for creating vivid color schemes for children's or teen pages.
Color Wheel: http://www.karakas-online.de/myServices/colorwheel.html
When to use it: when needing a color's hexadecimal code
Why use it: The online Color Wheel allows you to mouse over an actual color wheel. You are able to not only find out the number of your color, but also create a scheme based on your chosen colors.
Comments: This is cool - give it a try.
Creative Commons: http://creativecommons.org
When to use it: when you're looking for anything in the public domain
Why use it: Creative Commons is a nonprofit organization that offers flexible copyright licenses for creative works - especially for other non-profits. The organization has a vast repository of resources that may be searched: photographs that are free to use provided that the original photographer is credited, to songs that may be copied, distributed, or sampled with no restrictions whatsoever.
Comments: Unlike many online resources with vague or no copyright permissions, items in the Creative Commons must be registered and permissions specified by the copyright owner to be in the catalog.
Cynthia Says Portal: http://www.cynthiasays.com/
When to use it: when testing your webpage for ADA/508 accessibility
Why use it: ADA/508 compliance is quickly becoming an issue for websites. Already, federal and state government online services must be accessible. The Cynthia Says Portal will give you an idea of what things you need to change in your web design in order for it to be accessible to the visually and/or physically handicapped.
Comments: The interface is a little difficult to understand. In the webpage box, place the page's address; select Priority 1,2,3 for the report mode, then hit "enter" on your keyboard. The easiest way to interpret the results is to look down the right side for "yes" or "no" - lots of "yes" results are good; a "no" means that there's a problem causing the page not to meet one of the priorities.
*The service only allows one test run every 60 seconds.
Dynamic Drive FavIcon Generator: http://www.dynamicdrive.com/favicon/
When to use it: to create a customized icon to appear next to your library's name in bookmarks/favorites listings
Why use it: This generator takes all the work out of creating an icon. You can upload your library's logo, and it will automatically transform it into a 16px x 16px icon to be displayed next to your website's address in the address bar, or in your patron's favorites file once your page is bookmarked.
Comments: To implement the icon, you will need to place coding in your webpages.
Firefox Web Browser: http://www.mozilla.com/firefox/
When to use it: when you're concerned about your website being viewable by browsers other than Internet Explorer
Why use it: Viewing your site in Firefox will expose any coding problems or display errors your webpage may have. Firefox interprets coding differently than Internet Explorer: in a much more "literal" way. If you are able to code your page so that it looks good in both Firefox and Internet Explorer, there's a good chance that it will look good in other browsers, such as Netscape, Opera and Safari.
Comments: Mozilla also makes available many web design components, called "extensions," for Firefox.
(See Web Developer Toolbar below)
Hexadecimal Color Values Reference: http://www.hitmill.com/html/rgbcolorvalues.html
When to use it: when creating a color scheme
Why use it: This is probably the best color schemer on the Internet. The color palettes it produces are professional quality - no bright or garish colors as experienced when using other color schemers. The program allows you to select palettes of complimentary (default), monochromatic, analogic - the base color and its closest neighbors on the color wheel, analogic+ - the base color and its closest neighbors and its compliment, split complimentary, triadic, and double contrast.
Comments: You will need to click the unlabeled button next to the hexadecimal color code to obtain your color scheme.
HTML Dog: HTML and CSS Tutorials, References, Articles and News: http://www.htmldog.com
When to use it: any time
Why use it: These are easy-to-follow tutorials which provide not only good instruction, but information about browser compatibility. In the Advanced sections, provided are many innovative ways to improve your website. Make sure to check out the "Son of Suckerfish" article series, detailing how to implement drop-down menus in your design and in KDLA's drop-down menu templates.
Comments: The tutorials are for beginners to advanced.
Jakob Nielsen's Alertbox Columns on Usability and Web Design: http://www.useit.com/alertbox/
When to use it: any time
Why use it: Nielsen's Alertbox Columns provide web usability information based on scientific data, obtained through focus groups, rather than based on opinion or observed trends. You can find out how to design webpages specifically for children, teens, senior citizens, immigrants, etc.
Comments: No matter how old the columns are (some date back to the mid-90's), the information is still applicable to web design today.
Javascript Lint, the Javascript Verifier: http://www.javascriptlint.com/online_lint.php
When to use it: when coding with javascript
Why use it: Javascript Lint analyzes your javascript code for possible errors, and makes recommendations as to how fix them.
Comments: The interface is very easy to use. The correction recommendations not only state the solution, but also literally point to where in the code they should occur.
Listmatic: http://css.maxdesign.com.au/listamatic/
When to use it: when creating a menu
Why use it: Unlike many resources which require you to place advertising on your page to use the coding, the coding for these menus is ad-free.
Comments: These menu-lists are CSS-based.
Lorem Ipsum Generator: http://www.lipsum.com/
When to use it: during the design process
Why use it: The Lorem Ipsum Generator produces standard template text, based on the Latin "Lorem ipsum dolor sit amet...." This is handy when you are designing pages and need content to resolve spacing issues.
Comments: The page also provides an interesting history of the usage of "Lorem ipsum."
Monochromatic Finder: http://slayeroffice.com/tools/color_palette/
When to use it: when looking for a slightly lighter or darker version of a color
Why use it: Like the paint samples you can get at hardware stores, the Monochromatic Finder provides five shades either darker or lighter than your original.
Comments: The program allows you to save links to your color results.
Open Source Web Design: http://www.oswd.org/
When to use it: when in need of a template, or design inspiration
Why use it: Open Source is an organization devoted to providing free quality web design templates. Over 1,600 are currently available.
Comments: The site has a great search capability, allowing you to search by the type of template you want, the type of coding you want, or the type of guidelines you want to follow, such as W3C validation.
Open UW - Free HTML Course from the University of Washington: http://www.outreach.washington.edu/openuw/asp/transform.asp?course=Htmlbasics&xml=htmlbasics_intro1
When to use it: when you're new to web design
Why use it: This free online course provides basic instruction on how to understand coding and develop a simple webpage. It is a good introduction to the world of web design, or can serve as a refresher course for those who aren't confident of their coding skills.
Comments: The course allows you to complete it in sections, not in one sitting. There are quizzes after each section, to reinforce your learning.
W3C Markup Validation Service: http://validator.w3.org
When to use it: any time you create or edit a webpage
Why use it: The W3C Markup Validation Service checks web coding for errors or inconsistencies which may cause the page to display incorrectly in certain browsers. It also checks whether the coding follows the standards set by the Worldwide Web (W3C) Consortium.
Comments: Although intimidating at first, the W3C validation service will not only provide information about your coding, but educate you as to proper web standards.
W3 Schools: http://www.w3schools.com/
When to use it: when in need of a reference or instructions
Why use it: The W3Schools provide tutorials on subjects such as basic HTML, CSS, and XHTML to advanced XML, SQL, Database, Multimedia and WAP.
Comments: Unlike many tutorials, these provide instructions on creating standards compliant coding. They serve as a good reference when coding questions come up.
W3C CSS Validation Service: http://jigsaw.w3.org/css-validator/
When to use it: any time you create or edit CSS coding
Why use it: The W3C CSS Validation Service checks CSS styles for errors or inconsistencies which may cause the page to display incorrectly in certain browsers. It also checks whether the coding follows the standards set by the Worldwide Web (W3C) Consortium and/or provides advice on making your webpage design accessible to those viewing your page using assistive technologies.
Comments: Like the Markup Validation Service, using the CSS Validator can provide not only information about your coding, but also information as to improve your coding skills.
Web Developer Toolbar: http://addons.mozilla.org/firefox/60/
When to use it: any time
Why use it: The Web Developer Toolbar is an extension of the Mozilla Firefox browser. It has many capabilities essential to web designers: displaying CSS, form, and image information as you are viewing the page in the browser; providing accessibility information, as well as linearizing content to give you an idea as to how the page would be read by a screen reader; allowing for quick access to validation services; and many more.
Comments: Works in Firefox only.
Web Style Guide (2nd edition): http://www.webstyleguide.com
When to use it: any time
Why use it: The Web Style Guide is the ultimate resource for web design "etiquette." It provides information on interface design, site design, page design, typography, editorial style, graphics, and multimedia. It also gives a good comprehensive overview of what steps you should take in creating a website from the start.
Comments: Invaluable resource, also available in print.
Webdeveloper.com: http://www.webdeveloper.com
When to use it: when you are frustrated... or bored
Why use it: Webdeveloper.com is an online forum, providing the opportunity for members to seek assistance with such topics as CSS, HTML, SQL, graphics, multimedia, JavaScript, Dreamweaver/FrontPage, and Perl. Also available is a Website Review area, where you can submit web designs to the forum for review by members. The opportunity to review other websites is a great way to learn about what other people are doing in terms of design, layout, and coding.
Comments: This forum requires registration (free).
WebXact: http://webxact.watchfire.com/
When to use it: when checking your webpages for ADA/508 compliance
Why use it: ADA/508 compliance is quickly becoming an issue for websites. Already, federal and state government online services must be accessible to the visually and/or physically handicapped.
Comments: This service is a little more user-friendly than Cynthia Says, however due to high traffic on the site, many times you will be unable to run a test.
*The service only allows one test run every 60 seconds.
The Daily Sucker: Current Live Examples of Bad Web Design Techniques: http://www.webpagesthatsuck.com/dailysucker/
When to use it: when you're dispirited about your web design skills
Why use it: No matter how inexperienced you are in web design, there is someone who is much more so. This site features all the blunders that beginner as well as professional designers make.
Comments: The features are also educational, in that they provide reasons as to why the websites are considered bad, and what should be done to improve them.

 

Frequently Asked Questions

Sometimes, finding coding/scripts using a search engine is frustrating. How do you determine which are good to use?

You want to make sure that the script/coding you select is cross-browser compliant; else, only part of your viewers will see the effect. Sites, such as Dynamic Drive and Javascript Source, provide the browser compatibility information you need to make good selections.

Also, check the date of the submission. Many times, coding pages you will find are dated: coding designed for browsers four years ago may not work in today's popular browsers.

What do you consider as the most valuable of the links you've listed?

It's a tie between the W3C HTML Validator and the W3C CSS Validator. I've learned more by discovering my errors through cuttingly objective comments of these blunt instruments than any of the pleasant compliments I've received.

Are there any web design blogs worth visiting?

Of the many, many "web design" blogs out there, these are considered the most respected:

*Note: not every entry in these blogs has to do with web design.

Privacy| Disclaimer| Individuals with Disabilities| Resources Copyright © 2004 Commonwealth of Kentucky.All rights reserved.