Bookmarks für Webdesigner

Letzte Aktualisierung: 21.Mai2005//Samstag

Vor kurzem habe ich angefangen, eine Liste nützlicher Webdesign- und Webentwicklung-Tools zu sammeln. Fragt man den alten Onkel Google nach nützlichen Webentwickler-Tools, so zeigt er eine ewig lange Liste, wobei die Links eigentlich gar nicht so nützlich sind. Die tatsächlich passenden Links werden aber viel später – wenn überhaupt - angezeigt.

Die Idee war einfach: ich wollte auf einer einzigen Seite diejenige Ressourcen auflisten, von denen ich fast täglich Gebrauch mache und welche das Leben der Webentwickler deutlich erleichtern können. Ob es sich um ein harmonisches Farbschema, ein "leichtes" und dennoch elegantes Navigationsmenü oder ein Tutorial über Web-Usabilty handelt - eine einzige Seite sollte die entsprechenden Referenzen liefern.

Im Laufe von wenigen Wochen, die durch viele angenehme Überraschungen und Entdeckungen begleitet worden sind, habe ich meine Idee realisieren können - am Ende entstand eine solide Linkliste, welche das Interesse nicht nur deutscher, sondern auch amerikanischer Webentwickler erweckte. Das letzte äußerste sich in zahlreichen E-Mails mit Vorschlägen, Unterstützung und konstruktiver Kritik, wofür ich mich bei allen Webdesignern bedanken möchte.

Und nun zur Sache.

Diese Seite wird einmal pro Woche aktualisiert. Falls Sie meine Linkliste als nützlich erachten, können Sie ohne Weiteres entsprechende Beiträge in Blogs, Webdesign- und Webentwicklung-Foren etc. posten - aber bitte mit einem Link auf diese Seite. Mein Ziel ist es, die gesammelten Bookmarks für alle zugänglich zu machen, damit nicht nur einzelne, sondern alle Webdesigner davon Gebrauch machen können und diese Linkliste vervollständigen können. Außerdem würde ich mich freuen, neue Links auch von Ihnen zu erhalten.

PS: Die neuen Links findet man, indem man sich die Legende anschaut, die unter dem "Überblick" zu finden ist.

Neue Links (32 Ressourcen): // 9. Mai 2005

Legende:

neuer Link
meine Wahl
englisch
deutsch
russisch
spanisch

Linkliste:

01. Kreativität ohne Grenzen...
BIT-101 Lab	Sodaplay constructor
glenmurphy.com	AdMe.ru (ru)
Processing	Robert Penner's Experiments
The Exploration of Computation	[ uncontrol ]
The Designer's Lunchbox	How to pitch an idea: a creativity "tutorial"

02a. CSS-Methoden und Beispiele
In seinem Weblog 456bereastreet.com schreibt Roger Johansson über Web-Standards, Zugänglichkeit, Usability und andere Themen, die mit Webdesign und Webentwicklung zusammenhängen; CSS tips and tricks, Part 1, CSS tips and tricks, Part 2 Asterisk*: Where web design lives A List Apart BlueRobot BrainJar.coms: Experimente in Webentwicklung CSS-discuss CSS Gallery: CSS Beauty - CSS Design Showcase CSS Gallery: CSS Vault CSS Gallery: unmatchedstyle CSS Design Ideas: CSS Sketchbook CSS Destroy: CSS Experiments css / edge CSS-INTENSIVSTATION (en, de) CSS Layout Techniques CSS Page Layouts: Samples CSS: 2-col tableless layout Design Detector Tips and Demos Drag & Drop Sortable Lists with JavaScript and CSS Floatutorial 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. htmldog - How to make web pages - A good practice guide to HTML and CSS CSS Layoutmatic Malarkey Image Replacement (MIR) Mandarin Design: Web Design and Development mezzoblue mezzoblue: css Zen Garden — Resource Guide Open Source Web design (oswd) is a gallery of professional web design works Sea Mus N Squirrel » CSS Play SilverOrange Labs StopDesign The Fade Anything Technique Using Background-Image to Replace Text Stylegala - design | css | standards & Stylegala resources The CSS Playground Jeffrey Zeldman Bjoernsworld.de Cascade Style Sheet - css.talky.de & css4you.de & mediaevent.de & css.fractatulum.net - Alles über CSS Vorsprung durch Webstandards * XRay Standards CSS Design - russian alternative to CSS Vault (ru) Webmascon: Usability, CSS, Web design CSSDesign.se - Inspiration pa Svenska - Swedish CSS design gallery.

02b. CSS Tabs und Reine CSS Navigationsmenüs
AListApart: Drop-Down Menus, Horizontal Style AListApart: Sliding Doors AListApart: Taming Lists aPlus:: ADxMenu: 10 navigation menus BrainJar: CSS Tabs Bulletproof Slants cssbasednavigation Free Menu Designs V 1.1* Hybrid CSS Dropdowns List-o-Matic With Listamatic 1 and Listamatic 2 you can create CSS Menus by two mouse clicks. Navigation Matrix Reloaded Simplebits: Mini-Tab Shapes 2 SilverOrange CSS Tabs Simplebits: Simplified CSS Tabs Simplebits: Mini-Tab Shapes Simplebits: CSS Mini Tabs (the UN-tab, tab) Simplebits: Accessible Image-Tab Rollovers Suckerfish Dropdowns The CSS Playground Veerle's 2 level horizontal navigation wg:CSS Tabs

02c. CSS- und HTML-Web-Tools
i. Zugänglichkeit-Checks Accessibility Valet Demonstrator Bobby Online Service Cynthia Says OCAWA Web Accessibility Expert Torquemada 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. 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. Web-based Site Usability Checker WebXACT Quality & Accessibility Check is a free online service that lets you test single pages of web content for quality, accessibility, and privacy issues. TAW - Test accessibilidad web ii. HTML-Web-Tools & Web-Dienste HTML Authoring Services 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. HTML Help: CSS, HTML Checks HTML Tidy 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. WDG HTML Validator iii. CSS-Web-Tools & CSS-Dienste CSS Box Lessons CSS Centricle: Will the browser apply the rule(s)? CSS Rounded Box Generator List-u-Like is a CSS Menu-Generator: create cross-browser list-based navigation bars with ease Nifty Corners: rounded corners without images Round Corner Stone/Icon (rcsi) V1.0 - enhance the table with round corner stone! SelectOracle 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. W3C Core Styles iv. Andere Tools für Ihre Web-Seite 9 nützliche Tools für das Webdesign 80x15 Brilliant Button Maker von LucaZappa.com. 80x15 Buttons Gallery von Ggtmcknight Browsercam - prüfen Sie, wie Ihre Seite von verschiedenen Browsern interpretiert wird. Browser Simulator zeigt, wie eine Web-Seite in alten Browsern dargestellt wird ieCapture v. 0.0.4 alpha erstellt Screenshots von Ihrer Web-Seite in verschiedenen Browsern (zur Zeit offline) Identifont - Identify a font. Sie wollen einen Font identifizieren? Geben Sie ein paar Hinweise über die Form der Buchstaben, um die Anzahl der Möglichkeiten zu verringern. Je detaillerter Ihre Angaben sind, desto höher ist die Wahrscheinlichkeit, den gesuchten Font zu finden. fontleech ist ein wachsender Katalog der besten Web-Seiten, welche Fonts kostenos herunterladen lassen. Free Photoshop Website Templates Link checker & Link Valet: weist Ihre Web-Seite "broken Links" auf? Load time check - Prüfen Sie, wie lange Ihre Seite geladen wird! Readability test Screen size simulator Semantics extractor TwoGun Code Creator generates HTML-Code for presenting video-clips on a web-page. Vischeck Colour Blindness simulator Web Page Analyzer is a free Website Performance Tool and Web Page Speed Analysis Web Page Backward Compatibility Viewer Barrierefinder: Test: Ist Ihre Webseite barrierefrei? Among numerous Webmaster-Resource Tools 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. Service for checking the links on your web-site / Service zum checken der Links

02d. CSS- & HTML-Specifications
Cascading Style Sheets - level 1 (CSS1) Cascading Style Sheets - level 2 (CSS2) CSS Property Index Document Object Model (DOM) Level 1 Specification Document Object Model (DOM) Level 2 Specification Document Object Model (DOM) Level 3 Specification HTML 4.01 Specifications ISO-HTML Specification XHTML 1.0 Specifications W3C Technical Reports and Publications Web content Accessibility Guidelines1.0 Westciv Complete CSS Guide, eine umfangreiche Online-Referenz zu jedem einzelnen Aspekt von CSS.

02e. Andere nützliche Web-tools
Advanced Email Link Generator with Anti-Spam Encoder amaztype: a typographic book search ASCII Table CMSwire.com is a rapidly growing web magazine dedicated to all things content management. CMS: opensourceCMS.com has an overview of all content Management Systems (CMS) with the demo-versions of installed systems CMS Matrix is a content management comparison tool. Copyscape - was your web-page stolen? Find copies of your page on the Web DayPop - What are the hot topics in the weblogging community today? del.icio.us 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, spid.ero.us helps you discover the hot and fresh bookmarks from various SBM. Absolutely Del.icio.us - Complete Tool Collection Error Message Generator Finding information: search engines: Phil Bradley: Finding what you need with the best search engines Flickr: 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 Free Icons: Icon Database (free) (de) and EggHeadCafe.com GIFBot Image-Optimizer GreaseMonkeyUserScripts: undispensable scripts for the everyday life in the Net. HOW-TO: Make your own annotated multimedia Google map Identification of the No-Name Hardware through FCC-ID Multipost Bookmarklet Tool - Alan's Marklet Maker 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 del.icio.us at the same time. This tool allows you to select the ones you want and it will generate the bookmarklet tool for you. MultiOS Browser Test helps you to test your Internet Browser for conformance of Web Standards. (de, en) Netcraft.com: what's Software is the server of your site running? PookMail.com is a disposable email account system. After 24 hours, the email associated with your login name will be cleaned from the system. Technorati - Blog & Internet Search: What's happening on the Web right now typoGenerator 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. URL Decoder/Encoder AvatarPage.de Blogg.de - Blogverzeichnis Impressums-Assistent für Websites Minifonts.com: Pixelfonts Mail Decoder converts an unreadable text into the readable one (supported encoding: MAC, KOI, WIN, DOS, ISO, Translit, BASE64, Quoted-printable, UTF8, ASCII). Registry Convertion

03. Webdesign: geschriebene und ungeschriebene Regeln
Ajax: A New Approach to Web Applications Bring on the tables: 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. CSS3 Color Module Color Theory and Color Charts provided by About.com. Open Source Web Development Tutorials Seybold Seminars: why tables for layout is stupid: problems defined, solutions offered Steadfast Suggestions for Web Design Paul Graham. Taste for Makers: Good design is simple, timeless, solves the right problem, is suggestive, often slightly funny and looks easy. Ten CSS tricks you might not know The Web Standards Project TripleColors: Guide to Official HTML Color Codes Typography: The Next Big Thing in Online Type Typography: Our Favorite Fonts of 2004 Typography: Feliciano Type Foundry Typography: The non-typographer’s guide to practical typeface selection Web Development is a resource for Web content developers. In these pages, a process-oriented methodology for creating World Wide Web-based hypermedia works is presented. Web standards project WEB STYLE GUIDE, 2nd edition Webdesigner empfehlen... (Figby) Mezzoblue: Colour Schemes: A look at different methods of choosing colors from a design perspective. Boxes and Arrows: Natural Selections: An article on selecting colors from nature, with photographic examples. Web Page Design for Designer: Colour: Another look at color and selecting colors from nature. 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.
i. Color theory An Introduction to Using Patterns Color, Contrast & Dimension in News Design Color Information in Yahoo! directory. Colour Symbolism Colour Theory Colours on the web - color theory and color matching Design Psychology on Stylegala Lesson in color: the theory of colors, hue, saturation, the adjacent effect, harmony and color mixing. ii. Color tools Defence Mechanism > Color Toy 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. ColorMatch 5K helps to select a matching 6-color palette for your website. With the Sessions.edu Color Calculator 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. Easy RGB 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?) 4096 Color Wheel Advanced Color Selector is a color selection tool that allows you to change both the colors and font characteristics and preview them before using. Color Mixers create mixed swatches of background color for your pages. Color Palette v1.2 and Color Palette Creator: just like Color Blender these tools produce shades of your color, mixed first with white and then with black. Color schemer Online v.2 Colormix is a useful tool for creating a perfect color compositon or readable and accessible web design. Color synthAxis 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. ColorWhore is a directory of nice colors 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.. Colour Contrast Analyser ColorLab is a tool for choosing a color composition - also available as a plug-in for Adobe Photoshop, Gimp, Fireworks, Flash, Golive, Painter, PaintShop Pro, Homesite, Illustrator, ImageReady etc. Colour exploration tools and a colour resources list: 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. How To Select Perfectly Matching Color Combinations: an Overview Mundi Design Studios Web Color Study The Man In Blue | Technicolor This or this generator of color schemes and palettes helps to create good-looking and well balanced and harmonic web pages. Web Color Theory helps to select a matching palette and determine a matching color arrangement for your website. Web Color Visualizer makes it easier than ever to select the color of the font and the background color. A unique catalog of color-tools-bookmarks certainly completes the incomplete list of color tools presented on this page. ColorMatch 5K German edition is an optimized german version of ColorMatch 5K

03b. Webdesign: Zeitschriften
Digital Web Magazine Web Developer's Journal Webdesign-Magazin "Guppi" Nbsp.ru

03c. Royalty free photos / Lizenzfreie Fotos und Bilder
Eine riesige Liste von Web-Seiten, welche lizenzfreie Fotos und Bilder zum Herunterladen bereitstellen Wo findet man die besten lizenzfreien Bilder? ist ein Artikel, der einen Überblick über die Seiten präsentiert, welche lizenzfreie Bilder zum Downloaden bereitstellen. StockVault enthält viele exklusive lizenzfreie Bilder AboutPixel.de ist eine riesige Datenbank mit lizenzfreien Bilder, die in zahlreiche Kategorien unterteilt sind. Ein Thread in einem deutschsprachigen Forum, der eine ständig aktualisierte Liste von lizenzfreien Bildern enthält PhotoCase.de: eine weitere außerordentlich gute Datenbank, die jedoch nur 3 Bilder pro Tag kostenlos herunterladen lässt. 9x13.de ist eine kleine Datenbank mit "freien" Bildern. Gute Qualität und kreative Photos.

04. Usability
Web-Ressourcen in englischer Sprache Web Articles from "Eye for information" Dan Tobias' Web Tips IBM developerWorks Newsletter (with Usability-Coloumn) Microsoft Usability Homepage Siteusability.com - Improving the Web Experience Table of required size limits for various connection speeds Web Authoring and Surfing UITest.com: User Interface Test Resources List includes dozens of sites about Accessibility, Legislation, Linking, SEO, Validity etc. usabilityfirst.com usablenet.com Usability Test Profile useit.com: Jakob Nielsen's Website Web-Ressourcen in deutscher Sprache Basics of Typography in the Web / Grundlagen zur Typographie im Web Web Styleguide.de usability tools & webworkers new USABILITY FORUM - Informationen zu Software Ergonomie und Human Computer Interaction Groups & Listen Website-Usability Mailingliste (de) Deutschsprachiges Usability-Forum (Schwerpunkt Website-Usability) Use-des Mailingliste (de) Behandelt alle Aspekte von Usability, Ergonomie, Accessibility und Accessibility von Internet-Seiten und Web-Anwendungen. Sonstiges: art-of-web-usability.de Eine Einführung in die Web Site Usability anhand von vielen Beispielen Artikel zur Web- & content Usability von Scoreberlin Warum jeder zweite Kunde beim Online-Shopping abbricht Warum Webseiten nicht länger als 8 Sekunden laden sollten Info zum Cube test usability-competence.de Berichte und Artikel von eResult Interview mit Jared Spool: Welchen content suchen Web-surfer newsletterberater.de So schreibt man einen Usability-Report Zehn gute Gründe für Usability

05. Freelancers resources
Must-see resources 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. Freelance-Help.com periodically reviews best freelance sites on the Net and has a useful overview over the outsourcing jobs for programmers.

06. Search engines
i. Seite anmelden (kostenlos) Abacho.de Search Engine Crawler Google Search Engine Crawler ExactSeek Search Engine Crawler Yahoo Search Engine Crawler = Yahoo + Altavista + All The Web Suchmaschinen (allgemeine Suche): A9.com, AltaVista, AllTheWeb, Gigablast, Google, HotBot, Lycos, MSN, Teoma, WISEnut Top Directories with free web site submission  Web-Kataloge: Best of the Web!, WebSavvy, About, GoGuides, ODP, Yahoo! Eine beeindruckende Liste von kostenlosen Web-Katalogen ii. Artikel über Suchmaschinen und SEO Database of Web Robots, Overview DevToolz - Google Pagerank Lookup, Link Popularity Checker, WhoIs Lookup. Alternative: RIPE Whois Database. Keyword Density Analyzer Marketleap Search Engine Marketing Tools and Search Engine Keyword Position Analyzer: Link Popularity Check, Search Engine Saturation, Keyword Verification - professional tools for checking the ranking of your site and its position in search engines. Page Rank Checker Poodle Predictor - see your site like Google does. Simulate search engines and predict your Google listings Searchengine Watch - the source for search engine marketing and a magnificent reference on search engines. Search Engine Optimization Forum Search Engines Overview Search Engine Optimization (SEO): SEO Chat, SEO Scanner - Pros' SEO Tool & The Pages Indexed, Backlinks Domain, Pagerank, Allinanchor, Keyword Density - (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. SEO Tool for Yahoo Search Engine - Free online SEO tool to check the position of your website in the search engine of Yahoo™. Spider emulator The Anatomy of a Large-Scale Hypertextual Web Search Engine - this is how Google works This is how a search engine robot sees your web-site What People Search For - Most Popular Keywords. Keyword Database - Keyword-Datenbank Suchmaschinen Tutorial

07. Other lists of web design-tools
Komielan.com Static.bryanbell.com's List Sitepoint's CSS Resources, Tutorials, Tips and Tricks theFixor's website development resources Web Design References - a magnificent overview on the topic of webdesign. Webweaver's List