Konsequent die eigene Definition ignoriert

Apple bietet für die Entwicklung von Web-Apps auf Basis einer „Webseite“ verschiedene meta-Tags an. Unter anderem diese Option zur Beeinflussung der „Statusbar“:

<meta name="apple-mobile-web-app-status-bar-style" content="black" />

Apple schreibt zu dem Tag in seiner Dokumentation:

If content is set to default, the status bar appears normal. If set to black, the status bar has a black background. If set to black-translucent, the status bar is black and translucent. If set to default or black, the web content is displayed below the status bar. If set to black-translucent, the web content is displayed on the entire screen, partially obscured by the status bar. The default value is default.

Eigentlich klar: Schreib ich nix rein, bekomm ich ne normale Leiste, schreib ich was rein, macht die Leiste, was ich ihr sage. Wir reden wohlgemerkt nur vom Aufruf über ein Home-Screen-Bookmark. Das iPhone 4 zeigte allerdings in meinem Test immer den „black-translucent“-Stil an. Was ich definitiv nicht will.

Oh Wonderful World…

Hosting-Umzug leichtgemacht

Ich war mir bis heute mittag nicht sicher, ob und wie einfach/schwer der Umzug von meinem WordPress auf einen neuen Server sein würde.

Ich behaupte mal nun kackfrech: Kinderkram. Ich habe heute mittag eine andere Seite (gut, mit einer nicht ganz so großen Datenbank) als Testexemplar umgezogen, allein um die Technik zu testen.

Mein zukünftiger Ex-Provider bietet ein Backup meiner Daten per Confixx-Job an, und ausgehend von diesem Punkt war der Plan folgender:

  1. Backup machen
  2. Runterladen
  3. Auf den Server schieben
  4. HTML-Gedöns entpacken
  5. Rechte setzen
  6. MySQL-Dump reinladen
  7. wp-config.php anpassen
  8. Fertig

Lustig: Der Plan an sich hat mit einer kleinen Änderung (man muss im MySQL-Dump noch den Datenbanknamen anpassen) funktioniert.

Webseite: IN-LIVE-EVENTS & GASTRO

Anforderungen

Die Webseite der Firma IN-LIVE EVENTS lief bisher auf einem proprietären CMS der Firma Compose. Ein Umzug auf einen anderen Server ist natürlich mit der kompletten Neuentwicklung der Seite verbunden.

Die Entwicklung hatte den Schwerpunkt auf bestmöglicher Suchmaschinenfreundlichkeit. Dazu zählte das Konzept, dass jetzt einen eindeutigen Fokus auf die Hauptgeschäftszweige der Firma legt: Cocktails und Events.

Screenshot: www.in-live-events.de

Umsetzung

Dem System liegt als Plattform das Wikisystem DokuWiki zugrunde, dass sich durch eine einfache Erweiterbarkeit durch Plugins und eine geringe Größe auszeichnet. Das Design und die Struktur basieren grob auf dem 360.gs-Framework, die einzelnen Seiten sind mittels dem „WRAP-Plugin“ für Dokuwiki sehr individuell gestaltbar.

Die Wahl auf DokuWiki im Vergleich zu WordPress fiel aufgrund der Möglichkeit, einzelne Inhaltselemente zu bearbeiten. Durch die flexible Inhaltsgestaltung haben wir den goldenen Mittelweg zwischen Einheitlichkeit durch vordefinierte Elemente und Vielfältigkeit durch einfache Variation und Anordnung der Elemente erreicht.

Webseiten auf Zugänglichkeit testen mit Lynx und w3m

Klar, Designs für Webseiten können schon mal extrem aufwändig und hübsch sein (so wie meins ;-) ), aber wichtiger ist, dass der Inhalt sauber strukturiert und sowohl für Blinde/Screenreader ordentlich aufbereitet ist, was sich auch auf die Suchmaschinenfreundlichkeit auswirkt. Positiv versteht sich.

Mit einem „normalen“ Browser

Mit w3m

Mit Lynx

Was man hier sehr schön sieht, ist, das selbst die „Textbrowser“ unterschiedliche Rendering-Mechanismen benutzen.

Was bringts?

Eines ist jedoch überall gleich: Die Schriftgrößen sind immer gleich. Die Reihenfolge der Texte ist exakt die im Quelltext. Es gibt keine Bilder, kein Javascript, kein CSS. Während einige Screenreader mittlerweile mittels WAI-ARIA und einiger Arbeit am Javascript auch barrierefrei mit Javascript umgehen können, ist das dennoch nicht der Standard, also sollte man zusehen, dass eine möglichst zugängliche Webseite auch ohne Javascript benutzbar ist.

Da kann man halbwegs gut erkennen, wie tauglich so eine Seite auch für Menschen oder auch für Suchmaschinen ist. Sehr gut kann man mit diesen Browsern übrigens Seiten entlarven, die extrem viel Suchmaschinenoptimierung betreiben. Sehr unschön für solche Browser, übrigens.

Warum die CSS-Evangelisten doch gar nicht so falsch liegen

Neulich bei Technikwürze: Die 13 Punkte des Mike Davis und warum Tabellenlayout angeblich und womöglich doch gar nicht so schlecht ist. Im Podcast gab es eine Diskussion um die Denkanregung, doch mal über den blinden „CSS-Evangelismus“ nachzudenken. Der Originalartikel findet sich ebi isolani: „The shallowness of CSS evangelism„.

Gerade im Bereich Traffic wird auch in TW diskutiert, sei es ja möglich, ebensogroße Datenmengen zu laden, wie bei Tabellenlayouts, gerade bei aufwendigen Stylings und unter der Prämisse, dass bei einem sauberen Stil das CSS getrennt geladen wird und somit einen weiteren HTTP-Request benötigt (inklusive Overhead).

Das mag beim ersten Besuch der Seite durchaus stimmen, aber dafür ist es dann ja egal, ob man nun CSS oder Tabellen hat. Beim zweiten Klick muss das CSS-Layout aber nicht alles nochmal laden. Nur das HTML-Gerüst wird ausgetauscht, der Rest (CSS) bleibt gleich. Eine Seite mit vielen PIs hat damit also im „Long Tail“ deutliche Vorteile.

Weiter stellt man die SEO-Vorteile auf den Prüfstand. Ich bin der Meinung, ein ordentlich gemarkuptes Layout mit entsprechender Dokumentstruktur wird immer einen Vorteil gegenüber den Table-Layouts haben, denn

  • die Content/Code-Quote ist höher, es gibt im HTML keinen so großen Overhead, damit ist die Keyworddichte pro Zeichen deutlich höher
  • das CSS juckt eine Suchmaschine nicht. HTML wird indexiert. Weiteres im Punkt obendrüber
  • Suchmaschinen machen oft einen nicht unerheblichen Teil des Traffics aus. Weniger HTML = Weniger Traffic

Ein wichtiger Punkt ist allerdings die Zukunftssicherheit und die Wartbarkeit der Seite(n). Ich habe allein mit CSS schon einige Sachen umgestyled, die man mit einem Tabellenlayout nicht hätte machen können – jedenfalls nicht so schnell und pragmatisch.

Und was ich tagtäglich erlebe sind HTML-Tabellen in generierten Seiten. Hier mal eine Ausgabe, da mal eine Ausgabe und das alles in verschachtelten Tabellen. Das Gerüst wird verdammt schnell verdammt unübersichtlich, auch mit Tools wie Firebug und der IE-Developer-Toolbar. Klar kann man sowas auch mit einem DIV/CSS-Layout produzieren, aber bei weitem nicht so schnell.

[poll id=“5″]

Der letzte Tag…

Nein, nicht ganz, aber zumindest der letzte Tag in diesem Jahr, den ich im Büro verbracht habe. Jetzt ist jetzt erstmal Urlaub angesagt.

Und ein Facelift von hier steht ja auch noch aus und in den Startlöchern – na gut, es ist wohl vielleicht noch eher auf dem Weg zu den Startlöchern, aber ich schätze Anfang des Jahres sollte mein eigener Zeitplan einhalten können, wenigstens mit dem Grunddesign.

Schau’n wir mal, was noch so kommt.

7 Jahre alte Gummis oder: wie Microsoft das Web ausbremst

Wer würde denn einen 7 Jahre alten PC kaufen und benutzen, um aktuelle Spiele zu spielen? Wer würde ein 7 Jahre altes Auto kaufen und Sicherheitsstandards von heute erwarten? Wer würde 7 Jahre alte Winterreifen benutzten? Wer wäre so hirnverbrannt, mit 7 Jahre alten Kondomen in einen geschlechtlichen Zweikampf zu ziehen? Mit Sicherheit kein vernünftig denkender Mensch.

Warum, wenn doch das Problem so offensichtlich zu sein scheint, werden Zugriffe vom IE6 immer noch in nicht geringem Ausmaß verzeichnet? Warum gibt es immer noch Menschen, die den IE6 benutzen?

Einer der Gründe ist ganz klar: „Warum soll ich mir einen neuen Browser zulegen, wenn der (alte) ja super funktioniert?

Welche Risiken und Kosten das birgt, ist vermutlich wenigen Menschen klar, denn wenn man der Agentur/Firma sagt, die Seite soll auch mit dem IE6 funktionieren, dann machen die das schon. Klar, dass man sich als Firma/Designer auch bezahlen lässt. Schließlich ist meistens die letzte Stufe der Gestaltung der Webseite das „identisch aussehen im IE6“ hinzubekommen, wie es der Kunde wünscht, auch wenn man als Designer ja dowebsitesneedtolookexactlythesameineverybrowser.com kennt und gut und richtig findet.

Am Ende macht man sich dann doch wieder zum Horst, denn irgendwie muss man ja die Rechnungen bezahlen.

Und es funktioniert ja mit dem IE6 alles noch so super. Dafür arbeiten Menschen, die deswegen Magengeschwüre, Akne und ständige Kopfschmerzen nebst Tourette und immerwährenden Stimmen im Kopf, die sie beschwören, doch endlich der dunklen Seite nachzugeben, bekommen. Aber man braucht ja nichts neues. Geht ja alles.

Und das erwähnte Vergleich mit den 7 Jahre alten Gummis durchaus berechtigt ist, sollte auch klar sein. Denn: Wenn man sich überlegt, wie viele Schädlinge und Viren sich in den letzten 7 Jahren so verteilt haben, sollte man schon auf aktuellere Technik, die Dinge wie XSS, Phishing etc. etwas erschweren, setzen. Und wer sich schon nicht den Firefox installieren will, sollte wenigstens den IE7 einsetzen, und das so schnell wie möglich.

Denn ein (positiver) Nebeneffekt des Wegfallens des IE6 ist folgender: Alle Browser können beispielsweise transparente PNGs darstellen, auch der IE7. Das würde in einer sehr kuzen Zeit zu einer extremen Nutzung im Webdesign führen, denn die Möglichkeiten, die sich aus alphatransparenten Grafiken und CSS2 und CSS3 ergeben, sind gegenüber dem derzeitigen Design nahezu unbegrenzt.

Ich werde in Zukunft (privat) nicht mehr mit dem IE6 testen. Damit schließe ich mich dem IE Death March an.

Update:

Ich habe meinen Artikel beim Webstandard-Blog zum Thema „Wie beschreibt man die Unzulänglichkeiten des Internet Explorer“ verlinkt. Außerdem sollte ich noch anfügen, dass das für mich als Privatperson gilt. Für Geld (in der Firma) werde ich wohl noch eine Weile mit dem Problem zu tun haben, auch wenn ich noch so oft sage, dass ich das nicht will und scheisse finde.

Webdesign mit Linux

Wer unter Linux Photos bearbeiten will, findet bei Rolf Steinorts „Meet The GIMP“ sicher den einen oder anderen Tipp für GIMP, wer Illustrieren will, findet bei HeathenX Tipps zu Inkscape. Und was macht der Webdesigner?

Der Webdesigner guckt sich beides an. Und arbeitet mit einem Texteditor. Für kleine Sachen mit gEdit oder Bluefish, für dynamische Sachen mit Eclipse PDT. Jedenfalls mache ich das so. Notepad++ mittels WINE stellt für mich eine unschöne (das Auge programmiert ja mit) und unsaubere (weil nicht native) Lösung dar. Unter Windows allerdings ist das der beste Editor, den es gibt.

Beim Styling achte ich auf größtmögliche Browser-Kompatibilität und versuche, ohne Hacks auszukommen, was in den meisten Fällen ziemlich gut gelingt dank Eric Meyers CSS-Reset.

Die Grafiken entstehen auf unterschiedliche Weise. Das Bild hinter dem Text ist hier auf der Seite beispielsweise aus Inkscape, während die Headergrafik aus GIMP stammt. Die „Werbe“-Buttons auf der rechten Seite stammen aus Inkscape, ebenso das Favicon, dass im letzten Artikel in groß zu bewundern ist. Das ganze benutze ich übrigens auch unter GNOME als SVG-Icons.

Und ja, ich teste auch mit dem IE. Schließlich habe ich Virtualbox und eine XP-Home-Lizenz (die gab es zu meinem Notebook dazu). Das ist vielleicht nicht das Optimalste, aber zusammen mit dem IE-Tester ist das durchaus ausreichend. Opera und Safari kann ich prinzipiell auch testen, allerdings habe ich in mehren Fällen festgestellt, dass (nur) der IE in 99% aller Fälle das ganze etwas anders rendert. Trotz CSS-Reset.

Und ihr so? Wie designt ihr unter Linux? Und vor allem: was?