Hier findest Du Artikel, Tutorials, Downloads, Tipps, Hacks, Snippets und aktuelle Szene-News rund um illustratives Webdesign, Social Media und digitale Bildbearbeitung.
Tipps, Hacks, Snippets
Hier siehst Du eine Übersicht aller Tipps, Hacks, Snippets. Um nichts zu verpassen kannst du diese Kategorie per RSS-Feed abonnieren. Oder du nutzt den Feed mit allen Inhalten des Blogs.
Die Photoshop-Profis haben einen weiteren Screencast von mir veröffentlicht. In dieser Folge erkläre ich die Grundlagen des Webdesign anhand von Farbflächen und Übergängen. Ich zeige warum es wichtig ist Flächen mit leichten Verläufen oder Strukturen zu versehen und wie man mit einfachen Mitteln - zum Beispiel einer eigenen Pinselspitze - die Übergänge zwischen Farbflächen aufwerten kann.
Die meisten von euch wird es sicher genauso nerven wie mich. Sobald man eine Website mit CSS3 umsetzen möchte, muss man zusätzlich zu den normalen CSS3-Befehlen die so genannten Vendor-Prefixes schreiben damit auch alle Browser die Eigenschaften interpretieren können. Das ist nicht nur lästig, häufig weiß man auch gar nicht genau welcher CSS3-Befehl welche Prefixes benötigt.
Ein kleines JavaScript namens prefixfree.js erleichtert euch die Arbeit enorm.
Ich habe im vorausgegangenen Beitrag das Snippet zum Austausch des Login-Screen-Logos vorgestellt, nun möchte ich euch zeigen wie ihr das Logo innerhalb des WordPress-Dashboards ersetzen könnt.
Diese kleine Anpassung kann ebenfalls dazu beitragen, dass sich ein Kunde in WordPress wohler fühlt und das Gesamtprojekt (noch) positiver wahrnimmt. Auch dieses Snippet ist daher fester Bestandteil meines Basis-Themes das ich für alle WordPress-Projekte als technische Grundlage nutze und ständig weiterentwickle.
Wenn ihr WordPress für Kundenprojekte einsetzt, macht es Sinn den Administrationsbereich optisch an das bestehende Corporate Design des Kunden anzupassen. Dieser sieht nämlich in der Regel das eigene Logo lieber als das von WordPress, und eine individualisierte Installation wirkt natürlich auch technisch hochwertiger.
Der erste Kontaktpunkt zwischen Anwender und WordPress-Backend ist der Login-Bereich. Mit wenigen Zeilen Code tauscht ihr hier das WordPress-Logo gegen das des Kunden aus. Ein Snippet das unbedingt in die Theme-Vorlage wandern sollte.
Um möglichst viele Besucher auf heiß diskutierte Beiträge des Blogs aufmerksam zu machen, lohnt es sich einen Bereich mit "beliebten Artikeln" einzubinden. Mit den Custom Queries von WordPress ist es möglich Beiträge nach der Anzahl der abgegebenen Kommentare zu sortieren und in ihrer Anzahl zu begrenzen. Mit dieser Technik werden jedoch auch veraltete, aber viel kommentierte Artikel berücksichtigt. Um nur aktuelle Trends abzubilden muss daher ein Zeitfenster definiert werden.
Wenn Ihr eine Website mit Media Queries für mobile Endgeräte optimiert und eingebettete Videos von YouTube, Vimeo und Co. verwendet, werdet ihr recht schnell merken, dass es hier ein Problem gibt. Das Layout passt sich zwar flexibel der Breite des Displays bzw. des Monitors an, das Video reagiert auf die CSS-Angaben jedoch nicht und behält seine feste Größe. In der mobilen Version seht ihr dann entweder ein abgeschnittenes Video oder einen in die Breite gedrückten Inhaltsbereich.
Ich möchte euch zwei Lösungen zeigen die dieses Problem beheben.
Bei der Erstellung eines WordPress-Themes kommt es häufiger vor, dass man nur den Titel einer übergeordneten Seite anzeigen möchte. Zum Beispiel um für eine Metanavigation in der Sidebar eine Überschrift auszugeben.
Besonders interessant ist in diesem Zusammenhang der Titel einer Eltern-Seite auf oberster Verschachtelungsebene.