ggggg

[iMac]

Was ist die optimale Seitengrösse`?

Ich habe bis jetzt eine Seite mit meinem MacBook pro 13" erstellt, im Safari/Firefox alles tip top, danach wollte ich es auf meinem iMac 21" testen ebenfalls mit Safari/Firefox. Naja sieht klein aus.

Wie kann ich es machen damit die Seite sich selber anpasst, oder was empfehlt ihr mir?

Mit Macbook (Bearbeitet mit Dreamweaver)

div#container{  
margin:auto;  
position:relative;  
background-color:#F00;  
width:800px;  
height:700px;  
}

Danach mit iMac (Bearbeitet mit Dreamweaver)

div#container{  
margin:auto;  
position:relative;  
background-color:#F00;  
width:1024px;  
height:728px;  
}

Ich habe mir gedacht auch >> anstatt PX dass ich in % schreibe << aber 100% breite und höhe ist vielleicht fast zu viel oder?

div#container{  
margin:auto;  
position:relative;  
background-color:#F00;  
width:100%;  
height:100%;  
}

Was ist ok, wie macht ihr es ??

Danke.

[T-Rex]

Richtige Profis müssen schnell sein.
Da kommt eine Seitenanfrage für 1024, schnell css ändern.
Da kommt eine Seitenanfrage für < 600, schnell css ändern.
Ich mach den ganzen Tag nix anderes.

Nagut im Ernst :D.
Du hast zwei Möglichkeiten. Entweder benutzt du Prozentangaben oder die neuen HTML5 Media Queries. Zweiteres bietet dir die Möglichkeit HTML Schnipsel ein wenig anders aus zu richten.

Responsiv Webdesign nennt sich das ganze dann:
Guckst du

Gruß
Cooler als ein Pinguin im Eisfach
T-Rex

[iMac]

Also ich habe es jetzt so gemacht...Auf meinem iMac 21" sieht noch immer nicht so toll ...mal schauen ob ich noch was ändere ...sehr ärgerlich :D

width:1024px;  
height:768px;

[1UnitedPower]

Die dritte Option, die T-Rex dir verschwiegen hat, ist natürlich die Hinweise und Tipps völlig zu ignorieren.

[foobar]

http://www.youtube.com/watch?v=5QK7RGVC6qU

[Gunther]

Hi!

Was ist die optimale Seitengrösse`?

Die Größe meines Viewports. ;-)

Wie kann ich es machen damit die Seite sich selber anpasst, oder was empfehlt ihr mir?

T-Rex hat dir ja bereits den passenden Suchbegriff verlinkt (wobei er natürlich 'responsive' meinte).

Das Mittel der Wahl sind die CSS Media Queries - siehe auch: http://wiki.selfhtml.org/wiki/CSS/Media_Queries

Ich habe mir gedacht auch >> anstatt PX dass ich in % schreibe

Verwende MQs mit 'em' als Einheit (keine Pixelwerte verwenden).

aber 100% breite ... ist vielleicht fast zu viel oder?

Auf "großen" Monitoren unter Umständen ja - richtig!
Deshalb solltest du deine Seite ab einer gewissen Viewportbreite (in 'em') per 'max-width' in der Breite beschränken. Als mittleren Richtwert für eine "gut lesbare" Zeilenbreite kannst du einen Wert zwischen ca. 50 - 60 Zeichen pro Zeile (inkl. der Wortzwischenräume) annehmen.
Und nicht vergessen: Selbstverständlich darf man auch die Schriftgröße(n) anpassen ...!

Was ist ok, wie macht ihr es ??

siehe oben

Gruß Gunther

PS: Bitte schreibe einen "ordentlichen" Betreff bei deinen Postings und versuche auch den passendsten Themenbereich auszuwählen - zukünftige Nutzer von Suchmaschinen und der Suchfunktion des Forums werden es dir danken.

[dave]

Hi,

Ich habe mir gedacht auch >> anstatt PX dass ich in % schreibe
Verwende MQs mit 'em' als Einheit (keine Pixelwerte verwenden).

Warum keine Pixel-Werte?

~dave

[Gunnar Bittersmann]

@@dave:

nuqneH

Ich habe mir gedacht auch >> anstatt PX dass ich in % schreibe
Verwende MQs mit 'em' als Einheit (keine Pixelwerte verwenden).

Warum keine Pixel-Werte?

Weil man Breakpoints nicht nach Geräten, sondern nach dem Inhalt setzen sollte. Also am besten relativ zur Basisschriftgröße. Da die Zuordnung Basisschriftgröße 1em ≙ 16px zwar weit verbreitet, aber nicht gottgegeben* ist, also in em (was hier gleich rem ist).

Qapla'

* Gott ist hier irgendeine Spec.

[T-Rex]

Weil man Breakpoints nicht nach Geräten, sondern nach dem Inhalt setzen sollte. Also am besten relativ zur Basisschriftgröße. Da die Zuordnung Basisschriftgröße 1em ≙ 16px zwar weit verbreitet, aber nicht gottgegeben* ist, also in em (was hier gleich rem ist).

Und wieso kann man die Schrift nicht per Default auf 16px setzten auf der Webseite?

Gruß
Antwort erahnender
T-Rex

[Gunnar Bittersmann]

@@T-Rex:

nuqneH

Und wieso kann man die Schrift nicht per Default auf 16px setzten auf der Webseite?

Die Schrift ist bereits per Default in den meisten Browsern auf 16px gesetzt.

Wenn ein Nutzer in seinem Browser die Einstellung ändert, wird er vielleicht auch Webseiten verbieten, seine bewusst getätigte Einstellung zu überschreiben.

In Pixel gesetzte Breakpoints passen dann nicht zum Inhalt.

Qapla'

[Gunther]

@@all:

nuqneH

Weil man Breakpoints nicht nach Geräten, sondern nach dem Inhalt setzen sollte. Also am besten relativ zur Basisschriftgröße. Da die Zuordnung Basisschriftgröße 1em ≙ 16px zwar weit verbreitet, aber nicht gottgegeben* ist, also in em (was hier gleich rem ist).

Ich verwende folgende Einstellungen, die einem das Leben bei der Verwendung von 'rem' etwas einfacher machen:

html {font-size: 62.5%;}  
body {font-size: 160%; font-size: 1.6rem;}  

Nun kann man sich seine (Schrift)Größenrelationen in Pixeln "denken" (auf Basis der Standardschriftgröße von ~16px) - der jeweilige REM-Wert ist dann der "gedachte" Pixelwert / 10.
Und trotzdem bleibt alles "relativ", auch und insbesondere zu der vom User eingestellten Basisschriftgröße.

Gruß Gunther

[Gunnar Bittersmann]

@@Gunther:

nuqneH

Ich verwende folgende Einstellungen, die einem das Leben bei der Verwendung von 'rem' etwas einfacher machen:

Wenn Division/Multiplikation mit 16 ein Problem ist, warum verwendest du keinen CSS-Präprozessor?

Qapla'

[Gunther]

@@Gunnar:

nuqneH

Ich verwende folgende Einstellungen, die einem das Leben bei der Verwendung von 'rem' etwas einfacher machen:

Wenn Division/Multiplikation mit 16 ein Problem ist,

Problem sicher nicht, aber eine Division durch 10 ist trotzdem "einfacher" oder nicht? ;-)

warum verwendest du keinen CSS-Präprozessor?

Ganz ehrlich?
Für "einfache" Projekte/ Seiten mache ich das. Aber gerade bei RWD Projekten mit haufenweise MQs, CSS-Hacks zur Ausbügelung verschiedenster Browserbugs, Fallbacks für "minderbemittelte" Browser etc. empfinde ich das nicht als Hilfe/ Arbeitserleichterung, sondern eher als das Gegenteil.

Das mag aber auch daran liegen, dass ich mich (immer) noch nicht tief genug in die Materie eingearbeitet habe, bzw. noch zu sehr in meiner gewohnten Arbeitsweise verwurzelt bin.

Gruß Gunther

[Gunnar Bittersmann]

@@iMac:

nuqneH

Was ist die optimale Seitengrösse`?

Eine Seite ist optimalerweise so breit, dass sie den Viewport genau ausfüllt.* Nicht mehr und nicht weniger.

Eine Seite ist optimalerweise so lang, dass der Inhalt sie genau ausfüllt. Nicht mehr und nicht weniger.

* Was nicht heiß, dass Fließtext über die volle Seitenbreite gehen muss. Eine Beschränkung der Zeilenlänge auf max. etwa 70–80 Zeichen ist zur besseren Lesbarkeit anzuraten.

Ich habe bis jetzt eine Seite mit meinem MacBook pro 13" erstellt, im Safari/Firefox alles tip top, danach wollte ich es auf meinem iMac 21" testen ebenfalls mit Safari/Firefox. Naja sieht klein aus.

Wenn man die Schriftgröße (oder anderes) auf die Viewportgröße beziehen möchte, so gibt es neuerdings (lies: in modernen Browsern) auch Einheiten dafür.

Wie kann ich es machen damit die Seite sich selber anpasst, oder was empfehlt ihr mir?

Mit Macbook (Bearbeitet mit Dreamweaver)

Ich empfehle ohne Dreamweaver.

Qapla'

[T-Rex]

Wenn man die Schriftgröße (oder anderes) auf die Viewportgröße beziehen möchte, so gibt es neuerdings (lies: in modernen Browsern) auch Einheiten dafür.

Hab da mal eine Demo gefunden:
http://css-tricks.com/examples/ViewportTypography/

Bei einem Smartphone Viewpoint wird die Schrift doch sehr klein. Und bei meinem normalen Bildschirm ist sie sehr groß. Beide male hab ich Schwierigkeiten den Text zu lesen. Deshalb zweifel ich gerade den Sinn dieser Einheit an. Also für normalen Text ist das nix. Eventuell für kleine Randnotizen?

Gruß
kleine Randnotiz
T-Rex

[Siri]

[http://www.html.de/html-und-xhtml/49218-text-verschieben-einem-box-quadrat.html#post342396@title=Crossposting]