SVG – einfach, flexibel, schnell und robust!

Jede Webseite sollte SVG (Scalable Vector Graphics) verwenden (haunschild.de tut es zum ersten mal in diesem Artikel, passenderweise in Form des SVG-Logos).

Viele andere Webseiten setzen SVG bereits seit Jahren ein. Die Technik ist robust und sinnvoll.

 

Vorab ein Aktualisierungshinweis

Nachdem ich mich eine Weile mit SVGs beschäftigt habe, würde ich die inline einbinden. Hier einige Links – alle auf CSS-Tricks von Chris Coyier – wie es geht, warum inline-SVGs (meistens) die beste Wahl sind und welche Probleme (samt Lösungen) es damit gibt:

 

 

 

Die Vorteile von SVG

Das SVG-Logo bestehnd aus den Buchstaben "SVG" auf orangem Hintergrund
Das offizielle Logo – das erste Bild im SVG-Format auf haunschild.de
  • skalierbar und damit ideal für responsive Webseiten
  • inklusiv und damit geeignet für zugängliche Webseiten
  • effizient und damit geeignet für performante Webseiten
  • veränderbar mittels CSS und damit wartbar und anpassbar an z.B. ein Redesign, Bildschirmgrößen, Farbschemata usw
  • cachable – also vom Browser wiederverwendbar, ohne wiederkehrende http-Requests und zudem als Satz (Sprite) gruppierbar und als einzelne Datei speicherbar (ein http-Request für viele Icons/Bilder)
  • wiederverwertbar auch vom Entwickler und damit DRY (don#t repeat yourself)
  • einfach in der Anwendung mittels Image-Element (in HTML) oder als Hintergrund-Grafik (in CSS)
  • einfach in der Erstellung mittels entsprechender Tools (z.B. Adobe Illustrator) und zahlreich kostenlos im Web verfügbar.
  • einsteigerfreundlich und daher ohne hohen Lernaufwand verwendbar, aber
  • mächtig, wenn man mit der Zeit das Format und die Syntax lernt
  • Problemlöser für Gestaltungsaufgaben, bei denen CSS-Lösungen sehr umständlich oder unmöglich sind
  • Browserunterstützung nahezu komplett für Basis-Funktionen, Filter und Effekte (can I use-Abfrage )

Kleinigkeiten und so

Manchmal reite ich auf scheinbaren „Kleinigkeiten“ herum, welche die Konzentration stören und den Anwender zum Denken zwingen. „Don’t make me think“ war seit jeher meine Prämisse bei der Entwicklung von Webseiten. Wenn es um inclusive Design geht, ist das sogar noch wichtiger, denn Menschen mit Behinderungen, insbesondere Nutzer von assistiver Technik, haben ohnehin schon mehr zu leisten. Jedes weitere Detail das Aufmerksamkeit erfordert, erschwert die Bedienung von Webseiten zusätzlich.

Barrierefreiheit erreichen mit WordPress

Mit WordPress kann man Barrierefreiheit nach WCAG 2.0 erreichen, keine Frage. Längst keine Selbstverständlichkeit. Aber es gibt Zugänglichkeit niemals out-of-the-box. Wp und ein Theme, das Barrierefreiheit für sich beansprucht, ergeben nicht automatisch eine barrierefreie Website. Zu viel redaktionelle Fragen bleiben…

Aus Fehlern lernen

Designer sind kreativ. Diesen Satz wird wohl niemand anzweifeln. Ein bisschen weniger bekannt ist (außerhalb der IT-Szene), dass auch Programmierung ein kreativer Prozess ist.

Für einen Außenstehenden mag Logik oder mathematisches Verständnis, auswendig-gelerntes Theorie-Zeugs die Hauptzutat eines Programms oder einer Web-Anwendung sein.

Wer selber programmiert weiß, dass logisches Verständnis eines Sachverhaltes und die nötigen theoretischen Grundlagen nur die Voraussetzung zu einer Problemlösung sind, die eines kreativen Ansatzes bedarf. Oft beschreitet man einen Lösungsweg zum ersten Mal.

CSS: Flex-Box

Flex-Boxen sind der aktuelle Stand der Technik bei der Umsetzung responsiver Layouts. Responsive Designs wiederum sind die einzige zeitgemäßen Designs.

Grund genug also, sich mit der Technik auseinanderzusetzen, zumal der Einstieg nicht kompliziert ist.

Zoe Mickley Gillenwater zeigt im folgenden Video was Flex-Boxen tun und wie sie das Leben der Entwickler vereinfachen. Zumal sich die Notwendigkeit von Fallbacks in naher Zukunft erledigt hat.

DIN-A4-großes Cover mit blau-rotem Farbverlauf

Überarbeitete 2. Auflage: CSS – Cascading Style Sheets Level 3

Ihr erfolgreicher Einstieg in die Formatierungssprache CSS! Frisch überarbeitet: die zweite Auflage meines CSS3-Buches. Alle Texte sind auf den aktuellen Stand der Technik gebracht worden, den Möglichkeiten neuerer Browser-Versionen wird Rechnung getragen. Wenn Sie sich CSS3 selber beibringen möchten oder ein…