Werkzeuge für die Layoutgestaltung
Aus Debacher-Wiki
Zur Navigation springenZur Suche springen
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
