Kategorien
Design HTML/CSS

CSS3: So einfach hübscht du deine Tabellen auf (1/2)

Auch wenn Tabellen als Layout fürs Webdesign dank CSS passé sind, gibt es nach wie vor jede Menge Inhalte, deren Präsentation im Internet einer Tabelle bedarf. Seien es Preislisten im Online-Shop, Tarife für Flüge oder Hotelbuchungen oder Ergebnisse von Sportvereinen. Wie du solche Tabellen mit CSS3 ansprechend und dynamisch gestaltest, zeige ich dir in einem […]

Kategorien
Design HTML/CSS UI/UX Webdesign

Farben finden: 5 Tools für gute Farbkombinationen

Farben spielen im Design natürlich eine große Rolle. Doch stimmige und passende Farbkonzepte zu erstellen, ist nicht jedermanns Sache. Daher gibt es eine Reihe von Webanwendungen, die dir helfen, gute Farbkombinationen zu finden. Monochromatische Farben lassen sich ebenso zusammenstellen wie Komplementärfarben. Dabei unterscheiden sich die Tools teils bereits im Ansatz.

Kategorien
Design HTML/CSS Inspiration UI/UX

404: Die Top 50 der kreativsten Fehlerseiten im Weltennetz

Jede Website liefert ab und an einen 404-Fehler aus. Ein Besucher hat vielleicht eine Adresse falsch eingegeben, oder ein Link existiert unter Umständen nicht mehr. Diese Fehlerseiten kannst du designen, um deinen Besuchern auf die richtige Fährte zu helfen.

Kategorien
Design HTML/CSS

Layouts mit CSS: Flexbox oder Grid?

Wie wir Websites gestalten, hat sich in den vergangenen Jahren immer wieder mal mehr, mal weniger radikal geändert. Mit der Einführung von CSS Flexbox hat eine entscheidende Erneuerung stattgefunden. Kurz darauf ist mit CSS Grid ein weiteres Layoutmodell hinzugekommen. Welches ist nun wofür besser geeignet? Muss ich mich für ein Modell entscheiden?

Kategorien
Design HTML/CSS

Das neue Dialog-Element von HTML 5.2

Der neue Standard HTML 5.2 bringt uns ein neues Element namens <dialog>. Damit lassen sich modale Dialogboxen erstellen, denen du mit etwas JavaScript zu Interaktivität verhelfen kannst.

Kategorien
Design E-Business HTML/CSS Responsive Design SEO UI/UX

7+ SEO-Tipps, die nur der Designer umsetzen kann

Bevor du anfängst, in die muffigen Tiefen des SEO-Gewerbes abzusteigen, solltest du wissen, dass das Design deiner Seite an sich bereits erheblichen Einfluss auf die Suchmaschinentauglichkeit hat. Wenn da geschlampt wurde, läufst du dem optimalen Ergebnis stets hinterher.

Kategorien
Design HTML/CSS Programmierung UI/UX

Einfache Lösungen für dynamisches Webdesign mit HTML5-Data-Attributen

Lebendige Effekte auf Websites können dir im Wettbewerb um die Aufmerksamkeit der Nutzer gute Dienste leisten. Du denkst vielleicht direkt an parallaxes Scrolling. Das aber ist nicht die einzige Option für dynamisches Webdesign.

Kategorien
HTML/CSS

Alles, was du über SVG wissen musst

Mit der Einführung von HTML5 ab 2004 wurde auch die JavaScript-basierte Zeichenmethode Canvas eingeführt. Bereits seit 2001 gibt es das vektorbasierte SVG-Format, welches allerdings erst in den letzten Jahren parallel zu HTML5 ein wirklicher Erfolg wurde. Beide Formate haben ihre Vor- und Nachteile. Aber welches ist wann besser geeignet? Wo liegen die Vor- und Nachteile? […]

Kategorien
Apps HTML/CSS Responsive Design Webdesign

Progressive Web Apps: Mit HTML5 und JavaScript zur fast nativen App

Native Apps für Android- und iOS-Geräte haben in vielerlei Hinsicht große Vorteile gegenüber per HTML5 und JavaScript entwickelter Webanwendungen.

Kategorien
Design HTML/CSS Responsive Design Webdesign

HTML5 & CSS3: mache deine Website fit für hochauflösende Displays

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 […]

Kategorien
HTML/CSS

CSS3 für Designprofis: Vier Eigenschaften, die du kennen und nutzen solltest

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 […]

Kategorien
Design HTML/CSS Programmierung

Outdated Browser: Freies Projekt informiert deine Besucher über den Zustand ihres Browsers

Das Problem ist nicht mehr ganz so akut wie noch vor einigen Jahren. Dennoch surfen auch heutzutage noch zu viele Menschen mit einem veralteten Browser. Wenn deine Website sehr modern ausgestattet ist, werden diese Menschen keinen Spaß daran haben. Bevor sie deshalb sauer auf dich werden, weise sie doch einfach freundlich darauf hin, dass sie […]

Kategorien
HTML/CSS

Inline Critical CSS – Wie eine Bad Practice zum Geschwindigkeitsboost führen kann

Ein Ergebnis von 89 % bei Google Pagespeed Insights. Dann kann es bis zur 100 nicht mehr weit sein. Nach stundenlanger Bild- und Cacheoptimierung, Zusammenfassung von CSS- und Javascript-Dateien kommt nun der Endgegner. Was er bedeutet und wie ihr ihn besiegen könnt, erfahrt ihr in diesem Beitrag. Eine rätselhafte Meldung bei den Pagespeed Insights Nachdem […]

Kategorien
Design HTML/CSS Programmierung Webdesign

HTML5 und JavaScript: So erstellst du mobile Web-Apps

Mobile Web-Apps müssen nicht immer nativ programmiert werden. Auch mit HTML5 und den damit eingeführten JavaScript-APIs entwickelst du mobile Web-Apps, die bezüglich der Funktionalität den nativ programmierten Apps in (fast) nichts nachstehen. Dazu kommt, dass native Anwendungen auch ihre Nachteile haben, die du mit HTML5 nicht hast. Kein Store-Zwang, keine unterschiedlichen Plattformen Apps sind auf Smartphones und Tablets […]

Kategorien
Design HTML/CSS UI/UX Webdesign

Mobile Navigation mit Taps und Gesten statt Maus

Das mobile Internet hat in vielerlei Hinsicht die Gewohnheiten, wann, wie und wo wir das World Wide Web nutzen, stark beeinflusst. So hat sich vor allem die Art und Weise, wie wir durch Websites navigieren, verändert. War die Maus bis vor einigen Jahren maßgeblich für die Navigation verantwortlich, sind es auf Smartphones und Tablets nun Taps und […]

Kategorien
HTML/CSS Webdesign

Tabellen responsiv gestalten – mit CSS, ohne JavaScript

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 […]

Kategorien
Design HTML/CSS Webdesign

CSS Shapes: So richtest du Text an Formen aus

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 […]

Kategorien
Design HTML/CSS Icons & Fonts Webdesign

Die schönsten Layer-Fonts und wie man sie im Webdesign verwendet

Dass eine Schrift auch mal mehrfarbig gesetzt sein kann, ist keine Erfindung der digitalen Typografie. Bereits im 19. Jahrhundert gab es Schriften, die in zwei oder mehr Schnitte aufgeteilt waren, sodass man sie mehrfarbig übereinander drucken konnte. Mit dem OpenType-Format gibt es solche sogenannten Layer-Fonts auch für den digitalen Einsatz. Gerade für 3D- und Schatteneffekte sind […]

Kategorien
Design HTML/CSS Webdesign

CSS3-Transitions für komplexe Animationen kombinieren

Animierte Übergänge sind dank CSS3-Transitions mit wenig Aufwand möglich und werden mittlerweile ganz selbstverständlich eingesetzt. Dabei kannst du verschiedene Eigenschaften gleichzeitig verändern. Es gibt aber auch die Möglichkeit, die zu animierenden Eigenschaften zu unterschiedlichen Zeiten und mit unterschiedlicher Länge abzuspielen. Transitions mit Delay Die „transitions“-Eigenschaft kennt vier unterschiedliche Werte. Der erste Wert teilt mit, welche […]

Kategorien
HTML/CSS Webdesign

HTML5: Automatische Großschreibung mit „autocapitalize“

Formulareingaben auf Smartphones und Tablets sind nicht immer eine angenehme Angelegenheit. Mittels Eingabehilfen werden einem Wörter vorgeschlagen. Auch die Groß- und Kleinschreibung kann beeinflusst beziehungsweise vorgegeben werden. Mit dem HTML-Attribut autocapitalize ist es möglich, für Formularfelder zu definieren, wann Wörter mit einem Großbuchstaben begonnen und wann sie komplett in Großbuchstaben dargestellt werden sollen. Zeichen, Wörter […]