Die Navigation im Responsive Web Design

Hamburger Icon

Aufgrund der vielen verschiedenen Bildschirmgrößen und Geräte muss eine moderne Webseite flexibel auf die individuellen Bedürfnisse des Endnutzers reagieren. Einer der schwierigsten Punkte im Responsive Web Design ist dabei die Navigation. Damit eine Webseite auf verschiedenen Geräten benutzerfreundlich navigiert werden kann, brauchen wir ein Konzept, das es uns ermöglicht die Navigation entsprechend der Bildschirmgröße und des Bedienkonzepts (Mouse/Touch) anzupassen. Zu diesem Zweck gibt es unterschiedliche Musterlösungen - auch »Navigation Pattern« genannt – die wir in diesem Beitrag detailliert erklären.

Beitrag zu Ende lesen

Die CSS element()-Funktion – Eine ID als Hintergrundbild verwenden

In CSS ist es möglich einem Element mittels background-image-Eigenschaft ein Hintergrundbild zuzuweisen. Dieses Bild kann in allen webkompatiblen Dateiformaten (z. B. *.jpg, *.svg, *.png) eingebunden werden. Darüber hinaus ist die Umwandlung in Base64 möglich und häufig sinnvoll. Mit Hilfe der element()-Funktion von CSS kann die ID eines anderen Elements als Hintergrundbild angegeben werden.

Beitrag zu Ende lesen

CSS Shapes – Textumfluss, Konturenführung und individuelle Formen für Websites

Normalerweise erzeugen alle HTML-Elemente auf einer Website eine rechteckige Box. Das geschieht auch, wenn sie nicht rechteckig aussehen, da sie beispielsweise mit der CSS-Eigenschaft border-radius optisch so verändert wurden, dass sie abgerundet wirken. Texte und andere Elemente richten sich nun immer an den rechteckigen Boxen aus, was optisch unschöne Ergebnisse erzeugen kann. Mit den sog. »CSS Shapes« ist es möglich, nicht rechteckige Formen zu erzeugen und beispielsweise Texte exakt um ein Element herumfließen zu lassen. Vergleichbar mit der Konturenführung aus InDesign. Somit sind sehr interessante und magazinähnliche Layouts möglich.

Beitrag zu Ende lesen

Visitenkarten-Upload (*.vcf) in WordPress erlauben

vCards (*vcf) sind elektronische Visitenkarten, die es ermöglichen, Kontaktdaten unkompliziert in das eigene Adressbuch zu übernehmen. Also ein sehr nützliches Format um den Besuchern einer Website Kontaktinformationen schnell zugänglich zu machen. Schade nur, dass die WordPress-Mediathek den Upload dieses Dateiformats bisher verbietet. Mit einer kleinen Anpassung an der functions.php behebt ihr dieses Problem.

Beitrag zu Ende lesen

Die CSS-Eigenschaft box-decoration-break – padding & Co. beim Zeilenumbruch beibehalten

Wenn ihr Inline-Elementen über padding einen Innenabstand zuweist, dann wird dieses padding bei einem Zeilenumbruch ignoriert. Gleiches gilt für Eigenschaften wie box-shadow oder border-radius. Diese Tatsache ist in der Praxis extrem lästig, da es beispielsweise nicht möglich ist nur den Textbereich einer mehrzeiligen Überschrift mit einer Hintergrundfarbe zu hinterlegen und ansprechend zu gestalten. An den Zeilenumbrüchen wird der Hintergrund unschön abgeschnitten. Die CSS-Eigenschaft box-decoration-break schafft Abhilfe.

Beitrag zu Ende lesen

Eigene CSS-Styles bzw. Stylesheets im WordPress-Admin-Bereich verwenden

Ab und zu kommt es vor, dass der Admin-Bereich von WordPress individuell gestaltet werden soll. Beispielsweise soll das Farbkonzept für den Kunden angepasst werden. Zu diesem Zweck könnt ihr ein zusätzliches Stylesheet erstellen und mittels Action-Hook im Backend laden. In diesem Beitrag erklären wir, was getan werden muss.

Beitrag zu Ende lesen