Raffi: Wie kann ich diese Seite für 1024x768 und 800x600 erstellen

Die Lage ist folgende:

Ein Kunde hat bei einem andern Webdesigner diese Seite erstellen lassen.

Jetzt wünscht er von mir, dass sich diese Seite der Bildschirmauflösung anpasst, und sich auch beim Verkleinern des Browserfensters anpasst.

Wie kann ich das machen?

URL: http://www.herisau.com/app/pyrotech/index.asp

Gruss
Raffi

  1. Hallo Raffi,

    was du kannst und was du nicht kannst, solltest du genau wissen, _bevor_ du irgendwelche Aufträge annimmst!

    CYa
    GONZO

    1. Hallo GONZO,

      war das jetzt ein hilfreicher Beitrag? Wohl eher ein Ausrutscher, wie er im Forum glücklicherweise nicht so häufig vorkommt.

      Andreas

      <------------------------------------------>

      Hallo Raffi,

      man braucht nicht immer einen Auftraggeber auf heftige Probleme zu stoßen. Seit ich meine eigene Seite hier zur Bewertung und Kritik vorgestellt habe, habe ich auch mehr neue Probleme (programmtechnischer Natur)als ich mir hätte vorstellen können.
      So hatte ich im Gegensatz zu Deiner Seite nicht 800x600 als Grundeinstellung, sondern 1024x768. Und promt war der Haupteil der Besucher aus dem Forum aufgrund zusammengerückter Menüs etc. garnicht mehr in der Lage brauchbar zu navigieren. So arbeite ich also eigentlich an dem selben Problem (mit der Zusatzaufgabe soweit möglich "abwärtskompatibel" w3c-konform zu programmieren.

      Aber nur an den gelösten Problemen wächst man. (Gab's mal 'nen Spruch, der ob seiner Herkunft heute leider verpönt ist, den ich aber trotzdem treffend finde: Was einen nicht umbringt, macht einen nur stärker.)

      Doch zurück zum Thema. Ich denke es ist möglich eine Anpassung an verschiedene Bildschirmauflösungen zu realisieren.

      Start mit Abfrage und dann verzweigen
      <script language="javascript">
      <!--
      //Dieses Skript stammt von Michael Mailer‚s JavaScripts
      //URL: http://www.webaid.de/js  --  eMail: mm@webaid.de
      //Bitte   entfernen   Sie   diesen   Vermerk   nicht  !

      ScreenRes = screen.width;
      if(ScreenRes == "1280") res = "r1";
      else if (ScreenRes == "1024") res = "r2";
      else if (ScreenRes == "800") res = "r3";
      else if (ScreenRes == "640") res = "r4";

      if (res == "r1") {
          location.href="start1280.htm";  
          }
      if (res == "r2") {
          location.href="start1024.htm";  
          }
      if (res == "r3") {
          location.href="start800.htm";  
          }
      if (res == "r4") {
          location.href="start640.htm";  
          }
      //-->
      </script>

      Die Speicherplatzintensive aber programmsparende Lösung führt dann für jede Auflösung in einen anderen Pfad auf eine andere Hompage.

      Zwar editier/kovertier-intensiv aber prog-technisch eher trivial.

      Der andere Weg führt meiner Meinung nach über komplette Programmierung in JS oder, fällt mir gerade ein, Komplett CSS-gestützte Formatierung , da dabei die Relativierung aller Abstände kein Problem sein dürfte. Dann ist allerdings die Kompatibilität (speziell abwärts)ein Problem. Und soviel ich weiß (ich verwende OPERA 3.62) ist die Umsetzung von CSS zwischen NN und IE auch unterschiedlich.

      Durch das Containermodell des CSS sollte Dein Problem lösbar sein.
      Bilder möglichs hochauflösend, aber niedrige Farbzahl, dann können die mit JS-erzeugtem HTML an die jeweilige Auflösung angepasst werden.

      Tschüss

      Andreas

      1. [...]

        Doch zurück zum Thema. Ich denke es ist möglich eine Anpassung an verschiedene Bildschirmauflösungen zu realisieren.

        Start mit Abfrage und dann verzweigen
        <script language="javascript">
        <!--
        //Dieses Skript stammt von Michael Mailer‚s JavaScripts
        //URL: http://www.webaid.de/js  --  eMail: mm@webaid.de
        //Bitte   entfernen   Sie   diesen   Vermerk   nicht  !

        ScreenRes = screen.width;
        if(ScreenRes == "1280") res = "r1";
        else if (ScreenRes == "1024") res = "r2";
        else if (ScreenRes == "800") res = "r3";
        else if (ScreenRes == "640") res = "r4";

        if (res == "r1") {
            location.href="start1280.htm";  
            }
        if (res == "r2") {
            location.href="start1024.htm";  
            }
        if (res == "r3") {
            location.href="start800.htm";  
            }
        if (res == "r4") {
            location.href="start640.htm";  
            }
        //-->
        </script>

        [...]

        Tschüss

        Andreas

        Hallo,
        Wenigstens eine Alternative fuer nichtgenannte Aufloesungen sollte es auch noch geben! (1152, 1600, ...).
        Ausserdem ist doch die Bildschirmgroesse absolut irrelevant. Entscheidend ist doch die Fenstergroesse, und die kann in Einer-Schritten eingestellt werden, und das auch noch in X- und Y-Richtung getrennt.
        Damit kaeme man dann auf sehr viele Dateien, die man erzeugen muesste (wenn man mal vorlaeufig 1600x1200 als Obergrenze fuer die Fenstergroesse festlegt und 640x480 als Untergrenze, kommt man auf
        960x720 = 691200 Dateien - und ich kenne Leute, die haben Bildschirme und damit potentiell auch Fenster ueber 1900 Pixel Breite).
        AndreasW

        1. Hallo AndreasW,

          »»Ausserdem ist doch die Bildschirmgroesse absolut irrelevant. Entscheidend ist doch die Fenstergroesse, und die kann in Einer-Schritten eingestellt werden, und das auch noch in X- und Y-Richtung getrennt.

          Der Trick für die Berücksichtigung einer Änderung der Fenstergröße besteht in der Vermeidung absoluter Größen.
          <Eigenzitat>

          Komplett CSS-gestützte Formatierung , da dabei die Relativierung aller Abstände kein Problem sein dürfte.

          [...]
          Durch das Containermodell des CSS sollte Dein Problem lösbar sein.
          </Eigenzitat>
          Ein triviales Beispiel sind Tabellen.
          ... width=1024 ... paßt nur bei Auflösung 1024 und Ganzbild.
               (würde ich immer versuchen zu vermeiden, da dann auch beim
               Ausdrucken regelmäßig der text am rechten Rand fehlt)

          ... width=100% ... paßt (fast) immer.

          Da aber auch die Schriftgröße und Imagegröße fließend angepaßt werden sollen sprach ich eben von JS-generiertem HTML-Code.

          Übrigens kann man da schon einige Zwischenschritte auslassen, denn das verkleinern um 1 Pixel dürfte für das Design vernachlässigbar sein. Ich würde bestenfalls in 10 Pixel-Schritten reagieren, eher später.

          Tschüss

          Andreas

  2. Hi,

    ich wuerde mal sagen, dass der Aufbau der Seite viel zu komplex ist, um sie so zu proggen, dass sie sich dynamisch der Bildschirmbreite anpasst. Ich habe 1600x1200 Punkte eingestellt und es sieht auch noch gut & leserlich aus. Man sollte halt das Design so anpassen, dass es ab einer Mindestaufloesung von z.B. 800x600 Punkten voll darstellbar ist.

    Wenn Du wirklich mit dHTML und solchen Scherzchen eine dynamische Breitenanpassung realisieren willst, dann musst Du auch damit rechnen, dass es auf einem Grossteil der CLients nicht so richtig funzt. Selbst, wenn Du mit mehreren Versionen mit normalem HTML arbeitest, musst Du immernoch irgendwie die Fensterbreite abfragen...

    Viele Gruesse
    speedy

  3. Hallo,

    ich bin speedys Meinung. Es geht nicht. Die Probleme sind nicht nur technischer Natur, sondern auch Designtechnischer. Technisch alleine schon deswegen, weil HTML in der Form, wie wir es noch alle benutzen, eigendlich für solche Designdinge gar nicht gedacht waren. Also tricksen wir, stückeln zum Bsp Grafiken aus Einzellelementen zusammen etc.... das jetzt für "unendlich" viele Auflösungen anzubieten ist ein Ding der Unmöglichkeit. Denn die Grafiken und die Elemente müssen ja 100% wieder so zusammenpassen wir auf der Ausgangsseite.

    Designtechnisch ist es auch Unsinn. Man hat auf einer Sseite mit den Maßen x und y die einzelnen Elemente solange arangiert, bis man meint, ein harmonisches, spannendes oder was auch immer für ein Bild zu bekommen. Wenn das Design gut ist, sollte jedes Detail stimmen. jedes Element um einen "zentimeter" (oder eben ein paar Pixel) verschoben sollte das Design "schlechter" machen.... Also, wie soll man da die Elemente immer neu ausrichten und trotzdem das Ursprungsdesign behalten?

    Nein, eine wichtige (vielleicht die wichtigste) Aufgabe eines Webdesigners ist, dem Kunden das Medium zu erklären. Und ich glaube, das ist hier Deine Aufgabe. Natürlich reicht ein "das geht nicht" nicht aus. Auftraggeber sollten sich daran gewöhnen, daß sie auch Beratung eingekauft haben, daß sie "mich" engagiert haben, weil ich gut bin und sie mir vertrauen können. und das sollten sie, bei allem Respekt natürlich, auch tun..... es ist natürlich ein Eiertanz....

    (übrigens: wenn ich "pixelgenaue" positionierte grafik verwende, und die seite auf 800x600 auslege, "zwinge" ich leuten mit größeren auflösungen einfach rechts und links einen neutralen Rand auf. (bei mir per frameset....)

    Chräcker

    http://www.chraecker.de/stempel

    1. Wenn nicht so unglaublich viele Menschen noch dieses Plugin installieren müssten und so unglaublich viele Menschen keine Ahnung davon hätten und nicht so unglaublich viele Menschen, Browser hätten, bei denen es im Browser nicht funktioniert, dann wäre mit   F L A S H  jetzt das Ding mit der Auflösung GAR KEIN PROBLEM mehr!
      Das regelt sich dann alles von selbst!

      MfG,
      Sven Wagener.

      1. Hallo !

        Ja genau, ich find MTV auch viel besser als ARTE ! ;-)

        Gruß,
        Kerki

      2. Hallo,

        tja, nur das Flash wieder etwas von "einer" Firma ist, und nacher schreien dann wieder alle, daß wieder alle nur etwas von "einer" Firma benutzen und dadurch wieder nur "eine" Firma den Kuchen hat und bestimmt, welchen Geschmack der Kuchen hat.....

        Chräcker

        http://www.chraecker.de/stempel

        1. Es geht ja eigentlich auch nur um das Prinzip. Es müsste ja nicht unbedingt Flash notwendig sein, um das Problem mit den Auflösungen in den Griff zu bekommen.
          An  Grundlegenden Stellen hätte man sich mal Gedanken darüber machen sollen.

          MfG,

          Sven Wagener.

          1. Hallo,

            An  Grundlegenden Stellen hätte man sich mal Gedanken darüber
            machen sollen.

            ...dazu muß man die Historie von HTML berücksichtigen. HTML ist eigendlich nur dazu da "gewesen", einem Text "Struktur" zu geben. Wie diese Struktur letztendlich dargestellt wird, das blieb den Browsern überlassen. (und bleibt es eigendlich immer noch) Mit der Zeit wurde das Tag-Angebot immer mehr erweitert, nach und nach wurden die Struktur-Tags immer mehr aufgeweicht, bis man nacher eigendlich ein ziemliches durcheinander benutzt. Zum Teil wurden auch Struktur-Tags einfach fremdbenutzt. Wer benutzt denn heute Table wirklich noch dazu, um Daten Tabelarisch darzustellen. Wir benutzen Table meistens dazu, um die Seiten wenigstens einigermassen Layouttechnisch in den Griff zu bekommen.

            HTML ist noch nicht "soo" alt. Gut, gemessen am Wandel in der Computerbranche ist es uralt, gemessen an dem Generationwechsel der Browser bei den Benutzern aber nicht. 30% meiner Besucher benutzen noch NS 4.0.... 3 Jahre alt!!!

            Jetzt versucht man, die "Layout"-tags wieder aus dem HTML-Angebot zu streichen. Dafür wurde CSS eingeführt. Die Farbe einer Schrift z.Bsp. hat mit der Struktur einer Seite nichts zu tun - raus damit und rein ins CSS....

            Das, was Flash ja eigendlich "nur" macht, ist, skalierbare Grafik benutzbar zu machen. Eben Vektorgrafiken. Längst ein alter Hut, aber betrachtet man eine Informationsseite als "Struktur", hat das nichts mit Vektorgrafiken zu tun. Aber Vektorgrafikunterstützung wird kommen. Mit Sicherheit. (ich meine, Stefan hat schon vor langer Zeit hier im Forum darauf hingweisen, bin nur zu faul, um im Archiv nach zu suchen....) Nur: bis sich da die Leute an der "grundlegenden Stelle" wie Du es so schön nennst, bis hin zur Unterschrift geeinigt haben, alle großen Browser das unterstützen und mehr als 50% aller Endanwender diese neuen Browser benutzen.... da vergeht noch einige Zeit....

            Chräcker

            http://www.chraecker.de/stempel