technische Lösungshinweise bzgl. "feste Anzeigebreite"?

[Sven Rautenberg]

Moin!

Hier mal die Argumente der "Gegenseite" (allerdings handelt es sich bei unserem System um ein CMS-basierendes, wo es vielleicht bestimmte technische Beschränkungen gibt, was ich nicht beurteilen kann):

Ob CMS oder nicht ist für die Umsetzung in HTML bzw. dessen Variabilität irrelevant. Derartige Argumente zählen nicht unbedingt.

Hauptargument für diese Auflösung ist das einheitliche Design. Würde man zulassen, dass sich das Design in der Breite anpasst, dann würden sich z.B.

• im Kopfbereich unterschiedlich große Zwischenräume zwischen den Links und den Symbolen ergeben,

Das ist richtig - hängt allerdings stark vom Design ab. Wenn dieses keinen "Platz" bietet, mit dem man dynamisch mehr oder weniger Raum füllen kann, dann ist das natürlich blöd.

Gegenargument wäre, dass bei festem Design und ungünstiger Fenstergröße Links und Symbole außerhalb des sichtbaren Bereich angezeigt würden, und man horizontal scrollen müßte.

• die Textbreite im Contentbereich im Zweifel so weit auseinandergezogen, dass ein gestalterisch auf 6 Zeilen geschriebener Text plötzlich nur noch 2,5 Zeilen hat,

Ja, so ist das. Das Problem hat man immer, wenn man Text tatsächlich als Text in den HTML-Code einbaut, und nicht als Grafik. Weil beim Benutzer die gewünschte Schriftart nicht installiert ist, und der Ersatz ganz andere Laufweiten hat.

Gegen zu breite Ausdehnung kann man sich (außer im IE) mit der Angabe einer maximalen Breite per CSS "wehren" (ebenso gegen zu schmale Spalten). Die Tatsache, dass der IE hier versagt, verhindert leider viele Möglichkeiten der flexiblen Gestaltung.

• auf den Verteilerseiten, von wo aus man sich die verschiedenen Themen holt die verschiednen Themen auseinanderziehen, die zugehörigen Kurzbeschreibungen ggf. auf einer halben Zeile dargestellt.

Dasselbe Problem wie oben. Wer Text nicht als Grafik generiert ausgibt, der riskiert bei Browsern immer Umformatierungen. Und sofern sich auch nur ein einziger unwissender Redakteur ans CMS dransetzt, ist sowieso nichts mehr, wie geplant. Bzw. auch wissende Redakteure können bei gewissen Sachen einfach nichts machen, weil HTML nun einmal keine Ausdruckbeschreibungssprache ist, die alles millimetergenau festlegt, sondern mit Absicht dynamische Anpassung erlaubt.

Grundsätzlich könnten wir kein fixes Design einhalten, da man ja dann eine Anpassung für alle möglichen Auflösungen benötigte, was z.B. bei einer 1400er-Auflösung sicher eher SCH..... aussieht (Sorry...)

Grafiken sind in der Tat ein Problem, weil die sich nicht dynamisch mitskalieren lassen - oder dann bescheiden aussehen. Hintergrundbilder lassen sich (derzeit) garnicht skalieren. Man hat also bei solchen Dingen immer mit Problemen zu kämpfen - eben genau deshalb sollte man das ja beim Design berücksichtigen. Es ist leider so, dass nicht alles geht. Erwähnte ich schon die Unfähigkeiten des IE hinsichtlich min-width und max-width? min-width kann man noch hinbiegen, max-width wird schwierig.

Auch hätte man ggf. Probleme mit der Übersichtlichkeit der Seite, wenn diese plötzlich auf fast doppelter Breite die gleichen Inhalte darstellt.

max-width wäre für sowas die Lösung. Denn natürlich ist es doof, wenn eine auf 800er-Auflösung optimierte Zeilenbreite (und in diesem Fall soll das Wort "optimiert" mal im Wortsinne gelten) plötzlich mit 1600er-Auflösung angezeigt wird. Das kann man dann nur noch sehr schlecht lesen.

Cross-Browserkompatibilität: Man müßte (insbesondere für Netscape 4.x) dann ggf. mit einer ganzen Reihe vopn Templatevarianten arbeiten, damit die Darstellung auf allen Browsern einigermaßen gleich ist ==> erheblicher Mehraufwand.

Ja, Netscape 4 als konkreter Browser ist in der Tat bei dynamischem Design ein Mehraufwand. Netscape 4 ist aber bei jedem Design ein Mehraufwand, wenn man CSS ausgiebig einsetzt. Das ist also kein Argument gegen dynamisches Design, sondern gegen Netscape 4 - der Gott-sei-Dank in freier Wildbahn immer seltener anzutreffen ist.

Die Lösung dafür ist: Man verzichtet einfach für diesen Browser auf ein identisches Design, sondern wählt eine stark vereinfachte Variante der Darstellung, die die Benutzbarkeit der Site sicherstellt. Oder macht sich komplett gar keine Gedanken mehr darüber.

Darüber hinaus wird diese Auflösung bei sehr vielen wichtigen großen Portalen (Spiegel, MSN, etc.) eingesetzt. Andere Portale arbeiten zwar ggf. mit einer1024er-Auflösung, jedoch wird auch diese fix eigestellt und passt sich nicht in der Breite an (z.B. Focus, Stern, etc.). Allen gemeinsam ist die Tatsache, dass man ein fixes Design einhalten möchte.

Dass andere Seiten mit schlechtem Beispiel vorangehen, kann ja nicht Argument sein, selber den gleichen Fehler zu machen.

Von euch Fachfrauen und -männern hätte ich nun gerne Lösungsansätze/Tipps, wie man es vielleicht (ohne mehrere Templates für verschiedenen Auflösungen) realisieren könnte, dass z.B. Text eben nicht ellenlang auseinandergezogen wird bzw. die Proportionen einigermaßen stimmig bleiben könnten. Oder hat dann einfach das falsche Design gewählt ;-) (siehe Link)

Die Seite "potsdam-mittelmark" hat ganz sicher ein dynamisch in der Breite anpassbares Design. Es gibt keine Hintergrundbilder, es gibt keine kritischen Großgrafiken, die ansonsten kacheln würden, es gibt eigentlich nichts, was das verhindern würde.

Allerdings ist sowas natürlich mit Tabellendesign nur schwer umzusetzen. Tabellendesign ist erstens "von gestern" und zweitens eher klassisch fixiert, als dynamisch. Der Grund liegt ganz einfach darin, dass man die einzelnen Tabellenspalten einer Tabelle nur entweder dynamisch (Prozentbreiten) oder in festen Pixeln angeben kann. Und da dynamische Tabellen dann die Prozente mit Pech auch noch je Browser unterschiedlich runden, hat man von Dynamik bei Tabellenlayouts eben ganz einfach Abstand genommen.

Die Alternative sind CSS und DIV-Layer. Wobei die Realisierung wirklich simpel ist. Du hast oben einen Header, links einen Inhaltsblock, in der Mitte den Content, und unten drunter einen Abschlußblock. Sowas in CSS zu machen, insbesondere dieses Design grob umzusetzen, würde mich schätzungsweise zwei bis vier Stunden kosten. Und dann wäre es mutmaßlich im Content-Bereich flexibel, auf Wunsch auch im linken Teaserblock.

Der Trick ist, mit den "passenden" Hintergrundgrafiken und -farben zu arbeiten. An den restlichen Template-Elementen müßte man dann sogar kaum was ändern, sofern man das nicht ändern will. Beispiel:

Der Teaserblock jetzt:

<table cellspacing="0" cellpadding="0" border="0" width="565">               <tr>                 <td width="10"><img src="/images/arrow_headline.gif" border="0" width="10" height="12"></td>                 <td class="headline" width="555"><img src="/images/trans.gif" border="0" width="1" height="1">Brandenburger Frauenwoche in Potsdam-Mittelmark</td>               </tr>               <tr>                 <td colspan="2" height="2"><img src="/images/trans.gif" border="0" width="1" height="3"></td>               </tr>               <tr>                 <td width="1" class="split" colspan="2"><img src="/images/trans.gif" border="0" width="565" height="1"></td>               </tr>               <tr>                 <td colspan="2" height="2"><img src="/images/trans.gif" border="0" width="1" height="3"></td>               </tr>               <tr>                 <td height="85"><img src="/images/trans.gif" border="0" width="10" height="85"></td>                 <td height="85">                 <table cellspacing="0" cellpadding="1" border="0" width="555" height="85">                   <tr>                     <td valign="top" width="422">Das Programm der Frauenwoche in Potsdam-Mittelmark reicht von einer Fotoausstellung über Regine Hildebrandt, Diskussionsrunden und Kabarett bis hin zu Fachvorträgen und einer groÃen Abschlussveranstaltung am 13. März 2004 im Gemeindezentrum Stahnsdorf.  <a href="/14074.aspx">mehr >></a></td>                     <td width="8"><img src="/images/trans.gif" border="0" width="8" height="1"></td>                     <td valign="top" bgcolor="#C9C9C9">                       <table cellpadding="1" cellspacing="0" border="0" width="125" height="85">                         <tr>                           <td><img src="/images/home040223.jpg" alt="Frauenportraits" border="0" width="123" height="83"></td>                         </tr>                       </table>                     </td>                   </tr>                 </table>                 </td>               </tr>               <tr>                 <td colspan="2" height="2"><img src="/images/trans.gif" border="0" width="1" height="13"></td>               </tr>             </table>

Der würde sich reduzieren lassen auf:

<h1>Brandenburger Frauenwoche in Potsdam-Mittelmark</h1> <p><img src="/images/home040223.jpg" alt="Frauenportraits" border="0" width="123" height="83">Das Programm der Frauenwoche in Potsdam-Mittelmark reicht von einer Fotoausstellung über Regine Hildebrandt, Diskussionsrunden und Kabarett bis hin zu Fachvorträgen und einer groÃen Abschlussveranstaltung am 13. März 2004 im Gemeindezentrum Stahnsdorf.  <a href="/14074.aspx">mehr >></a></p>

Den Rest würde ich per CSS lösen. Und das läßt sich per CSS lösen.

Sorry, wenn das oben alles etwas überheblich klingt. Ist mir durchaus bewußt. Aber ebenso bewußt sollte sein, dass diese Seite mit CSS - auch wenn sie dadurch statisch breit bleibt - erheblich gewinnen würde. Mindestens mal an Ladegeschwindigkeit! Sicherlich auch an Suchmaschinenfreundlichkeit und Barrierefreiheit. Da am Ende noch die flexible Breite unterzubringen, wäre wirklich nur das kleinste Detail.

- Sven Rautenberg