Werkzeuge für die Layoutgestaltung: Unterschied zwischen den Versionen

Aus Debacher-Wiki
Wechseln zu:Navigation, Suche
(Nützliche Tools)
(Browservorschau)
 
(10 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt)
Zeile 10: Zeile 10:
 
* http://www.browserstack.com/responsive, mit verschiedenen Smartphones
 
* http://www.browserstack.com/responsive, mit verschiedenen Smartphones
 
* http://ami.responsivedesign.is
 
* http://ami.responsivedesign.is
* http://deviceponsive.com/, absolut cool, "lebende" Versionen in verschiedenen Größen
 
  
  
Zeile 26: Zeile 25:
 
* https://jigsaw.w3.org/css-validator/ CSS-Validierung
 
* https://jigsaw.w3.org/css-validator/ CSS-Validierung
 
* http://www.css-validator.org/
 
* 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==
 
==Nützliche Tools==
Zeile 32: Zeile 35:
 
* https://kraken.io/web-interface Optimierer für Grafiken
 
* https://kraken.io/web-interface Optimierer für Grafiken
 
* http://tools.dynamicdrive.com/imageoptimizer/ optimiert Grafiken
 
* http://tools.dynamicdrive.com/imageoptimizer/ optimiert Grafiken
 +
* http://compressnow.com/
 +
* https://tinypng.com/
 
* https://www.modern.ie/de-de
 
* https://www.modern.ie/de-de
 +
* http://addyosmani.com/blog/image-optimization-tools/ Übersichtsartikel
  
 
==Beispiele==
 
==Beispiele==
Zeile 40: Zeile 46:
 
* http://bootstrapzero.com/
 
* http://bootstrapzero.com/
 
* http://startbootstrap.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
  
==Entwiklungsplattformen==
+
 
* http://www.bootply.com speziell für Bootstrap-Anwendungen
+
* http://t3n.de/news/less-sass-testen-524762/ Übersichtsartikel
 +
* http://designshack.net/articles/css/5-online-playgrounds-for-html-css-and-javascript-compared/

Aktuelle Version vom 3. Mai 2019, 15:12 Uhr

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.


Referenzen


Testmöglichkeiten

Nützliche Tools

Beispiele

Entwicklungsplattformen