Ein Pfau in der Website

tempa wrote this 05:26:

Browser-Statistik

Dieses Template hat viel Spaß gemacht und war einmal von dem ausprobieren und dieser und jener Suche nach der idealen Form, relative schnell geskriptet, bis es zu dem Test im IE Mac kam und ich wieder den Frust bekam, denn bis zum Blick in den Mac, schien alles Perfekt. Das Design verwendet so gut wie keine Hacks, einmal von dem height: 100%; den man nun einmal für den IE braucht abgesehen.

Und dann kam der Mac-Test und es sah schon abenteuerlich aus. Ich hoffe, dass es sich nur um eine Vererbungsgeschichte handelt, wo keine Vererbung sein sollte, denn dann wäre mit der Anweisung im IE-Mac-Style auch schon wieder die Welt in Ordnung. Aber ich wollte doch mal wissen, wievielen Nutzern ich ca. eine Aufforderung schicke, endlich einen anderen Browser zu verwenden. Bitte.

Wie viel Mühe lohnt noch?

Browser-Statistik

Nach dieser Statistik vom Januar/Februar 2006 sind es ca. 0.3% der Nutzer.

In meiner Statistik tauchen Mac-User nicht auf. Nicht weil diese nicht auf meiner Site zu finden wären. Ihr Anteil ist nur zu gering, dass Sie es in die Top 15 schaffen. Wenn ich also Seiten lasse wie sie sind, so chaotisch und irgendwie kaputt, dann werden die 0.3% Mac IE Nutzer auch noch verschwinden.

Als den Netscape 4 dieses Schicksal traf, zählte ich auch zu den Nutzern, die noch lange, lange lange an diesem Browser klebten, aber als immer mehr Seiten auf mich und meine Browser-Präferenz pfiffen, da habe ich irgendwann gewechselt und nie mehr zurückgeblickt.

Irgendwann kommt die Zeit, da macht man nichts gut, wenn man noch Rücksicht nimmt. Es macht die Entwicklung teurer und da man ohnehin nicht alle Browser und alle Systemkonfigurationen berücksichtigen kann, ist es nur konsequent, wenn man eine Entscheidung trifft. Ich treffe diese Entscheidung von Template zu Template neu. So ganz den Mac IE zu ignorieren, kann ich mich nicht wirklich durchringen, obwohl alle Sites, die Struktur und Layout strikt trennen eh immer benutzbar sind. Also keiner in die Röhre schauen muss.

Die Vorteile liegen auf der Hand und im Fall des Pfaus, gibt es vieles, das positiv erwähnt werden kann, wie z.B. das das Design liquid ist, d.h. es passt sich seiner Umgebung an und ist sehr lange ein ausgewogenes Design. In eingen Bereichen ist das Design so simpel, dass eine Anpassung leicht möglich ist, sei es der Hintergrund oder die Zielelemente, die in der Diagonalen sich auf der Website befinden. Der Pfau geht mit der Site nach unten, während die Feder dort am Header hängen bleibt.

Das Design sieht auch drei Schritte vom Monitor entfernt noch bärenstark aus, d.h. Seiten, die nur einen kurzen Textblock haben, machen auch auf die Entfernung mächtig Eindruck und locken den Besucher an. Sitzt man mit der Nase am Bildschirm davor, erschlägt es trotzdem nicht. Die Reihenfolge ist in diesem Template mal wieder wie konventionell üblich, also die Links tatsächlich oben, doch rechne ich nicht mit einer exorbitanten Tiefe bei der wahrscheinlichen Klientel für eine solche Website und dann ist die Reihenfolge goldrichtig.

Ich bin nicht immer so zufrieden mit der Arbeit, wie in dieser, jetzt bin ich auf die Reaktion gespannt.

Das Template gibt es schon in der Templaterie zu kaufen. In den letzten Tagen ist in der Templaterie viel los. Fast täglich gibt es aktuell ein Update und der Trend schein noch eine Weile anzuhalten. Mal sehen, wie lange ich dieses Tempo durchhalte. Solange es so Spaß macht … No problem. Ich habe jetzt auch endlich die Template-Serie online, die anläßlich eines Wunsches eine Autohändlers entstand. Und weil ich es hier noch nicht geschrieben habe: Jutta Kemperle ist dem Team um die Templaterie zugestoßen. Ihr erstes Web-Template-Design spricht die Wellness- und Kosmetik-Branche an. Ich mag ihre frischen Farben in dem Design.

und IE – unlogisch

Claudia Reiser wrote this 22:22:

Das ist ja doof. Wenn der IE sowieso schon einen waagrechten Scrollbalken macht, warum verschiebt er dann das fieldset trotzdem nach unten? (Und das passiert nur bei fieldsets.) Das entbehrt wieder mal jeder mir verständlichen Logik.

Richtige Browser machen das so:

Wie kann man dem IE das abgewöhnen?

Weil ich gerade wegklickte

tempa wrote this 14:07:

Ich war auf der Suche noch einem Statistik-Script und surfte so hier und surfte so da und bin sicherlich gedultdige, wenn ich nicht nur rumdaddle. Aber wenn Ihre Seite mich auf der Startseite gefangen hält, weil Sie wollen, dass ich Ihr gesamtes Portfolio zur Kenntnis nehme, dann klicke ich das rote Kreuzchen neben der Lasche ihre Seite fliegt aus der engeren Auswahl, meist ist sind dort in meinem kleinen Firefox soviele Laschen sichbar, dass ich meine Ungeduld nicht bereue und etwas geeignetes finde.

Es ist ein Unfug zu glauben, dass der interessierte User die Geduld schon aufbringen wird. Vorallem der Firefox hat die unangenehme Eigenschaft, dass er sich beim Laden von großen Dateien auch bei DSL mit 1GB/s schon einmal für Sekunden eine Auszeit nimmt. Mein Zorn richtet sich dann nicht gegen Firefox, sondern gegen die Arroganz des Anbieters der Seite, der glaubt mit einem fetten Flash und Skip-Intro sei die Welt in Ordnung. Ich mag den FF aus verschiedenen Gründen benutzen. Die Flash-Intro verpasst die Chance mir zu zeigen, warum ein Besuch lohnt. Und Tschüss!

Zugegeben derjenige, der diese Intro-Seite, die mich zu diesem Beitrag veranlasst hat (nein einen Link gibt es nicht), ist eine Flasche, denn der Skip-Link hätte in jedem Fall also auch nach dem Start des Flashs funktionieren können.

Warum aber Anbieter überhaupt das Risiko eingehen, Besucher zu verlieren, nur weil diese nicht die Benutzervoraussetzungen an die Site erfüllen, wird mir ein Rätsel bleiben.

Rest in peace – kein Grund zum Trauern

Claudia Reiser wrote this 19:16:

Wie heise online heute berichtet, stellt Microsoft den Support für die Mac-Version des Internet-Explorers per ende Jahr ein, was hoffen lässt, dass diese spezielle Internet Explorer-Version bald nur noch unter ferner liefen in freier Wildbahn auftaucht. Rest in Peace – ich glaube kaum, dass die Webdesigner darüber traurig sind…

Und alle, die noch mit einem Internet Explorer unter Mac surfen: Trauert nicht, es gibt inzwischen einige viel bessere Browser für den Mac. Höchste Zeit, umzusteigen auf Safari oder Firefox oder Opera oder iCab oder Camino. Es gibt inzwischen so viel Auswahl an Mac-Browsern, und die sind alle einiges besser als der schon arg in die Jahre gekommene Internet Explorer für Mac. Dieser Browser war zu seiner Zeit ein toller Browser, aber das war vor fast zehn Jahren, und zehn Jahre sind im Internet eine halbe Ewigkeit.

Grundlage eines Templates für die Monitor-Ausgabe

tempa wrote this 03:37:

Ein Template unterliegt wie in diesem Blog schon ausgeführt den Schranken des Monitors. Dessen Maße und die des Browserfenster bestimmen die Proportionen.
Screenraster

Ähnlich wie man ein DIN A4-Bogen falten kann, kann man auch den Monitor unterteilen. Basis für dieses Raster ist die Auflösung 1024×768 Pixel und im Firefox sind bei kleinen Symbolen die Tabs aktiv. Damit ergeben sich Aussenmaße von 1000×590 Pixel, wobei der Skrollbalken aktiv ist und nicht mitgerechnet wurde. Im Internetexplorer kommen i.R. noch 20 Pixel in der Höhe dazu. Eine Officeleiste rechts oder Links habe ich nicht berücksichtigt. Unberücksichtigt blieben auch alle verkleinerten Fenster. Natürlich kann jeder Nutzer ein Fenster auch verkleiner und die Maße können jedes Format annehmen, auch ein Hochformat. Auch wenn man sich dessen eingedenk ist, wir diese Tatsache einem bei der Arbeit nicht helfen. Denn ein Design orientiert sich am Portrait oder am Panorama. Nutzer, die z.B. eine Breite Todo-Liste oder die Favoriten oder die History offen haben, werden das Web anders wahrnehmen, als diejenigen, die diese Leiste geschlossen haben. Im Firefox lässt sich die Seitenleiste fast bis zur Mitte schieben oder das Fenster um ca. ein fünftel verschmälern. Im Internet Explorer ist die Variationsbreite der Favoritenleiste links von 10% zu knapp 50% der Gesamtbreite des Fensters.

Da sich diese Fenster bequem zu- und wegschalten lassen, neige ich dazu sie zu ignorieren. Wer dies nicht ignoriert, hat einen Innenbereich bei 1024×768 von ca. 600×600 Pixel der skrollfrei dann existiert, wenn der Nutzer nicht auch noch das Fenster verkleinert nutzt. Das sind soviele Varianten und Unbekannten, dass man diese schlicht auch in die Tonne geben sollte wenn man ein Templatedesign beginnt. Zumindest halte ich es so, da sich das bewährt hat und mir in all den Jahren keine Klagen kamen.

Wie sieht ein Firefox für Webdesigner aus?

tempa wrote this 03:44:

Ein Firefox wie ein Schweizer Messer

  1. Web Developer
  2. Scrapbook
  3. ColorZilla | Measure it | Screengrab
  4. HMTL Validator | View Source with |
    Aardvark | View formatted Source
  5. IETab | IEView | OperaView |
    Fang Screen Reader Emulator
  6. CSS Edit | JS Debugger | phplangeditor
  7. CopyUrl | TinyUrl
  8. BBCode | BB Code extra
  9. FasterFox | Edit config Files | ChromeEdit | Tabbed Browser Preferences | Disable Targets for Downloads
  10. IDN Info | Translate | Purple Bunny

Bei all den Extensions fehlt eigentlich nur noch das Spülbecken für die Firefox-Küche. 😀

Opera 8.0.1 hat ein Problem mit dem Titel in meinen Buttons

tempa wrote this 12:18:

Title im Opera
Er zeigt den Titel nicht als Bubble an und dies kann, wenn er zu lang ist, zu unfeinen Effekten führen. Ich lass das jetzt so. Ich will die Title nicht kürzen. Schau’n wir Mal, dass ich nun den Titel in viele viele viele Links nehme. Hahaha.

Nachtrag: Aus der Not eine Tugend gemacht: Die Buttons verlinken nun korrespondierend zu der Buttonfarbe auf die Farbübersichten.

ArbeitsbrowserÜbrigens auch einen Beitrag in WordPress mit dem Opera bei langen Kategorielisten vergeht einem der Spaß. Man kommt einfach nicht an die unteren Kategorien ran. Hahaha. Ich habe also zwischengespeichert und bin wieder in meinem „schweizer Messer FF„. Tsss! 

Wenn der Prophet nicht zum Berg kommt …

tempa wrote this 01:32:

Wenn der Prophet nicht zum Berg kommt, dann muss eben der Berg zum Propheten kommen. Editland läuft auch weiterhin in der Admin-Ebene nur im Internet Explorer von Mircrosoft, doch nun muss man nicht mehr den Browser separat starten.

Editland-Admin im Firefox

Die Firefox-Extension erleichtert nun die Arbeit ungemein, bei der Entwicklung, denn nun kann ich mit meinem kleinen „schweizer Messer“ FF arbeiten und muss nicht den Internet Explorer separat starten. Gerade wenn einem einfällt, etwas ändern zu wollen oder man gebeten wird einen Internet Explorer Effekt zu bestaunen und hat dafür den „falschen“ Browser offen, dann ist es jetzt nur noch ein kurzer Klick auf den Knopf in der Leiste. Voila. Der Internet Explorer im Firefox (IE-Tab). Klasse Sache.

Nachtrag: Die Menüberabeitung Bearbeitung ist in dieser Konstellation nicht wirklich der Hit, zumindest nicht mit dem Popup im nächsten Tab. Aber mal kurz einen Tippfehler korrigiert. … immernoch eine gute Idee.

Apropos: A List apart und das Thema barrierefreies Webdesign

tempa wrote this 00:53:

Die Suchmaschine ist wie eine virtuelle Stadt mit verschiedenen Zentren. Wie in der Einkaufspassage in der Großstadt ziehen große und kleine Scharen von Passanten durch. Einige Bummeln rein aus Vergnügen andere verfolgen konkrete Vorhaben. Hierbei kommen sie an Schaufenstern vorbei und nehmen eine Vielzahl von Eindrücken mit. Soweit zur Realität — übertragen wir dieses Verhalten in den virtuellen Raum des Internet: Die Straßen der Städte werden im Netz von den Suchmaschinen gebaut. Die Schaufenster der Suchmaschinen-Passagen sind die Textausschnitte aus Ihrer Website und die im im Quelltext eingebetteten Bilder, welche die Sucher per Suchbegriff aus dem Datenbankindex der Suchmaschine abrufen.

Kommen Kunden in den Laden — respektive auf die Site, ist Design, Text und der Grad der Eineindeutigkeit in den Aufforderungen entscheidend für den Erfolg der Site.

Neben dem Inhalt einer Seite selbst sind Suchmaschinen die Helfer schlechthin, um möglichst zahlreiche Gäste auf der eigenen Site begrüßen zu dürfen. Die Zahl der Besucher, die über die Suchmaschine auf Ihre Website stoßen, nennt man Konversionsrate. Je höher die Konversionsrate, desto größer auch die Zahl derer, die auf Ihrer Website das Gesuchte finden und Ihre Waren und Leistungen kaufen.

Suchmaschinen verarbeiten ausschließlich den Quelltext.

Schnell wird hierbei vergessen, dass Suchmaschinen nur den Quelltext einer Seite verarbeiten und davon primär die HTML-Teile verarbeiten. Es macht daher Sinn eine Seite mit den Augen einer Suchmaschine auf seine Lesbar- und vorallem Verwertbarkeit hin zu überprüfen. Diesem Thema widmet sich nun auch A List apart aktuell in einem Beitrag (Engl.).

Ein herrlicher Anlaß noch einmal an meinen Beitrag vom Mai 2005 😉 zum Thema zu erinnern: Barrierearmut: Optimieren mit Fang
Mit der Firefox-Erweiterung Fang können Sie jede Seite bequem über das Kontextmenü mit den Augen der Suchmaschine betrachten. Die Erweiterung für Ihren Firefox ist schnell und einfach installiert.

Die Optimierung auf Barrierearmut hilft gleichzeitig die Site schneller zu machen. Achten Sie bei der Seite auch auf Alt und Title bei Bildern, da Google Bilder nicht interpretieren kann und daher auf ALT-Texte angewiesen ist. Fehlen diese werden Bilder nach ihrem Dateinamen und dem umgebenden Text bewertet. Je weniger Grafiken, die dem reinen Layout dienen, in dem Quelltext eingebettet sind desto besser für die Bewertung des Inhaltes ihrer Seite. Diesbezüglich hat der Disney Store UK jetzt vor dem Weihnachtsgeschäft ganz frisch eine bittere Lehre ziehen müssen, als dieser kürzlich zu den veralteten Layouttabellen zurückkehrte und eine mehr als überflüssige Layoutgrafik namens „Image Spacer“ zum wichtigsten Begriff der Website vom Google-Index gekürt wurde.

Der weitere Vorteil mit CSS-Design ist, dass Textergebnisse mit verschiedenen Layouts schnell umgesetzt werden können und so der Erfolg auf allen Ebenen systematisch erreicht werden kann.

Herzlichen Dank an Robert Basic, der mit seinem Link zum Beitrag hilft, die Bedeutung barrierearmer Seiten bekannt zu machen. Man kann es gar nicht oft genug sagen.

Weiterhin möchte ich die Lektüre bei Google empfehlen: Richtlinien für Webmaster

ANZEIGE

Gute Websites — stark im Onlinemarketing, barrierearm und rasend schnell — erhalten Sie in der Templaterie (Deutschland) und von creisi productions (Schweiz)

Anmerkung: Barrierefreiheit ist eine Illusion, weswegen ich barrierearm dem Begriff barrierefrei vorziehe.

Websites optisch einfangen mit ScreenGrap

tempa wrote this 12:04:

Wenn ich nun noch das Konttextmenu umorganisieren, dann wäre mein Schweizermesser-Browser perfekt. Mein neustes Spielzeug, das sich natürlich auch noch im Kontextmenü breit macht und ich nun noch öfter nur mit großer Mühe an die oberen Menüpunkte, weil das rauf- und runterklappen vom Standardkontextmenü ausgeht. Naja … aber meine neuste Extension erspart einfach Arbeit und man muss das Screenshottool nicht jedesmal auspacken. Zumal mein Werkzeug für Screenshot beim Viewport*, bzw. beim Screen , während ScreenGrab abfragt, ob Dokument, Viewport, oder Screen im Bild festgehalten werden soll.

Screengrab — Das Dokument: Templaterie.de

*Viewport ist der Fensterausschnitt im Browser, in der die Website erscheint. In der Grafik bei einer 1024×768-Auflösung im FF nachträglich mit Photoshop in Pink eingearbeitet.

Recent Comments:

  • Silke schümann { Du warst auf dieser Seite: Step1 zur Archiv-Thumbgalerie via Custom fields Marke Eigenbau http://templaterie.de/blog/931/step1-zur-archiv-thumbgalerie-via-custom-fields-marke-eigenbau/ Hier war ich noch am Basteln. Ich fürchte meine PHP-Kenntnisse sind... } – Aug 26, 9:29 AM
  • Andreas { Hey, ich habe den Code wie oben benutzt und auch $dgal = get_posts('category=1′); on der richtigen Zeile eingesetzt nur bei mir läufts immernoch nicht. Kann... } – Aug 26, 3:20 AM
  • Fred { "wer Smarty lernt, kann tatsächlich gleich auch PHP mitmachen, ich hatte es eine zeitlang auch eingesetzt, aber jetzt mach ich es wieder auf meine art... } – Jan 06, 7:14 PM
  • Silke Schümann { Das klingt nach einem Syntaxfehler in der ersten Zeile. Anführungszeichen korrekt? Und das Plugin funktioniert nur innerhalb von Editland. Die index.php ausserhalb von Editland aufzurufen... } – Jun 18, 3:40 PM
  • Jörg { Hallo, ich habe die index.php im ersten Abschitt Nr. 3 beschrieben, angelegt. Beim Aufruf der Seite wird folgende Fehlermeldung angezeigt: Parse error: parse error, unexpected... } – Jun 18, 3:14 PM
  • Michael { Gern geschehen 😉 } – Mai 29, 2:31 PM
  • Silke Schümann { Jepp. Das war's: ES tut! Lösung ist nun in einem eigenen Beitrag: Step1 zur Archiv-Thumbgalerie via Custom fields Marke Eigenbau Fertig und betriebstüchtig! 🙂 } – Mai 29, 1:25 PM
  • Michael { Wie wäre es, wenn Du die Zeile $dgal = get_posts('category=1'); auslagerst und den Rest in eine Funktion packts, der Du $dgal übergibst. Das wäre auch... } – Mai 29, 12:45 PM
  • Silke Schümann { Ich ziehe diees Variante ebenfalls vor, dovh wenn ich Code übernehmen, dann ändere ich hierfür nicht extra. Es dürfte gehzpft wei gesprungen sein, welche man... } – Mai 29, 2:00 AM
  • Ulf { ich würde bei der Syntax für Schleifen konsequent die C-ähnliche Variante mit geschweiften klammern nehmen, nicht die alternative mit Doppelpunkt und "endwhile" bzw. "endforeach". } – Mai 29, 12:00 AM
  • Silke Schümann { Ich habe ich http://franchie.de die Thumbs in der Sidebar erfolgreich ausgelesen. Ansonsten ist die Test-Umgebung unter 1a-test dot de / blog Ich will diese Adresse... } – Mai 28, 11:37 PM