160 Tipps für Screendesigner

Im Rahmen der Buchrezension „Modernes Webdesign mit CSS“ sind mehr als 160 Link-Tipps zusammengekommen, die einem als Screendesigner das Leben einfacher machen und die man kennen sollte.

Die Liste ist handverlesen und nach Kategorien sortiert.

• Raster / Grid-Systeme
• Effekte / Anwendungsbeispiele
• Lese- und Blogtipps
• Webmaster-Tools
• Tools / Editoren / Programme
• Website-Sammlungen / Inspiration
• CSS CSS3 (Sammlung, Tutorials, Foren)
• Webfonts / Fonts
• HTML5 / HTML / DHMTL
• JavaScript / Ajax
• Animationen mittels CSS3 und HTML5
• Verschiedene
• Gimmicks / Unterhaltung

Raster / Grid-Systeme

1. Screendesign-Rasterset | 960 Grid System
2. 1140px Rastersystem (ideal für 1280er-Auflösung) | cssgrid.net
3. Rastersystem für responsives Webdesign | www.columnal.com
4. Raster-Kalkulator | gridulator.com
5. Individuelles Raster als Photoshop-Muster sichern | modulargrid.org/#app
6. Plug-in für Photoshop, mit dem sich Hilfslinien und Raster exakt einrichten lassen  | GuideGuide
7. Adpative CSS-basierte Gridsysteme lessframework.com und cssgrid.net

Effekte / Anwendungsbeispiele

8. Parallax-Effekt | Ein paar Beispiele für Webseiten mit diesem Effekt
9. CSS-Boxschatten-Generator im Stile eines Photoshop-Layers | LayerStyles
10. Wabenstruktur ohne Grafiken | www.cssplay.co.uk/menus/hexagon.html
11. Der Backgroundtrick | www.designmadeingermany.de/blog/der-backgroundtrick
12. Boxen erstellen mit Schatten und Ecken | www.css3.me
13. Bilder vollflächig im Hintergrund | css-tricks.com/perfect-full-page-background-image
14. Octagons und andere Vielecke mit CSS | www.thestyleworks.de/tut-art/color-diamond.shtml
15. Diagonale Linien mit CSS ! | net.tutsplus.com/tutorials/html-css-techniques/how-to-create-diagonal-lines-with-css
16. Select-Boxen mittels CSS | harvesthq.github.com/chosen
17. Anwendungsbeispiel: Shading with CSS text-shadows 
18. Anwendungsbeispiel: CSS-Bändchen | css-tricks.com/snippets/css/ribbon
19. Anwendungsbeispiel: Indeterminate Checkboxes
20. Anwendungsbeispiel: Custom File Inputs with a Bit of jQuery | viget.com/inspire/custom-file-inputs-with-a-bit-of-jquery
21. Sliding-Doors mit nur einer Grafik | kailoon.com/css-sliding-door-using-only-1-image
22. Anwendungsbeispiel: typemedia2011.com
23. Slide-Effekt mit jQuery |  jquery.malsup.com/cycle
24. Anwendungsbeispiel: Clearing Floats The Old Fashioned Way | www.positioniseverything.net/easyclearing.html
25. Anwendungsbeispiel: Eco Lecom | www.experiencialecom.com.br/experiencialecom/Portugues
26. Anwendungsbeispiel: Pure CSS3 Spiderman Cartoon
27. Anwendungsbeispiel: „Our Solar Sys­tem in CSS3“ – neography.com/journal/our-solar-system-in-css3
28. Anwendungsbeispiel: Horizontal zentriertes CSS-Menü | matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support

Lese- und Blogtipps

29. Lesetipp: Box-shadow, one of CSS3′s best new features
30. Lesetipp: Building a pure CSS 3D City | cubiq.org und das entsprechende Live-Demo
31. Lesetipp: CSS3 vs. CSS: A Speed Benchmark | smashingmagazine.com
32. Lesetipp: 50 Extremely Useful And Powerful CSS Tools | smashingmagazine.com
33. Lesetipp: css-tricks.com
34. Lesetipp: Blogazines – interessant, ansprechend und anders | daswebdesignblog.de/blogazines-interessant-ansprechend-und-anders
35. Lesetipp: CSS Sprites einfach erklärt | bueltge.de/css-sprites-einfach-erklaert/675/
36. Lesetipp: CSS3 FOR WEB DESIGNERS | www.abookapart.com/products/css3-for-web-designers
37. Webdesignblog | www.pixelgangster.de
38. Webdesign- und CSS-Blog | www.blogrammierer.de/blog/css
39. Lesetipp: List of Cross-Browser CSS Properties | www.impressivewebs.com/cross-browser-css-properties
40. Webdesign-Blog, Inspiration, Tutorials | line25.com

Webmaster-Tools

41. Dopplungen oder falsche Angaben in den Metaangaben lokalisieren | META Description Crawler
42. Diverse Browser auf einen CSS Stand zu setzen: Reset CSS
43. CSS Lint spürt Syntax Fehler im CSS auf | csslint.net
44. Einheitlich aussehende Formulare unter Mac und Windows: formalize.me
45. Open-Source-Statitik | de.piwik.org
46. W3C HTML Validator
47. W3C CSS Validator
48. Firefox AddOn – Web Developer Toolbar | addons.mozilla.org/de/firefox/addon/web-developer
49. Browserkompatibilität testen (per Screenshots) | browsershots.org
50. Firefox Add-on „Fireshot“ – Screenshots erstellen | addons.mozilla.org/de/firefox/addon/fireshot
51. PageLayers – Tool, das Screenshots einer Website Ebenen einer PSD-Dokument überführt | www.ralfebert.de/products/pagelayers
52. Tool, das nicht nur verschiedene Browser testet, sondern auch die Anzeige in verschiedenen Auflösungen | www.fwpscreenshots.de
53. Add-on für Firefox | firebug
54. CSS-Tipps und -Tricks | www.webmasterpro.de
55. Einfach Quelltext reinkopieren, Kommentare einfügen, und Hilfe suchen | chopapp.com
56. Kompatibilität-Tool – „When can I use…“ | caniuse.com

Tools / Editoren / Programme

57. Online-CSS-Editor mit Live-Preview uvm. | www.webputty.net
58. Schnell und Browser-übergreifend Farbverläufe in CSS umzusetzen | CSS Gradient Editor
59. Farbanalyse nach den W3C-Richtlinien | www.hacke.net/tools/farbanalyse.php
60. Ultimate CSS Gradient Generator | www.colorzilla.com/gradient-editor
61. Tool, um interessante Farbsets zu kreieren | kuler.adobe.com
62. Platzhalter-Bilder | lorempixel.com
63. Umfangreiches CSS3-Tool | www.css3maker.com
64. CSS 3 Button Generator | www.cssbuttongenerator.com
65. Webfarben (hexadezimal) | 0to255.com
66. CSS3 -Generator | css3generator.com
67. Ähnlich wie Adobe Kuler, aber ohne lange Ladezeiten | ColorScheme Designer
68. Tool „Muse“ von Adobe für Webdesigner | muse.adobe.com
69. CSS- und HTML-Editor | www.pspad.com/de
70. jQTouch – Add-On für jQuery, mit dessen Hilfe man die typische iPhone-Darstellung imitieren kann | jqtouch.com
71. Kostenlose Hintergrundmuster, auch als PS-Muster-Paket | Subtle Patterns
72. Transformmatrix erstellen | CSS3 Matrix construction set
73. Webdesign ohne Programmieren | www.application-systems.de/freeway
74. Devoth’s HEX 2 RGBA Color Calculator | hex2rgba.devoth.com
75. Semantische Inhalte erstellen, gleich bei der Eingabe | www.wymeditor.org
76. Unterstützung von alten IE Versionen bei CSS3 | CSS3Pie.com
77. Web Page Analyzer | www.websiteoptimization.com/services/analyze
78. Site Link Analyzer – Anzahl externe und Interne Links feststellen | www.seochat.com/seo-tools/site-link-analyzer
79. Optimierung von CSS-Code – csslint.net
80. jQuery-Tools – Scripte, die schnell zu implementieren sind | flowplayer.org/tools
81. Colourlover.com hilft dabei, interessante Farbkombinationen zu finden | www.colourlovers.com
82. Lorem-Ipsum-Widget: tobiasahlin.com/blog/introducing-loremify
83. Web Safe Colors | www.elizabethcastro.com/html/colors/websafecolors.html
84. CSS Prefixer | cssprefixer.appspot.com
85. Tool zum Erstellen des CSS-Codes von Spritegrafiken | www.spritebox.net
86. Kostenloser Open-Source Editor | www.aptana.com

Website-Sammlungen / Inspiration

87. CSS-Website-Sammlung | cssbased.com
88. Deutschsprachige Sammlung/Website zum Thema Cascading Stylesheets (CSS) | www.css4you.de
89. Inspirationsquelle für die Gestaltung von Webseiten mittels CSS | www.cssdsgn.com
90. Sammlung gut gestalteter Websites | www.thebestdesigns.com
91. Inspirationsquelle | www.cssmania.com
92. CSS-Gestaltungsmöglichkeiten | www.csszengarden.com
93. Inspirationsquelle | siteinspire.com/showcase
94. Showcase CSS-basierter Websites | www.awwwards.com
95. Inspirationsquelle | www.webcreme.com

CSS CSS3 (Sammlung, Tutorials, Foren)

96. CSS mit Variablen, Verschachtelungen und einigem mehr bietet SASS | sass-lang.com
97. CSS-Sammlung, viele Beispiele, Konzepte etc. pp. | www.cssplay.co.uk
98. Background-Position in Spritesheets einfach auslesen | www.spritecow.com
99. Sammlung zum Thema responsive Websites | Media Queries
100. CSS-Framework, das nach dem 960-Grid-Prinzip die Website einteilt und ganz einfach mit vordefinierten Klassen die Website einteilen lässt. | www.blueprintcss.org
101. CSS-Tutorial | de.html.net/tutorials/css
102. CSS Forum für Fragen rund um Cascading Style Sheets | www.css-info.de
103. CSS Tutorial | www.w3schools.com/css
104. Kleine Sammlung von CSS3 Beispielen | www.dzinepress.com/2011/07/40-useful-css3-tutorials-would-help-web-developers-designers
105. CSS3: Leitfaden für Webdesigner | css3-leitfaden.de
106. Blogazine von Jason Santa Maria | jasonsantamaria.com/articles
107. Tricks und Kniffs zum Thema CSS | www.css-hack.de
108. CSS3Please.com erleichtert das Arbeiten mit browser-spezifischen Prefixes.
109. Vorgefertigte CSS-Layouts | blog.html.it/layoutgala
110. CSS3-Framework für verschiedene Buttons | css3buttons.michaelhenriksen.dk
111. Free CSS3 Video Tutorials | www.css3.info/free-css3-video-tutorials/
112. Layer Hints für Sitegrinder
113. The Power of CSS-Lists | css.maxdesign.com.au/listamatic/index.htm
114. Koordinaten in Sprite-Sheets auslesen | Sprite Cow
115. CSS-Framework | www.notjustagrid.com
116. PHP-basierter CSS Processor | Turbine
117. Dynamisch mit CSS entwerfen, statt dem Kunden statische Photoshop Layouts zu präsentieren | 24ways.org/2009/make-your-mockup-in-markup
118. Blog und Tutorials | designlovr.com/examples/dynamic_stack_of_index_cards
119. How to CSS-Positioning | www.barelyfitz.com/screencast/html-training/css/positioning
120. CSS News | www.css-news.com
121. Portal von Mozilla zum Thema CSS | developer.mozilla.org/de/demos
122. CSS-Eigenschaften gängiger E-Mail-Programme | www.campaignmonitor.com/css
123. Media Queries – verschiedene Stylesheets für verschiedene Auflösungen oder Gerätetypen ausgeben | webdesignerwall.com/tutorials/css3-media-queries
124. CSS Templates | intensivstation.ch/templates
125. CSS Tutorial | de.html.net/tutorials/css

Webfonts / Fonts

126. Adventkalender mit unterschiedlichen Webfonts | 2011.adfont-calendar.com 
127. Tool, um Schriften ohne viel Aufwand direkt auf Webseiten zu identifizieren: chengyinliu.com/whatfont.html
128. Kostenlose @font-face-kits | www.fontsquirrel.com
129. Bookmarklet, um Webfonts bzw. die Fallbackfonts direkt auf der eigenen Seite zu testen | ffffallback.com
130. Lizenzfreie Webfonts | www.fontsquirrel.com
131. Google Webfonts | www.google.com/webfonts
132. Video-Tipp: CSS3 Web Fonts | www.youtube.com/watch?v=PdS4UbBz-Pc
133. FontFace Generator: www.fontsquirrel.com/fontface/generator
134. Die Silbentrennung funktioniert nun in neueren Browsern | blog.fontdeck.com/post/9037028497/hyphens
135. Übersicht über die Verbreitung von Systemschriften | www.codestyle.org/css/font-family/index.shtml
136. Systemschriften (Größe, Zeilenabstand, Farbe, etc.) miteinander vergleichen | www.typetester.org

HTML5 / HTML / DHMTL

137. Über und mit HTML5 und CSS3 | beta.theexpressiveweb.com
138. HTML5 Developer Center | www.htmlgoodies.com/html5
139. Alles drin, was ein Programmierer braucht | HTML5 Boilerplate
140. Hype – einfaches Programm, um HTML5-Inhalte zu erstellen | itunes.apple.com/de/app/hype/id436931759?mt=12
141. HTML5-Showcase von Apple | www.apple.com/html5
142. Portal von Google zum Thema HTML5/CSS | www.html5rocks.com
143. SelfHTML | de.selfhtml.org/css/index.htm
144. DHTML – downloadbare Vorlagen und Tutorials: www.dynamicdrive.com
145. Direkt aus Photoshop heraus HTML-Templates erzeugen | Sitegrinder

JavaScript / Ajax

146. Sammlung von Ajax-Anwendungsbeispielen | miniajax.com
147. JavaScript Library für HTML5 und CSS3 | www.modernizr.com
148. JavaScript InfoVis Toolkit – Tools zur Visualisierung von Daten | thejit.org/demos
149. Eine komplett JavaScript-basierte Präsentationsanwendung: – 280 Slides – als Vorzeigebeispiel für Cappuccino, ein Framework, mit dem man Webanwendungen wie Desktop-Anwendungen schreiben kann

Animationen mittels CSS3 und HTML5

150. Animationen mit HTML5, CSS und JavaScript fürs Web und digitale Magazine: labs.adobe.com/technologies/edge
151. Create, serve and track HTML5/CSS3 animations for desktop, Android, Blackberry QNX, iOS and WebOS mobile devices | www.animatable.com
152. Sencha Animator – CSS3-Animationen erstellen | Create amazing CSS3 animations
153. CSS3-Transitions mit Keyframes | bradshawenterprises.com

Verschiedene

154. Eigenes WordPress-Template erstellen | wordpress.lernenhoch2.de/handbuch/eigenes-wordpress-template-erstellen
155. Kickstart – Dokumente und Ordner für den Projektstart | praegnanz.de/weblog/htmlcssjs-kickstart
156. Marktplatz für Webdesigner | www.1000webdesigner.com
157. Schnellstmöglich zum eigenen Blog | posterous.com
158. openbooks von Galileo Press | www.galileodesign.de/katalog/openbook?GalileoSession=68417225A5Jmv8JJk9I

Gimmicks / Unterhaltung

159. Der Webmaster-Klassiker | Webmaster 4 you
160. Zum Abschalten für zwischendurch – „Goldenen Regeln für schlechtes HTML“ |  www.karzauninkat.com/Goldhtml/goldhtml.htm