Navigation New Posts
 » Web-Dev-Bookmarks: update (21 May)
 » Google Pagerank: Algorithm (5 May)
 » Google PageRank: FAQ (24 Apr)
 » Nick Hornby - "High Fidelity" (23 Apr)
 » Creatiff: Playboy Ad (3 Apr)
 » The Awful German Language (31 Mar)
Bookmarks for web designers
How to choose a matching color scheme for your web-site? Where can I get licensed-free photo images? How can I choose a navigation menu? Where can I learn more about current CSS & HTML developments? bookmarks »
Biography and Curriculum Vitae
Vitaly FriedmanVitaly Friedman, was born in Minsk, the Republic of Belarus, on the 8th February of 1985. While being 14 years old, I wrote my first article which was published in a weekly Belarussian computer-oriented newspaper in July 1999... bio & cv »
daily reading


© Vitaly Friedman, Saarbrücken, 2004-2005. All rights (Copyright) for texts and design are reserved by the author. Any non-commercial creation, use and distribution of copies in electronic and printed form is allowed if the content remains unchanged and the source is mentioned (Vitaly Friedman, and the rights of third persons aren't concerned or affected.

Made by vf
hosting -
url -
Home-Web development-Web development tools

Bookmarks for web developers: a list of useful web-tools

Last updated:SaturdayMay21th

The project 'Essential bookmarks for web-designers and web-developers', previously updated on this page, has a new url (, a new design, a new hierarchical structure and, of course, new web-dev-resources. The reason for changing the basic concept of this project was a huge number of suggestions and links, which have overflooded my mailbox recently. Over the last few days, a new project was created and updated. The old version (which also will be updated in future) is still available on the page "Bookmarks: Maxi edition". You are welcome to submit your own links to the directory, filling out this form; besides, I'll be glad to receive feedbacks, comments and new ideas coming from your side.

Please update your bookmarks!

How did it begin? Recently I started to put together a list of useful web design & web-programming tools. The idea was simple: I wanted to list on a one single page the most useful web-sites, which make the life of web designers easier. If you ask the old uncle Google where you can find proper web design-instruments he shows an infinite list, whereby "his" links aren't actually that useful. At the same time really helpful pages aren't shown at all...

This page is actualized once a week. If you regard my list as helpful - please feel free to post similar posts (please - with link to my homepage) in web design- & web-programming-forums, so the list can be used not only by some single online-communities. Besides, I would really appreciate new links coming from your side.

This list was created with the help of many web designers and enthusiasts from Germany and United States, but mostly it was created by myself. Please do not copy the list without giving a link to the source - I invested much time in creating and updating this overview. Therefore please do not neglect my personal work.


New Links (39 resources):

General Overview:


new link
my personal favourite
english / englisch
german / deutsch
russian / russisch
spanish / spanisch



01. Here creativity has no limits...

02a. CSS techniques under a lupe...
  1. is where Roger Johansson writes about web standards, accessibility, usability and other topics related to web design and development: ,
  2. : Experiments in Web Programming
  3. - CSS Design Showcase
  4. (en, de)
  5. Tips and Demos
  6. takes you through the basics of floating elements such as images, drop caps, next and back buttons, image galleries, inline lists and multi-column layouts.
  7. - How to make web pages - A good practice guide to HTML and CSS
  8. : Web Design and Development
  9. is a gallery of professional web design works
  10. &
  1. Cascade Style Sheet - & & - Alles über CSS
  1. - russian alternative to CSS Vault (ru)
  1. - Inspiration pa Svenska - Swedish CSS design gallery.

02b. CSS Tabs & Pure CSS Navigation Menus
  1. : 10 navigation menus
  2. : CSS Tabs
  3. : CSS Resources » Navigation
  4. - using some very simple PHP and CSS you can create intelligent menus that are easy to use and maintain
  5. With and you can create CSS Menus by two mouse clicks.

02c. CSS- and HTML-Web-Tools

    i. Accessibility checkers

    1. Bobby Online Service
    2. Cynthia Says
    3. OCAWA Web Accessibility Expert
    4. offers to website developers a complete methodology for accessibility analysis which uses a tool for page checking that makes it possible to quickly identify which parts of a page are in error and the HTML code corresponding to these parts.
    5. WAVE 3.5 Accessibility Tool provides useful information about accessibility features and errors within your page. It is designed to facilitate the design process by adding icons to a version of your page. The icons represent structural, content, usability, or accessibility feature or problems within your content. You can easily see the exact location within your page where an error is present.
    6. WebXACT Quality & Accessibility Check is a free online service that lets you test single pages of web content for quality, accessibility, and privacy issues.

    ii. HTML-Web-Tools & Services

    1. are supposed to assist web authors who wish to make their information available to the largest audience. These tools provide alternate ways of viewing your pages, so that you can ensure that your content is received properly by all viewers.
    2. is a tool for checking and cleaning up HTML source files. It is especially useful for finding and correcting errors in deeply nested HTML, or for making grotesque code legible once more.

    iii. CSS-Web-Tools & Services

    1. : Will the browser apply the rule(s)?
    2. With , you can create two distinct styles of rollover button, using CSS and just one image. The difference here is that you can optionally allow some background space above your image in which to place CSS- controlled rollover text.
    3. Free CSS/HTML template roundup (found at Ruthsarian Layouts - 6 good-looking, free CSS page layout templates, complete with colors, headings, etc; Bluerobot Layout Reservoir - 2 and 3-column page skeleton CSS layouts; Glish CSS Layout techniques - Two, 3 and 4 column skeleton CSS layouts; The Layout-o-matic - enter page width, number of columns, and padding and it generates CSS and HTML skeleton layout; Little Boxes - various box layout CSS stylesheets; Open Source Web Design - various complete page templates free for use; Web Builders’ Toolkit - more links to template resources.
    4. is a CSS Menu-Generator: create cross-browser list-based navigation bars with ease
    5. - enhance the table with round corner stone!
    6. explains the structure of CSS- and HTML-documents. Enter semi-colon separated selectors or just paste in your existing rulesets into the "Direct Input" area, or provide the URL of a stylesheet or an HTML document with an embedded stylesheet in the "URL Input" area. English, Spanish, German and Bulgarian versions are available.

    iv. Miscellaneous tools for your web-site

    1. . Web design tools, coldfusion, flash, free tutorials, help and forum. ApplayIT's coldfusion resources give you hint and tips how's to build a top ranking web site. Here you find the best tools to make your page dynamic and with DHTML, ColdFusion, CCS styles and FLASH.
    2. by
    3. by Ggtmcknight
    4. shows how a web-page is interpreted by the older browsers
    5. Identifont - Identify a font: answer a series of questions about the letter shapes to help narrow down the choices. Sometimes it works well, sometimes not as well. But definitely worth trying when you have a fairly good sample of characters to work with.
    6. fontleech is a constantly-growing index of the best free font sites on the web.
    7. Free Photoshop Website Templates
    8. creates screenshots of your web-page in different browsers (currently unavailable)
    9. Identifont - Identify a font. Answer a series of questions about the letter shapes to help narrow down the choices. Sometimes it works well, sometimes not as well. But definitely worth trying when you have a fairly good sample of characters to work with.
    10. & : do you have any broken links?
    11. Load time check
    12. Readability test
    13. Screen size simulator
    14. Semantics extractor
    15. generates HTML-Code for presenting video-clips on a web-page.
    16. Vischeck Colour Blindness simulator
    17. is a free Website Performance Tool and Web Page Speed Analysis
    1. : Test: Ist Ihre Webseite barrierefrei?
    2. Among numerous you can find following services: CSS Generator, DHTML Transition Effects, Video Link Generator, Javascript Messagebox-Generator, Javascript MouseoOver-Link Generator, Link-Checker, Punkt/Inch/Millimeter-Convertor, Loading-, Link-Popularity-, Submission-Checker, Meta-Tag Generator, Bannergenerator etc.

02d. CSS- & HTML-Specifications
  1. , a free online reference to every aspect of cascading style sheets.

02e. Other useful Web-Tools
  1. with Anti-Spam Encoder
  2. : a typographic book search
  3. is a rapidly growing web magazine dedicated to all things content management.
  4. CMS: has an overview of all Content Management Systems (CMS) with the demo-versions of installed systems
  5. CMS Matrix is a content management comparison tool.
  6. - was your web-page stolen? Find copies of your page on the Web
  7. is a social bookmarks manager (SBM). It allows you to easily add sites you like to your personal collection of links, to categorize those sites with keywords, and to share your collection not only between your own browsers and machines, but also with others. Besides, helps you discover the hot and fresh bookmarks from various SBM. Absolutely - Complete Tool Collection
  8. : Phil Bradley: Finding what you need with the best search engines
  9. : not your typical photo archive, Flickr is more of a repository of personal shots and individual home photo collections rather than a public repository for images to be shared and re-used. The Great Flickr Tools Collection
  10. Free Icons: Icon Database (free) (de) and
  11. : undispensable scripts for the everyday life in the Net.
  12. : Make your own annotated multimedia Google map
  13. is a JavaScript bookmarklet tool which can submit websites to multiple tracking sites. Maybe you too want to be able to do a one click submit to send sites to places like Furl or at the same time. This tool allows you to select the ones you want and it will generate the bookmarklet tool for you.
  14. helps you to test your Internet Browser for conformance of Web Standards. (de, en)
  15. : what's Software is the server of your site running?
  16. is a disposable email account system. After 24 hours, the email associated with your login name will be cleaned from the system.
  17. : Smart tips, tools, tricks, news and facts, tools and services.
  18. - you’re "stuck" on figuring out the perfect address for your web site? Search for expired or dropped web site domain names by keyword.
  19. Text Generators: (16 languages), , , .
  20. is a random generator for 'typoPosters'. a typoPoster is a poster, created from images and letters/text that doesn't have any sense, just to look good.
  1. für Websites
  2. Pixelfonts
  1. converts an unreadable text into the readable one (supported encoding: MAC, KOI, WIN, DOS, ISO, Translit, BASE64, Quoted-printable, UTF8, ASCII).

03. Web Design: written and unwritten rules and standards
  1. : code snippets and proof of concepts - the links should help get you started on building your own functions with XMLHttpRequest.
  2. @ 456bereastreet
  3. : something that often seems to confuse people that are new to CSS-based layouts is the use of tables. It's important to remember that tables are still perfectly fine to use - if used correctly.
  4. and provided by
  5. : why tables for layout is stupid: problems defined, solutions offered
  6. : Good design is simple, timeless, solves the right problem, is suggestive, often slightly funny and looks easy.
  7. by Mark Boulton
  8. : "...input elements should be organized in logical groups so that your brain can process the form layout in chunks of related fields."
  9. is a resource for Web content developers. In these pages, a process-oriented methodology for creating World Wide Web-based hypermedia works is presented.
  1. - written by Christoph Paper

    Webdesigners recommend... (via

  1. Mezzoblue: Colour Schemes: A look at different methods of choosing colors from a design perspective.
  2. Boxes and Arrows: Natural Selections: An article on selecting colors from nature, with photographic examples.
  3. Web Page Design for Designer: Colour: Another look at color and selecting colors from nature.
  4. moreCrayons - Web-Smart Palette: Introduces a 4096-color palette that degrades well on older browsers as an alternative to the antiquated 216-color palette.

03a. Web Design Tools - Color Tools, Color Mixes, Palettes etc.

Color Theory, Color Tools and Palettes

    i. Color theory

    1. in Yahoo! directory.
    2. - color theory and color matching
    3. on Stylegala
    4. : the theory of colors, hue, saturation, the adjacent effect, harmony and color mixing.

    ii. Color tools

    1. is a free online tool designed to simplify the nightmare of color scheme selection. It looks complex, but after a few minutes you won't be able to live without it.
    2. With the you can identify color harmonies faster than with any color wheel or chart. Use it to select a color scheme for a corporate identity or design project. Rotate shapes on the color wheel to identify harmonious color schemes. Adjust saturation and lightness. Save RGB, CMYK, or HTML color values, then send them to a colleague or client.
    3. : 1 in 12 people have some sort of color deficiency. When you're designing for the web, this means that 1 in 12 people might not be able to see your site. That's alot of people. This tool helps you simulate the appearance of our site's colors for people with different color visions.
    4. has a unique set of color tools such as Color Matching (Match your computer generated RGB values to color cards, paint lines, inks, fandecks and more... Find an industrial standard match for your computer colors. Transform "virtual" colors in "real world" references.), Color Harmonies (Search for colors complements to your RGB values. Create color harmonies, combinations and themes. From your main (or background) color select trim and accents tones.), Search a Tint (Search popular color collections for specific color codes or names. Once selected the desired color, find the closest match in competitors' fandecks and color cards, create harmonies or get chromatic data.), Color Calculator (Convert color data to different color spaces. RGB to CIEL*ab, CMY to XYZ and much more. Looking for color math or space conversion formulas?)
    5. is a color selection tool that allows you to change both the colors and font characteristics and preview them before using.
    6. : 12 color chromatic wheel similar to the theoretical chromatic circle. Find and simulate the harmony of your web interface.
    7. create mixed swatches of background color for your pages.
    8. and : just like these tools produce shades of your color, mixed first with white and then with black.
    9. is a useful tool for creating a perfect color compositon or readable and accessible web design.
    10. is a free online tool designed to simplify the nightmare of color scheme selection. It looks complex, but after a few minutes you won't be able to live without it.
    11. is a directory of nice colors
    12. is a tool for choosing a color composition - available as a plug-in for Adobe Photoshop, Gimp, Fireworks, Flash, Golive, Painter, PaintShop Pro, Homesite, Illustrator, ImageReady etc.
    13. and : check readbility when any colour is used with black and white in four foreground and background combinations; explore colours near a specific colour, where you get to define what 'near' means; mix varying amounts of all combinations of red, green and blue with a specific colour; finely-tune your colour choice by hue, saturation or lightness, or make instant sets of co-ordinated colours; Colour schemes and palette layouts.
    14. Metallic Colours, Pastel Colours, 2x Colours, Skin Tones
    15. : CSS Border Test, Colourway, Colourband, Colourband Text, Colour Increments, Internet Explorer Scrollbars, RGB Converter, DOCTYPEs
    16. - there is a form at the bottom of this page that lets you choose any URL you want to extract colors from. The colors you see are from the site that referred you to this page.
    17. or generator of color schemes and palettes helps to create good-looking and well balanced and harmonic web pages.
    18. enables you to create 24-bit color schemes online - beyond the so-called safe palette. (IE 5.5 or higher)
    19. helps to select a matching palette and determine a matching color arrangement for your website.
    20. makes it easier than ever to select the color of the font and the background color.
    21. A unique certainly completes the incomplete list of color tools presented on this page.

    1. ColorMatch 5K German edition is an optimized german version of ColorMatch 5K

    iii. Color Schemes and Palettes

    1. & : Combo Tester and Web Color Gallery allow web developers to see how different color combinations work together on the screen.
    2. ColorMatch 5K helps to select a matching 6-color palette for your website.
    3. COLOURlovers is a place to view, rate and review some lovely colours & palettes. the idea is to create a place of color inspiration where a designer of any sort can see new and lovely colours... find out what colors are hot, what work well in other uses... and simply make some love with colour..
    4. - "a site for playing with colors" contains 19655 colors and 6387 schemes.
    5. Patterns: , , , .

    iv. Fashion: Colors Selection


03b. Web Design magazines

03c. Royalty free photos / lizenzfreie Fotos
  1. An of web-sites which provide royalty free photos
  2. is a great article, describing web-sites which provide royalty free photos.
  3. contains a lot of exclusive free stock images
  1. is a large database of royalty free images with many categories and abstract photos.
  2. in a german-speaking forum with a constantly actualized list of royalty free photos
  3. is a German database of royalty free images which enables 3 free downloads a day; creative and easy to find.
  4. is a small database of royalty free images. Good quality and creative images.

04. Usability
    1. All You Need For Accessibility - Tutorials, Tools, Books, Validators, etc: part 1, part 2
    2. Web Articles from
    3. IBM developerWorks Newsletter
      (with Usability-Column)
    4. Microsoft Usability Homepage
    5. - Improving the Web Experience
    6. Table of required size limits for various connection speeds
    7. includes dozens of sites about Accessibility, Legislation, Linking, SEO, Validity etc.
    9. Usability Test Profile
    1. Basics of Typography in the Web / Grundlagen zur Typographie im Web
    2. Groups & Listen

    3. Eine Einführung in die Web Site Usability anhand von vielen Beispielen
    4. Artikel zur Web- & Content Usability von Scoreberlin
    5. Info zum Cube test
    6. Berichte und Artikel von eResult
    7. Interview mit Jared Spool: Welchen Content suchen Web-surfer
    9. So schreibt man einen Usability-Report
    10. Zehn gute Gründe für Usability
  1. Usethics Library

05. Freelancers resources
  1. for Graphics Designers, Web Designers (Flash, Logo Designers, Photoshop, CorelDraw etc), Web Developers (PHP, MySQL, SQL, ASP, JAVA, Perl, CGI, JSP, ColdFusion etc), Freelancers, Data Entery Operators.
  2. periodically reviews best freelance sites on the Net and has a useful overview over the outsourcing jobs for programmers.

06. Search engines

    i. Add your link (free)

    1. = Yahoo + Altavista + All The Web
    2. Search engines (general search): Search AllinOne MetaSearch!: combining the power of all the worlds best search engines into one, AltaVista, AllTheWeb, Gigablast, Google, HotBot, Lycos, MSN, Teoma, WISEnut
    4. Web directories: Best of the Web!, WebSavvy, About, GoGuides, ODP, Yahoo!
    5. An impressive list of link submission directories

    ii. Search engines and SEO

      i. SEO Tools

      1. - , , .
        Alternative: .
      2. is an all in one tool to check the number of pages that link to you in AlltheWeb, AltaVista, Google, HotBot, MSN Search, and Yahoo!, as well as check for your site's presence in DMOZ and Zeal.
      3. and : Link Popularity Check, Search Engine Saturation, Keyword Verification - professional tools for checking the ranking of your site and its position in search engines.
      4. : combines the Overture keyword selector tool with tools for Keyword Analysis, Keyword Thesaurus, Keyword Lateralus (for lateral thinking ideas for keywords) and even a tool to check keywords and site rankings according to Google. (via
      5. - see your site like Google does. Simulate search engines and predict your Google listings
      6. : Link Popularity Check, SE Saturation-Index Check, Keyword Verification Check, Meta Tags Optimization, SEO - Optimization Articles, Unbranded SEO Tools
      7. Search Engine Optimization (SEO): , & - (registration needed) Search Engine Optimization Tools & Resources. The internet's most popular and powerful suite of SEO Tools. Link Popularity, Meta Tag Generator, Domain Typos - find common misspellings of domains, Keyword Density - determine a URL's keyword densities, Google Keywords - find relevant & popular search-terms, Overture Keywords - Query Overture's database of searches, PageRank Search - Search with PageRank supplemented results, PageRank Lookup - Check PageRank of multiple URLs, Future Pagerank - Check PR across Google's data-centers, Site Link Analyzer - Analyze outbound links & anchor text, Meta Analyzer - Analyze a website's META tags, Keyword Optimizer - Remove duplicates & sort keyword lists alphabetically.
      8. - Free online SEO tool to check the position of your website in the search engine of Yahoo™.
      9. : Link Popularity, SE Saturation, Keyword Position / SERP, Google PageRank, Bulk Google PageRank, Google PageRank: Indexed Pages, Alexa Rank, Bulk Alexa Rank
      1. : an overview of German, European and international search engines, search engines news etc.

      ii. SEO References

      1. - the source for search engine marketing and a magnificent reference on search engines.
      2. - this is how Google works
      3. - Most Popular Keywords.

07. Other lists of web design-tools
  1. list of bookmarks will lead you down the yellow brick road of standards-based web design.
  2. - a magnificent overview on the topic of web design.
  1. : Designlinks - German Link Ressource; das deutsche Design & Web design Verzeichnis.
  1. : a directory includes 1616 sites in categories Web design, Flash, Tools online, Media, Editor web, Developers etc.


What also might be interesting for you:

» 01. Why do I do it?
» 02. What can I do for you?
» 03. My last web-project
» 04. References
» 05a. Color Blender: Adapted
» 06. Creatiff
» 07. Search Engine Submission Tips
» 08. Google Pagerank - Frequently Asked Questions

Contact information:
Vitaly Friedman
email alt.:
nickname: vf, aquarius, vit_f
ICQ: 30644656
Technorati Profile