Quelltext der Seite Werkzeuge für die Layoutgestaltung

Als ich anfing mit HTML und CSS zu arbeiten, da musste man noch mit einem Texteditor arbeiten und möglichst viele Browser vorrätig halten (vor allem unterschiedliche IE-Versionen). Inzwischen gibt es eine Reihe von sehr nützlichen Online-Werkzeugen, die das Leben erleichtern.

==Browservorschau==
Eine Reihe von Anbietern bieten die Möglichkeit Seiten in unterschiedlichen Browsern zu betrachten. Leider wollen viele eine Gebühr dafür haben.

* http://browsershots.org der Klassiker, enorm viele (oft unsinnige) Browser-Varianten, erstellt Screenshots
* http://netrenderer.de/index.php, erstellt Screenshots
* https://www.browserling.com, stellt die Seite quasi live zur Verfügung
* http://www.browserstack.com/screenshots, erstellt Screenshosts, sehr umfangreiche und aktuelle Browserliste
* http://www.browserstack.com/responsive, mit verschiedenen Smartphones
* http://ami.responsivedesign.is


* http://t3n.de/news/cross-browser-testing-tools-542708/ Übersichtsartikel
* http://t3n.de/news/responsive-web-design-komfortabel-380139/

==Referenzen==
* http://www.w3schools.com/cssref/default.asp, momentan das umfassendste Angebot
* http://wiki.selfhtml.org/wiki/Startseite, die aktuelle Form von Selfhtml
* http://www.css4you.de/, scheint mir momentan nicht immer aktuell zu sein


==Testmöglichkeiten==
* http://validator.w3.org/ HTML-Validierung
* https://jigsaw.w3.org/css-validator/ CSS-Validierung
* http://www.css-validator.org/
* https://www.google.com/webmasters/tools/mobile-friendly/
* https://developers.google.com/speed/pagespeed/insights/ Geschwindigkeitstest
* http://www.pagespeed.de/
* http://gtmetrix.com

==Nützliche Tools==
* http://www.cssportal.com/css-color-converter/
* http://t3n.de/news/bootstrap-tools-und-erweiterungen-533147/
* https://kraken.io/web-interface Optimierer für Grafiken
* http://tools.dynamicdrive.com/imageoptimizer/ optimiert Grafiken
* http://compressnow.com/
* https://tinypng.com/
* https://www.modern.ie/de-de
* http://addyosmani.com/blog/image-optimization-tools/ Übersichtsartikel

==Beispiele==
* http://builtwithbootstrap.com/
* http://www.wire2app.com/
* http://getbootstrap.com/getting-started/#examples
* http://bootstrapzero.com/
* http://startbootstrap.com/
* http://www.on-design.de/tutor/bootstrapTipp/index.htm

==Entwicklungsplattformen==
* http://www.bootply.com speziell für Bootstrap-Anwendungen
* http://www.codeply.com/go
* http://jsfiddle.net/
* http://tinkerbin.herokuapp.com/
* http://www.cssdesk.com/
* http://jsbin.com


* http://t3n.de/news/less-sass-testen-524762/ Übersichtsartikel
* http://designshack.net/articles/css/5-online-playgrounds-for-html-css-and-javascript-compared/