• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Viewport orientiertes Design - aber wie?

H

hb133

Neues Mitglied
Hallo Leute,

nachdem ich vor ein paar Tagen auf das Forum hier gestoßen bin, hab ich mir erst mal angefangen zu lesen und hab auch schon einiges gelernt denk ich - dafür erstmal danke :grin:

Jetzt hab ich immer wieder gelesen dass man seine Seiten so designen soll, dass sie sich am Viewport des jeweiligen Nutzers orientieren. Also unabhängig von Auflösung, Bildschirmgröße usw, dass sozusagen der Viewport das A und O ist.

Habe versucht etwas zur konkreten Vorgehensweise herauszufinden, war aber leider nicht sehr erfolgreich.

Momentan denke ich das folgende Dinge wichtig sind:

- "Hauptcontainer" der Seite, also z.B. eine Container mit Umrandung in dem sich alles andere befindet, in Prozent anzugeben, sodass er sich dem Viewport anpasst

- Möglichst wenig DIV Container innerhalb des Hauptcontainers verwenden, sondern richtige Semantik verwenden, möglichst mit margin/padding arbeiten.


Ich hoffe die beiden Punkte stimmen soweit.

Jetzt würde mich aber trotzdem interessieren was beim Viewport-orientierten Coden wirklich zu beachten ist, bzw wie man professionell an die Sache rangeht.

Wäre echt klasse wenn jemand von euch seine Erfahrungen mitteilen könnte ;-)

Danke euch!

Gruß hb133
 
Wie du schon erkannt hast, benötigst du ein flexibles Layout mit prozentualen Breiten. Kann aber auch Nachteile haben, weil je nach Viewportbreite die Proportionen, z.B. von Text zu Bild stark unterschiedlich ausfallen können.

Konsequenterweise solltest du dann aber auch für margin, padding und border Prozentwerte verwenden, denn Pixel und Prozent sind unterschiedliche Einheiten und lassen sich nicht auf einen gemeinsamen Nenner bringen.
 
so ein viewportorientiertes design ist schön und gut. großer vorteil: es ist sehr barrierefrei.
nachteil: es wird schwierig für dich sein mit bildern zu arbeiten. denn wenn du diese mit % verwendest kann das zu sehr unschönen verzerrungen kommen. du musst dir halt überlegen was dir wichtiger ist.

grüße hokage
 
Hallo,

danke euch für die Hilfe.
Also das mit den prozentualen Angaben hab ich bis auf die border Werte soweit befolgt.
Hab mittlerweile auch schon auf einem Breitbildschirm getestet und es sieht ganz gut aus.

@ hokage

Bei meinem aktuellen Projekt hab ich ein recht breites Logo über dem Menü, das sich auf 80% Breite des Viewport ausdehen soll.
Hier hab ich jetzt genau die Zwickmühle. Wenn ich das Bild in Pixel angebe dann gibt es Lücken wenn der Platz fürs Bild in Prozent wegen des Viewports berechnet wird. Wenn ich das Bild in Prozent angeben gibt es bei ungewöhnlichen Viewports Stauchungen :|...
 
@hb133: eben das ist der angesprochene nachteil ;-) leider wird dein banner als header kein einzelfall bleiben. vermutlich wirst du ja noch öfter hintergrundgrafiken, oder erklärende grafiken verwenden.
wenn dich das zu sehr stört, würde ich auf en pixelbezogenes layout plädieren. dort hast du diese probleme nicht.

aber ich gebe dir mal einen heißen tipp ;-) schreib dieses problem mal an unseren meister persönich xD einfach eine pn an efchen. ich schätze mal es gibt da noch gewisse möglichkeiten, wie du beides irgendwie miteinander verbinden kannst. da bin ich aber im augenblick, ohne langes einarbeiten, überfragt. also schreib mal eine pn an ihn, und mach ihn auf diesen threat aufmerksam ;-)

ich denke er findet was passendes für dich ;-)

grüße hokage

*edit: würde mich nähmlich auch interessieren ;-)
 
Hallo,

danke euch für die Hilfe :smile:

@ PeterPan

Ist ein guter Vorschlag, aber leider ist mein Header nicht einfarbig :(

@ hookage555

Das klingt nach einer Lösung :D Werd ich vieleicht wirklich machen, aber nicht mehr heute Abend ^^
Wäre wirklich mal interessant in der Richtung weiterzukommen :idea:
 
prm schrieb:
Konsequenterweise solltest du dann aber auch für margin, padding und border Prozentwerte verwenden, denn Pixel und Prozent sind unterschiedliche Einheiten und lassen sich nicht auf einen gemeinsamen Nenner bringen.
Zum Vergrößern anklicken....
Das sehe ich ganz anders.
Wenn man auch den IE-quirks (z.B. IE5.5) berücksichtigen möchte, ergeben sich durch die Trennung von width und border / padding automatisch auch die padding / border-Probleme in anderen Browsern.
1px-Haarlinien sind dann auch mit flexieblen Gerüsten möglich.
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben