Der Klassiker unter den Template-Rastern

tempa wrote this 14:04:

klassisches Raster eine Website

Dieses Gitterlinienmodell eines klassischen Website-Designs füllen wir nun mit Leben.

klassisches Raster eine Website mit Headerbild

Wer hier kein Bild einfügen will, kann auch einfach eine Fläche setzen.

klassisches Raster eine Website mit farbigen Flächen

Die große Fläche ist erdrückend. Wir benötigen eine Auflockerung. Fügen wir kleine Bilder ein.

klassisches Raster eine Website mit farbigen Flächen und kleinen Bildern
Angedeutet durch die kleinen Flächen. Man könnte auch, wenn man ein Bild in diesem Bereich partout nicht will, diese Flächen lassen oder in diese Fläche den Seiten-Service einfügen.

klassisches Raster eine Website mit farbigen Flächen und kleinen Bildern
In diesem Beispiel ist in dem Feld nun nur eine Suche, die dem farbigen Fläche die Schwere nimmt. Ähnlich wie dem Design-Layout dieser Seite.

Man kann das ganze aber auch ganz anders lösen:
Klassiches Templateraster mit Würfelchen

Zum Beispiel in dem man die Fläche in viele kleine Flächen unterteilt. Design ist ein Spiel mit Flächen. Je nach Einteilung erhält man eine starke Konzentration auf jeweils eine Sache und einen Artikel wie hier, oder aber wie in dem letzten Beispiel auf viele Details und meist auch Unterthemen in der Seite.

Die Einteilung der Seite bestimmt, wie stark Sie einen Fokus setzen und wie viel Raum Sie einem einzelnen Aspekt geben. Wie Sie den Header (den Kopfbereich) Ihrer Seite gestalten bestimmt, wie stark man sich auf eine Seite konzentriert oder weitere Seiten mit in die Betrachtung zieht. Bei diesem Webdesign kann man feststellen, dass wer sich für das Thema interessiert auch in das Archiv klickt. Viel stärler als ich das bei anderne Webseiten-Layouts feststellen konnte. Wer weiter weitere Artikel sehen will, bekommt ein Liste aller in diesem Weblog erschienenen Artikel präsentiert.

Hierbei zeigt die Statistik, dass die Besucher sehr gezielt Schwerpunkte herausgreifen. Diesen Effekt, kann man immer wieder beobachten. Die Präsentation vieler Links in der Seitenleiste führt nicht selten dazu, dass diese vollkommen ignoriert werden. In einem Fall wurde die Blogroll auf eine separate Seite mit Linkempfehlungen gesetzt. Dies führte dazu, dass diese Links weitaus stärker frequentiert wurden. Dieses Thema erhielt in einer kleinen Auswahl prominenter Linkposition einen separaten Raum und damit eine Relevanz, die wir als Webmaster gesetzt hatten und vom Publikum angenommen wurde.

Siehe auch:

Farben definieren die Stimmung einer Website

tempa wrote this 05:12:

Identische Templates ergeben je nach Farbklang unterschiedliche Websites. Die Farben eines Templates erzeugen nicht nur ein Stimmung, sie können auch einen Effekt der Form relativieren. Der Widerspruch zwischen Farbe und Form ergibt eine sehr energiegeladene Mischung. Die Farbwhal können ein Gleichgewicht stören.

Klassische Einteilung eines Webdesigns
Dies ist der Ursprüngliche Farbklang der Website. Das Raster ist stark vereinfacht. Das Original lebt auch durch die geschwungenen Linien. Das soll uns an dieser Stelle nicht interessieren.

Die Grundlage ist dieses Raster. Es ist ein Feld in der Mitte, das durch die horizontale Unterteilung noch statischer wirkt.
Klassische Einteilung eines Webdesigns

Klassische Einteilung eines Webdesigns
Die deutlich poppigere Farbvariation verändert den Eindruck. Es der grelle Balken hebt fast schon das schwere statische Panorama auf.

Siehe auch

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.

Es soll keiner sagen, animierte Gifs sind doof

tempa wrote this 22:59:

Rattenscharf ist diese Website, die Musik und animierte Gifs nutzt: Blaue Bälle

via Ehrensenf

Mal ketzerisch gefragt, wie stets denn mit der QuellenVia-Angabe bei Ehrensenf? Die werden ihre Quellen doch auch nicht aus einer göttlichen Eingebung schöpfen. Hmmm. Macht nichts.

Ich danke jedenfalls Claudia Reiser (meiner Tippgeberin), dass sie mich auf die Blauen Bälle aufmerksam machte. Entsetzlich fand ich die Horroreinlage auf worth1000 (Da sind ein paar Illustrationen dabei, die hätte ich gerne nicht gesehen.) Achtung! Ernst gemeinter Hinweis: Der folgende Link kann Phobiker die letzten Nerven kosten: Contest Phobien, ich jedenfalls schaue nicht noch einmal hin und amüsiere mich mit den blauen Bällen.

Die sind einfach gigantisch. Tschüss.

Mein mechanischer Freund liest

tempa wrote this 12:49:

Mein mechanischer Freund aus Bits und Bytes liest mir meine Worte vor. Und auch wenn er einen fürchterlichen Akzent hat. Aber das Ergebnis von aTalker beeindruckt:

Sprichst Du nur deutsch? … or do speak English as usual?(MP3) (1) und er hat auch eine Freundin (MP3) (2) und auch einen Hombre (MP3) (3), aber der kann nicht so gut Deutsch 😀

  1. [audio:http://templaterie.de/blog/wordpress/wp-content/data/atalkertest.mp3] ←| mech. Freund
  2. [audio:http://templaterie.de/blog/wordpress/wp-content/data/atalkerlady.mp3] ←| die Lady
  3. [audio:http://templaterie.de/blog/wordpress/wp-content/data/atalkerhombre.mp3] ←| der Hombre

Und noch ein kleiner Quiz, passend zur Fundstelle:
Welches deutsche Wort kann der britische Kollege nicht einordnen und behilft sich daher mit einem Trick? (MP3) (1)
Nagut, ich helfe etwas mit der neuen deutschen Rechtsschreibreform: Das Wort nach der NDRF (MP3) (2)

  1. [audio:http://templaterie.de/blog/wordpress/wp-content/data/raetsel.mp3] ←| Rätsel
  2. [audio:http://templaterie.de/blog/wordpress/wp-content/data/raetselNDRF.mp3] ←| Rätsel NDRF

    Gefunden habe ich den kleinen Vorleser auf aTutor

Nachtrag: Ich habe mich nun für den Audio-player von 1 Pixel out entschieden, da dieser Player sich dem Design per Formular anpassen lässt. 😉

Der andere Player Owen Winkler, den mir Robert freundlicher Weise zu gemailt hat, habe ich nun auch im Netz gefunden, nachdem der Link bei Robert im Nirvana landete. Unter RedAlt gibt es auch den anderen Flashplayer WP-Plugin und .Fla um das Design anzupassen (dafür muss man leider Flash haben.).

Software-Tutorial mit Wink

tempa wrote this 22:07:

Eben ist mein erster Test mit Wink fertig geworden. Leider aktuell ohne Ton, da ich feststellen musste, dass offensichtlich das Mikro seinen Geist aufgegeben hat. Pech. Das Ergebnis ist fett mit fast 2MB im
Data-Order abgelegt. So gesehen ist es wohl ein Segen, dass das Mikro defekt ist. 😀
Wink-Test: Editland — Seite einfügen.

Das Tool ist nicht schlecht zumindest, finde ich das Ergebnis für den ersten Versuch schon ganz ordentlich. Nun muss ich noch zusehen, dass die Back und Vorwärts-Schaltflächen etwas aufgehübscht werden und noch habe ich auch nicht alle Optionen durchgeklickert.

Thema meines ersten Tests ist: „Wie füge ich in Editland eine Seite ein.“ 🙂 Logisch. Was sonst?

CSS-Navigation leicht gemacht

Claudia Reiser wrote this 10:58:

Wer sich nicht damit quälen will, eine listenbasierte css-Navigation selbst zu machen, der findet im Internet viele Helferlein und Generatoren, die einem einen Grossteil dieser Arbeit abnehmen. Ein sehr flexibler und mächtiger Generator ist der List-u-Like CSS Generator von brothercake, der auch sonst einige interessante Tools entwickelt hat, erfreulicherweise immer mit dem Augenmerk auf Standards und Accessibility.

Wie markiert man eigentlich externe Links?

tempa wrote this 19:12:

Weil ich heute am Telefon gefragt wurde habe ich die Frage zum Anlass genommen, mal wieder das Webhandbuch der Templaterie zu erweitern. Wie würde eine automatisierte Kennzeichnung in Editland funktionieren? Fangen wir erst einmal mit dem Pluginplan an:
Pluginplan
Vorab sollte man sich noch einmal die funktionsweise von Editland und Plugins vor Augen führen:
Plugins in Editland einbinden und nun halten wir uns vor Augen dass Editland das Template zeilenweise abarbeitet und damit zunächst einmal das Plugin abarbeitet, wenn er auf einen entsprechenden Platzhalter trifft. Noch ohne PHP-Code ist dieser Plan nun auch im Webhandbuch: Externen Linkmarker per PHP in Editland setzen

Hat man seinen Plan soweit fertig, dann beauftrage ich die PHP-Programmiererin Claudia Reiser (Sie hat schon viele Plugins für Editland gefertigt.). Man kann auch eine CSS-Lösung wählen. Aber Achtung für den IE benötigt man Javascript. Ryan Brill: Externe Links kennzeichnen mit Selektoren (en).

In Editland gibt es dann noch die Hand-am-Arm-Methode. Diese ist sehr einfach realisiert und man kann in Editland integrierte Funktionen nutzen. Man verwendet hierfür die Funktion XtraKlassen und führt über die Datei xtraclasses.txt im Template-Ordner eine Klasse für externe Links ein. Dann muss der User externe Links über Schriftstile in der Lasche der Fernbedienung den Link kennzeichnen.

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.

Kurznotiz: Javascript debuggen vereinfachen

tempa wrote this 02:16:

Aaron: Debugging JavaScript just got a little bit easier … Aaron hat ein Script geschrieben, das alle möglichen Meldungen in einen Div in der Seite wegschreibt und so die Fehlersuche erleichtert.

Irgendwann fang ich auch noch mit Javascript an zu programmieren und wer weiß … und dann weiß ich aus sicherer Quelle, dass jemand anderes diese, Hinweis gerne nachgeht. 😉

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