Online-Resourcen – hilfreiche Links für Webdesign

Für Webdesign gibt es eine Fülle von Online-Resourcen. In diesem Post sammele ich Links zu den Seiten, die ich selbst oft zu Rate ziehe. Dieser Post wird bei Bedarf aktualisiert – fertig wohl nie – und von mir auch für die Lehre (primär das Fach Digitales Design und Usability an der Beuth-Hochschule) genutzt.

Online-Magazine

• Smashing Magazin deckt viele Themen zu Webdesign und Frontend-Entwicklung ab. Von Zeit zu Zeit werden aus den Artikeln Bücher und Compendien. Nach Corona (oder Online?) wird es hoffentlich mit den Smashing Conferences weitergehen. Bis dahin kann man einiges von den vergangenen Konferenzen im Youtube-Kanal anschauen. Member erhalten Einladungen zu SmashingTV-Webinaren.
• Medium hat einen Bereich über Designthemen. Nicht alles auf Webdesign bezogen, aber ein wenig was ist auch dabei!

Buchtipps

• CSS Secrets – Typische Webdesign-Probleme klug gelöst von Lea Verou, O’Reilley 2015
  zeigt tolle Tricks, wie die Möglichkeiten von CSS ausgereizt und intelligent zu etwas Neuem kombiniert werden können.
• HTML5 und CSS3 – Das umfassende Handbuch von Jürgen Wolf, Rheinwerk 2019
  für den strukturierten Einstieg in CSS und HTML
• Interaction- und Interfacedesign – Web-, Game-, Produkt- und Servicedesign Usability und Interface als Corporate Identity von Torsten Stapelkamp, Springer 2010
• Struktur und Design responsiver Webseiten auf Smartphones von Annika Brinkmann, Springer essential 2019
  wie Webseiten auf kleinen Geräten besser genutzt werden können.
  Einblick in das Buch.

Informationen über unterschiedliche Geräte

• Screensizemap – Kunterbunte Darstellung unterschiedlicher Bildschirmgrößen
• whatismyviewport.com – Liest den aktuellen Viewport aus
  Gängige Viewportbreiten (bei Viewport Width=DeviceWidth)
  • Mobil Hochformat: z.B. 320|375|420px
  • Mobil Querformat: z.B. 480|640px (hier beides betrachten da unterschiedlich) 
  • Tablet Hochformat: z.B. 768px
  • Tablet Querformat: z.B. 1024px
  • Desktop klein:  z.B. 1024px
  • Desktop groß: z.B. 1280|1360|1920px (auch abhängig von der größten Darstellung der Seite!)
• yesviz.com – Listet neben der realen Größe den Viewport und weitere Daten über Displays verschiedener Geräte
• Handy-Finder von Inside-digital – seit vielen Jahren meine erste Anlaufstelle zu Datenblättern verschiedenster Geräte!

Webseiten testen

Responsive Webseiten

Was ist das eigentlich, dieses responsive Webdesign? Hier gibt es Erklärungen:

• What the hack is responsive Webdesign

Um festzustellen, ob eine Webseite responsiv ist, sich also an die Breite des Browserfensters anpasst, reicht es meist, das Browserfenster auf dem Computer in Breite (die Höhe ist meist irrelevant) zu verändern. Es gibt jedoch auch einige Tools mit denen man das responsive Verhalten einer Seite direkt beobachten kann.

• „Ish“ von Brad Frost gehört leider aktuell nicht dazu, ist aber der Vollständigkeit halber hier verlinkt… wenn es wieder funktionieren sollte empfehle ich die Option „Disco“ auszuprobieren…

Website-Performance

• Geschwindigkeit testen mit Googles PageSpeed Insights
• Bei Google lässt sich allerdings immer nur eine Seite in einem Durchlauf testen. Alle Unterseiten zu testen ist mühselig, da die URLs einzeln eingegeben werden müssen. Schneller noch geht es mit dem kostenlosen PageSpeed Tool von Janis von Bleichert, das die Unterseiten automatisch scrollt und eine Übersicht der Eckdaten liefert – zusätzlich zum Link der Datenblätter bei Google!

Webfonts finden

• Google Fonts – Umfangreiche Sammlung von Schriften, die heruntergeladen, auf dem eigenen Server gehostet, oder direkt von einer Webseite aus referenziert werden können.
• Variable Fonts – Quellenzusammenstellung auf absichtbar.de

Iconsets

Es gibt eine Reihe von Iconsets die teilweise kostenlos sind, teilweise einmalig oder jährlich kosten. Neben dem Stil ist also auch das Lizenzmodell zu prüfen!

• FontAwesome bietet ein kleines Set Icons kostenlos an, ein großes für eine jährliche Lizenz für mehrere Webseiten nutzbar.
  Vorteil: aus über 7000 Icons wählen, darunter auch Brand-Icons und ein Duo-Tone-Stil, bei dem zwei Glyphen übereinander gesetzt ein zweifarbiges Icon ergeben. Einsetzbar als Font/SVG/PNG
• Google hat in den Material Design Resources ebenfalls ein Set von Icons in mehreren Stilen, ebenfalls ein Two-Tone Stil.
• Streamline ist ein kostenpflichtiges Set, das jedoch nur ein mal lizenziert werden muss.

Online-Resourcen für (besseres) CSS

• caniuse.com ist die ultimative Anlaufstelle, wenn ich wissen möchte, wie weit verbreitet und fehlerlos unterstützt eine CSS-Eigenschaft aktuell ist. In den Settings können zu den globalen Browser-Usage-Daten noch gezielt regionale Daten hinzugefügt werden.
• caniemail.com ist das Pendant für den Bereich HTML-E-Mails (die zu programmieren wesentlich aufwändiger ist als bei Webseiten!)
• W3schools nutze ich um Syntax und Standardwerte in der CSS-Referenz nachzuschauen. Dort gibt es auch eine gute generelle CSS-Einführung und weitere spannende Web-Themen.
• CSS-Tricks beinhaltet ebenfalls eine umfangreiche Sammlung von Artikeln über CSS Eigenschaften im Almanach, aber auch Artikel, die sich mit verschiedenen Aspekten beschäftigen sowie einen Beginners Guide und spannende Code Snippets um bestimmte Effekte zu erzeugen.
• Im Blog von Kulturbanause hat Jonas Hellwig einiges an CSS auf Deutsch erläutert.
• Sara Souidian erläutert in ihrem Blog einige HTML/CSS-Hacks für besondere Anforderungen
• CSS-Cheat Sheet auf Hostinger nennt strukturiert die einzelnen Eigenschaften samt der möglichen Standard-Werte, Einheiten und Selektoren.

CSS3-Tools

• Gradients wie in Photoshop auf GolorZilla generieren
• Gradients bei Shapy

Unicode-Zeichen und HTML-Entities

• unicode-table.com/de/ ist meine Lieblingsseite um Unicode-Zeichen zu recherchieren. Allerdings ist die Suche leider nur auf Deutsch, so dass man die genauen deutschen Begriffe kennen muss. Darum nutzte ich teilweise die englische Version unicode-table.com/en/ zur Suche.
  Tipp 1: immer nur die ersten Zeichen in der Suche eingeben und abwarten, was die Suchvorschläge einem anzeigen!
  Tipp 2: im Zweifel einen anderen Wortteil suchen!
  „Non-Breaking Hyphen“ vs. „No-Break Space“ auf Englisch entspricht auf Deutsch „Nicht brechender Bindestrich“ vs. „Geschütztes Leerzeichen„

Encoding und Verschlüsselung

URLs encoden

Manchmal braucht man URLs in codierter Form.

Ich nutze am liebsten den von Encoder von Meyerweb.

Bitmap-Grafiken erzeugen und optimieren

• TinyPNG komprimiert PNG und JPG noch kleiner als z.B. Photoshop es vermag. Z.B. indem Alphakanäle ebenfalls reduziert werden. Wer nicht möchte, dass die eigenen Bilder dafür hochgeladen werden kann auch für 65$ das Plugin für Adobe Photoshop kaufen.
• SpriteCow soll die Erzeugung von Sprites vereinfachen.
• Mit Cloudconverter kann man Grafiken in andere Dateiformate umwandeln:
  • Googles WebP-Bilder in JPG umwandeln
  • JPG in WebP-Bilder umwandeln

Vektor-Grafiken

SVGs minimieren und optimieren

• https://www.svgminify.com/ (entfernt vor allem Kommentare und unnötige Elemente und Kommata, ändert aber auch die eigentlichen Werte. Entsprechend mit Vorsicht zu genießen und immer noch mal das Ergebnis penibel checken!)
• http://petercollingridge.appspot.com/svg-optimiser erlaubt individuelle Einstellungen (liefert in der Standardeinstellung anscheinend das gleiche Ergebnis wie der erste)

Keiner der beiden Minifyer entfernt die Absätze und das für CSS nötige URL encoding findet ebenfalls nicht statt. Dafür gibt es Encodingtools!

SVGs einbinden

• Tipps von CSS-Tricks
• Umfangreiche Blogartikel über SVG von Sara Soueidan

Grafiken in Base64 umwandeln

• mit Base64-Image

Farben konvertieren

• HSLA-Farben lassen sich nicht einfach aus PhotoShop erzeugen, die dort im Farbfenster erzeugten Farben sind nicht die richtigen. Besser ist es, den Hexadezimalcode zu nehmen und in mit Hilfe des HSL Color Pickers umzuwandeln.
• Nicht mehr nötig, aber wer mag kann sich mal anschauen was mit Farben passiert die man in websicher umwandelt: Farbenrechner von Rechnr.de oder Farbrechner von Jumk
• Eine Farbtabelle mit 11er-Schritten findet sich bei Farbtabelle.at
• Die Wikipedia listet im Artikel über Webfarben die kompletten CSS3-Farbnamen samt Hexadezimalwerte

WordPress

Hilfreiche Artikel gibt es z.B. bei Elmarstudio.

Einzelne Artikel finde ich darüber hinaus besonders hilfreich:

• Frühjahrsputz von WordPress-Seiten aufräumen – für Übersicht und bessere Performance.
• Auch Strato hat viele Anregungen für die Verbesserung der Performance von WordPress-Seiten.
• Raidbox listet darüber hinaus UI-Verbesserungen für Webseiten, die ebenfalls einen Blick lohnen, jedoch mehr in Richtung Conversion gehen…

Weitere Resourcen

• Online-Resourcen – Links zur Barrierefreiheit