RE-Design – Enrico Reinsdorf

Artikel-Schlagworte: „Design“

Am Samstag habe ich eine 2tägige Schulung für Tools Communication gehalten. Da Tools bei Münster ihren Sitz haben, bin ich 2 mal ins schöne Münsterland gefahren.

Das besondere an dieser Schulung war, dass der erste Schulungstag von 4 Wochen und der zweite am letzten Samstag war. Es ist nicht gut so lange Pause zwischen diesen Terminen zu haben. In diesem Fall ging es zwar nicht anderes, aber es hat sich wieder mal gezeigt dass es nicht von Vorteil ist. Am 2. Seminartag haben wir fast 2 Stunden nur wiederholt – hätten jedoch die Zeit besser nutzen können.

Diesen Beitrag weiterlesen »

Von Montag bis Mittwoch war ich beim Solar-Verlag in Aachen und habe 6 Teilnehmerinnen eine Einführung in Dreamweaver CS3 gegeben. Es war eine sehr entspannte Schulung, weil das Klima im Verlag sehr harmonisch ist.

Die Schwierigkeit in der Schulung war, dass die Teilnehmerinnen bis dato nur mit Frontpage als Entwickler-Tool gearbeitet haben und somit viele neue Features des Webdesigns, wie z.B. das Layouten mit CSS nicht wirklich kannten. Deshalb haben wir gleichzeitig beim Erlernen von Dreamweaver auch noch eine Einführung in CSS und Standard HTML gemacht.

Seit ein paar Stunden ist WordPress 2.5 draußen, welches ich zum Anlass genommen habe meine Plugins zu überarbeiten und das gesamte System zu aktualisieren. Da es leider zur Zeit nur die englische Version gibt sind einige Begrifflichkeiten noch auf englisch, aber ich glaube das ich es demnächst auf deutsch umstellen kann.

Sehr gut finde ich das neue Design von WordPress, welches sich zur alten Version deutlich unterscheidet.

Diesen Beitrag weiterlesen »

Erst sollte ich nur als Gast-Referent bei der Erstellung eines Portals für Interface-Design mithelfen, welches aus Basis vom Joomla! umgesetzt werden sollte. Allerdings erkannten wir, Torsten Stapelkamp (Lehrbeauftragter in Köln), durch die Aufgabenliste für das Projekt, schnell das Joomla! nicht unbedingt das beste CMS dafür ist. Schließlich soll das Portal ein lebendiges Werk werden, welches sich durch viele aktive Mitglieder auszeichnet. Also beschlossen wir Drupal dafür einzusetzen.

Nebenbei stellte Torsten und ich fest, dass ich den Flash Advanced Unterricht für dieses Semester übernehmen kann. Also bin ich jetzt Dozent bei Macromedia und zeige den Studenten wie sie mit ActionScript, nen guten Interface und viel Gedult gute mobile bzw. Webanwendungen erstellen können.

Ich hoffe es klappt alles so wie ich es mir vorstelle.

Ein Buch welches mich in letzter Zeit exterm beeindruckt hat, ist Transcending CSS – Neue kreative Spielräume im Webdesign von Andy Clarke und Molly E. Holzschlag.

Bemerkenswert finde ich ihre Ansicht über die Abwärtskompatibilität von Browsern. Sie sind der Meinung, dass es ruhig erlaubt sein sollte die neuen Features der modernen Browser zu unterstützen, solange der Benutzer von älteren Browsern seine gewohnten Möglichkeiten behält.

Weiterhin haben sie in ihrem Buch verschiedene Print-Designs als Vorlage für Web-Designs genommen, was mich auf die Idee gebracht hat selber Print-Vorlagen im Web nachzubasteln.

Meine bisherigen Artikel findet ihr unter der Kategorie "Print-Design"

Während des Kurs bei VVA Kommunikation habe ich mir 2 neue Bücher angeschafft.

1. Die große Little Boxes-Box. Webseiten gestalten mit CSS. Grundlagen
2. Little Boxes, Teil 2. Webseiten gestalten mit CSS. Navigation, Inhalte, YAML & mehr

Letzte Woche habe ich bei Henkel AG ein Seminar über die verschiedenen Web-Technologien gehalten. Dabei habe ich ein Buch schätzen gelernt, welches ich zwar schon länger habe, aber nie so richtig eingesetzt habe. Ich rede von dem Buch "Das Website Handbuch. Programmierung und Design".

Diesen Beitrag weiterlesen »

Endlich durfte ich einmal ein Seminar geben, welches sich nicht nur an Anfänger bzw. Einsteiger richtet, sondern auch mal die fortgeschrittenen Themen behandelt. Bei der VVA Kommunikation in Düsseldorf habe ich über das KW Trainingszentrum ein zweiteiliges Seminar über die Möglichkeiten von CSS gehalten.

Diesen Beitrag weiterlesen »

In meinem letzten Artikel habe ich über die Probleme beim Import von externen CSS-Dateien berichtet. Nun habe ich eine vereinfachten Import gefunden, denn das Einbinden von bis zu 6 Dateien bläht nicht nur der Quellcode auf, sondern sieht auch irgendwie unübersichtlich aus.

Ich weiß, diese Idee ist nicht unbedingt die neuste, aber sie gefällt mir und deshalb schreibe ich darüber

Diesen Beitrag weiterlesen »

Gestern habe ich bei einem Projekt versucht über die @import-Regel in CSS externe Dateien nachzuladen und bin auf eine sehr interessant Problematik gestoßen.

Üblicherweise importieren ja fast alle Webentwickler und -designer ihre externen CSS-Dateien mit dem HTML eigenen Tag <link rel="stylesheet" href="path/to/file.css" type="text/css" />. Wenn man nur auch noch unterschiedliche Design für die verschiedenen Ausgabemedien einbinden möchte, erweitert man diesen Tag mit dem Attribute media="screen".

Um eine bessere Trennung im Design zu bekommen, benutze ich 2 CSS-Dateien. Eine für das Layout und eine für die Farben und die Typographie. Nun entsteht aber der unschöne Umstand, dass ich für jedes Ausgabemedium 2 externe Dateien einbinden muss. Wenn ich also für den Bildschirm, den Drucker und den mobilen Endgeräten jeweils ein Design entwerfen, so sind das insgesamt 6 externe CSS-Dateien, plus einer Normalisierungsdatei. All dies über den <link>-Tag zu machen, finde ich umständlich.

Schöner wäre es doch man könnte nur eine externe CSS-Datei einbinden und der Rest wird dann von ihr geladen. Dann sieht der Quellcode etwas aufgeräumter aus.

   1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

   2: <html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">

   3: <head>

   4: <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

   5: <title>RE-Design - CSS - @import</title>

   6: <style type="text/css">

   7: /*<![CDATA[*/

   8:  

   9: @import url('style/import.css');

  10:  

  11: /*]]>*/

  12: </style>

  13: </head>

Wenn man nun in der CSS-Datei die restlichen Dateien lädt, wäre ja alles in Ordnung.

   1: @import url('normalization.css');

   2:  

   3: @import url('screen_layout.css') screen;

   4: @import url('screen_design.css') screen;

   5:  

   6: @import url('print_layout.css') print;

   7: @import url('print_design.css') print;

   8:  

   9: @import url('handheld_layout.css') handheld;

  10: @import url('handheld_design.css') handheld;

Doch leider macht an dieser Stelle der Internet Explorer uns wieder einmal einen Strich durch die Rechnung. Denn der ignoriert die @import-Regel wenn sie mit dem Zusatz der Medienausgabe belegt wird. In diesem Fall würde also nur die Normalisierungsdatei geladen.

Interessant ist auch, dass mein über alles geliebter Opera-Browser nur die screen-Erweiterung versteht und die anderen ignoriert, was bedeutet: er druckt das Screendesign aus.

Fazit

Mein Fazit zu diesem Experimentes ist, dass ich leider wieder zurück zum <link>-Tag gehen muss, um eine volle Unterstützung aller Browser zu haben. Eigentlich schade, denn es ist doch eigentlich eine einfache und bequeme Art zu arbeiten.