pixelstrolch

Die besten meiner geteilten Links auf Twitter im April 2012

Stefan Brechbühl — Fri, 04 May 2012 08:35:18 +0000

Seit Anfang dieses Jahres habe ich mit der Artikelserie begonnen. Mir besonders interessant erscheinende Tweets favorisiere ich und widme ihnen einen monatlich erscheinender Artikel. Dies soll nicht nur für die Leserschaft dieses Blogs nützlich sein, sondern mir auch als eine Art Archiv dienen. Falls du an weiteren Links im Bereich Webdesign und Tools interessiert bist – dann folge mir doch auf Twitter. Also los geht’s mit den April Highlights.

Neue Impressumspflicht in der Schweiz

Rechtsanwalt Martin Steiger schreibt in einem Gastartikel im Blog des Hosters hostpoint über die neu geltende Impressumspflicht für schweizerische Webangebote. Retweeted von @hostpoint

Responsive CSS3 Slider ohne JavaScript

Auf der Website codevisually.com erschien der Artikel Responsive CSS3 slider without Javascript. Ein Slider hergestellt nur mit CSS3 ohne JavaScript welcher sich dazu noch flexibel an das Ausgabegerät anpasst – klingt interessant oder nicht?

Gridpack – Responsive Grid Generator

Mithilfe des Blogartikels Gridpack – Responsive Grid Generator auf blog.kulturbanause.de bin ich auf ein neues Tool gestossen. Durch den Generator Gridpack lassen sich eigene Web-Layoutraster generieren, welche sich an verschiedene Bildschirmauflösungen anpassen.

Coole Hovereffekte mit Adipoli jQuery-Plugin

Das beliebte Webmagazin DrWeb.de ist seit kurzem wieder sehr aktiv und strotzt nur so mit lesenswerten Artikeln. Der Artikel Adipoli jQuery-Plugin: Feine Hover-Effekte für Bilder beschreibt ein Plugin mit eindrucksvollen Hover-Effekten.

Flat Icons & Icon Fonts

… ist eine Kollektion / Zusammenfassung von eleganten minimalistischen Icons und Icon Fonts. Die Anzahl an Icons sowie der Preis werden ebenfalls erwähnt. Artikel auf css-tricks.com

Responsive Inspiration mit mediaqueri.es

Im t3n Magazin habe ich über eine Responsive Sammlung namens mediaqueri.es gelesen. Eine gelungene Inspiration wenn es um responsives Webdesign geht, wie ich finde.

CSSDeck – Eine beeindruckende CSS Sammlung

Wer sich inspirieren möchte, welche unglaubliche Dinge man mit CSS anstellen kann, sollte sich mal auf CSSDeck umsehen. Entdeckt auf codevisually.com

Moderne horizontale CSS3 Navigation

Eine Möglichkeit wie eine horizontale Navigation nur mithilfe von CSS3 aussehen könnte. Artikel auf designmodo.com

15 kostenlose jQuery- und CSS3-Tutorials

Eine Liste bestehend aus 15 jQuery- und CSS3-Tutorials um moderne Effekte zu zaubern. Entdeckt ebenfalls im t3n Magazin.

3 clevere neue Web-Tools für Entwickler

Das DrWeb Magazin stellt drei aktuelle Tools für Webdesigner vor. Der Artikel handelt von CSS Arrow Please, Grad3 und Dirty Markup.

10 kommerzielle Photoshop-Aktionen die das Geld auch wirklich wert sind.

Und der nächste Artikel aus dem DrWeb Magazin, welcher die Photoshop User unter euch bestimmt neugierig macht. Zum Artikel

Kostenlos: 350 Pixel Perfect Glyphs Icons

Auf blogging-inside.de habe ich von diesem minimalistischen Iconsset erfahren. Diese Icons sehen doch ganz hübsch aus und sind obendrein noch kostenlos.

Neue Taxonomien anlegen und ausgeben

Dieses WordPress Tutorial auf neontrauma.de zeigt an einem praktischen Beispiel die Verwendung von eigenen Taxonomien.

50 fantastic tools for responsive web design

Wahrlich eine Schatztruhe an Tools für responsives Webdesign ist dieser Artikel auf netmagazine.com. Retweeted von @ellenbauer

Hilfreiche Tools, um Hintergrundgrafiken für das Webdesign zu entdecken und herzustellen

Stefan Brechbühl — Tue, 24 Apr 2012 07:00:01 +0000

Damit eine Website ästhetisch wirkt, spielen Hintergrundgrafiken eine bedeutsame Rolle. Das Web bietet so einige nützliche Hilfsmittel, um euch bei der Suche und Auswahl von solchen Grafiken zu unterstützen. Einige solcher Tools möchte ich hier auflisten.

Subtle Patterns

Subtle Patterns ist eine Sammlung von derzeit über 200 kachelbaren Grafiken. Mithilfe des Suchfelds und der Eingabe von (englischen) Stichworten könnt ihr euch ein passendes Pattern aussuchen. Die Grafiken können als Liste oder Thumbnails dargestellt werden. Den Photoshoper unter euch stellt die Seite eine .pat-Datei mit sämtlichen Grafiken zur Verfügung. Die Website wird unter der Creative Commons Attribution 3.0 Unported License betrieben. Die Bilder können für persönliche sowie kommerzielle Zwecke verwendet werden.

Stripmania

Auf Stripmania.com könnt ihr euch einen gestreiften Hintergrund generieren. Dabei könnt ihr Streifendicke, Orientierung und natürlich die Farben auswählen. Die Streifen können mit einem Verlauf ausgestattet werden. Ausserdem könnt ihr noch weitere andersfarbige Streifen hinzufügen. Passen sämtliche Einstellungen, kann der Stripe heruntergeladen werden.

Stripe Generator

Stripegenerator.com erfüllt denselben Zweck wie Stripmania. Hier können die Streifen nicht mit einem Verlauf versehen werden, der Hintergrund hingegen schon. Die Streifen kann man mit einem Schlagschatten ausstatten. Ausserdem stehen ein paar Orientierungen mehr zur Verfügung.

NoisePNG

Sehr gerne eingesetzt ist der Störungs- oder Verschmutzungseffekt auf einfarbigen Flächen. NoisePNG.com hilft euch bei der Herstellung einer solchen Grafik. Zuerst werden die Hintergrundfarbe und Grösse gewählt. Danach wird die Dichte und Transparenz der Störungspixel generiert. Sollen die Pixel monochromatisch (in Graustufen) dargestellt werden, steht auch hierzu ein Kontrollkästchen zur Verfügung. Zum Schluss kann die Grafik selbstverständlich heruntergeladen werden.

BgPatterns

Auch BgPatterns ist ein Background Generator. Es stehen viele verschiedene Optionen zur Verfügung. Unter dem Reiter Colors werden Vor- und Hintergrundfarbe definiert. Canvas steht für eine Textur die ausgewählt und in Grösse und Transparenz eingestellt werden kann. Unter Image kann eine Grafik ausgewählt werden, welche mit der bereits definierten Vordergrundfarbe, gefärbt wird. Ausserdem kann die Grafik noch gedreht werden. Sämtliche Einstellungen können jederzeit mit dem Vorschaubutton getestet und das erzeugte Bild schliesslich mit dem Downloadbutton heruntergeladen werden.

Tartan Maker

Für das spezielle Thema mit schottischem Flair hilft tartanmaker.com. Hier könnt ihr euch nämlich ein eigenes schottisches Muster mit gewünschten Farben und Grössen herstellen.

Background Dotter

Mithilfe von Pixelknetes Background Dotter könnt ihr euch einen gepunkteten Hintergrund konfigurieren. Es stehen zwei mögliche Punkt- und Hintergrundfarben zur Wahl bereit. Die Höhe des generierten Bildes kann ausgewählt werden. Mithilfe des Randombuttons kann das Tools getestet werden.

Das WordPress Backend Theme anpassen und Plugin-, Theme-Editor und Admin Bar ausblenden

Stefan Brechbühl — Fri, 06 Apr 2012 18:39:37 +0000

Es bestehen Möglichkeiten das WordPress Backend an persönliche Bedürfnisse anzupassen. Abstimmungen an das Corporate Design wird wohl einer, der bedeutendsten Gründe dafür sein. Nebst Änderungen am Aussehen, möchte ich auch auf das Ausblenden von Plugin-, Theme-Editor und der Admin Bar eingehen.

Die Oberfläche des Backends ändern

Ein sehr umfangreiches Plugin kommt aus der Schmiede von bueltge.de und nennt sich Adminimize. Um ehrlich zu sein, habe ich das Plugin bisher nicht ausgiebig getestet. Es bietet tonnenweise Einstellungsmöglichkeiten, welche getrennt an den verschiedenen Benutzergruppen angewendet werden können. Mir persönlich passt die Backend Oberfläche grundsätzlich so wie sie ist, weshalb ich mich nach einem schlankeren Lösungsweg umsah.

Zusätzliche CSS-Datei mithilfe eines Plugins laden

Pascal Bajorat zeigt in seinem Blogartikel WordPress Backend individualisieren mit eigener CSS-Datei – mittels WordPress Plugin was der Titel verspricht. Es soll also eine zusätzliche CSS-Datei zur (Um)gestaltung des Backends hinzugefügt werden. Ungeeignet ist die direkte Bearbeitung der orignialen CSS-Dateien, da bei zukünftigen Updates die Dateien überschrieben werden können. Um die gewünschten IDs und Klassen herauszufinden, eignet sich die Browsererweiterung Firebug oder browserinterne Entwicklertools.

functions.php anstatt eines Plugins

Wer die zusätzliche CSS-Datei lieber mithilfe von einigen Zeilen in der functions.php umsetzen möchte, der kann das natürlich. Obwohl der benötigte Code auch vom oben aufgeführten Lösungsweg entnommen werden kann, hier noch eine Variante von wp-snippets.com in leicht abgeänderter Form.

';
}
add_action('admin_head', 'customAdmin');
?>

Den Pfad in der vierten Zeile müsst ihr natürlich noch abändern.

Praxisbeispiel eines Stylesheets

Um die Änderungen, welche im Artikelbild ersichtlich sind, aufzuzeigen, folgt im Anschluss mein geladenes CSS Stylesheet. Ich habe mir das Logo im Kopfbereich zwischen Icon und Titel eingefügt. Ebenfalls habe ich Schriftanpassungen am h2 Titel im Kopfbereich und den h3 Titeln im Dashbord Bereich vorgenommen.

@import url(http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:700);

div#wpbody-content div.wrap h2 {
background:url(images/logo-admin.png) no-repeat 45px 4px;
color:#767676;
font-family:'Yanone Kaffeesatz', sans-serif;
font-size:3em;
letter-spacing:1px;
margin:15px 0;
padding-left:255px;
}

h3.hndle{
color:#767676;
font-family:'Yanone Kaffeesatz', sans-serif;
font-size:1.8em;
letter-spacing:1px;
}

Den Plugin und Theme Editor ausblenden

Ich persönlich halte nicht viel davon den Code von Plugins oder Themes direkt im Backend zu bearbeiten. Mit einem lokal installierten Editor lassen sich die Dateien einerseits besser ändern und andererseits zeigt sich die Wiederherstellung von Fehleingaben einfacher. Insbesondere wenn noch andere Administratoren mitwirken, stellt ihr euch vielleicht die Frage ob dies Editoren wirklich benötigt werden. Um die Editoren für alle Benutzer auszublenden, müsst ihr lediglich folgende Zeile (Quelle codex.wordpress.org) in die config.php einfügen:

/** Disable the Plugin and Theme Editor */
define('DISALLOW_FILE_EDIT',true);

Admin Bar ausblenden

In der Version 3.1 von WordPress wurde die Admin Bar eingeführt. Diese dient als Bearbeitungswerkzeug im Frontend. Wenn ihr die Admin Bar nicht benötigt und sie euch stört, könnt ihr sie mit einer Zeile Code in der functions.php ausblenden. Der folgende Code stammt von wp-snippets.com.

@pixelstrolch Fav Tweets 03/2012

Stefan Brechbühl — Mon, 02 Apr 2012 08:19:54 +0000

Im März kamen wieder einige Tweets mit wertvollen Links zusammen. Vielfach habe ich eigene Tweets favorisiert, bei denen mich der Inhalt der verlinkten Seite überzeugte. Die Inhalte der Tweets sind Ladezeiten Optimierung, freie Icons, Icon Fonts und weitere tolle Quellen für das Webdesign. Seht euch doch mal um, ob auch ein interessanter Artikel für euch dabei ist.

Optimierung der Ladezeiten (Page Speed, mod_gzip, mod_expires, CSS Sprites, HTTP Requests, …) bit.ly/yjLgrD via @webdesigncast
— Stefan Brechbühl (@pixelstrolch) März 2, 2012

12 Gratis Icon Schriftarten ideal fürs Web: bit.ly/zFzkEz | RT @TimothyWhalin
— Jonathan Torke (@JonathanTorke) März 6, 2012

Box of Bundles – Kostenlose Webdesign Objekte bit.ly/xAqfUb - Artikel von @blogginginside
— Stefan Brechbühl (@pixelstrolch) März 7, 2012

CSS3 Fancy Box – Pure CSS3 lightbox - CodeVisually bit.ly/zFboen
— Stefan Brechbühl (@pixelstrolch) März 8, 2012

Socialico – @fontace Social Media Icons Pack - CodeVisually bit.ly/ykpdSR
— Stefan Brechbühl (@pixelstrolch) März 8, 2012

Flexible jQuery-Slideshow mit Generator: Rhinoslider bit.ly/Axe9xR - Artikel von @_kulturbanause
— Stefan Brechbühl (@pixelstrolch) März 8, 2012

Was ich unter gutem Webdesign verstehe bit.ly/ykehAA
— Martin Steiner CH/DE (@stoonich) März 16, 2012

40 Useful PSDs From Dribbble bit.ly/zVKJyM
— Stefan Brechbühl (@pixelstrolch) März 19, 2012

Top story: Useful WordPress Tools, Themes and Plugins | Smashing WordPress goo.gl/ntK5E, see more goo.gl/GHKpH
— stooni (@stooni) März 24, 2012

Wie schreibe ich einen guten Blogartikel? - bit.ly/wt2fE6
— Bloggen mit SEO (@seobloggerei) März 24, 2012

Foto-/Ferieninspiration Hawaii 2012

Stefan Brechbühl — Mon, 12 Mar 2012 12:45:50 +0000

Nachdem wir nach unserem kurzweiligen Urlaub auf Hawaii zurückgekehrt sind, möchte ich euch einige Fotoeindrücke nicht vorenthalten. Seht diesen Artikel als Ferien- und Fotoinspiration an. Die Reise brachte uns auf die Inseln Oahu, Maui und Kauai. Letztere wurde leider durch Unwetter und Hochwasser überschattet. Ein paar wenige Schnappschüsse konnten wir trotzdem schiessen. Die Fotos habe ich nachträglich mit einem HDR-Fotoeffekt versehen. Für die Bearbeitung habe ich mich vom Photoshop Aktionsset von forfie auf deviantart.com bedient.

Oahu

Maui

Kauai

URL Weiterleitungen aus dem WordPress Backend steuern

Stefan Brechbühl — Sun, 11 Mar 2012 09:00:56 +0000

Gerade wenn man sich um eine grössere Anzahl URL-Weiterleitungen kümmern muss, ist Übersicht gefragt. Bei meinem Umzug zu WordPress musste ich mich um viele dieser Umleitungen kümmern. So habe ich nach einem Plugin gesucht und bin auf Redirection gestossen.

Übersicht behalten

Der grosse Vorteil des Plugins ist die Verwaltung der Links im Backend. Das Verwalten von unübersichtlichen Einträgen in der .htaccess Datei sind somit nicht mehr nötig. Redirection speichert die erstellten Umleitungen in der WordPress-Datenbank ab.

URL-Umleitungen hinzufügen

Einmal installiert, findet ihr die Einstellungen des Plugins im Menü Werkzeuge. Anfangs musste ich unter Module - Apache - Ort noch die Serveradresse zur .htaccess Datei einfügen, bevor ich loslegen konnte. Danach könnt ihr bereits mit den ersten Umleitungen loslegen. Dazu nutzt ihr ganz einfach die Textfelder mit dem Titel: Eine neue Umleitung hinzufügen. Um das ganze noch ein wenig ordentlicher zu gestalten könnt ihr weitere Gruppen hinzufügen.

Log-Datei

Auch sehr hilfreich ist die Umleitungs-Log. In den Optionen kann ausgewählt werden ob 404- und/oder Umleitungsaufrufe aufgezeichnet werden. Für meine Bedürfnisse macht es zur Zeit Sinn, nur die 404-Fehler Aufrufe aufzeichnen zu lassen. Entdeckt man einen neuen 404-Aufruf, kann direkt aus der Log eine Umleitung erstellt werden. Zur Plugin Seite

@pixelstrolch Fav Tweets 02/2012

Stefan Brechbühl — Sat, 10 Mar 2012 16:53:02 +0000

@stooni twittert haufenweise interessante Links zu mehrheitlich englischsprachigem Inhalt von Topsites. Davon habe ich im Februar drei favorisiert. Sie handeln von hübschen Icons und interessanten Checklisten. Ein Blogartikel über die Sache mit der Kreativität von @ellenbauer und ein WordPress Artikel von @vlad_perun habe ich mir auch noch markiert.

200 Vector Arrows - Cool Free Vector Arrows Icons | Web Design Stuff - goo.gl/YZY0q
— stooni (@stooni) Februar 2, 2012

45 Incredibly Useful Web Design Checklists and Questionnaires - Smashing Magazine | Smashing Magazine - goo.gl/ULAN
— stooni (@stooni) Februar 3, 2012

25 of the Most Beautiful Icon Sets on the Web | InsertHTML bit.ly/xv06gM
— stooni (@stooni) Februar 7, 2012

Die Sache mit der Kreativität bit.ly/w1vMi9 via @ellenbauer
— Stefan Brechbühl (@pixelstrolch) Februar 25, 2012

WordPress: welches Plugin bremst die Seite aus? bit.ly/AtECB8 via @vlad_perun
— Stefan Brechbühl (@pixelstrolch) Februar 25, 2012

3×3-Pixelmuster als Hintergrundbild nutzen

Stefan Brechbühl — Tue, 07 Feb 2012 19:00:53 +0000

Um einem einfarbigen Hintergrund eine Struktur zu verleihen, gibt es verschiedene Möglichkeiten. In diesem Artikel möchte ich euch dies an ein paar Beispielen von kachelbaren Pixelmustern aufzeigen. Diese könnt ihr ganz einfach mit eurem Lieblings-Grafikprogramm erstellen und eure eigenen Farben nutzen. Für die Pixelmuster eignen sich zwei Farben des selben Farbtons mit einem leichten Helligkeitsunterschied. Die Farben, sowie die Grösse der eingefärbten Fläche, sollten bedacht ausgewählt werden. Bei der Nutzung für Bildschirmmedien kann bei kontrastreichen Farben ein flimmernder Effekt auftreten. Dies ist ermüdend für das Auge und meistens kontraproduktiv. Die Farben, welche ich für folgende Beispiele benutzte, sind eher grenzwertig. Sie zeigen die Unterschiede jedoch gut auf.

Vertikale Linien

.. die dunklere Variante. Dieses Muster wäre eigentlich mit nur 3x1 Pixeln möglich. .. die hellere Variante. Dieses Muster wäre eigentlich mit nur 3x1 Pixeln möglich.

Horizontale Linien

.. die dunklere Variante. Dieses Muster wäre eigentlich mit nur 1x3 Pixeln möglich. .. die hellere Variante. Dieses Muster wäre eigentlich mit nur 1x3 Pixeln möglich.