Design ./. Javascript ./. Accessibility

tempa wrote this 04:13:

Freier Raum ist für ein Design wichtig. Ohne Freien Raum keine Ordnung und wenig Harmonie. Designs ohne freie Stellen, sind meist vollgestopft und chaotisch. Dies war der Grund, dass ich überhaupt anfing Teile der Site über remote skripting und Javascript-Style-Anweisungen aus dem Layout temporär entfernen will.

Template TC-0044 A mit Steilkueste

Das Design

Das Design kann als Entity im Viewport (sichtbarer Bereich im Browserfenster) gestellt werden, doch wenn es als Ganzes im Viewport erscheinen soll, dann ist der Platz begrenzt und jedes Element will wohl überlegt sein. So ist der hellgrüne Bereich, der die Navigation enthält und zu der auch die Stichwortwolke im gelbgrünen bereich zählt ist nicht identisch gestaltet. In der linken Spalte und hellgrün, enhält die erste Ebene. Die Links sind reich gestaltet. Ihre Wichtigkeit wird allein durch die Gestaltung klar. Die zweite Ebene horizontal unterhalb des Kopfes ist ebenfalls als wichtig durchgestaltet, wohingegen die dritte zusätzliche Navigation über dem Fuß nur eine zusätzliche Brotkrumennavigation ist und blaß klein sich in das Design hineinschleicht. Vorhanden und sichtbar aber schüchtern zurückhaltend überlässt es anderen Elementen die Volle Aufmerksamkeit. Die Stichwortwolke versucht ebenfalls im Hintergrund zu bleiben, aber allein Schon Ort und Umfang wirken dem entgegen. Entweder die Grenzen des Viewports werden gesprengt und die Stichwortwolke macht sich unterhalb des Textes sowie oberhalb der Fußzeile inkl. Brotkrumennavigation breit oder aber es muss zunächst einmal ausgeblendet werden und nur bei Bedarf ins Design geholt werden.

Javascript

Javascript ist clientseitig. Das heißt, die Kontrolle über Version, Fähigkeiten und gar dessen Existenz ist ganz in der Hand des Websitebesuchers. Javascript kann deutlich Ressourcen vom Rechner belegen, das heißt, wenn der Endnutzer der Website bereits durch Multitasking die Ressourcen seines Rechners ausgeschöpft hat, kann ein Javascript der letzte Tropfen zum Absturz des Gesamtsystems darstellen. Javascript will als mit Bedacht eingesetzt sein und zur letzlich sollte es auch ohne gehen.

Accessibility

Zugänglichkeit oder Accessibility ist nicht nur eine Frage, ob die Navigation auf Javascript verzichtet, ABBR-Tags und LANG-Tags verwendet wurden, auf Kontraste und Schriftgrößen geachtet wurde, es ist auch eine Frage der Datenorganisation. Über welche Wege werden Inhalte zur Verfügung gestellt. Wieviele Klicks sind notwendig, welche Hilfen zur Orientierung auf der Site stehen zur Verfügung. Eine Stichwortwolke, die mehrere Seiten zu einem Thema gruppiert und in einer Vorauswahl zur Verfügung stellt ist ein Dienst im Sinne einer optimierten Zugänglichkeit.

Das Dilemma

Das Design profitiert von der Fokusierung auf wesentliche Inhalte. Javascript kann bei alten Browsern nicht ganz ausgelagert werden. Der Trend im Javascript geht in die richtige Richtung und wie in Übergangsphasen üblich kann man es nur falsch machen. Es wäre viel sinnvoller die neuen Methoden einzusetzen, doch sind da draußen in der Wildnis des Internets noch so viele IE6, dass es eben nicht geht. Und in Bezug auf Zugänglichkeit der Website mit dem Template möchte ich die Stichwortwolke drin habe, aber eben nicht wenn es das Design in Chaos stürzt.

Ich werde mich entscheiden müssen, … Ich schätze ich werde das onClick im Quelltext belassen und auf allen Ebenen Design (Optik), Dynamik (Techik, JS), Design (Ergonomie) … mich für den Kompromiss mit einer Träne im Auge entscheiden, im Moment kämpfe ich noch ein wenig mit mir. Was für ein Beruf.

Ursprünglich gepostet am 21. Oktober 06, 14:11 in meinem Blog “Silkester erzählt”.

Klick Klick Klick auf eine Blick

tempa wrote this 03:47:

„Ich weiß schon, was ich will“ sagt ein Interessent zu mir und ich höre ‚Fünf-Seiten-Webprospekt‘. „Ich will eine professionelle Site um Businesskunden adäquat anzusprechen.“ und in meinem inneren Kino beginnt die Vorstellung: an der Wurst- und Käsetheke: „ein Mal Flashintro, Wir über uns, Leistungen, Referenzen, Kontakt.“ — „Darf’s a bisserl mehr sein?“ — „Ah ja, dann geb’n’s mir noch ein Aktuell“

Auch das kann ein Einstieg in das Internet sein. Er ist ja auch sehr weit verbreitet.

Seitenstruktur
Von MA meist wenig bis nichts zu sehen und vom YA unerträglich viel — viel zu viel YA.

Professionalität hat viele Gesichter:

  • jene kleinen statischen Prospekte
  • WebTV-artige Flashfilme
  • Datenbank mit (Bezahl-)Inhalten
  • (Wissenschftl.) Essays, Anekdoten, Bilder, etc.
  • Interaktive Seiten für Gespräche

Eine Kombination aus den oben genannten Formen.

  • Eine WebAgentur setzt A-Z um
  • Eine WebAgentur schafft einen Rahmen,
    der vom Kunden bestückt wird

Jede erdenkliche Kombination dieser beiden.

Einige Fragen sind zu klären:

Wie soll die Website in Ihre Unternehmenskommunikation eingebettet sein?
Wieviel Zeit ist für die Kommunikation über und mit der Website innerhalb des eigenen Unternehmens geplant?
Über welche Kanäle soll die Zielgruppe Aufmerksam gemacht werden?

Für wen ist die Website gedacht?
Was soll der Seitenbesucher mitnehmen/tun?
Wann wird sich das Wiederkommen lohnen?
Wofür wird die Website aufgesucht/geschätzt?

Ursprünglich gepostet am 26. April 04, 19:43 in meinem Blog “Silkester erzählt”.

Um nicht einzurosten …

tempa wrote this 22:53:

Ich habe mal wieder meine Adresse etwas geändert. Das Weblog ist nach vorn zur Startseite der Subdomain gewandert. Pardon. … es muss also wieder einmal das RSS angepasst werden und wie das bei mir so üblich ist, man kann zuschaun, wie gebastelt wird, nur dass nicht ich jetzt ins schwitzen komme, wenn es nicht so will, wie es soll, sondern Robert Basic, dem ich meiner Bequemlichkeit halber das Einrichten Übertragen habe und der dort auch öfter wenn es um Blogs einrichten und Blogdesings geht mitschreiben will. Na, dann … 🙂 Und Claudia Reiser wird sicherlich auch vorne ab und an einmal mitschreiben.

Tigergreen neu aufgebaut

tempa wrote this 15:10:

Nachdem ich eine Winzigkeit nur im CSS angefasst hat, war mir das Layout auseinandergefallen, ein sicheres Anzeichen, dass man an einigen Stellen mit der Kirche ums Dorf geskriptet hat. Meist fakle ich in diesen Fällen nicht mehr groß und baue lieber noch einmal vor dem Hintergrund des alten Quelltextes neu auf und lasse meine neusten Enteckungen und Arbeitsstile einfließen.

So geschehen beim Template tigergreen. Jetzt muss nur nach jede Variation separiert werden und das Script so umgestellt werden, dass ich auch hier sehr kostengünstig Anpassungen anbieten kann. Das ist nun noch ein kleiner Aufwand der fehlt.

Die Photoshop-Dateien sind bereits so angelegt, dass man sehr flexibel jede Farbkombination anlegen kann, wie das Küstenbeispiel zeigt (sogar mit ein schillerndem Hintergrund in der Kopfzeile).

Nun müssen noch die ergänzenden CSS-Dateien, die innerhalb des Templates Farb- und Header-Anweisung überschreibt, so dass aus Tigergreen, Tigerblue, Roberts zweifarbiger Tiger, Coffeblue oder Windmill und die in Farbe ganz abweichenden Tempalte Piano und Küste entstehen können.
Template TC0063 Piano
Und noch etwas ist hinzugekommen. Templates, die mit der Texteinteilung variieren mit einer, zwei oder drei Spalten mal so und mal so und in einer weiteren Demo (auch zum selber Probieren wer will) noch viel wilder gezeigt. Neben den Tempaltes mit fertig angelegten Spalten, die einfacher zu bedienen sind, dafür aber starrer in der Vorgabe, ist noch die Möglichkeit vorhanden, die Spalten selbst von Hand anzulegen und farbig zu unterlegen (denkbar auch mit Bilder) oder mit Rahmen zu versehen, was ebenfalls ausführlich demonstriert wird auf einigen Seiten.

  1. in der Verwandlung hier
  2. ein wenig hier
  3. am intesivsten in den Unterseiten der Sanbox.

Wobei in den in den Unterseiten der Sandbox alle möglichen Variationen gezeigt werden. Wer will kann selbst sich austesten, was er zu Wege bringt. Eine Kundin fluchte unlängst in einer Mail, dass sie Editland nicht schon längst entdeckt habe und sich so lange mit ihren Präsenzen abgemüht hatte. Dazu kann ich nur sagen, reinsurfen anschaun, Demopasswort abholen und wirklich einmal ansehen. Jeder der einen PC mit dem Internet Explorer 5.5 oder höher von Microsoft auf seinem Rechner hat, ist herzlich dazu eingelanden. So und nun geht es auch schon weiter, an diesem winterlichen Sonntag, denn ich will den Berg weg haben, bevor hier neue Fenster in das Büro eingebaut werden.

Die Artikelserie zum Template Tigergreen:

[Nachtrag] Schön, schön, schön. Für den IE 7 Beta muss an diesem Template nichts gemacht werden, auch wenn das noch nicht heißt, dass beim offiziellen Release des IE 7 alle meine Templates ohne Nacharbeit auskommen und sogar dieses hier kann unter umständen noch eine Nachbesserung am Ende erfordern. Aber soweit bin ich nun schon zufrieden. Achja, die Editland-Weiche ist aktuell noch so eingestellt, dass der IE7 abgewiesen wird. Zu gegebener Zeit wird auch dieser von Editland durchgelassen werden.

Ein Orchester im Computer

tempa wrote this 23:49:

MusicalKeys
[audio:http://templaterie.de/blog/wordpress/wp-content/data/MusicalKEYS.mp3]
dida-dida-dida-dida-dididaaaah (Nachtrag: auf der Tastatur ist das dann „u7u7u7u7u rte“)

Ein Orchester im Computer ohne Zusatzsoftware bietet MusicalKeys. Vorsicht ist wieder geboten, ich bringe eine denkbar schlechte Interpretation von … ihr werdet’s dennoch erkennen. In jedem Fall ist es genau das richtige wenn man mit seinen Kindern ein wenig am Computer albern möchte. Wircklich putzig das Teil.

Nachtrag: Für das Keyboard dürfte sich die Umstellung auf amerikanische Tastatur lohnen, da dann die Oktaven nicht so fürchterlich auf die Tastatur verteilt sind, es irritiert wenn das tiefe C zwischen dem C und E zwei Oktaven weiter steht, was nicht der Fall ist, wenn das Z neben dem X zu finden ist, wie das bei der amerikanischen Tastatur.

Welche Farbe noch mal?

tempa wrote this 18:18:

Ich #FFF nicht, ob das in allen Fällen so gut lesbar wäre ¦
aber bevor du nach längerem Lesen #F00 siehst und dich deshalb #000 ärgern könntest, weil du dem Autor vielleicht sowieso nicht so ganz #0F0 bist, solltest du lieber mal einen Tag #00F machen.

Ich fand das nun so schick und damit ich nicht #FF0 vor Neid werde habe ich es mir geschnappt und natürlich will ich nicht #0FFisen und vor Scham #F0F anlaufen, also nenne ich auch, woher ich das habe: via M°kreativ von Manuel Bieh.

Welche Farbe hat das Wasser?

tempa wrote this 20:47:

Es ist erstaunlich, welche unterschiede in den Farbwerten herauskommen, wenn man Wasser in unterschiedlichen Sprachen in dieses kleine Programme ingibt, dass die Farbwerte der Google-Bildsuche auswertet.

Im Vergleich noch einige Wortpaare:

Fisch : Fish Erdbeere : Strawberry

Junge : Boy Mädchen : Girl

Von wegen Blau und Rosa … 😉 … englische Mädchen haben die Farbe der deutschen Fische … Ocker um es mal nett auszudrücken.

Wer das nun selbst einmal ausprobieren will, der findet das Werkzeug dazu hier.

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.

Achmed braucht Support

tempa wrote this 18:56:

Achmed will ins Internet (MP3)

Quelle: fundodo: Achmend

Zeitgeist Design

tempa wrote this 03:00:

Zeitgeistthema Design

Laut AmazType ist Design noch immer ein Zeitgeist-Thema. Erstaunlich, dass es gemäß der Liste gleich hinter den Erotik-Themen rangiert. Klickt man die Titel an entdeckt man interessante Bücher wie z.B. dieses, das mich neugierig macht: Understanding By Design

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