Einspaltiges Layout

[oxo888oxo]

Hallo

Ich möchte gerne eine Website erstellen mit einem 1-Spaltigen Layout.
Also die ganze Webseite soll nur aus einer Spalte bestehen.
Diese soll dann auch eine fixe Breite bekommen (ca. 600 Pixel).
Oben will ich einen Kopfbereich machen, der Logo, Navi, Such-Feld usw enthält.
Die Spalte soll auf dem Monitor zentriert angezeigt werden.

Der Grund für das 1-Spaltigen Layout ist, dass ich es damit ja dann auch bei der Darstellung auf Smatphones usw. leichter habe. Ich muss also nicht spezielle Anpassungen vornehmen und habe einen schönen einfachen übersichtlichen Code. Und weniger Arbeit :-)

Gibt es auf SelfHTML irgendwo eine entsprechende Vorlage für so ein zentriertes 1-Spaltigen Layout?
Würde mir als Startschuss ganz gut helfen.
Ich habe schon mit der Suche gesucht, bin aber nicht so richtig fündig geworden.

Gruß
Ingo

[M.]

Mahlzeit,

Diese soll dann auch eine fixe Breite bekommen (ca. 600 Pixel).

Also wie vor 15 Jahren...

Oben will ich einen Kopfbereich machen, der Logo, Navi, Such-Feld usw enthält.
Die Spalte soll auf dem Monitor zentriert angezeigt werden.

Also wie vor 15 Jahren...

Der Grund für das 1-Spaltigen Layout ist, dass ich es damit ja dann auch bei der Darstellung auf Smatphones usw. leichter habe.

Ähm .... nein (zumindest nicht generell)

Ich muss also nicht spezielle Anpassungen vornehmen

Ähm .... doch. Oder glaubst du es gibt keine Geräte, di weniger als 800 Pixel darstellen können

und habe einen schönen einfachen übersichtlichen Code. Und weniger Arbeit :-)

Ähm .... nur wenn du weisst, was du tust, deine bisherigen Aussagen lassen mich aber an Grundlagen zweifeln (nicht böse gemeint)

Gibt es auf SelfHTML irgendwo eine entsprechende Vorlage für so ein zentriertes 1-Spaltigen Layout?

<main>Das in mein Inhalt</main>

Würde mir als Startschuss ganz gut helfen.

Keine Ursache

[oxo888oxo]

Moin :-)

Also wie vor 15 Jahren...
Also wie vor 15 Jahren...

Jo, ich kann Deinen Einwand natürlich schon gut verstehen.
Ich bin auch noch nicht so ganz sicher, ob das der richtige Weg für mich ist.
Und nicht alles, was alt und einfach ist, muss ja auch zwingend schlecht sein.
Ich finde immer Webseiten schön, die sehr einfach und übersichtlich gehalten sind.
Aber eine Diskussion zu dem Thema würde sicher zu weit führen hier.

Der Grund für das 1-Spaltigen Layout ist, dass ich es damit ja dann auch bei der Darstellung auf Smatphones usw. leichter habe.
Ähm .... nein (zumindest nicht generell)

Ich hatte damit gemeint, dass ich bei so einem einfach Layout nur sehr wenige Anpassungen für mobile Browser vornehmen muss.

Ich muss also nicht spezielle Anpassungen vornehmen
Ähm .... doch. Oder glaubst du es gibt keine Geräte, di weniger als 800 Pixel darstellen können

Wenn ich ein 1-Spaltiges Layout habe, brauche ich doch für mobile Browser "nur" per "Meta viewport" dafür sorgen, dass meine Seite horizontal gezoomt wird.
Also wenn meine Seite eine fixe Breite von z.B. 600 Pixeln hat, brauche ich die doch auf einem Smartphone nur auf die horizontale Breite zoomen lassen per "Meta viewport".
Ich muss also nicht noch dafür sorgen, dass eine seitliche Navigation nach oben wandert usw.
Das hatte ich gemeint.

Ähm .... nur wenn du weisst, was du tust, deine bisherigen Aussagen lassen mich aber an Grundlagen zweifeln (nicht böse gemeint)

Darum taste ich mich ja langsam an die Sache heran :)
Sorry, wenn sich das doch evtl. alles recht inkompetent anhört.
Ich hoffe, ich darf dennoch weiter hier nach Hilfe und Ratschlägen fragen.

Gruß
Ingo

[M.]

Mahlzeit,

Ich hatte damit gemeint, dass ich bei so einem einfach Layout nur sehr wenige Anpassungen für mobile Browser vornehmen muss.

Und genau da irrst du, dachte, das hätte ich schon klar gemacht.

Wenn ich ein 1-Spaltiges Layout habe, brauche ich doch für mobile Browser "nur" per "Meta viewport" dafür sorgen, dass meine Seite horizontal gezoomt wird.

Ein schmaler Viewport sagt uns im Normalfall, das Display ist klein. Und dann willst du die Seite auch noch verkleinern? Übler Konzeptfehler.

Also wenn meine Seite eine fixe Breite von z.B. 600 Pixeln hat, brauche ich die doch auf einem Smartphone nur auf die horizontale Breite zoomen lassen per "Meta viewport".
Ich muss also nicht noch dafür sorgen, dass eine seitliche Navigation nach oben wandert usw.
Das hatte ich gemeint.

Wie gesagt, die Seite für kleine Viewports nochmal zu verkleinern ist das Gegenteil von dem, was SInnvoll ist.

Darum taste ich mich ja langsam an die Sache heran :)

Aber doch nicht mit Dingen, die seit Jahren nicht mehr aktuell und in deinem Fall nicht wirklich den Sinn erfüllen, den du erwartest.

Sorry, wenn sich das doch evtl. alles recht inkompetent anhört.

Das ist nur ein Problem, wenn du nicht lernwillig bist ;)

Ich hoffe, ich darf dennoch weiter hier nach Hilfe und Ratschlägen fragen.

Nur so kannst du lernen. ;)
Sicher gibt es andere Meinungen als meine zum Thema, wenn was kommt, lesen und dann kommst du bestimmt ans Ziel.

[Tabellenkalk]

Hallo,

Wenn ich ein 1-Spaltiges Layout habe, brauche ich doch für mobile Browser "nur" per "Meta viewport" dafür sorgen, dass meine Seite horizontal gezoomt wird.

Ein schmaler Viewport sagt uns im Normalfall, das Display ist klein. Und dann willst du die Seite auch noch verkleinern? Übler Konzeptfehler.

Ich weiß zwar nicht genau, was mit „horizontal zoomen“ gemeint ist, aber zoomen heißt ja erstmal nur „Größe ändern“ und nicht zwangsläufig „verkleinern“.

Gruß
Kalk

[oxo888oxo]

Hallo Kalk

Ich weiß zwar nicht genau, was mit „horizontal zoomen“ gemeint ist, aber zoomen heißt ja erstmal nur „Größe ändern“ und nicht zwangsläufig „verkleinern“.

Ah, da habe ich mich dann vielleicht blöd ausgedrückt.
Ich versuche es nochmal anders.

Eine zentrierte Website mit einer fixen Breite von 600 Pixeln.
Auf einem großen PC Monitor bildet die Seite dann ja quasi ein "schmales Band" in der Mitte.
Ich nenne dieses "schmales Band" hier mal Inhalts-Bereich, weil sich darin dann ja letztendlich der ganze Inhalt meiner Seite befinden soll.

So, und nun zum Smartphone. Da soll natürlich dieser Inhalts-Bereich das Display in der Horizontalen komplett füllen bzw. ausnutzen.
Und das kann man doch mit "Meta Viewport" machen.
Und wenn die Schriftgröße der Seite niht schon generell auch für Smartphones ausreichend ist, müsste ich diese für die mobilen Browser noch generell erhöhen.

Ist diese Denkweise von mir denn Blödsinn?

Gruß
Ingo

[M.]

Mahlzeit,

Ich weiß zwar nicht genau, was mit „horizontal zoomen“ gemeint ist, aber zoomen heißt ja erstmal nur „Größe ändern“ und nicht zwangsläufig „verkleinern“.

Wenn der Viewport zu klein ist und die Seite sich drauf anpasst, heist das für mich(!), die Seite wird verkleinert.
Wenns anders gemeint war, hab ich es falsch verstanden ;)

[oxo888oxo]

Tach

Und genau da irrst du, dachte, das hätte ich schon klar gemacht.

Leider ist mir das noch nicht so richtig klar.
Aber ich lerne natürlich gerne :)

Ein schmaler Viewport sagt uns im Normalfall, das Display ist klein. Und dann willst du die Seite auch noch verkleinern? Übler Konzeptfehler.
Wie gesagt, die Seite für kleine Viewports nochmal zu verkleinern ist das Gegenteil von dem, was Sinnvoll ist.

Wieso will ich die Seite verkleinern?
Da verstehe ich jetzt nicht so richtig, wie Du das meinst.
Wenn meine Seite eine fixe Breite von 600 Pixeln hat, ist es doch sinnvoll, bei einem Smartphone die volle Displaybreite auszunutzen. Oder?
Dass ich evtl. noch die Schriftgröße für die Smartphones generell evtl. erhöhen muss, ist mir klar.
Oder verstehe ich Dich da jetzt falsch?

Aber doch nicht mit Dingen, die seit Jahren nicht mehr aktuell und in deinem Fall nicht wirklich den Sinn erfüllen, den du erwartest.

Hmmm, was würde denn daran Deiner Meinung nach nicht den Sinn erfüllen, den ich erwarte?

Das ist nur ein Problem, wenn du nicht lernwillig bist ;)

Doch doch bin ich schon, würde ich sagen.
Und ich freue mich auch über Deine Einwände

Gruß
Ingo

[Der Martin]

Hallo,

Wie gesagt, die Seite für kleine Viewports nochmal zu verkleinern ist das Gegenteil von dem, was Sinnvoll ist.
Wieso will ich die Seite verkleinern?

weil du von Smartphones und vom Zoomen sprichst - und da deren Displays oft schmaler als 600px sind, denkt man natürlich unwillkürlich ans Kleinzoomen.

Wenn meine Seite eine fixe Breite von 600 Pixeln hat, ist es doch sinnvoll, bei einem Smartphone die volle Displaybreite auszunutzen. Oder?

Wenn eine entsprechende Breite zur Verfügung steht, ja. Oft sind es aber nur 320px, oder 480px.

Ciao,
 Martin

[molily]

Wenn eine entsprechende Breite zur Verfügung steht, ja. Oft sind es aber nur 320px, oder 480px.

Ich verstehe das Problem nicht. Mobilgeräte haben virtuelle Viewports, die sich über meta-viewport steuern lassen. Die CSS-Einheit px bezieht sich immer auf diesen virtuellen Pixel. Ob man nun ein Layout mit 320px oder 1000px baut, macht letztlich keinen Unterschied, wenn meta-viewport entsprechend gesetzt ist. Standardmäßig ist der virtuelle Viewport ohnehin 980px.

Wichtig ist nur, dass die Textgröße ohne Zoom gut lesbar ist. Bei 1000px müsste die Schriftgröße entsprechend groß sein, damit sie beim Rendern auf 320 oder 640 Hardware-Pixeln kein Fliegenschiss wird.

Mathias

[Gunnar Bittersmann]

@@molily:

nuqneH

Wichtig ist nur, dass die Textgröße ohne Zoom gut lesbar ist. Bei 1000px müsste die Schriftgröße entsprechend groß sein, damit sie beim Rendern auf 320 oder 640 Hardware-Pixeln kein Fliegenschiss wird.

Das sieht dann auf Geräten mit Viewportbreiten von 1000+ Pixeln natürlich nicht wie Fliegenschiss aus. Dafür aber wie Elefantenschiss.

Qapla'

[M.]

Mahlzeit,

Wenn meine Seite eine fixe Breite von 600 Pixeln hat, ist es doch sinnvoll, bei einem Smartphone die volle Displaybreite auszunutzen. Oder?

Wie Martin schrieb, ich beziehe mich auf Displays, die weniger als 600px haben. Da müsstest du die Seite verkleinern um auf die Displaybreite zu kommen.

[molily]

Wenn ich ein 1-Spaltiges Layout habe, brauche ich doch für mobile Browser "nur" per "Meta viewport" dafür sorgen, dass meine Seite horizontal gezoomt wird.

Ein schmaler Viewport sagt uns im Normalfall, das Display ist klein. Und dann willst du die Seite auch noch verkleinern? Übler Konzeptfehler.

Ich vermute, du hast die Bedeutung von meta-viewport-Angaben nicht verstanden. Setzt man den Viewport auf 600px, führt das i.d.R. zu einer Vergrößerung!

Wie ich in meiner Antwort auf Martin schrieb, sagt die Viewport-Breite erst einmal nichts über Lesbarkeit aus.

Es ist allerdings üblich und ratsam, mit width=device-width zu arbeiten (entspricht i.d.R. 320px) und ein entsprechend responsives Layout zu bauen. Der Ansatz von oxo ist jedoch durchaus gangbar.

Mathias

[M.]

Mahlzeit,

Ich vermute, du hast die Bedeutung von meta-viewport-Angaben nicht verstanden. Setzt man den Viewport auf 600px, führt das i.d.R. zu einer Vergrößerung!

Wenn der Viewport kleiner ist, wird die Seite vergrössert? Dann hab ich das ganze Problem anders verstanden.
Wenn der Viewport FullHD hat, ist klar, dass er vergrössert wird, aber ich hab ja explizit  von Geräten mit kleineren Viewports geschrieben.
Ich meinte damit natürlich, dass die maximale Auflösung dann entsprechend dem Viewport ist.

[molily]

Hallo,

Eigentlich reicht hier ein zentriertes Wrapper-Element:

.page-wrapper {
  margin: auto;
  max-width: 600px;
}

Alles weitere spielt sich darin ab.

Mathias

[Gunnar Bittersmann]

@@molily:

nuqneH

Eigentlich reicht hier ein zentriertes Wrapper-Element:

.page-wrapper {
  margin: auto;
  max-width: 600px;
}

Eigentlich reicht hier das body-Element ohne Klasse.

Alles weitere spielt sich darin ab.

Eben, du sagst es.

Qapla'

[oxo888oxo]

Hallo

Eigentlich reicht hier das body-Element ohne Klasse.

Ja, so habe ich es nun auch bei mir gemacht.
Danke für den Hinweis und die Hilfe!

Gruß
Ingo

[molily]

Eigentlich reicht hier das body-Element ohne Klasse.

Reichen schon, für empfehlenswert halte ich es nicht unbedingt. Ich würde es bei einer kleinen Website sofort machen, aber nicht bei einer, die ich professionell erstelle.

Ich hatte das schon einmal beschrieben, finde aber das Posting nicht: Direkt zentrale Elementtypen ohne Klasse zu formatieren, ist starke Kopplung und erschwert die Wartbarkeit, Wiederverwendbarkeit und Flexibilität. Das geht für grundlegende Typographie und vertikalen Rhythmus bei Elementen wie hX, ul/ol/ol, p usw. relativ problemlos. Wenn es um Layouting geht, würde ich Klassen verwenden, dazu raten sämtliche CSS-Methodologien.

Sobald eine Seite aus dem Standardlayout ausschert, müsste ich die body-Styles für diese Seite einzeln auf ihre Initialwerte zurücksetzen. Wenn ich das Layout auf vielen Seiten ändere, muss ich wahrscheinlich ohnehin das HTML ändern; aber wenn ich von Anfang an Klassen verwende, habe ich Kontinuität und muss nur die Klasse verschieben. Wenn ich z.B. Haupt-header und -footer nicht mehr in der Breite begrenzen will, würde die Klasse zu main wandern. Und es ist nicht ausgeschlossen, sie mehrfach zu verwenden.

Wenn ich das noch weiter verbessern will, dann eher durch die Verwendung von abstrakten Klassen in Sass, sodass ich im HTML möglichst keine expliziten Layouting-Klassen setzen muss.

Grüße
Mathias

[Gunnar Bittersmann]

@@molily:

nuqneH

Wenn es um Layouting geht, würde ich Klassen verwenden,

Mag sein, aber nicht unbedingt so. Nicht eine Klasse "page-wrapper", sondern Seiten klassifizieren (identifizieren), d.h. Klassen (bzw. IDs) à la "page-product-overview", "page-product-details" fürs html-Element.

Sobald eine Seite aus dem Standardlayout ausschert, müsste ich die body-Styles für diese Seite einzeln auf ihre Initialwerte zurücksetzen.

Ja, Styles nicht zu setzen ist einfacher als sie nochmals zu überschreiben.

Deshalb spezifische Angaben für

.page-product-overview body {…}  
.page-product-details body {…}

Wenn ich das Layout auf vielen Seiten ändere, muss ich wahrscheinlich ohnehin das HTML ändern;

?? Musst du?

Wenn ich das noch weiter verbessern will, dann eher durch die Verwendung von abstrakten Klassen in Sass, sodass ich im HTML möglichst keine expliziten Layouting-Klassen setzen muss.

Das ja.

Qapla'