Denis Potschien

Typografie spielt im Webdesign zunehmend eine wichtige Rolle – vor allem mit der Einführung von Webfonts. Das Unterstreichen von Texten hingegen war immer ein eher eintöniges Unterfangen. Nur auf Umwegen ließen sich Farbe und Art der Unterstreichung beeinflussen. Die erweiterte CSS3-Eigenschaft „text-decoration“ gibt dir nun zusätzlichen Spielraum für die Gestaltung von Texten.

Als Apple vor einigen Jahren anfing, seine iPhones, iPads und MacBooks mit hochauflösenden Displays – den sogenannten Retina-Displays – auszustatten, hat das zu einer deutlichen Verbesserung der Darstellungsqualität geführt. Einzelne Pixel sind auf diesen Displays nicht mehr als solche zu erkennen. Mittlerweile sind hochauflösende Displays längst keine Besonderheit mehr. Vor allem aktuelle Mobilgeräte sind schon in der Mittelklasse hochauflösend. Während viele Apps für Mobilgeräte schon länger auf die hohe Auflösung ausgerichtet sind, lassen sich mittlerweile auch per HTML5, CSS3 und JavaScript hochauflösende Websites realisieren – ohne zusätzliche JavaScript-Bibliotheken.

Mit der Einführung von CSS3 haben sich die Gestaltungsmöglichkeiten für Websites sehr verändert. Vor allem Animationen und Transparenzen werden seitdem häufig eingesetzt. Doch es gibt auch eine Reihe von Eigenschaften, die nur selten Verwendung finden. Dabei ist mangelnde Browserunterstützung meist kein Grund mehr, auf diese Möglichkeiten zu verzichten. Vier solcher zu Unrecht vernachlässigter CSS3-Eigenschaften solltet ihr bei eurem nächsten Projekt daher unbedingt mal ausprobieren.

In der Vergangenheit legte Microsoft nicht viel Wert auf Webstandards. Aber spätestens mit dem neuen Browser Edge ist man auch bei Microsoft interessiert daran, sich an HTML- und CSS-Standards zu halten. Mit Sonar gibt es nun sogar ein Tool, welches Websites auf die Einhaltung solcher Standards überprüft. Darüber hinaus weist Sonar auf Optimierungsmöglichkeiten und auf Sicherheitsmängel hin.

Früher war klar: Präsentationen finden vor Ort beim Kunden oder in den eigenen Büroräumen statt. Während meines Studiums habe ich noch gelernt, wie man ausgedruckte Entwürfe hochwertig auf Pappen klebt, um sie während der Präsentation zeigen zu können. Selbst Weblayouts wurden ausgedruckt und auf diese Weise präsentiert. Die Art und Weise, wie man heutzutage präsentiert beziehungsweise präsentieren kann, hat sich geändert. Mittlerweile kann eine Präsentation dank des Internets auch räumlich und zeitlich getrennt vom Kunden stattfinden.

Wer mit SVG-Grafiken arbeitet, hat gleich mehrere Möglichkeiten, diese in ein HTML-Dokument einzubinden. Neben der Verwendung als klassische Bilddatei über das „<img>“-Element lassen sich SVG auch per „<object>“ oder „<iframe>“ implementieren. Letztere haben den Vorteil, dass auch JavaScript und Animationen ausgeführt werden können. Die einfache Variante ist jedoch, SVG inline im HTML-Quelltext auszuzeichnen. Dies erlaubt dir einen einfachen Umgang und Zugriff auf SVG-Formen per CSS und JavaScript.

Webschriften sind zweifelsohne eine große Bereicherung für das Webdesign und mittlerweile nicht mehr wegzudenken. Schließlich haben sie die Einheitstypografie mit Verdana und ihren Zeitgenossen beendet. Da Webschriften im Gegensatz zu Systemschriften jedoch heruntergeladen werden müssen, stellen sie natürlich eine zusätzliche Ressource dar, die für zusätzlichen Datentransfer sorgt. Mit den folgenden Tipps wirst du deine Webschriften optimieren und so dafür sorgen, dass deine Seite schneller geladen wird.

Responsives Webdesign ist längst zu einem festen Bestandteil der Webentwicklung geworden. Die zunehmende mobile Internetnutzung macht es erforderlich, dass jede Website auch auf kleinen Displays zu erkennen ist. Das stellt Webdesigner und -entwickler immer wieder vor Herausforderungen. Wo bringe ich die komplexe Navigation unter? Wie stelle ich Fotos und Grafiken zur Verfügung? Was mache ich mit breiten, vielspaltigen Tabellen? Auf letztere Frage gibt es gleich mehrere mögliche Antworten. Denn die eine, immer richtige Lösung für Tabellen gibt es nicht.

In Anwendungen wie InDesign oder QuarkXPress ist der Textumfluss eine klassische Möglichkeit, freigestellte Bilder und Grafiken sowie andere Pfaden mit Text umfließen zu lassen. Mit den CSS Shapes hast du seit CSS3 im Webdesign die Möglichkeit, solchen Textumfluss zu realisieren. Dazu kannst du sowohl Pfade definieren, an denen ein Text entlang laufen soll, als auch freigestellte Bilder definieren, an denen sich ein Text orientieren soll.