Tools für Webdesigner und Webentwickler

Hier findet ihr eine Thematische Liste an Tools mit deren Hilfe ich mir als Webdesigner und Webentwickler die Arbeiten zur Umsetzung von Webprojekten erleichtert. Das spart mir nicht nur Zeit sondern auch oft lange Wege über andere Programme. Die genannten Tools und Verlinkungen sind auch für meine Kunden gedacht, um alles an einer Stelle zu platzieren.

Webdesign Tools

CSS Gradient Generator - Farbverläufe online generieren

Unverzichtbar wenn es um CSS Farbverläufe geht ist der CSS Gradient Generator von colorzilla.com mit dem sich sicher und schnell die Verläufe generieren lassen.
https://www.colorzilla.com/gradient-editor/

Online Favicon Generator

Mit dem Favicon Generator von https://realfavicongenerator.net lassen sich die kleinen Icons die das Tab eines Browser schmücken leicht und vollständig für alle Plattformen und Browser generieren. Als Ergebnis wird eine ZIP Datei und der passende HTML Teil für den <head> Bereich erstellt.

Bildbearbeitung gut und günstig

Klassische Programme wie der Photoshop von Adobe ist zwar der Platzhirsch unter Bildbearbeitungen aber nicht günstig, wenn man nur einen Bruchteil der Funktionen benötigt. Für hin und wieder mal ein paar Bilder zuzuschneiden oder für die Webseite im passenden Format und Größe zu speichern, ist meine Empfehlung der Affinity Photo. Wer mit SVG bzw. Vektoren arbeiten möchte kann sich den Affinity Designer ansehen. Der Vorteil ist bei den Affinity Produkten, das es kein ABO ist. Ein mal zahlen und glücklich sein. https://affinity.serif.com/de/

Bilder für die Webseite optimieren

Das online Tool von TinyPNG kann aus JPG’s und PNG’s noch mal einige KB’s raus zu holen, damit die Ladezeit der Webseite bei gleich bleibender Qualität schneller geladen wird. Einsparungen von 80% bei PNG Grafiken sind nicht ungewöhnlich. tinypng.com

Bei SVG Grafiken sind auch oft unnötige Pfade und Infos in den Dateien enthalten. Mit dem Tool von https://jakearchibald.github.io/svgomg/ können die SVG-Dateien um ein vielfaches reduziert werden.

Daten für das Web-Projekt senden

Große Dateien für das neue Web-Projekt sendet man heutzutage online und nicht wie früher per Post als CD oder USB-Stick. Der Dienstleister WeTransfer aus Amsterdam bietet über seine Plattform den Versand von großen Daten. Per Upload im Browser (Kunde) wird danach ein Link generiert, unter dem (ich) die Dateien wieder laden kann. wetransfer.com

Webentwickler Tools

Sichere deine Webseite mit einem Passwortschutz

Wenn man eine Webseite noch nicht für die Öffentlichkeit zugänglich machen möchte, aber den Stand dem Kunden zeigen möchte, dann ist ein Passwortschutz für ein Verzeichnis / Domain die Lösung. Mit dem htpasswd Generator https://htpasswdgenerator.de könnt ihr euch ein md5 Passwort erstellen. Ihr benötigt dann noch für die .htaccess am Anfang die folgenden Einträge.


AuthType Basic
AuthName "Contao Seite XYZ"
AuthUserFile /home/www/diedomain-c49-2020/web/.htpasswd
Require valid-user

Ist dein Hoster wieder auf einer Blackliste gelandet?

Deine Mails gehen wieder mal nicht durch, da auf dem shared Hosting auf dem du und viele weitere Kunden sitzen, von einer unsicheren WP-Installation zum SPAM Versand genutzt wird. Das kannst du mit dem blacklist Check von https://mxtoolbox.com/blacklists.aspx überprüfen. Das Ergebnis kannst du dann deinem Hoster als Ticket melden und hoffen, das die IP bald wieder von der/den Listen entfernt wird.

Bei welchem Hoster liegt meine Webseite?

Für ein Angebot zu einem Contao Update macht es durchaus Sinn zu wissen, welches Webhosting steckt dahinter. Einen schnellen Check könnt ihr mit dem online Dienst von https://sitereport.netcraft.com abfragen.

Hat meine Webseite eine SPF Eintrag?

Der SPF oder auch Sender Policy Framework soll das Fälschen von Absenderadressen in E-Mails (Spoofing) verhindern. Konkret soll das Versenden von Mails über nicht legitimierte Mail-Server unterbunden werden. Testen kann man einen SPF Eintrag über den Dienst https://www.spf-record.de

Passwörter & Zugangsdaten sicher versenden

Das Passwörter im Klartext nicht 100% sicher sind ist eh klar. Entweder sendet man nur einen Teil in einer Mail und das Passwort in einer zweiten an eine andere Adresse. Alternativ kann man die Passwörter am Telefon nennen, was oft zu lange dauert. Über den Dienst von https://www.sicher-teilen.de kann das Passwort oder Zugangsdaten versendet werden. Der Link ist dann nach dem Erstaufruf nicht mehr gültig.

Alternativ könnt ihr auch einen TXT Datei in der die GeheimWörter sind als ZIP-Datei mit Passwortschutz belegen.

Webseiten SEO-Optimierungen selber machen?

Ja, das macht Sinn und kann auch vom Kunden mit einer Unterstützung mit dem online SEO Tool seobility erarbeitet werden. Über den Link https://www.seobility.net/de/order/upgrade?level=1&suggestlight=1 kann das "Light" Paket für eine Domain bestellt werden.

Wer sein Ergebnis auch durch die Brille von Google über das Tool Pagespeed sehen will, kann sich das Ergebnis seiner Webseite ansehen und handeln.

https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fwww.codesache.de%2F

Damit man mit Contao schnelle Webseiten erstellen kann, ist die technische Basis Optimierung für verbessere Geschwindigkeit und das passende Contao Hosting auf Basis von SSD notwendig.

Um den Überblick in CSS Dateien nicht zu verlieren nutze ich https://www.cssportal.com/format-css/ um mir alte Formatierungen aus kopierten Projekten lesbarer zu formatieren. Mein Tipp ist die "Preset Option" auf "One Line per Style" zustellen, damit große CSS-Dateien an Übersicht gewinnen. Zum editieren ist die Option "Easy to Read" eine gute Wahl. Da meine IDE PHPStorm nur bedingt CSS Dateien hübsch formatiert, ist der Umweg über das Tool hin und wieder hilfreich. Mit der Option "Super Compressed" wird die CSS Datei komprimiert und spart Ladezeiten.

Teilen auf: Facebook Twitter XING

Zurück