senäh

17senäh und so…

altes senäh-Logo

HTML/CSS/JS
27. Mai 2011
Kommentare: 0

Neuer Hintergrund und senäh-Icons

Kategorien: HTML/CSS/JS | 27. Mai 2011 | Kommentare: 0

Neulich saßen wir schön gemütlich auf’m Balkon bei Karsten und haben gegrillt. Wie man das halt manchmal so macht. Natürlich haben wir uns auch ein bissl über unseren noch recht frischen Blog unterhalten. Dabei sind wir auf dreierlei Sachen gekommen:

  • beim hoch- und runterscrollen verursacht der Hintergrund ein Flackern, das uns wahrscheinlich zu einem Warnhinweis für Epileptiker im Impressum verpflichtet hätte
  • uns fehlt noch ein Favicon
  • für das Ablegen von senäh.de als Lesezeichen auf dem Homescreen eines iDevices (iPhone, iPad, iPod Touch) benötigen wir ein sogenanntes Web-Clip-Icon

Die Anti-Epilepsie-Maßnahme

Beides haben wir jetzt gefixt. Die Linien im Hintergrund verlaufen nun nicht mehr diagonal sondern vertikal (dt.: gerade statt schräg). Dadurch ist das Flacker-Problem beseitigt.

Wenn du kein Favicon hast, dann hast du kein Favicon

Der Code zum Einbinden eines Favicons wird einem ja schon fast hinterher geschmissen. Ist ja auch mehr als basic ;) Hier trotzdem mal hingedonnert, wie es bei uns im Header eingebunden ist:

1
2
3
4
<link rel="Shortcut Icon"
   type="image/x-icon"
   href="http://www.senaeh.de/wp-content/themes/senaeh/img/misc/favicon.ico"
/>

…und gleich hinterher der passende Screenshot.

Favicon von senäh.de

Favicon von senäh.de

Geht als senäh-“ä” in die Geschichte ein. Credits to Pipo!

Schicke iOS-Icons

Die Web-Clip-Icons – so heißen die Dinger, die erscheinen, wenn man im iOS ein Lesezeichen auf dem Home-Screen ablegt – haben wir ebenfalls hinzugefügt. Wenn ihr also stolze/r Besitzer/in eines iDevices seid, könnt ihr im Mobile Safari unsere Website “Zum Home-Bildschrim hinzufügen” (befindet sich dort, wo auch die normale Lesezeichen-hinzufügen-Funktion zu finden ist) und erhaltet nun abhängig vom Gerät eine der folgenden Ansichten.

Webclip-Icon auf dem iPhone 3GS

Webclip-Icon auf dem iPhone 3GS

Webclip-Icon auf dem iPhone 4

Webclip-Icon auf dem iPhone 4

Webclip-Icon auf dem iPad

Webclip-Icon auf dem iPad

Der Code dafür sieht in unserem Fall übrigens so aus:

1
2
3
<link rel="apple-touch-icon" href="http://www.senaeh.de/wp-content/themes/senaeh/img/misc/webclip-iphone.png" />
<link rel="apple-touch-icon" sizes="72×72" href="http://www.senaeh.de/wp-content/themes/senaeh/img/misc/webclip-ipad.png" />
<link rel="apple-touch-icon" sizes="114×114" href="http://www.senaeh.de/wp-content/themes/senaeh/img/misc/webclip-retina.png" />

Leider bekommt man das Attribut “sizes” (noch?) nicht vom W3C validiert. Schade. Ist mal wieder ein Punkt, wo die W3C-Standards den modernen Gegebenheiten hinterherhinken. Sei’s drum.

Als ich das gestern probiert hab, hat’s nicht funktioniert

Ich hatte ja erst im Zusammenhang mit meinem Bericht über den Opera Mobile Emulator auf unser Mobile Theme verwiesen. Das Ganz wird – wie dort erwähnt – über das WordPress-Plugin WPtouch erledigt. Standardmäßig legt dieses Plugin jedoch ein recht dürftiges Webclip-Icon fest. Screen davon? Gern, aber genießt ihn, denn so wird das ganze nie wieder aussehen ;)

Altes Webclip-Icon

Altes Webclip-Icon

 

Hier seht ihr also das Default-Webclip-Icon. Ugly, ne? Aber das habe ich nun entfernt und durch unser schönes senäh-Icon in Retina-Auflösung ersetzt. Wer Feedback dazu loswerden mag: ab in die Kommentare ;)

Danke und Tschüss

Vielen Dank an Lex für die Screens.

Autor: Enno

Ich bin Enno. PHP ist mein Ding, aber auch alles Neue rund um die Themen HTML5, CSS3 & Co finde ich interessant. Ich mag es Leuten zu helfen und mein Wissen weiterzugeben. Sollte dir mein Beitrag gefallen haben, lass doch nen Kommentar da oder benutze einen der Social Buttons, um deinen Dank auszudrücken ;)

Kommentare (0)

Für diesen Beitrag wurden Kommentare deaktiviert.