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

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.

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

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.

Hallo. Wieder etwas entdeckt. aHeadwork nämlich. Ich glaube mehr Grid in einem Layout geht gar nicht. Das einzigste was mir etwas auf die Eier geht ist das Scrollen in der Einzelansicht der Beiträge. Du weiss nicht, was Grid ist? Guck mal bei The Coolist vorbei, dann verstehst du es eventuell im Kontext. 2 Linktipps in einem. Whooop, bin ich gut.

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.

Es passiert immer wieder. Man surft wahllos im Internet herum und plötzlich stolpert übereine Website, bei der man denkt: WOW! Und es muss nicht nur immer das Design sein, sondern kann auch mal die Idee dahinter sein.

Die Links sind übrigens in den Screenshots versteckt.

glueckstueck.com

Da bleibt mir echt die Spucke weg.

beatheme.com

Die Website selbst ist nicht gerade der Hingucker. Dafür haben es aber die kostenlosen Themes in sich.

hossli.com

Einfach. Grossartig. Einfach grossartig. Simpel. Peter Hossli ist Reporter. Für seine Texte muss man sich Zeit nehmen. Aber es lohnt sich.

nerdrhein-westfalen.de

Das Design ist nerdig. Aber die Idee dahinter noch mehr. Endgeil!

designmadeingermany.de

Ich neige gerade dazu, diese Website (auf WordPress-Basis) als DEN Shit abzustempeln. Und in diesem Moment entscheide ich mich, diese Website definitiv als DEN Shit zu bezeichnen. Hammerhart.

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…).

Eine Alternative bietet sich übrigens auch sumo.fi. Das geht dann aber schon in Richtung Photoshopkonkurrenz im Browserformat.

via swissmiss

Website: lovefashionanddrama.com

Website: fashionpuppe.com

Sprich, wenn ich beispielsweise die Myriad Schrift verwendet hätte, hätten nur diejenigen die Website in der Myriad Schriftart gesehen, welche sie auch installiert hatten.

CSS

Doch nun mit CSS3 ist etwas neues möglich. Eigentlich sollte es schon mit CSS2 möglich sein. Es können X beliebige Schriftarten verwendet werden. Natürlich unter Beachtung der Lizenz. Danke an Bartek für diesen Hinweis.

Lizenz

Für meine Website verwende ich die Museo Font. Diese darf auf Websites verwendet werden, der Entwickler wünscht sich einfach einen Hinweis auf der Website oder im CSS, in der Nähe wo die Schriftart eingebaut ist.

Browser

Momentan funktioniert diese Technik noch nicht mit allen Browsern. Allen voran dem Internet Explorer. Firefox, Safari und Chrome sollten in den neusten Versionen aber in der Lage sein, die Schriften anzuzeigen.

CSS

@font-face {
	font-family: museo;
	font-weight: bold;
	src: url('museo.otf');
}

Verwendung

Bei der Verwendung ist darauf zu achten, dass im CSS noch alternative Schriftarten (Arial, Verdana oder sonstwas) definiert werden, falls der Browser nicht mit dieser Technik kompatibel ist. Und so sieht das dann in etwa aus:

body {
	font-family: museo, "Helvetica",Tahoma,
	"Trebuchet MS", Tahoma, sans-serif;
	font-size: 14px;
	line-height: 1.6em;
	background: #fff url(images/bg.gif) repeat-x;
	color: #8E8E91;
	}

Wenn andere Schriftarten verwendet werden, bitte darauf achten, dass die Bezeichnungen (in meinem Fall “museo”) der Schriftarten deckungsgleich sind.