HTML

HTML5 (Hypertext Markup Language) ist eine Auszeichnungssprache, mit der die Inhalte eines Dokuments strukturiert und semantisch ausgezeichnet werden. Typische Elemente sind Überschriften, Textabsätze, Links, Listen, Bilder etc. HTML5 ist eine vom W3C noch nicht fertiggestellte Weiterentwicklung von HTML 4.01 und XHTML. Die Sprache wird dennoch bereits produktiv genutzt; in diesem Zusammenhang ist von einem „offenen Standard“ die Rede. Die verschiedenen Elemente eines HTML-Dokuments werden mit CSS gestaltet.

Automatische Verlinkung von Nummern verhindern

iban

Wenn wir mit dem Smartphone eine Telefonnummer auf einer Website suchen, dann möchten wir häufig auch direkt anrufen. Es bietet sich daher an, die Telefonnummer entsprechend zu verlinken um dem Anwender die Bedienung zu erleichtern. Wie ihr solche Links zu verschiedenen Diensten und Apps herstellt, habe ich im Blog bereits behandelt.

Einige mobile Betriebssysteme erkennen Telefonnummern sogar selbstständig und wandeln die Zahlenkette automatisch in einen Link mit Anruf-Funktion um. Lästig nur, wenn der Automatismus auch andere Zahlenketten als Telefonnummern interpretiert. In diesem Fall sollte man die Funktion deaktivieren.

Beitrag zu Ende lesen

Gestaltungsraster (CSS-Grids) im Web Design

CSS Grids

Eine moderne Website basiert i.d.R. auf einem sog. CSS-Grid System - einem Gestaltungsraster. Das Raster hat dabei verschiedene Aufgaben: Einerseits trägt es zu einem strukturierten Layout bei und sorgt dafür, dass eine Website professionell wirkt, andererseits unterstützt das Raster auch den Web Designer bei der Entwicklung, indem es vordefinierte CSS-Klassen bereitstellt.
In diesem Beitrag möchte ich das Thema Gestaltungsraster im Web ausführlich beleuchten. Ich gehe detailliert auf Responsive Grid Systeme ein, und erkläre die Funktionsweise an verschiedenen Beispielen.

Beitrag zu Ende lesen

Responsive Images – <picture>, srcset, sizes & Co.

responsiveimages

Flexible Bilder sind ein wichtiger Bestandteil von responsiven Websites. Doch leider stellte genau dieses Thema Web Designer in den vergangenen Jahren vor enorme Herausforderungen. Ohne Scripte war es bisher nicht möglich Bilder ohne Performance- oder Qualitätsverluste auf allen Displaygrößen darzustellen. Und selbst mit der Unterstützung von Scripten waren einige Änderungen – z. B. die Veränderung des Bildausschnitts – eine mehr als lästige Aufgabe. Mit <picture>, srcset & sizes sind neue HTML-Elemente und -Attribute in die Spezifikation gewandert, mit deren Hilfe sich viele Probleme bald lösen werden.

Beitrag zu Ende lesen

Content Choreography mit caption-side: bottom;

caption-side-css

Das HTML-Element <caption> beschreibt den Inhalt einer Tabelle. Leider wird das dazugehörige align-Attribut in HTML5 nicht länger unterstützt. Doch wir haben mit CSS die Möglichkeit einem HTML-Element das Verhalten bestimmter Tabellen-Elemente zuzuweisen. Im Umfeld von Content Choreography ist hier die Eigenschaft caption-side interessant. Mit ihr können zwei aufeinander folgende Inhalte getauscht werden – und das funktioniert in allen relevanten Browsern funktioniert in allen modernen Browsern, außer dem Internet Explorer.

Beitrag zu Ende lesen

SVG-Grafiken erstellen und einbinden

SVG

Mit dem Format SVG (Scalable Vector Graphics) können Vektor-Grafiken in Browser dargestellt werden. Wie bei Vektor-Grafiken üblich, werden Farbwerte und Formen nicht über Pixel definiert, sondern mathematisch beschrieben. SVG-Grafiken haben dadurch eine sehr geringe Dateigröße, lassen sich verlustfrei und ohne Zuwachs der Dateigröße skalieren und mit JavaScript animieren oder verändern.

In diesem Artikel fasse ich zusammen, was ihr beim Erstellen von SVGs in Illustrator oder Photoshop beachten solltet, wie SVGs in Websites eingebunden werden können und welche Tools und Hilfsmittel es in diesem Zusammenhang gibt.

Beitrag zu Ende lesen

SVG mit PNG-Fallback

svg-fallback-png

Das Dateiformat SVG (Scalable Vector Graphic) ist die Zukunft der Grafikformate im Web. Sofern sich SVG gestalterisch anbietet, überzeugt das Vektor-Format mit brillanter Bildqualität auf allen Displaytechnologien (z. B. Retina/HiDPI), stufenloser Skalierbarkeit und verhältnismäßig geringer Dateigröße.
Leider wird SVG in älteren Browsern (< IE8) nicht unterstützt. Bis diese Browser an Relevanz verloren haben, muss also eine Übergangslösung her. Mit Hilfe von Modernizr lässt sich ohne Schwierigkeiten ein sehr wartungsfreundlicher PNG-Fallback herstellen.

Beitrag zu Ende lesen

Mobile First + Progressive Enhancement

mobile-first

Das mobile Internet hat die Art und Weise wie wir Websites entwickeln grundlegend verändert. Vor einiger Zeit habe ich einen Artikel über den veränderten Workflow im Responsive Design veröffentlicht und erklärt, warum wir umdenken müssen, mit welchen Herausforderungen wir uns konfrontiert sehen und welche Lösungsansätze es gibt.
Doch nicht nur die Erstellung eines flexiblen Layouts ist wichtig. Auch die Performance-Optimierung, die Browserkompatibilität und die Informationsarchitektur sind entscheidend für den späteren Erfolg der Website.
In diesem Artikel möchte ich beschreiben, inwiefern sich die Sichtweise bei der Konzeption und Entwicklung von Websites verändert hat.

Beitrag zu Ende lesen