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.

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. 😀

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.

Mit Firefox die Barrierearmut prüfen

Claudia Reiser wrote this 08:25:

Sehr nützlich: Firefox und die Web Developer Toolbar. Wie man damit eine Website auf Barrierearmut prüft, beschreibt Patrick H. Lauke im Artikel Evaluating Web Sites for Accessibility with Firefox.

Images innerhalb eines floated DIV

tempa wrote this 14:18:

Wenn man ein zweispaltiges Design herstellt, indem man zwei DIVs untereinander schreibt erst Inhalt dann Navigation und die Navigation elegant am Inhalt links vorbei floaten lässt, dann zerhacktstückt ein Image im Inhalts-DIV gelegentlich das Design. Mal klafft in der Linie (border-left) die Menü und Inhalt optisch trennt eine große Lücke oder ein ander Mal verliert ein nachfolgender DIV seinen Bezugspunkt und verrutscht rauf oder runter.

Diesen häßlichen kleinen Bug beseitigt man, in dem man dem Image ein display:block; zuweist.

Das erscheint mir zwar ziemlich dämlich aber scheinbar hilft das dem Firefox, nicht alles durcheinander zu bringen.

Opera zu Moz zu Iiiieh

tempa wrote this 21:46:

„Haben wollen. Auch mein eigenes CSS haben wollen.“ sprach Oh zu MOZ+IE.

Manchmal hasse ich diesen Mist. Ich kann gar nicht sagen wie.

Stoßseufzer

tempa wrote this 20:25:

„Ich werde nie Webdesigner!“ Was war geschehen? (mehr …)

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