kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …


WordPress-Plugin: Scroll-To-Top

Ihr kennt sicher das Problem: Man befindet sich auf einer sehr langen Website weit unten im Artikel und möchte zurück nach oben. Leider hat der Webdesigner keinen "Zurück nach oben"-Button in die Seite integriert (wie auch ich hier ... ). Nun muss kräftig gescrolled werden.
Selbstverständlich ist es technisch nicht aufwändig einen solchen Button in die Seite zu integrieren. Das folgende WordPress-Plugin erledigt die Sache aber denkbar einfach und hat darüber hinaus ein paar schöne Einstellungsmöglichkeiten die dann doch nicht ganz so einfach umzusetzen sind.

Beitrag zu Ende lesen

WordPress-Login-URL mit .htaccess ändern

Für gewöhnlich lautet die Login-URL in den Administrationsbereich von WordPress http://www.deineseite.de/wp-admin. Diese Adresse ist natürlich weder besonders ästhetisch - insbesondere wenn die Seite für einen späteren Kunden erreichbar sein soll - noch einfach zu merken. Mit einer Zeile Code in der .htaccess-Datei Eurer Website könnt Ihr die URL umschreiben. Anschließend kann sich ein Benutzer beispielsweise über http://www.deineseite.de/login anmelden.
Über die .htaccess steuert WordPress allerdings auch die Rewrites für die Permalinks (WordPress-Backend: Einstellungen > Permalinks). Solltet Ihr hier eine Permalink-Struktur verwenden, so muss die neue Regel für die Login-URL unbedingt davor eingesetzt werden!

Beitrag zu Ende lesen

Suchfeld automatisch zum WordPress-Menü hinzufügen

Seit der WordPress Version 3.0 haben wir die Möglichkeit über das Backend individuelle Navigationsmenüs zu erstellen. Dieses Feature erleichtert nicht nur das Anlegen von Navigationen sondern vor allem auch die spätere Pflege seitens des Kunden oder des Webdesigners.
Nachdem die Unterstützung für diese Menüs im Theme aktiviert ist kann die Navigation entweder per Template-Tag oder per Widget im Theme anzeigen werden. Um diesem Menü nun automatisch auch noch ein Suchfeld hinzuzufügen reicht es die functions.php ein wenig anzupassen.

Beitrag zu Ende lesen

Sprite-Generator Spritebox

CSS-Sprites sind für moderne Websites ein absolutes Must-Have. Eine Sprite fasst verschiedene grafische Seitenelemente in einer Datei zusammen um somit unter anderem die Ladezeit der Website zu beschleunigen. Mittels CSS-background-Eigenschaft wird anschließend verschiedenen Elementen die selbe Grafik zugewiesen; die Position innerhalb der Grafik erfolgt über die Koordinaten der background-position-Eigenschaft. Je größer die Sprite wird, desto lästiger ist es die Koordinaten abzumessen und anschließend auf das Stylesheet zu übertragen.
Der kostenlose Online-Dienst Spritebox erleichtert diese Aufgabe enorm.

Beitrag zu Ende lesen

Farbfehlsichtigkeiten im Web simulieren

Zu barrierearmem Webdesign gehört neben einem optimierten Markup auch ein angepasstes Design. Auf manchen Websites existiert eine Option das Design hinsichtlich einer bestimmten Farbfehlsichtigkeit (z.B. Rot-Grün-Schwäche) zu verändern, die Farben zu invertieren oder den Kontrast zu erhöhen. In einem solchen Fall müssen natürlich verschiedene Versionen des Design entwickelt und programmiert werden.
Alternativ kann der Webdesigner auch schon bei der Erstellung des Basis-Design darauf achten, dass das Farbkonzept auch mit Farbfehlsichtigkeiten noch ausreichende Kontraste bietet. Hier springt Color Oracle ein: Das winzige Tool ermöglicht es für Live-Ansichten des Bildschirms verschiedene Fehlsichtigkeiten zu simulieren. Wie das in der Praxis aussieht zeigt der folgende Screencast.

Beitrag zu Ende lesen

Photoshop-Screencast: Ebenenkompositionen im Webdesign

Beim Webdesign mit Photoshop müssen häufig verschiedene Unterseiten eines Projektes gestaltet werden damit der Kunde oder der Art-Director einen Eindruck des späteren Produkts bekommen kann. Nun kann man natürlich für die verschiedenen Subpages jeweils ein neues Dokument erstellen. Doch was passiert wenn sich nachträglich etwas im Header der Seite ändert oder die Navigation um einen Punkt erweitertert werden soll?
Spätestens zu diesem Zeitpunkt müssen Korrekturen in mehreren Photoshop-Files durchgeführt werden was natürlich lästig und zeitaufwändig ist. Mit Ebenenkompositionen könnt Ihr dieses Problem geschickt umgehen und alle Unterseiten, Navigations-Zustände etc. in einer Datei verwalten.

Beitrag zu Ende lesen