TRICKS & TIPPS

Hier sind wenig geordnet einige Tipps und Tricks für Web-Designer und Entwickler zu finden. Zum Teil gut geeignet, um die Webseite mit relativ wenig Aufwand aufzupeppen. Für weitere Empfehlungen bin ich sehr dankbar, kurze Nachricht reicht!

Fast alles, was man braucht

w3schools | web code tools | Web Code Generator

160 Tipps für Screendesigner

Interessante Sammlung zum Stöbern! Ohnehin ist das Design-Tagebuch eine DER Seiten, wenn es um Logo- und Web-Design geht.

Responsives Webdesign

Wertet man die Statistiken des Webservers aus ist zu erkennen, dass zunehmend von mobilen Geräten zugegriffen wird. Bei meinen Projekten greifen Ende 2017 je nach Branche zwischen 20% und 50% von mobilen Geräten zu, auch hier mit steigender Tendenz. Bei einigen Branchen (Restaurants, Bars) sind es seit 2017 gar bis zu zwei Drittel.

Weltweit geführte Statistiken bestätigen diese Entwicklung, s. z. B. WebCounter.

Deshalb gilt: Zuerst die mobile Version entwickeln, sie soll perfekt sein. Im Anschluss die Desktop-Version gestalten.

Schaue hier, wie mobil deine Website ist...

Schriften

Bei den Google Fonts sollte man eigentlich fündig werden. Am besten auf dem eigenen Server vorhalten:

https://gwfh.mranftl.com/fonts

CSS3-Effekte

Wellen, Pfeile...

Transformationen, Animationen, Übergänge

Schatten-Effekte mit CSS3

Social Network

Egal wie man zu facebook steht: Offiziell gibt es zwar keine Zahlen, aber wenn man davon ausgeht, dass jeder Dritte in Deutschland facebook nutzt, liegt man nicht ganz falsch, wenn man teilen-Links in Websites integriert um die Bekanntheit der Homepage zu erhöhen. Ist auch nicht kompliziert, so geht's.

Bilder und Icons

Bilder im Web für die eigene Homepage klauen geht gar nicht! Spätestens wenn einem die erste Klage mit Schadenersatzforderungen von mehreren 1000 € erreicht ist damit Schluss. Dabei gibt es kostenloses oder zumindest bezahlbares Bildmaterial:

• Icons im Google-Design
• icon-land: Riesige Auswahl an Icons aus verschiedenen Bereichen in diversen Formaten.
• Adobe Stock: Bildmaterial zu bezahlbaren Preisen. Hier wird man eigentlich immer fündig.

Logos

Für eine professionelle Website ist ein Logo obligatorisch. Wenn es nicht mehrere 1000 EUR kosten soll hier folgende Quellen.

• Online-Logo-Generatoren wie z. B. logaster, freelogoservices und viele mehr... Einfache Versionen sind meist kostenlos.
• Adobe Stock: nach 'Logo' und z. B. Branche suchen. Oft wird man hier fündig, Logo muss ggf. im Bildbearbeitungsprogramm noch um Firmenname erweitert werden.
• Logosign24: Professionelle Logos werden für unter 100 EUR erstellt. Referenz Logo von https://www.oberst-schoettler-versehrten-stiftung.de/.

Transparentes favicon für die Browserzeile

Geht z. B. ganz einfach so: PNG mit transparentem Hintergrund erstellen und hier hochladen.

HTML+CSS+JavaScript

Viele Code-Beispiele unter CodePen.

Dies und das

• urlm: Vereinfachte Webseiten-Statistiken und Schätzungen.
• archive.org: Archiv historischer Stände von Webseiten.
• fonts.google.com: Schöne Schriften von google für die Homepage.
• analytics.google.com: Einfacher Weg um an Homepage-Statistiken zu kommen. Aber Vorsicht: google is watching you!
• www.google.de/addurl/: Sicherheitshalber Website bei google für die Suche zum Indizieren melden. Trotzdem Suchmaschinen-Optimierung nicht vergessen!

Bildbearbeitung

Es muss nicht immer Photoshop sein, das kostenlose irfanview reicht für viele Standard-Aufgaben bei der Bearbeitung von Bildmaterial für Websites.

Häufig soll z. B. ein Bereich eines Bildes auf eine bestimmte Pixelgröße ausgeschnitten werden. Das ist hier beschrieben.

CMS - Content Management Systeme - Pro & Contra

Programmierer rümpfen über CMS gelegentlich die Nase. Es gibt aber gute Argumente für den Einsatz eines CMS.

• Sobald mehrere Personen am Content einer (größeren) Website arbeiten ist der Einsatz fast obligatorisch.
• Programmierkenntnisse und Detailwissen über Internet-Technologien sind nicht erforderlich.
• (Responsive) Designs und Plugins für Standard-Anwendungen (Suchfunktion, Shops, Foren...) integriert oder erhältlich.
• Viele professionelle CMS kostenlos.

Nachteile sollen nicht verschwiegen werden fallen aber allgemein weniger ins Gewicht.

• Nicht unerheblicher Konzeptions-, Administrations- und Schulungsaufwand.
• Im Hintergrund laufen relativ komplexe Prozesse ab die ggf. auch viel Resourcen verbrauchen. Ein CMS ist erst einmal ein Black Box mit vielen nicht benötigten Funktionen.
• CMS werden mit Vorliebe gehackt. Deshalb wichtig: Aus Sicherheitsgründen immer auf aktuellste Versionen des CMS updaten!
• Einschränkungen bei der freien Gestaltung der Website durch Design-Vorlagen. Auch dadurch werden Websites immer ähnlicher.

Eine Hürde vor der eigentlichen Einarbeitung (ein paar Tage sollte man mindestens einplanen) ist erst einmal die Auswahl eines CMS. Ein ganz guter Vergleich zwischen verbreiteten CMS ist hier oder hier zu finden.

WordPress als eines von etlichen CMS ist mit großem Abstand das beliebteste und am häufigsten genutzte Content Management System der Welt und auch für Einsteiger gut geeignet. Die Installation auf dem Webserver (PHP, MySQL-Datenbank erforderlich) ist einfach und für fast alle Anforderungen stehen Erweiterungen zur Verfügung. Und das Beste daran: Es ist nicht nur quelloffen sondern auch erst einmal kostenlos. Plugins und Design-Vorlagen (Themes) können dann aber auch Geld kosten.

Bei Websites, deren Inhalte von mehreren Personen eher häufig verändert werden sollte ein CMS eingesetzt werden. Ich erstelle hingegen kleinere Websites wie diese immer noch am liebsten ohne CMS aber das muss jeder selbst entscheiden...