Was ist ein Template?

tempa wrote this 00:21:

Wozu ist ein Template gut?

Gestern [geschrieben am 24 Okt. 2006] fiel mir nicht schlecht die Kinnlade herunter, als ich hörte, dass bei der Vorstellung zur Planung von größeren Projekten ein Punkt sich mit der Design-Änderung während des Projektverlaufs und der daraus resultierenden, stundenlangen Anpassung des bis dahin fertigen Zwischenstandes befasste. Da es sich dabei auch noch um einen ehemaligen Interessenten handelte, also die Templaterie bekannt sein dürfte, habe ich offensichtlich noch ein Problem Sinn und Zweck von Templates zu transportieren.

Ein Template ist ein Grid, ein Raster, eine Matrix, ein Rahmen, in den veränderliche Inhalte eingefüllt werden können. Ein gutes Template besteht nicht nur aus modularen Kopf- und Fußzeilen oder einem Seitenstreifen, den man beliebig austauschen kann. Ein gutes Template berücksichtigt auch Seitenstrukturen. Das gestrige Beispiel – eine Seite mit Kochrezepten – ist dabei eine wunderbare Ausgangssituation.

Ein Kochrezept besteht aus:

  1. Titel des Rezeptes
  2. Kategorieen wie z.B. Land, Vegetarisch,
    Dunkles Fleisch, Menufolge, etc.
  3. Abbildung des aufgetafelten Gerichtes
  4. Liste der Zutaten
  5. evt. Liste der Gerätschaften
  6. Arbeitsanweisung in x Schritten inklusive Illustrationen
  7. Rezept-Historie, Quellen, Einkauftipps

Das sind sieben verschiedene Elemente mit unterschiedlichen Anforderungen und Positionierungen und Rahmenbedingungen, welche sich in HTML-Strukturen wiederspiegeln. Jeder HTML-Struktur kann eine ID oder eine Klasse zugeordnet werden und zu jeder HTML-Struktur, zu jeder ID und zu jeder Klasse werden in der CSS Designanweisungen hinterlegt.

Was bringt es ein, ein Template von A-Z
durchzuplanen und umzusetzen?

Gerade in größeren Projekten ist die Planung und Identifizierung der Objekte, Elemente und Bausteine essentiell, um:

  1. Design-Entwicklung und Projektinhalte zusammenstellen parallel beginnen zu können
  2. Frei zu sein in der Design-Entwicklung und sich z.B. auf Sponsorenfarben einstellen zu können
  3. Im Design den Modetrends auch in den kleinen Details folgen zu können, und damit frisch und aktuell zu wirken.
  4. !Most important: Sich das stundenlange Fieseln mit Design-Änderungen in 100ten und 1.000den von Textstellen zu ersparen.

Planung und die Verwendung von Semantik für Layout-Anforderungen ist nicht nur eine Spielerei mit dem man einen CSS-Zengarden ins Netz stellen kann. Es ist bares Geld, das man spart, weil man vorher ein wenig mehr Zeit in die Meta-Ebene (dem was ist was und was bedeutet was …, welche Mengen, Grade der Bedeutsamkeit, etc.) steckt und kontinuierlich der Versuchung wiedersteht, mal g’schwind einen Inlinestyle oder schlimmer einen Font-Tag zur Gestaltung zu verwenden.

Ursprünglich gepostet am 24. Oktober 06, 13:52 in meinem Blog “Silkester erzählt”.

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.

Ladezeiten – eine Überlebensfrage

tempa wrote this 00:13:

Webdesign in Bezug auf Dateigröße ist eine Frage von Leben und Tod.

Direktlink YouTube: Filesize matters

Kontrast und Größe

tempa wrote this 12:30:

Schick mit Nachteilen: einige Texte werden erst lesbar, wenn man diese markiert

Gelegentlich fragt man sich, warum und wie das eine oder andere Template in CSS-Vault es schafft als vorbildlich dargestellt zu werden. Aktuell ist es die Präsentation von York music, die zwar auf den ersten Blick schick aussieht, doch so mancher Brillenträger wird nie erfahren, das die Beiträge einen Zeitstempel haben. Bei den Link ist zwar der Kontrast etwas besser aber noch immer werden Menschen mit Sehschwächen diese nur mühsam entziffern.

Vorbildliches Design sollte meines erachtens auch auf diese Dinge achten. Schade. Wobei der Gesamteindruck durchaus gefällt und bei entsprechenden Monitoren das Ergebnis weniger Desaströs sich darstellen mag.

Vom gehypten Schlagwort zum großen Nepp ist es nur ein Klick

tempa wrote this 21:56:

Na, heute schon ein Kilo Barrierefreiheit gekauft? Darf’s ein Modülchen mehr sein?

Typo3 barrierefrei – Schüttelreim oder große Kunst?

Fazit: Das gilt wohl für vieles und Barrierefreiheit muss man wollen. Danach ist es fast egal welches Werkzeug man verwendet. Das eine mag einen besser unterstützen als das andere, letztlich aber geht es darum sich um das Verstehen der Zusammenhänge zu bemühen. Internet ist nicht nur das, was wir an der Oberfläche sehen, sondern eben auch das was wir unter der Decke vorfinden, so dass die Ausgabegeräte und Verwertungssysteme dieses optimal nutzen können und damit letztlich auch die Menschen, die nun wiederum Nutznießer und Anbieter sind, die zusammenfinden wollen … oder nicht?

Nepp trägt immer dort besonders reiche Früchte, wo Leichtgläubigkeit und mangelndes Interesse für Zusammenhänge vorherrschen.

Kollegenschelte — pffh! Old School

tempa wrote this 23:55:

In Fellbach, in dem Städtle knapp vor Stuttgart, was man noch als Nachbarschaft bezeichnen könnte, ist eine Website neu „gelauncht“ (also scharf gemacht / hochgeladen) worden. Gleich mal gucken woll’n. Aber nee, da haut man eine Pressemeldung raus und investiert ein wenig Asche, aber statt, dass man dem Kunden einen Link gönnt, … Dafür scheint es nicht gereicht zu haben. Als würde der Link extra kosten (Pffffh). Also gut, erst einmal recherchiert. Jaha. Und wer den selben Presseverteiler nutzt wie ich, kann ja gerne nachsehen, wen ich meine. Spezifischer werde ich an dieser Stelle nicht.

ReissackWie langweilig. Wieder eine Website mit Blähungen und das, obwohl es doch eigentlich schon sehr gut ohne geht. Naja. Noch ist das eben der Alltag. Und alles ist eine Presse- Meldung wert. (Was weiß, der Kunde schon? Der hat doch keine Ahnung, ne?)

Der Reissack, so wurde berichtet, sei mit einem dicken Plumps auf eine Ameise gefallen!

Also wenn Ihre neue Website zur Abnahme im Netz steht, dann schauen Sie in den Quelltext. Wenn Sie eine Tabelle (erkennbar am <table>-Marker) in einer Tabelle in einer Tabelle sehen (zu erkennen, wenn der Marker drei Mal hinter einander folgt ohne, dass zwischen rein einmal ein / vor dem table in der spitzen Klammer steht.), wie z.B. hier in der niegelnagel neuen Website, dann monieren Sie.
3-fache Schachtelung der Tabelle

Wenn Sie an anderer Stelle ein <P><SPAN class=headline> entdecken, lassen Sie nachprogrammieren. Wenn das CMS keine echten Überschriften (erkennbar an <h1> bzw. h2, h3, h4, h5 oder h6 in spitzen Klammern) beherrscht, nutzen Sie es nicht. Alles was eine Überschrift ist, sollte auch als solche ausgezeichnet werden. Übrigens: Überschriften nicht als Überschriften auszuzeichnen, war schon vor zehn Jahren ein sehr schlechter Stil.

Jeder Konkurrent, der Ihnen das und mehr voraus hat, wird besser gefunden. Tja. Das Leben ist hart, wenn man nicht auf dem Laufenden ist und der betreuenden Agentur blind vertrauen muss. Dann kommt eine Meldung raus, die im nächsten Moment im Blog aufgegriffen wird und die schöne Meldung nicht gerade im schönsten Licht erscheinen lässt.

Praxistest: Nützliches und Ärgerliches aus der Sicht behinderter Internetnutzer

Claudia Reiser wrote this 10:54:

Die Agentur User Vision hat eine Umfrage unter 208 behinderten Internetnutzern durchgeführt. Die Teilnehmer wurden gefragt, welche Faktoren ihnen beim Surfen helfen und welche ihnen am meisten Hindernisse in den Weg legen. Interessanterweise hat sich herausgestellt, dass einige der bisher als wichtig zur Unterstützung geltenden Mittel, wie z.B. das Setzen von alt-tags, an Wichtigkeit verloren haben. -> die Ergebnisse der Studie (englisch)

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.

Nicht mehr wichtig?

tempa wrote this 21:17:

Summing up

We have tried hard to make this site the best that it can be for as many different people as possible. We hope that you enjoy visiting it. We would love to know what you think of our site and would welcome your comments.

Happy shopping,

The web development team.

Quelle: Aus dem Archiv.org das
Missionstatement des Webdeveloperteam von
Disney Store UK vor dem Relaunch

Siehe auch: Fallstudie Disney

Es hat sich mit dem Relaunch des Disney Stores UK einiges verändert. Unter anderem ist die Seite aus dem Webarchiv heute ein 404. Und dieser Anspruch dürfte auch nicht mehr gültig sein. Denn wenn man den Stimmen des Netzes lauscht zum Thema Relaunch, wird klar, dass es nicht um Qualität ging. Diese blieb auf der Strecke.

Jens Grochtdreis über den Relaunch:
„Eine Maus lehrt mich das Fürchten“

Unbedingt auch die Links im Artikel von Jens Grotdreis verfolgen.

Und noch eins, das man beim Design beachten sollte:
Google meldet was relevant im Disney Store UK ist. Weihnachten 2005 ist es das Spacer Image
via malarkey of mice and men — no coment

Genau: Google-Engines werten die Seite aus und geben das Ergebnis nach seiner Relevanz aus und das heißeste Thema im Disney Store UK ist das Spacer Image, das bewirkt, dass die Tabellenzellen korrekt angezeigt werden können. Das finde ich göttlich. Besser kann man eigentlich nicht mehr demonstrieren, warum Design immer auch eine Frage des Quelltextes ist.

Wenn es mein Kunde aber doch so will!!!

tempa wrote this 12:43:

Ich weiß nicht, wie die Kommunikation zwischen diesem Kunden und diesem Webdesigner ablaufen, aber ich weiß, dass für den Kunden Barrierearmut wichtiger ist als für andere und ich weiß, dass dieser Kunde aktuell eine Site verpasst bekommt, die alles andere als Barrierearm ist.

Der Webdesigner sagt, „Kunde will es so!“

Wieso könnte ein Kunde es wollen, dass die Menschen, die sich für ihn interessieren (und auf seine Leistungen sogar angewiesen sind, wenn diese ein Stück mehr Normalität in ihrem Leben zurück haben wollen), von den Informationen auf der Site ausgesperrt sind, weil

  1. sich die Navigation nur mit der Maus bedienen lässt,
  2. die Schaltflächen so klein sind, dass sogar der Designer leichte Koordinationsprobleme hat, Menüpunkte anzusteuern.

Mag ja sein, dass in dem Budget eine ordentliche Beratung nicht enthalten ist, aber vielleicht sollte man als gewissenhafter Webdesigner einfach auch einmal „Nein!“ sagen. Es ist in jedem Fall eine Schande, wenn der Familienvater in der Rekonvaleszenz auf der Suche nach der Folgeklinik auf fremde Hilfe angewiesen ist, um sich auf deren Website über die Klinik zu informieren.

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