Frage bzgl. komplett dynamischer Seitengröße

[Auge]

Hallo

»» Wie kommst du zu der Annahme, dass die Bildschirmauflösung irgendetwas mit der Viewportgrösse des Browsers zu tun hat?
Wenn ich die Homepage am 24"er ansehe (jeweils in der nativen auflösung) sieht das bild anders aus als am laptop - klar, die auflösung ist anders und wenn nicht alles dynamisch eingestellt ist dann muss man entweder scrollen oder gewisse teile der homepage werden nicht angezeigt.

liegt hier bei mir ein denkfehler vor, oder was muss ich machen um das problem von mir zu lösen?

Mache dir erstmal klar, dass der Browser nicht unbedingt im Vollbildmodus laufen muss. Das trifft umso häufiger zu, je größer die Auflösung des Desktops ist. Es bietet sich in einem solchen Fall geradezu an, mehrere Programmfenster neben- oder auch übereinander zu platzieren. Das macht nicht jeder, aber auch nicht wenige.

Ein weiterer Punkt ist, dass viele Browser innerhalb des Programmfensters eine Sidebar (so heißt das jedenfalls bei Firefox) anbieten, in dem man z.B. die Ergebnisse einer Suche oder auch die Chronik/den Verlauf der Browsersitzung auflisten kann. Die nimmt dann natürlich etwas von der (dir sowieso unbekannten[1]) Breite des Viewports weg.

Weiterhin kann auf eine Website mit Geräten zugegriffen werden, die gerade *keine* große Desktopauflösung bieten. Da wären z.B. PDAs und Smartphones zu nennen. Einige von denen haben einen grundsätzlich angepassten Browser, der nach einem speziellen CSS verlangt, andere, wie z.B. das iPhone, haben einen normalen Browser, der eine Seite auch normal, wie auf einem Desktoprechner, anzeigt und nur einige Anpassungen bezüglich der Auflösung bietet (scrollen und zoomen innerhalb der Seite per Touchscreen).

Gerade bezüglich der unterschiedlichen Desktop- und Browserfenstergrößen kann man davon ausgehen, dass auch die Schriftgrößen unterschiedlich gewählt sind. Wer will schon auf einem 24"-Monitor rumkratzen, weil er denkt, dass ein bestimmtes Zeichen der mit 10px Schriftgröße festgenagelten Schrift ein Dreckfleck auf dem Monitor ist? Wer will sich bei entsprechenden Auflösungen und einer hohen DPI-Zahl des Monitors überhaupt mit einer dermaßen kleinen Schrift und den dabei fast zwangsläufig[2] vorhandenen ewig langen Textzeilen, die den Lesefluss behindern, rumquälen? Wer will eine solche Schrift auf einem kleinen Display haben, wo sie wiederum zu groß ist?

Wie du siehst, kannst du von *keiner* festen Annahme ausgehen, was die Bedingungen bei deinen Besuchern angehen. Ausnahmen wären ein firmeninternes Intranet, in dem man die verwendete Hard- und Software (namentlich Browser) kennt oder eine Seite, bei der einem die drei, vier, fünf Leutchen, die sie aufrufen könnten, namentlich (und wahrscheinlich auch bezüglich ihrer Trinkgewohnheiten ;-)) bekannt sind. Webseiten macht man im Normalfall aber nicht für sich[3] sondern für die Besucher (seine eigenen oder die des Kunden). Prämisse ist also, dass die Seite für diese Leute benutzbar ist und *nicht* vordergründig, dass sie deinen ästhetischen Ansprüchen genügt. Die Besucher haben, wie gesagt, dir unbekannte Einstellungen für ihre Betriebssysteme und Browser. HTML und CSS bieten jede Menge Möglichkeiten, darauf einzugehen, auch wenn nicht alle Wünsche erfüllbar sind.

Dein Design auf der Vorlage des offensichtlich von dir sehr groß gewählten Hintergrundbildes aufzubauen, ist da schon ein erster Denkfehler. Hintergrundbilder, ob mit dem alten HTML-Attribut "background" oder auch per CSS eingebunden, sind nicht skalierbar. Je nach Viewportgröße sieht man es entweder vollständig oder nur einen Ausschnitt davon[4]. Falls du das Bild zur Vorlage der Aufteilung der Seite erkoren hast, könnte das Design schon an diesem Punkt auseinanderfallen.

Wenn die Seite flexibel sein soll, beginne damit, dir einen http://de.selfhtml.org/html/allgemein/grundgeruest.htm#dokumenttyp@title=Doctype auszusuchen und ihn als erstes *vollständig* (also mit URL zur DTD) im Dokument zu notieren. "Vollständig" deshalb, weil du damit im Verlauf der Entwicklung des Layouts bestimmten Unfähigkeiten/Missdeutungen bestimmter Browser aus dem Weg gehst, auch wenn du dabei auf dir ungewohntes Verhalten einiger Browser stoßen könntest. Danach ist das <http://de.selfhtml.org/html/allgemein/grundgeruest.htm@title=Grundgerüst der HTML-Dokuments> ansich dran.

Weiter geht es damit, deine Inhalte in eine sinnvolle HTML-Struktur einzubetten. Überschriften seien also auch in HTML Überschriften (<h1> bis <h6>), Textabsätze gehören in <p>, Listen werden, je nach Anwendungsfall, mit <ul>, <ol> oder <dl> umfasst, die einzelnen Listenpunkte gehören dann in <li>s bzw. <dt> und <dd>, Tabellen, Formulare blablabla u.s.w. u.s.f.. Was wo hinein gehört und wie zu notieren ist, beschreibt das <http://de.selfhtml.org/html/@title=SELFHTML-Kapitel HTML (Link zum Menü)>.

Wenn es *danach* um die Zusammenfassung und Gruppierung bestimmter Inhaltsbereiche geht, benutzt man <div>-Elemente. In ihnen kann man z.B. mehrere Absätze mit ihren Überschriften zusammenfassen. Um sie per JavaScript oder per CSS aufzufinden, kann man sie bestimmten Klassen zuweisen oder ihnen eine ID verpassen. Dazu kennt HTML die http://de.selfhtml.org/html/attribute/allgemeine.htm@title=Universalattribute.

*Jetzt*, und erst jetzt, kannst du dir Gedanken machen, wie das Ergebnis deiner Bemühungen möglichst chique (Ich hoffe, das ist so richtig (Patrick?).) angezeigt wird. Das ist eine recht umfangreiche Aufgabe (Spiel mit Farben, Größen, Verhältnissen), die zu beschreiben müßig ist, solange man das der Aufgabe zugrundeliegende HTML nicht kennt. ich schlage vor, du machst dich erstmal über den HTML-Teil her.

[1] Du kannst die Breite unter Umständen per JavaScript ermitteln und die dafür zuständigen CSS-Anweisungen auf gleichem Wege ändern, aber verlassen kannst du dich darauf nicht, da JavaScript beim Benutzer nicht verfügbar sein kann.

[2] Das ist zumindest ein gängiger, häufig aus Unwissenheit begangener Fehler.

[3] Den letztgenannten Fall der Privatseite für ein paar "Hansels" rechne ich mal der Einfachheit in diese Kategorie hinein.

[4] Das könnte die Mitte des Bildes sein oder auch nur ein Ausschnitt einer der Ecken, je nach Vorgabe im CSS.

Tschö, Auge