Verrückt was heute mit CSS3 und etwas CSS2 möglich ist. Jack Moore hat ein wunderschönes Ribbon Menu hingezaubert. Es empfiehlt sich, das Menü im Chrome oder Firefox anzusehen. IE kann die schönen Slide Effekte leider nicht.

Demo | Artikel von Jack Moore

Am Samstag habe ich mich entschieden, gewisse Funktionen aus den functions.php rauszunehmen und in ein Plugin zu verfrachten. Die “zeig mir die Artikelbilder im Feed an ” Funktion ist so eine. Diese nutze ich schon seit längerem benutze und bisher habe jedes mal in die functions.php des neuen Themes kopiert. Mitunter auch die Artikelbilder, Sidebar und Custom Comments Funktion.

Jedes Mal musste ich auf der Hut sein, nichts zu vergessen, denn ansonsten hätte es sein können, dass eben einige Dinge nicht mehr so tun, wie sie sollten. Was ausserdem ein grosser Vorteil von der Lösung ist: ich muss meine Sidebars nicht bei jedem Redesign nochmals neu konfigurieren.

Aber auf die Idee hätt’ ich echt viel früher kommen sollen.

Seit WordPress 2.9 gibt es die the_post_thumbnail Funktion, welche ich seit dem Erscheinen auch nutze. Einen kleinen Schönheitsfehler hat die Funktion allerdings. Die Bilder werden im Feed nicht angezeigt.

Darum habe ich hier ein kleines Snippet, welches für den Fall Abhilfe schafft. Einfach in die functions.php einfügen, fertig.

Es gibt sie, diese total verrückten Programmierer und Pixelschubser. Allessio Atzeni ist garantiert einer davon, denn er hat Mac OS X Lion komplett in CSS gecoded.

Mehr zu den Techniken, welche er verwendet hat, findet man in seinem Blog.

(via Beautiful Pixels)

CSS Sprites ist für Webentwickler ein nicht zu unterschätzendes Thema. Dabei werden alle Grafiken, welche in einer Website verwendet werden in eine Grafik gepackt und danach mit CSS die Position verschoben, um die Grafiken anzuzeigen. Näher beschrieben wird das auch bei Frank Bültge.

Im Mac App Store gibts nun ein Programm, welches den Abmessungsvorgang, respektive die Pixelei gänzlich auslassen kann. Es heisst SpriteRight und kostet 5.00 Franken im Store. Über den Export lässt sich zugleich ein .png File, wie auch das fixfertige CSS File generieren.

Gut angelegtes Geld, für die Zeitersparnis, welche diese kleine App mit sich bringt.

via appstorm.net

Sobald man Websites erstellt, braucht man auch Texte, die einfach etwas Platz einnehmen, aber eigentlich nix bedeuten. Dummy Texte oder auch Lorem Ipsum genannt. Mashable hat vor einiger Zeit 10 Stück davon aufgezählt. Ich möchte diese Liste nun etwas erweitern. Meistens gehts eigentlich um’s Essen.

Samuel L. Ipsum

Das Lorem Ipsum von Samuel L. Jackson. Nicht ganz Jugendfrei.

HTML Ipsum

Das HTML Ipsum von Frank Bültge. Fügt Texte ein, die gleich in HTML Tags verpackt sind. Sehr praktisch.

Tuna Ipsum

Wers nicht so fleischig wie bei Bacon Ipsum mag, der kann auch fischiges haben. Das Tuna Ipsum.

Beer Ipsum

Feuchtfröhliche Texte gibts beim Beer Ipsum.

Cupcake Ipsum

Und zum Dessert noch das Cupcake Ipsum.

Hipster Ipsum

Was muss, das muss.

So. Es ist nun soweit. Dies ist jetzt die 11. Version von claudioschwarz.com. Das mit der Versionierung ist etwas kompliziert, aber es wird schon stimmen. Ja, es ist jetzt neu hier. Ich glaube es ist nun noch reduzierter, noch klarer. Wenn nicht, bitte melden.

Was das Theme ausserdem kann: Tablet und Mobile. Ja, das kann das. Darum wer ein Mobiltelefon mit Internetanschluss oder sowas luxuriöses wie ein iPad besitzt, sollte sich die Website unbedingt auch mal damit ansehen.

Ja und jetzt wäre ich eigentlich ziemlich froh um Rückmeldungen.

Seit fast einem halben Jahr absolivere ich nun die verkürzte Ausbildung zum Applikationsentwickler. Was uns dort eingebläut wurde: Dokumentiere deinen Code gut, kommentiere möglichst alles im Skript. So weisst du später einmal, was wo in deinem Skript passiert.

Es geht natürlich auch anders. Nicht immer muss ein Kommentar wirklich ernst gemeint sein. Bei Code Candies lassen sich einige Beispiele finden. Auswüchse gegen Programme, kleine Geschichten zum Code, da ist alles dabei.

Bis vor kurzem hat man auf der Welt so ziemlich alles besetzt. Unter anderm auch den Zürcher Paradeplatz. Tolle Fotos davon gibt es bei Michael Schmid (Teil 1/Teil 2). Auch wurde auf Twitter ein #occupy Meme abgehalten.

Und wie es sich so gehört, haben findige Programmierer und Designer auch gleich Logos, Piktogramme und Vorlagen für die Bewegung erstellt. Das Ganze findet man unter occupydesign.org.

via webdesignlovers.ch

Instapaper ist ein sehr nützlicher Dienst, den ich oft brauche. Ich kann mir damit nämlich Websites speichern, welche ich später noch lesen möchte. Er füllt sich in letzter Zeit zwar eher nur, aber nützlich ist er dennoch. Auch ist er in Reeder eingebaut, dem noch immer schönsten iPhone und iPad RSS Reader.

Allerdings finde ich Instapaper auf dem Desktop nun wirklich langweilig. Abhilfe kann da Helvetapaper schaffen. Dazu wird im Firefox allerdings noch Greasemonkey  (Chrome kann das von sich aus) gebraucht. Auf dem iPad ist jetzt alles besser, da gabs letzthin ein Update:

Ich glaube es war letzten Monat, als ich mir das neue Buch von Webdesign Index gekauft habe. Die Nummer 9. Über dieses Buch habe ich schon einmal etwas geschrieben. Schlussendlich wartete ich ziemlich lange auf die damals beschriebenen Geistesblitze. Viel öfters stolpert man jedoch direkt im Internet auf wunderschöne Internetseiten.

cssguru.de

GirlfriendNYC

jeriko.de

teixido.co

Die Webdesignwelt ist in einem ständigen Wandel. Stets gibts etwas Neues zu entdecken. Neue CSS Design Ansätze oder ander Techniken. In der letzten Zeit sind mir darum immer wieder ein paar schöne WordPress Themes über den Weg gekommen. 10 davon möchte ich gerne hier vorstellen.

PressWork (Framework)

Ein Drag&Drop WordPress Framework. Definitiv ein interessanter Ansatz.

Photoria

Da bleibt mir die Spucke weg. Sowas schönes und so kostenlos.

Gameliso Magazine

Was soll man dazu noch sagen? Schön umgesetzter Slider im Headerbereich.

Agency

Ein weiteres Theme. Diesmal im Magazin Look. Überzeugt ebenso durch einen netten Featured Slider.

Sight 

Dieses Theme habe ich @pumuggel für seine Website pumuggel.ch empfohlen. Dies gilt uneingeschränkt auch für alle andern Themes von wpshower.com.

html5press

Ein WordPress Theme komplett in HTML5 (soll ja die Zukunft sein) und CSS 3.

Towfiqi Themes

Hier kriegt man gleich 6 kostenlose Themes. Für ein Bestimmtes konnte ich mich an dieser Stelle nicht entscheiden.

The Standard

Supersimpel und superclean. So mag ich es.

The Daily Grind

Die Zeitung für WordPress.

Twenty Eleven

Das neue Standard Theme welches mit der aktuellen WordPress Version 3.2 gekommen ist. Ein so genanntes responsive Theme, welches sich je nach Device (Tablet/Handy) dem Display angepasst. Das wohl bisher beste Standard Template. Unterstützt ausserdem alle neuen Funktionen die WordPress seit der Version 3.0 geschaffen hat.

Vor knapp 10 Tagen habe ich mir mittels HTML5 ein neues Theme zusammengeschustert. Irgendetwas habe ich immer gefunden. Nie war ich zufrieden. Und so blieb es nicht einfach bei der Idee. Ich entwickelte die Idee stets weiter. Jetzt bin ich zufrieden. Momentan ist alles noch in einer index.php Datei. Jetzt beginnt dann noch das zerpflücken in die WordPress üblichen Dateien. Und laufen solls dann auf dem Social Media Kit von Blogwerk. Aber schaut einmal selbst.  Die Screenshots gibts übrigens auch in gross. Bei Flickr.

Wie findest du es? Gerne nehme ich Rückmeldungen dazu entgegen. Die mit einem * gekennzeichneten Überschriften sollten die endgültige Version sein.

Frontseite – Der Anfang

Frontseite – Keine Hintergrundfarbe in der Navi

Frontseite – Die Weiterentwicklung

Frontseite – Titel ins Artikelbild

*Frontseite – Den Grid beibehalten

Artikelansicht – Der Anfang

*Frontseite – Facebook Fanbox muss rein

Wie ich in meinem Artikel über Blogwerk erwähnt habe, durfte ich mich bei einem Probetag mit Media Queries beschäftigen. Als Tipp gab mir Philip Teixido an. Hübsche Website, welche sich beim Verschieben der Browsergrösse relativ dazu verhält. Was unter anderem auch auf dem iPad und iPhone noch besser zu sehen ist.

iPad quer

ipad hoch

iPhone quer (die Bilder  fallen komplett weg)

Einen andern Blog, den ich bezüglich WordPress und auch Webgestaltung sehr gerne lese ist Elmastudio. Diese haben mittlerweile das zweite WordPress Template Yoko veröffentlicht. Beide nutzen Media Queries zur optimierten Darstellung auf iPhone und iPad.

iPad quer

iPad hoch (oberer Bereich des Templates)

iPad hoch (unterer Bereich des Templates)

Jetzt das aber…

Das Ganze wirkt sehr starr. Manchmal zoome ich mir die Website gerne etwas Näher ran. Und genau das ist (zumindest bei diesen beiden) Designs nicht möglich.

Und was ich zudem beim Yoko Theme etwas unglücklich finde: die Sidebar (siehe Screenshot unterer Bereich des Templates) mit der Suche, Kategorien, letzten Kommentaren, etc. fällt unter den Beitragsbereich. Was eigentlich auch nicht weiter schlimm wäre. Doch irgendwie sieht mir dieser Bereich noch etwas verloren aus. Ich hoffe, dass sich dies noch ändern lässt.

Ansonsten finde ich Media Queries eine interessante Geschichte, die ich bestimmt weiterverfolgen werde.

Wie oft komme ich auf eine Website und denke: “schon wieder Thesis.” Das WordPress Theme verfolgt mich wohl über all hin. Dabei gäbe es so viele schöne Templates auf kostenloser Basis. Man kann – sofern Kenntnisse vorhanden sind – aber auch selber ein Design für WordPress entwickeln.

Und wie oft lesen wir von den “30 simple and clean WordPress themes”? Immer wieder. Aber selten sind mal solche dabei, welche auch in Deutsch geführt werden. Dabei gäbe es zur genüge Weblogs, welche in Deutsch geführt werden und nicht ein 0815 Theme installiert haben.

visuelleGedanken.de

Lovenotes

outoftheline

jeriko.de

Elmastudio

Schweizer WordPress Magazin

Andi Licious

Chris Magiera

The Modern Gentleman

Hossli.com

WordWeb

Immer und immer wieder bin ich auf der Suche nach neuer Inspiration was Webseiten angeht. Denn ich möchte mich immer weiterentwickeln. Heutzutage geht natürlich viel über das Internet. Das Smashing Magazine veröffentlicht meist mehrmals jährlich inspirierende Websites.

Doch in letzter Zeit ertappe ich mich immer wieder, dass die Websites, die ich mir im Kopf (ich male das nie auf Papier oder sonstwas) vorstelle, am Schluss in etwa immer gleich aussehen. Und der Zufall wollte es, dass ich vor kurzem meine vor rund 3 Jahren gekauften Web Index Bücher wieder entdeckte. Und jetzt stöbere ich darin und hoffe auf neue Geistesblitze.

In der letzten Zeit befasse ich mich etwas mit Websites von Parteien und Politikern. Und nein, dieser Beitrag hat überhaupt nichts mit meiner politischen Meinung zu tun. Bei den Bundesratsparteien habe ich mal kurz auf der Stufe Schweiz vorbeigeschaut. Da machten mehr oder weniger alle einen guten Eindruck. Am düstersten siehts meist bei den Lokalparteien aus.

SVP

Facebook, Twitter und YouTube haben sie. Während die Kanäle Facebook und YouTube mehr oder weniger genutzt werden, datiert der letzte Tweet vom 20. Februar. Das Design der Website ist das konservativste aller Bundesratsparteien. Passt ja auch irgendwie zum Image der SVP.

FDP

Auch die FDP setzt auf Facebook, Twitter und YouTube. Leider sind diese Accounts auf der Startseite nicht gleich ersichtlich, denn die FDP Schweiz geht sehr vorbildlich damit um. Das Design ist sehr aufgeräumt und gefällt mir sehr.

CVP

Die CVP hat zwar kein YouTube Kanal, dafür aber ein Flickr Account. Daneben setzen sie Facebook und Twitter (inkl. sehr langem Nickname…) ein. Alles wird rege eingesetzt. Auch die Website finde ich sehr erfrischend.

SP

Sie haben Twitter, Facebook und YouTube. Leider muss man sie alle googlen. Schade eigentlich, denn sie sind sehr aktuell gehalten. Hier gibts mit der Anbindung an die Website noch Verbesserungspotential. Die Website finde ich aufgeräumt, könnte nach meinem Geschmack aber etwas heller sein.

Fazit

Die Parteien scheinen sich einiges aus dem amerikanischen Wahlkampf von Barack Obama abgeschaut zu haben.

Foto: Christian Guthier

Dieses Mal etwas WordPress-lastig. Und zwar mit Personen, die mehr oder weniger bekannt sind und WordPress für ihre Websites einsetzen. Teilweise sind sie nur in der Schweiz bekannt, teilweise aber auch weltweit. Und dann gibts da noch die, die gar nicht bekannt sind aber trotzdem 1A aussehen.

Caroline Wozniacki – Tennisspielerin

Nutzt das Delegate Theme von WooThemes.

Bligg – Rapper

bligg.ch benutzt das “White” Theme.

Tanja Dankner – Musikerin

Die schweizer Sängerin nutzt eine Spezialanfertigung als Template.

Joshua Lane – Webdesigner

Gaia 10

Keine Ahnung was Gaia ist. Aber ist mit WordPress gemacht und sieht super aus. Hat irgendwie sehr grosse Ähnlichkeiten zu meiner Website. Kannte ich aber davor nicht.

Tut auch mal wieder gut. Nach einer 10 tägigen Abstinenz melde ich mich mal wieder zurück. Nach dem online bringen meines neuen Designs hatte ich gerade nicht mehr so Lust. Praktisch parallel habe ich noch die Seite von YellowBeatz online gebracht. Das war eigentlich schon seit 1 1/2 Jahren mehr oder weniger fertig.  Entstanden ist es aus dem Kubrick Theme, für die, die es interessieren sollte.

Und dann war da noch der Kurs in Deutschland an der Technischen Akademie Esslingen (TAE), den ich vom Geschäft aus besuchen durfte. Dort machte ich das erste mal in meinem Leben Bekanntschaft mit Herrn Ohm. Muss wirklich ein mühsamer Zeitgenosse gewesen sein. Nun, am Schluss habe auch ich es als Anti-Mathe-, Physik- und Chemiegenie ansatzweise begriffen.

Und da ich in Esslingen am Abend auch etwas Freizeit hatte, erkundete ich ein wenig die Umgebung dort.

Fotos

Ui.

Und zu guter Letzt habe ich mich heute noch über eine Verlinkung auf Onlinelupe sehr gefreut. Über diese zwei Kommentare über meinen Blog habe ich mich besonders gefreut:

Auf den Blog von Claudio Schwarz stieß ich erst vor kurzem, war von der Optik und den Blogthemen jedoch sofort angetan. Gebloggt wird rund um die Themen Design, Fotografie und Musik. In diesem Blog habe ich zumindest immer das Gefühl, auf Dinge stoßen zu können, die mir sonst wahrscheinlich verborgen geblieben wären. Dazu zähle ich beispielsweise Artikel, wie Webseiten-Stolpern oder die Weekly Links. Bitte weiter so!

Und Du könntest Dir auch ruhig “Top Nischenblog” auf die Fahnen schreiben.

Ist ja ein bisschen ruhig geworden hier. Hat lediglich einen Grund: ich investierte einiges an Zeit für ein neues WordPress Theme. Irgendwie kam ich mir beim Erstellen des neuen Designs vor, wie Rouge bei seinem ständigen hin und her Gehüpfe zwischen WordPress und Tumblr.

Aktuell hat er ja wieder Tumblr. Es laufen ja bereits erste Wetten, wie lange er es aushält. Aber zurück zum eigentlichen Thema dieses Beitrages. Der ursprüngliche Plan sah in etwa so aus:

Version 0.1

Screenshot vom 24.08.2010

Irgendwie wars mir zu normal, obwohl hier noch die Bilder via Benutzerdefinierter Felder fehlen. Die Bilder lassen sich jetzt übrigens über die Thumbnail Funktion von WordPress anzeigen. Ist alles in allem ein wenig einfacher.

Version 0.2

Screenshot vom 03.09.2010

Dann hatte ich einen Flashback. Ich warf die Sidebar raus und wollte wieder auf ein 1-Spaltiges Design umstellen. Hatte ich ja schonmal und irgendwie gefallen mir die Dinger punkto Einfachheit.

Version 0.3

Screenshot 05.09.2010

Zwei Tage später warf ich bereits wieder alles in den Wind. Einspaltig ist es zwar irgendwie immer noch, aber irgendwie auch nicht mehr. Zuerst wollte dich die Bilder neben dem Beitrag 500 px breit machen. So gings dann endlich in Richtung der Endversion. Nach kurzen Feedbacks von Stefan Sicher, Thomas Veit und Andy Licious (vielen Dank dafür!) entschied ich mich aber, dem Text mehr Platz einzuräumen. Beim letzten Feinschliff bedanke ich mich auch bei Pascal Birchler vom wp-magazin.ch.

Was sonst noch neu ist

Nebst der CSS3-Spielerei mit den Kolumnen, kann neu direkt auf Kommentare antworten und auch die Gravatars werden nun eingebunden. In der Navigation gibts nun Drop-Downs. Sorgt für etwas mehr Platz. Neben der Navi wird der letzte Tweet von meinem Twitter Account angezeigt (sofern nicht gerade der Failwhale am Schwimmen ist…).