XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Responsive Webdesign - Pixel oder Prozent? (http://xhtmlforum.de/showthread.php?t=68365)

axelf 03.11.2012 20:53

Responsive Webdesign - Pixel oder Prozent?
 
Hallo,

ich beschäftige mich seit einiger Zeit mit responsive Webdesign. Es heißt ja immer, das man die Breiten von Containern dann in Prozent angibt. Eben habe ich das Skeleton-Framework in einem Tutorial gesehen, und dort wird weiterhin mit Pixeln gearbeitet und je nach verwendeter Bildschirmbreite dann eine andere Pixelangabe gemacht. Sind das beides Ansätze für RWD bzw. was ist denn der bessere Weg?

Scheppertreiber 03.11.2012 21:16

Zitat:

Zitat von axelf (Beitrag 522244)
Hallo,

ich beschäftige mich seit einiger Zeit mit responsive Webdesign. Es heißt ja immer, das man die Breiten von Containern dann in Prozent angibt. Eben habe ich das Skeleton-Framework in einem Tutorial gesehen, und dort wird weiterhin mit Pixeln gearbeitet und je nach verwendeter Bildschirmbreite dann eine andere Pixelangabe gemacht. Sind das beides Ansätze für RWD bzw. was ist denn der bessere Weg?

Da steht aber hier etwas anderes zu dem Thema ...

axelf 03.11.2012 21:34

Was steht denn dort anderes in Bezug auf meine Frage? Ich habe Webseiten gesehen, dort wird die Breite in Prozent angegeben und bei anderen wiederrum in Pixel.

MrMurphy 03.11.2012 21:37

Hallo,

der bessere Weg sind flexible Angaben (also %), damit die Seite immer das gesamte Browserfenster ausfüllt.

Gruss

MrMurphy

Scheppertreiber 03.11.2012 21:37

Nein. Da steht, daß man das anzeigende Gerät berücksichtigen sollte.
Die Einheit ist da wurscht, das rechnen die Browser eh um.

fricca 03.11.2012 21:40

Wenn man nach Ethan Marcotte geht, dann definiert sich Responsive Design durch fluides Grid, flexible Bilder und Media Queries.
Oft wird der Begriff viel weiter gefasst, genau genommen müsste man es dann wohl Adaptive Design nennen, siehe z.B. Adaptive vs. Responsive, what’s the difference?

Wie auch immer man es nennen mag: Ich halte den Ansatz, den Inhalt über Einheiten entscheiden zu lassen auch bei einem wie auch immer gearteten adaptiven Layout für das sinnvollste. Es kann demnach Pixel, Prozente oder Ems geben -- und das auch noch gemischt. Zusammenpassen muss es und für den Besucher das bestmögliche Layout bieten, egal mit welchem Gerät er gerade unterwegs ist.

Noch ein paar Links:
Higher Ed Responsive Web Design Trail Blazers say 'Content-First' | Meet Content
» The EMs have it: Proportional Media Queries FTW! Cloud Four Blog
Stop designing for fixed viewports! | Opinion | .net magazine

designformatierung 08.11.2012 13:54

Weblayout flexibel
 
Ein Weblayout sollte sich an die Fenstergröße flexibel anpassen. Mit Prozentangaben ist es generell gewährleistet. Ein zweispaltiges Layout hat einen Hauptcontainer, darin befindet sich ein Hilfscontainer für die linke Spalte und ein Hilfscontainer für die rechte Spalte. Der eine Hilfscontainer erhält eine Breite von 30% und der andere Hilfscontainer eine Breite von 70%. In beide Hilfscontainer wird jeweils ein Inhaltscontainer platziert. In den Inhaltscontainern befinden sich die Inhalte (Texte, Bilder) und können beliebig formatiert werden. Das Layout (30% Breite und 70% Breite) bleibt erhalten. Natürlich passt ein breites Bild nicht in eine schmale Spalte. Wenn das Layout geändert werden soll, beispielsweise 40% Breite und 60% Breite, muss man nur die Breite der Hilfscontainer ändern und die Formatierungen der Inhalte bleiben erhalten. Oder wenn der Hauptcainer (außen herum) z.B. 90% Breite haben soll, muss man nur die Breite des Hautcontainers ändern und alles andere (die Breite der Hilfscontainer und die Formatierung der Inhalte) bleiben erhalten.

netinja 09.11.2012 14:56

Zitat:

Zitat von designformatierung (Beitrag 522369)
Ein Weblayout sollte sich an die Fenstergröße flexibel anpassen. Mit Prozentangaben ist es generell gewährleistet.

Hallo,
Das würde ich so generell nicht sagen.
Angenommen, ein Layout hätte 90% Breite, dann sieht es bei einem Browserfenster von ca 1200px vielleicht gut aus, bei sehr kleinem Fenster bestünden die Textzeilen in den Spalten vielleicht nur noch aus 3 Wörtern, und bei sehr breitem Fenster wären die Textzeilen so lang, dass man sie nur schwer lesen könnte.
Ich bevorzuge eine feste Breite in em, und eine Maximalbreite von ca 95%.

LG
Netinja

MrMurphy 09.11.2012 16:40

Hallo

Zitat:

Ich bevorzuge eine feste Breite in em, und eine Maximalbreite von ca 95%.
Ich bevorzuge eine Darstellung, die sich flexibel den jeweiligen Ausgabegeräten anpasst und die der Besucher am bequemsten erfassen und bedienen kann.

Das sind weder Seiten mit starrem Layout noch Seiten, die bei kleinerem Viewpoint einfach prozentual kleiner dargestellt werden.

Gruss

MrMurphy

netinja 09.11.2012 18:36

Zitat:

Zitat von MrMurphy (Beitrag 522419)
Ich bevorzuge eine Darstellung, die sich flexibel den jeweiligen Ausgabegeräten anpasst und die der Besucher am bequemsten erfassen und bedienen kann.

Und was heisst das bei dir konkret für die Breitenangaben des wrapper?

Zitat:

Zitat von MrMurphy (Beitrag 522419)
Das sind weder Seiten mit starrem Layout noch Seiten, die bei kleinerem Viewpoint einfach prozentual kleiner dargestellt werden.

Da gebe ich dir recht.
Aber jetzt erkläre doch mal bitte, wieso meine Herangehensweise
Zitat:

feste Breite in em, und eine Maximalbreite von ca 95%
diese Bedingungen nicht erfüllen sollte.

designformatierung 09.11.2012 20:09

Horizontaler Rollbalken
 
Wenn der wrapper eine feste Breite erhält, wird der horizontale Rollbalken zu häufig eingeblendet. Horizontal scrollen zu müssen gilt als unfein. Wenn das Fenster verkleinert wird oder neben dem Browserfenster ein anderes Fenster angeordnet wird, wäre ein horizontaler Rollbalken bereits vorhanden. Ideales Design soll sich am Browserfenster anpassen. Eine Ausnahme wäre ein Layout, bei dem beispielsweise ein breites Bannerbild eingebaut wird. Da lässt sich eine feste Breite kaum vermeiden.

netinja 09.11.2012 21:26

Zitat:

Zitat von designformatierung (Beitrag 522440)
Wenn der wrapper eine feste Breite erhält, wird der horizontale Rollbalken zu häufig eingeblendet. Horizontal scrollen zu müssen gilt als unfein.

Murphy und Designformatierung,

lest ihr denn nicht, was ich geschrieben habe, ober habt ihr im Eifer des Gefechts mein max-width übersehen?
Bastelt euch doch mal ein Layout nach meinem Vorschlag mit

#wrapper { width: 55em; max-width: 95%; }

verkleinert dann langsam das Browserfenster,
und dann erzählt mir noch mal etwas von waagrechten Scrollbalken. ;)


Zitat:

Zitat von designformatierung (Beitrag 522440)
Ideales Design soll sich am Browserfenster anpassen.

Ja, in gewissen Grenzen.
Ich zitiere mich jetzt mal selbst

Zitat:

Angenommen, ein Layout hätte 90% Breite, .... bei sehr breitem Fenster wären die Textzeilen so lang, dass man sie nur schwer lesen könnte.
wenn ihr euch nicht vorstellen könnt, wie das aussieht, dann zieht mal euer Fenster auf 1800px Breite und geht dann auf diese Seiten

SELFHTML: Stylesheets / CSS-Eigenschaften / Positionierung und Anzeige von Elementen

oder hier

SELFHTML Forum

Bei einem grossen Browserfenster sind diese 3km langen Zeilen ja nun wirklich sehr schlecht zu lesen und sind weit davon entfernt, dem Besucher Komfort zu bieten, weil man mit der Maus riesige Wege zurücklegen muss, wenn man zwischen linker Navigation und rechten Scrollbalken hin und herpendelt.

designformatierung 13.11.2012 21:52

Prozent und em bei Flächen und Schriften
 
Ein wrapper mit einer Breite von beispielsweise 55 em und einer Maximalbreite von 95% produziert zwar keinen horizontalen Rollbalken. Es hat jedoch den Nachteil, dass sich die Flächen, die sich links und rechts des wrappers befinden, in der Breite ändern, wenn mit Strg-Taste und Mausrädchen weg gezoomt wird. Das Layout ist ja nicht so gedacht, dass innerhalb der Fensterbreite eine schmale Fläche für die Informationen erscheint und sich links und rechts "kilometerweite" Leerfläche befindet. Um zu verhindern, dass die Fläche übermäßig schmal wird, könnte eine Minimalbreite definiert werden. Doch dann kann ich beim wrapper von Anfang an Prozent definieren.

Damit Textzeilen nicht zu lang werden, kann ein Layout in Spalten eingeteilt werden. Schriftgrößen lassen sich im Internet Explorer seit Menschengedenken ändern. Das Internet ist ja nicht als eine Drucksache entwickelt worden. Jeder kann sich die angenehmste Schriftgröße einstellen. Es funktioniert mit dem typografischen em, indem Schriftgrößen mit em definiert werden.


Alle Zeitangaben in WEZ +2. Es ist jetzt 15:32 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2021, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2020