Beatrix: technische Lösungshinweise bzgl. "feste Anzeigebreite"?

Hallo,
leider konnte ich mich bei einem Projekt nicht für eine variable Anzeigebreite der Webseiten durchsetzen.
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):
----------------------------------------
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,
  • 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,
  • 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.
    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...) Auch hätte man
    ggf. Probleme mit der Übersichtlichkeit der Seite, wenn diese plötzlich auf
    fast doppelter Breite die gleichen Inhalte darstellt.
    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.
    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.
    -------------------------------------
    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)

Beatrix

  1. Hi Beatrix,

    eine Lösung ist mit verschachtelten Tabellen möglich, wobei im folgenden, einfachen Beispiel die Content-Zelle eine feste Breite von 500 Pixel hat, der Rest aber variablen bleibt und sich je nach CSS auf die Gesamtbreite ausdehnen kann...

    CSS:

    #lay-10 {
     width:100%;
    }
    #lay-10-10 {
     width:100%;
    }
    #lay-20 {
     width:500px;
    }

    HTML:

    <table id="lay-10" summary="Layout">
     <tr>
      <td>Layout Zelle 1</td>
      <td id="lay-10-10">
       <table id="lay-20" summary="Inhalt">
        <tr>
         <td>
          Content
         </td>
        </tr>
       </table>
      </td>
      <td>Layout Zelle 2</td>
     </tr>
    </table>

    1. hi beatrix

      nur meine meinung:

      was nutzt dir ne variable breite? wenn dann bei anderer auflösung laufend scrollen musst?

      wenn schon wirklich layout-gleich für alle (geht eh net, aber ähnlich) dann gehts nur mit verschieden css-stylesheets, und einem design, welches die 800/600 voll ausnutzen udn bei größerer auflösung die seite optisch gestaltet in die mitte setzt...

      verschidene css eben, weil schriftgröße, abstand etc ja je nach auflösung anders wirkt un dabstand anders ist...

      so denk ich mir das...
      und der content, tja, der kann doch immer gleich groß sein, also 500 breit und  z.b. 350 hoch (scrollbar???) ohne das es das design zerscheisst...

      gruß
      Gwolf, der sein passwort verloren hat *smile*

  2. Die aktuellen Templates von http://www.potsdam-mittelmark.de/ sind meiner Meinung nach ziemlich grauenvoll, z.B.:

    • Angabe des Doctype fehlt

    • veraltete HTML-Attribute wie z.B. marginwidth="0" marginheight="0" topmargin="0" leftmargin="0" sollten durch CSS ersetzt werden

    • Tags und Attribute sind mal groß, mal klein geschrieben (z.B. <script></SCRIPT>, was genau genommen fehlerhaft ist)

    • zur Datei-Struktur: was haben Javascript-Dateien im CSS-Verzeichnis zu suchen? (src="/css/openWindow.js")

    • die Tabellen-Struktur ist ziemlich aufgebläht und enthält allerlei Code-Suppe aus dem letzten Webdesign-Jahrhundert...

    Fazit: semantischer Müll

    1. Hallo,
      vielen Dank für deine Kritik.
      Ich werde es mal an die Verantwortliche weitergeben...

      Beatrix

      1. Bitte. Es war auch nicht böse gemeint und nicht gegen Dich persönlich!

  3. Hallo,

    leider konnte ich mich bei einem Projekt nicht für eine variable Anzeigebreite der Webseiten durchsetzen.

    Das ist Schade, vielleicht die falschen Argumente?

    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):

    Kann ich jetzt so auch nicht beurteilen, grundsätzlich sehe ich kein Problem. Ob es sich um statische Seiten oder CMS-basierende Seiten handelt im Endeffekt wird HTML ausgegeben das mit den gängigen Mitteln (CSS) auch entsprechend geformt werden kann.

    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.

    ARRGH! _DAS_ Dauerargument von Leuten die aus dem Printbereich kommen. Aus eigener Erfahrung kann ich Dir sagen das da noch bei einem Grossteil der "Entscheider" im Bereich Webdesign ein Paradigmenwechsel bevorstehen wird.

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

    So what? Selbst das kann man mit entsprechender CSS verhindern, gewusst wie.

    • 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,

    Man gebe dem Text im Contentbereich eine minimale und maximale Breite. Thema gegessen...

    • 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.

    Sorry, aber ich verstehe diesen Satz nicht, Du meinst wieder ein Darstellungsfehler? --> CSS

    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...) Auch hätte man ggf. Probleme mit der Übersichtlichkeit der Seite, wenn diese plötzlich auf fast doppelter Breite die gleichen Inhalte darstellt.

    Auflösung des Monitor != Grösse des Browserfensters

    Ich hab z.B. eine Auflösung von 1280x1024px, mein zur Fenstergrösse ist trotzdem nur 850x842px -> vgl. http://www.andredittmar.de/self/opera.png

    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.

    Falsch, wenn man davon ausgeht das es für einen User eines inzwischen ca. 6 Jahre alten Browsers i.O. geht wenn er zwar die Infos zu sehen bekommt aber halt nicht so wie auf einem IE6, Opera7 oder Mozilla1.4.
    In dem Fall reicht es aus eine eigene CSS-Datei anzulegen und diese entsprechend einzubinden.

    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.).

    Zumindest Spiegel und Stern sind auf eine Breite von 800px konzipiert.

    Allen gemeinsam ist die Tatsache, dass man ein fixes Design einhalten möchte.

    ACK, ist aber IMHO im Bereich Web nicht die wichtigste Prämisse...

    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.

    Ein gescheites Layout und massiver Einsatz von CSS kann da schon Wunder bewirken :-) Hilfe für die Umsetzung gibt es hier oder auf zahllosen Seiten zum Thema CSS, bzw. Bücher (von Erik Meyer u.a.)

    Oder hat dann einfach das falsche Design gewählt ;-)

    Da gibt es sicherlich eine Menge zu verbessern. Das fängt bei dem - in meinen Augen - nichtssagenden Logo und dem Bildchen links oben an und hört bei der Navigation auf (Stichwort: Usebility). Gerade bei solchen öffentlichen Portalen muss IMHO vom absoluten SuperDAU ausgegangen werden. Stelle Dir Deine Oma vor die seit 3 Monaten einen Inet-Anschluss hat und nun auf der Seite etwas finden soll.
    Dann gibts da noch das Totschlagargument Barrierefreiheit :-), gerade für öffentliche Seiten nicht wirklich unwichtig. Hab im Moment leider kein Lynx für eine Testfahrt zur Hand :-)

    Grüsse AndreD

    1. Hallo,

      Da gibt es sicherlich eine Menge zu verbessern. Das fängt bei dem - in meinen Augen - nichtssagenden Logo und dem Bildchen links oben an und hört bei der Navigation auf (Stichwort: Usebility).

      Wirst du wohl nicht unser "tolles" Logo beleidigen? Da hat mal jemand viel Geld dafür bekommen ;-)

      Leider ist es so, dass die Argumente der "Fachkräfte", sprich Design- und Programmierfirma als das Nonplusultra hingenommen werden und Meinung eines Seiteneinsteigers (als welchen ich mich in diesem Falle bezeichnen würde, denn Webseitendesign+gestaltung ist nur mein Hobby) keine Rolle spielt.

      Beatrix

      1. Hallo,

        Leider ist es so, dass die Argumente der "Fachkräfte", sprich Design- und Programmierfirma als das Nonplusultra hingenommen werden und Meinung eines Seiteneinsteigers (als welchen ich mich in diesem Falle bezeichnen würde, denn Webseitendesign+gestaltung ist nur mein Hobby) keine Rolle spielt.

        Es kommt in erster Linie auf den "Entscheider", also wohl Deinen Chef an. Es er kritisch genug sich auch mal eine zweite Meinung von einem Experten einzuholen oder nickt er einfach alles ab was von der Firma kommt? Aus eigener Erfahrung weiss ich wie das bei so einer "Design- und Programmierfirma", da fehlt oft der Wille zur Innovation und auch die Fähigkeit die eigenen Lösungen kritisch zu beleuchten.

        Du wirst vermutlich nichts an dem Dilemma ändern können. Ich kenne Deinen Chef jetzt nicht, falls Du aber mit dem mal auch unter 4 Augen reden kannst würde ich an Deiner Stelle mal Deine Bedenken äussern. Das wird fürs erste wohl nix bringen, vielleicht aber erinnert er sich im kommenden oder übernächsten Jahr an Deine Äusserungen und weiss es dann auch besser.

        Grüsse AndreD

        1. Hallo.

          Aus eigener Erfahrung weiss ich wie das bei so einer "Design- und Programmierfirma", da fehlt oft der Wille zur Innovation und auch die Fähigkeit die eigenen Lösungen kritisch zu beleuchten.

          Aus eigener Erfahrung kann ich dir sagen, dass dies kein branchenspezifisches Phänomen ist.
          MfG, at

  4. Hi,

    Du solltest Dich nicht nur auf feste Breitenangaben bei der Diskussion beschränken. Flexibilität fängt bei der Schriftgröße an, die sich auf diesen Seiten im IE nicht ändern läßt. Und da dies eine öffentliche Seite ist und diese noch etliche weitere Mängel in Bezug auf die geforderte Basrrierefreiheit aufweist, ist ohnehin in absehbarer Zeit ein Redesign angesagt.

    Flexibilität kann auch bedeuten, die Weiten passend zur Schriftgröße in em anzugeben. Hierdurch erhälst Du eine ganz andere Art von Flexibilität, die die genannten Probleme eben nicht aufweist. Vielleicht schaust Du hierzu mal auf meine Seite http://www.1ngo.de/web/em.html.

    freundliche Grüße
    Ingo

    1. hallo ihrs

      also minimale und maximale breite??? tja in der theorie, doch bis jetzt weder standard in den neueren browsern noch klappts wirklich..

      "em"=???
      naja, ich denke da zerschiesst du mehr im layout, weil du entweder selber ne grundfestgröße angeben musst oder eben auf  die im browser eingestellte größe abzielst - und da ist zwar für reine "lesetexte kein prob, doch von gestaltung, zudem noch "layoutgenau" als nach dem "printmuster" keine spur...
      und nur als info: wer wirklich layout-genaue websites will, kann dies nur über pdf realisieren -
      aber: zumindest ähnlich sollten sich die seiten schon sehen, egal mit welcher browsereinstellung und welchem browser und da sist mit "em" nie möglich - sorry

      und tschüss

      1. Hi,

        "em"=???
        naja, ich denke da zerschiesst du mehr im layout, weil du entweder selber ne grundfestgröße angeben musst

        klar. Aber wo sollte dabei ein Problem bestehen? Gerade em bietet sich an, um einen Textbereich mit annähernd gleicher Zeilchenanzahl pro Zeile zu erreichen. Zerschossen wird ein Layout eher bei Weitenangaben in px, die zur eingestellten Schriftgröße nicht passen.
        Anders gesagt: Wenn der Kunde - wie hier - explizit bestimmte Zeichen/Zeile wünscht, geht das _nur_ über em. Ok, im IE könnte man zwar die Änderung des Schriftgrades im Ansicht-Menü unterbinden, aber es wurde schließlich auch crossbrowsertauglichkeit verlangt.

        oder eben auf die im browser eingestellte größe abzielst - und da ist zwar für reine "lesetexte kein prob, doch von gestaltung, zudem noch "layoutgenau" als nach dem "printmuster" keine spur...

        pixelgenau zwar nicht, aber die Proportionen werden gewahrt und das Ergebnis kann sich durchaus sehen lassen. Wer eine größere Bildschirmauflösung kombiniert mit größerem Schriftgrad verwendet, wird im Ergebnis die Seite ungefähr so sehen, als wenn ein Print-Layout im Kopierer vergrößert würde.

        und nur als info: wer wirklich layout-genaue websites will, kann dies nur über pdf realisieren -

        oder über Grafiken mit allen Inhalten..;-)

        freundliche Grüße
        Ingo

    2. Hallo,
      vielen Dank für deinen wertvollen Hinweis. Mit em hatte ich mich bisher noch garnicht beschäftigt, werde ich wohl mal tun...

      Grüße Beatrix

  5. 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

    --
    "Habe den Mut, dich deines eigenen Verstandes zu bedienen!" (Immanuel Kant)
    1. Hallo Sven,
      nein das klingt gar nicht überheblich. Ich bin ja im Prinzip deiner Meinung, konnte leider nur nicht so gut argumentieren.
      Gerade mit den min-width/max-width gibt es jetzt ja theoretisch schöne Möglichkeiten, nur leider in der Praxis...
      Jetzt nach Abschluss des Projektes kam halt nochmal die Diskussion hoch, und ich wollte halt nochmal ein paar Tipps sammeln wenigstens für meine eigenen neuen Projekte, wo ich mich bemühe, relativ flexible Design-Muster zu verwenden.
      Leider sind es meist die Designer, die sich für eine feste Auflösung stark machen - es ist nun mal ein wenig aufwendiger, andere Lösungen zu realisieren.

      Viele Grüße
      Beatrix

      1. Moin!

        Leider sind es meist die Designer, die sich für eine feste Auflösung stark machen - es ist nun mal ein wenig aufwendiger, andere Lösungen zu realisieren.

        Es sind _immer_ die "Designer", die eine fixierte Lösung haben wollen. :) Aber mit dem entsprechenden Einfluß, den man natürlich haben muß, kann man sich diese Spezies dann doch etwas erziehen. Und natürlich gibt es auch einige Exemplare, die kein derartig abgefahrenes und deshalb un-dynamisierbares Layout haben.

        Was beim Design immer gerne vergessen wird, sind zwei Dinge:
        1. Eine Seite hat in der Realität immer unterschiedlich viel Textinhalt, wird also mal länger, mal kürzer sein.
        2. Das gilt auch für die Fenstergröße des Browsers.

        Und dann darf man sich bei der Umsetzung in HTML deswegen die Haare raufen.

        Andererseits: Einfach dynamisch umsetzen wäre ja auch möglich gewesen. Von Designern kriegt man immer nur fixe Vorlagen, auch wenn das Design dynamisch sein kann oder soll. Weil die alle mit Photoshop arbeiten. Soll einen selbst aber ja an nichts hindern. :)

        - Sven Rautenberg

        --
        "Habe den Mut, dich deines eigenen Verstandes zu bedienen!" (Immanuel Kant)
        1. Hallo.

          Von Designern kriegt man immer nur fixe Vorlagen, auch wenn das Design dynamisch sein kann oder soll.

          Hegen und pflegen: Du pflegst deine Vorurteile und ich hege eine Groll gegen dieselben.
          MfG, at

          1. Moin!

            Von Designern kriegt man immer nur fixe Vorlagen, auch wenn das Design dynamisch sein kann oder soll.

            Hegen und pflegen: Du pflegst deine Vorurteile und ich hege eine Groll gegen dieselben.

            Du hast meinen Satz nicht verstanden.

            - Sven Rautenberg

            --
            "Habe den Mut, dich deines eigenen Verstandes zu bedienen!" (Immanuel Kant)
            1. Hallo.

              Von Designern kriegt man immer nur fixe Vorlagen, auch wenn das Design dynamisch sein kann oder soll.

              Hegen und pflegen: Du pflegst deine Vorurteile und ich hege eine Groll gegen dieselben.

              Du hast meinen Satz nicht verstanden.

              Ohne Erläuterung tendiert der Nährwert dieser Aussage gegen Null.
              MfG, at

              1. Moin!

                Von Designern kriegt man immer nur fixe Vorlagen, auch wenn das Design dynamisch sein kann oder soll.

                Hegen und pflegen: Du pflegst deine Vorurteile und ich hege eine Groll gegen dieselben.

                Du hast meinen Satz nicht verstanden.

                Ohne Erläuterung tendiert der Nährwert dieser Aussage gegen Null.

                Ok. Erläuterung: Deine Aussage bezüglich irgendwelcher scheinbar vorhandenen Vorurteile meinerseits erachte ich als gegenstandlos deswegen, weil du den tatsächlichen Sinn meiner zuoberst angeführten Aussage nicht so erfaßt und verstanden hast, wie sie gemeint ist und zu lesen steht. Dies insbesondere im Hinblick auf den Kontext, in dem ich diese Aussage getroffen habe.

                Denn du hast die nachfolgenden zwei Sätze unterschlagen. Die da lauten: "Weil die alle mit Photoshop arbeiten. Soll einen selbst aber ja an nichts hindern. :)"

                Da ich dir an dieser Stelle keinen Interpretationsspielraum lassen will, erläutere ich es dir bis ins letzte Detail:

                Es entspricht meiner Praxiserfahrung, dass Designer von Webseiten ein pixelorientiertes Grafikprogramm benutzen. Photoshop als Standard wird gerne verwendet. Dieses Photoshop hat den entscheidenden Nachteil, dass man darin keine auflösungsunabhängige Browserfensteranpassung simulieren kann. Also kriegt der mit der Umsetzung in HTML beauftragte Programmierer vom Designer immer eine pixel-fixe Vorlage.

                Dass man natürlich als Designer absichtlich Dynamik in ein Design einbringen kann, oder diese Option unabsichtlich trotzdem erlauben, indem man das Design einfach günstig gestaltet, ist davon absolut nicht beeinflußt.

                Und der Abschlußsatz soll implizieren, dass der mit der Umsetzung in HTML beauftragte Programmierer sich eben durchaus die Freiheit herausnehmen sollte, ein fix in Photoshop vorliegendes Design dynamisch umzusetzen. Weil: Er kann ja (schlaue Idee) gar nicht wissen, ob das Design fix ist oder dynamisch, weil er kein Unterscheidungsmerkmal erhält - Designer liefern immer nur fixe Pixel.

                So, und nun darfst du bitte erklären, was da jetzt für Vorurteile meinerseits im Spiel sind, und welchen Groll du gegen dieselben hegst.

                Aber bitte ausführlich. Ich hab schließlich jetzt auch 7 Absätze geschrieben.

                - Sven Rautenberg

                --
                "Habe den Mut, dich deines eigenen Verstandes zu bedienen!" (Immanuel Kant)
                1. Hallo.

                  Da ich dir an dieser Stelle keinen Interpretationsspielraum lassen will, erläutere ich es dir bis ins letzte Detail:

                  Danke, das ist nett.

                  Es entspricht meiner Praxiserfahrung, dass Designer von Webseiten ein pixelorientiertes Grafikprogramm benutzen.

                  Ich kenne hinreichend viele, die dies nicht tun.

                  Photoshop als Standard wird gerne verwendet. Dieses Photoshop hat den entscheidenden Nachteil, dass man darin keine auflösungsunabhängige Browserfensteranpassung simulieren kann. Also kriegt der mit der Umsetzung in HTML beauftragte Programmierer vom Designer immer eine pixel-fixe Vorlage.

                  Mit drei bis vier "Screenshots" lässt sich aber schon recht gut erkennen, welche Elemente bei Platzmangel oder -überfluss in welche Richtung wandern, schrumpfen, wachsen oder dies eben nicht tun. Die Gestalter in meinem Umfeld, die tatsächlich ein pixel-orientiertes Werkzeug verwenden, arbeiten so.

                  So, und nun darfst du bitte erklären, was da jetzt für Vorurteile meinerseits im Spiel sind, und welchen Groll du gegen dieselben hegst.

                  Die Möglichkeit, zwei oder drei "Screenshots" mehr anzufertigen, hättest du in Betracht ziehen können. Wie ich finde, liegt sie nahe. Bei anderen hätte ich mich wahrscheinlich auch gar nicht darüber beschwert, aber inzwischen bin ich eigentlich gewohnt, dass du die Dinge etwas besser überblickst als einige andere hier.

                  Aber bitte ausführlich. Ich hab schließlich jetzt auch 7 Absätze geschrieben.

                  Ich glaube nicht, dass es hier die Masse macht, aber lasse mich wissen, wenn dir meine Ausführungen zu dünn sind ;-)
                  MfG, at

                  1. Moin!

                    Es entspricht meiner Praxiserfahrung, dass Designer von Webseiten ein pixelorientiertes Grafikprogramm benutzen.

                    Ich kenne hinreichend viele, die dies nicht tun.

                    Was benutzen die dann? Doch nicht etwa ein vektororientiertes Grafikprogramm? Und was würde das qualitativ ändern?

                    Photoshop als Standard wird gerne verwendet. Dieses Photoshop hat den entscheidenden Nachteil, dass man darin keine auflösungsunabhängige Browserfensteranpassung simulieren kann. Also kriegt der mit der Umsetzung in HTML beauftragte Programmierer vom Designer immer eine pixel-fixe Vorlage.

                    Mit drei bis vier "Screenshots" lässt sich aber schon recht gut erkennen, welche Elemente bei Platzmangel oder -überfluss in welche Richtung wandern, schrumpfen, wachsen oder dies eben nicht tun. Die Gestalter in meinem Umfeld, die tatsächlich ein pixel-orientiertes Werkzeug verwenden, arbeiten so.

                    Ja gut. Mehrere pixelfixe Designs erklären dann also, wie die Dynamik umgesetzt werden soll. Das ist ein Plus, aber nicht zwingend notwendig. Zuallererst muß das Design dazu grundsätzlich fähig sein.

                    Und wenn es das ist, dann ist es mir herzlich egal, ob ich da nun einen oder zehn Pixelentwürfe habe. Bei nur einem Entwurf muß der Designer damit leben, dass ich bestimme, wo was hinwandert. Was die Sache für mich leichter macht, weil ich dann den leichtesten Weg gehen kann. :)

                    So, und nun darfst du bitte erklären, was da jetzt für Vorurteile meinerseits im Spiel sind, und welchen Groll du gegen dieselben hegst.

                    Die Möglichkeit, zwei oder drei "Screenshots" mehr anzufertigen, hättest du in Betracht ziehen können. Wie ich finde, liegt sie nahe. Bei anderen hätte ich mich wahrscheinlich auch gar nicht darüber beschwert, aber inzwischen bin ich eigentlich gewohnt, dass du die Dinge etwas besser überblickst als einige andere hier.

                    Danke. Aber mehr Screenshots sehe ich nicht als notwendige Bedingung an, eine dynamische HTML-Umsetzung zu erstellen. Es ist vielleicht hilfreich - aber dennoch dem Grunde nach statisch. Sowas klärt man, wenn, dann im Gespräch. Nicht mit statischen Screenshots. Weil man dann eine Vorstellung entwickeln kann, wie sich die Seite verändern könnte.

                    Im Prinzip gibt es da allerdings kein wirkliches Geheimnis. Eine Seite sollte so lang werden dürfen, wie Inhalt da ist, und so breit, wie Browserfenster da ist. Solange die Browserfensterbreite nicht "sehr breit" ist (was ich mal mit Breiten über 1280px abgrenzen will), oder sehr schmal (kleiner 800px), ist das alles kein großes Problem. Spannend wird die Sache eigentlich immer dann, wenn übermäßige Abweichungen von der Norm (ein 1024er-Fenster ist ziemlich häufig) zusammentreffen mit unzureichenden Browsern (der IE kann eben kein min-width und max-width).

                    - Sven Rautenberg

                    --
                    "Habe den Mut, dich deines eigenen Verstandes zu bedienen!" (Immanuel Kant)
                    1. Hallo.

                      Was benutzen die dann? Doch nicht etwa ein vektororientiertes Grafikprogramm? Und was würde das qualitativ ändern?

                      Die simpelste Methode sind Textblöcke und grafische Elemente repräsentierende Papier- oder Karton-Schnipsel in unterschiedlichen Farben -- gern auch in Kombination mit einem einzelnen Schreenshot, und der wieder gern aus einem vektor-orientierten Programm, da die meisten mir bekannten Grafiker und Layouter darin ein ein besseres Werkzeug für Layout-Arbeiten sehen. Oder kann Photoshop inzwischen etwa mehrere Objekte gleichmäßig auf einer Fläche verteilen?

                      Ja gut. Mehrere pixelfixe Designs erklären dann also, wie die Dynamik umgesetzt werden soll. Das ist ein Plus, aber nicht zwingend notwendig. Zuallererst muß das Design dazu grundsätzlich fähig sein.

                      Ja, das ist eine Frage der Denkweise des Gestalters und somit von gar keiner Technik abhängig, sondern von seinem Verständnis des Mediums. Aber was nutzt das Verständnis, wenn ich es hinterher nicht erklären kann. Und das eine Reihe von Bildern hier mehr sagt als die berühmten tausend Worte, sollte mit zunehmender Entfernung der Gesprächspartner aus Gestaltung und Produktion deutlicher werden.

                      Und wenn es das ist, dann ist es mir herzlich egal, ob ich da nun einen oder zehn Pixelentwürfe habe. Bei nur einem Entwurf muß der Designer damit leben, dass ich bestimme, wo was hinwandert. Was die Sache für mich leichter macht, weil ich dann den leichtesten Weg gehen kann. :)

                      Ich will gar nicht darüber streiten, ob der für den ausführenden Entwickler einfachste Weg tatsächlich das beste Ergebnis zu Tage fördert. Aber einem Gestalter ist im Regelfall kaum daran gelegen, dir einen besonders großen Spielraum zu lassen. Und wenn du ihn mit zu viel Kreativität überraschst, muss dies weder dem Ergebnis, noch dem Arbeitsverhältnis gut tun. Insoweit ist eine Reihe von "Screenshots" durchaus hilfreich, wenngleich sie natürlich einengt.

                      Danke. Aber mehr Screenshots sehe ich nicht als notwendige Bedingung an, eine dynamische HTML-Umsetzung zu erstellen. Es ist vielleicht hilfreich - aber dennoch dem Grunde nach statisch. Sowas klärt man, wenn, dann im Gespräch. Nicht mit statischen Screenshots. Weil man dann eine Vorstellung entwickeln kann, wie sich die Seite verändern könnte.

                      Da ich auf den Rest ja schon eingegangen bin, beziehe ich mich nur auf den letzten Satz: Der Gestalter sollte sich diese Gedanken bereits im Vorfeld gemacht haben. So wie er bei einem Foto einen guten Ausschnitt sucht, Schriftarten anhand von bestimmten Kriterien sucht etc., sollte er in der Lage sein, sich durch mehr oder minder simple Skizzen ein Bild von der geplanten Web-Präsentation im Kontext unterschiedlicher Hard- und Software-Konstellationen zu machen. Wenn dies erst im Gespräch mit dem Entwickler stattfindet, dann handelt es sich bei dem Entwerfer vielleicht um einen begnadeten Künster, aber sicher um keinen guten Gestalter. Solltest du tatsächlich mit solchen Leuten zusammen arbeiten müssen, tätest du mir aufrichtig leid. Dann könnte ich allerdings dein Urteil über diese Gruppe der Web-Designer nachvollziehen.

                      Im Prinzip gibt es da allerdings kein wirkliches Geheimnis. Eine Seite sollte so lang werden dürfen, wie Inhalt da ist, und so breit, wie Browserfenster da ist. Solange die Browserfensterbreite nicht "sehr breit" ist (was ich mal mit Breiten über 1280px abgrenzen will), oder sehr schmal (kleiner 800px), ist das alles kein großes Problem. Spannend wird die Sache eigentlich immer dann, wenn übermäßige Abweichungen von der Norm (ein 1024er-Fenster ist ziemlich häufig) zusammentreffen mit unzureichenden Browsern (der IE kann eben kein min-width und max-width).

                      Dies kommt sehr auf die gesamte Gestaltung der Seiten an, aber für typisch linear text-orientierte Seiten gebe ich dir sicher Recht. Das eigentliche Problem sehe ich darin, dass Gestalter aus eben dieser Form gern auszubrechen versuchen. Seiten, deren Elemente durchgängig horizontal angeordnet sind, sind da sogar noch vergleichsweise harmlos.
                      MfG, at

  6. Hallo Beatrix

    leider konnte ich mich bei einem Projekt nicht für eine variable Anzeigebreite der Webseiten durchsetzen.

    Zeig ihnen doch einmal folgenden Screenshot (75K) http://d-graff.de/demos/selfhtml/potsdam.gif
    (Vollbild, Bildschirmauflösung 1024x768)

    Meiner Mutter, die sich zu ihrem 70 Geburtstag einen Computer geleistet hat, ist die Schrift viel zu klein. Aber nützt ihr auf dieser Seite die Schriftvergrößerung?

    MFG
    Detlef

    --
    - Wissen ist gut
    - Können ist besser
    - aber das Beste und Interessanteste ist der Weg dahin!
    1. Hi,

      Zeig ihnen doch einmal folgenden Screenshot

      gute Idee, vielleicht hilft's ja.
      Und falls das Argument kommt, daß die meisten mit dem IE surfen und hier nichts passieren kann, hätte ich auch noch ein abschreckendes Beispiel: http://www.isis.de/members/~iturski/tests/potsdam.jpg

      Auch wenn ich noch keine 70 bin, ist mir die Schrift viel zu klein, so daß ich auf jeden Fall die Schrift vergrößern würde. Nur bei solchen Seiten sollte man wohl besser die Finger davon lassen und eine schöne große Lupe suchen..;-)

      freundliche Grüße
      Ingo

      1. Hallo Ingo Turski

        Und falls das Argument kommt, daß die meisten mit dem IE surfen und hier nichts passieren kann,

        dann bedeutet dies doch, dass die Seitenentwickler ganz bewusst und absichtlich ältere (oder aus anderen Gründen nicht so gut sehende Mitmenschen) von diesen Seiten ausschließen wollen.

        Dieses Argument würde aus (vielleicht verzeihlichen) Designfehlern bewusste böswillige Ausgrenzung machen!

        MFG
        Detlef

        --
        - Wissen ist gut
        - Können ist besser
        - aber das Beste und Interessanteste ist der Weg dahin!