Anmelden

Allgemeines

Ein Seitenlayout erhält durch seine HTML-Bestandteile und seine CSS-Definition das erforderlich Aussehen. Nun ist es aufgrund der vielfältigen Ausgabegeräte bzw. der Barrierefreiheit erforderlich das Aussehen für verschiedene Ausgabemedium zu optimieren.

  • Druckversion, PDF-Ausgabe
  • Textversion
  • mobile Version (Reduktion durch responsive Design)
  • Popup-Ansicht (Eliminieurng der Randbereich und Zwänge der Seitengröße)

Zu diesem Zweck müssen bei Umschaltung des Ausgabemedium entweder HTML-Bestandteile oder/und seine CSS-Definition umgeschaltet werden.

CSS-basierte Lösung

In den meisten Fällen genügt eine Umschaltung der CSS-Definition bzw. die Differenzierung nach Medien-Spezifikationen. Mittels der CSS-Definition können das Aussehen, die Positionierung bzw. die Sichtbarkeit der Elemente umfassend beeinflusst werden. Hierbei wird dieselbe Layoutdatei für mehrere oder alle Ausgabemedien verwendet.

In CELLstudio wird bei Umschaltung des Mediums üblicherweise die Variable $medium verwendet. Diese Variable bestimmt das class-Attribut des body-Tag in der Layoutdatei. Der Webdesigner erzeugt dann abhängig von diesem class-Attribut verschiedene CSS-Definitionen.

< body class="< %=$medium %>">

Folgende CSS-Definition entfernt den linken und rechten Randbereich in der Druckausgabe:

body.print div.left,
body.print div.right {
  display:none;
}

hhh

HTML-Optimierung

Unter bestimmten Umständen kann über die Möglichkeiten von CSS hinaus auch eine serverseitige Umschaltung der HTML-Bestandteile entweder durch bedingte HTML-Anweisungen oder durch separate Layoutdateien erforderlich oder sinnvoll sein.

  • Für eine mobile Version kommt es auf die Minimierung das Datenvolumens an, deshalb sollten nicht angezeigte Elemente garnicht erst übertragen werden.
  • Für die Druckversion kann ein Umschaltung des Gestaltungsrasters erforderlich sein. Bekanntlicherweise drucken ältere Browser nur eine Pixelbreite von 640px optimal auf eine A4-Seite. Das Gestaltungsraster der Druckversion sollte deshalb mit Prozentangaben arbeiten oder auf die  Pixelbreite 640px reduziert werden.

Auch ist es teilweise erforderlich, die Anordnung der Zellen und das "Rendern" der Zelleninhalte auf das Ausgabemedium abzustimmen. Dies liegt jedoch in Verantwortung der Erweiterungen für Zellentypen (ICmsCell) und Seitentypen (ICmsPage) und der und hat keinen Einfluss auf die Layoutdatei. Hierbei ist lediglich zu beachten, dass solche Erweiterungen auf bestimmte Ausgabemedien reagieren (z.B. screen, print oder text)

  • Für eine excellente Druckversion ist die Einbindung von höheraufgelöstem Bildmaterial sinnvoll. Ein Drucker hat eine größere Auflösung als ein Bildschirm. Bilder der Bildschirmauslösung zeigen beim Drucken immer typische Pixelrasterung.
body.print div.left,
body.print div.right
{
  display:none;
}
diese CSS-Definition entfernt den linken und rechten Randbereich in der Druckausgabe

hhghgfh

< body 
class="< %=$medium %>"
>
   
Top

Wir arbeiten mit Software von http://www.campus21.de.

Verantwortlich für angezeigte Daten ist der Webdomain-Eigentümer laut Impressum.

Suche