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?

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

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.

Hallo,

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

Gruss

MrMurphy

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

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

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.

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

Hallo

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

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

Da gebe ich dir recht.
Aber jetzt erkläre doch mal bitte, wieso meine Herangehensweise
diese Bedingungen nicht erfüllen sollte.

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.

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. ;)


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

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.

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.