Anpassen an Viewport?

[sunoghlin]

Hi.
Ich möchte gerne wissen, wie ich eine Seite „richtig“ erstellen kann. Also
mit 100%-iger Nutzbarkeit. Ich habe hier im Forum schon viel gelesen, dass
Schematik sehr wichtig ist. Dann habe ich auch gelesen, dass sich eine
Webseite am viewports des Nutzers anpassen soll.

Nun möchte ich gern wissen, wie ich das machen kann. Ich würde mich
sehr freuen, wenn mir das jemand erklären könnte. Google hat mir da nicht
wirklich geholfen.

Hier ist mein Projekt (im Aufbau und ganz klein):
Typografie

Ist das es von der schematik her richtig? Was muss ich ändern, das es sich am viewport anpasst?

Ich hoffe, es kann mir jemand helfen.


Liebe Grüße
sunoghlin

 

[Efchen]

Ich möchte gerne wissen, wie ich eine Seite „richtig“ erstellen kann. Also mit 100%-iger Nutzbarkeit.

Das ist ganz einfach. Das geht mit reinem HTML. Benutze HTML zu dem Zweck, zu dem es gedacht ist, nämlich zur logischen Strukturierung Deines Inhalts. Mach Dein Layout und Design ausschließlich mit CSS und trenne Inhalt und Layout strikt voneinander. Dann hast Du eine barrierefreie und 100% in allen Browsern (auch veralteten) nutzbare Website.

Ich habe hier im Forum schon viel gelesen, dass
Schematik sehr wichtig ist.

Damit Clients, die den HTML-Code interpretieren (Suchmaschinen, Vorlesebrowser), verstehen, was sie da lesen.

Dann habe ich auch gelesen, dass sich eine Webseite am viewports des Nutzers anpassen soll.

Was eher in das Themenfeld "Benutzerfreundlichkeit" passt, als in "Nutzbarkeit". Eine Website mit horizontalen Scrollbalken ist 100% nutzbar, aber ziemlich bedienerunfreundlich.

Nun möchte ich gern wissen, wie ich das machen kann.

Das Anpassen an den Viewport (und auch die Schriftgröße!) geht mit passenden Einheiten für alle Größenangaben. "%" richtet sich am Viewport (bzw. dem Elternelement) aus, "em" richtet sich nach der Schriftgröße.
Aber wie gesagt, das gehört mehr zu "Benutzerfreundlichkeit" als zu "Nutzbarkeit".

Ist das es von der schematik her richtig?

Das ist gut so, ja. Ich hab nichts dran auszusetzen.

Ich sehe nur, dass der Alternativtext in Deinem Image nicht unbedingt sehr hilfreich ist.

Was muss ich ändern, das es sich am viewport anpasst?

Dein Header (das Image) hat eine fixe Breite. Wenn Du das wirklich an den Viewport anpassen willst, brauchst Du ein anderes Bild. Aber das ist nicht unbedingt der Weisheit letzter Schluss.
Außerdem hat Dein div.content eine fixe Breite.
Deine Buttons passen sich nicht an die Schriftgröße an, klar, sind ja auch Images.

Images solltest Du nicht skalieren, da das nicht gut aussieht.

 

[sunoghlin]

Vielen Dank.

Also bin ich schon mal auf den richtigen Weg, oder?

Zu den Grafiken hab ich noch eine Frage. Ich habe schon viel von svg gehört
und gelesen. Ich wollte mal wissen, wie ihr darüber denkt. Ist es
empfehlenswert grafiken (wegen skalieren) damit darzustellen?

Liebe Grüße

sunoghlin

 

[Efchen]

Ja, Du bist auf dem richtigen Weg, bzw. sollte Deine Seite so schon 100% Nutzbar sein. Du brauchst jetzt mehr Input zum Thema Benutzerfreundlichkeit und da gibts vieles und nicht immer ist alles einfach und oft macht man Kompromisse.

SVG wäre die einzige Lösung für skalierte Bilder. Aber das ist leider nicht ausgereift. Hier gabs vor kurzem einen sehr ausführlichen Thread zu dem Thema. Umsetzen lässt es sich wohl, aber macht browserübergreifend Probleme...so hab ichs zumindest im Kopf. Allein für FF betrachtet, wars eine tolle Sache.

 

[hokage555]

@ efchen: hast du evtl. ein link zu diesem svg thread?
weil bisher hat mich ein viewport orientiertes design immer in bezug auf meine pics abgeschreckt ;-) wenn es da irgendeine alternative gibt, würde ich mir die wenigstens gerne mal durchlesen

ach und könntest du nicht mal dafür sorgen, dass dieses forum auch ein viewport design bekommt^^ selbst ür meine 1280/1024 auflösung reicht mein port nicht aus, um die ganze seite anzusehen
und dieser scrollbalken ist echt unschön ;-)

mein nächstes projekt, werde ich aber mal in dieser hinsicht versuchen aufzubauen. vll. kann man feste breiten und % angaben ja ein wenig miteinander kombinieren ;-)

probieren geht über studieren

grüße hokage

 

[neuroleptika]

weil bisher hat mich ein viewport orientiertes design immer in bezug auf meine pics abgeschreckt ;-) wenn es da irgendeine alternative gibt, würde ich mir die wenigstens gerne mal durchlesen

Du könntest schon beim Entwurf darauf achten, daß deine Grafiken slidingdoors-tauglich sind ( A List Apart: Articles: Sliding Doors of CSS ).

ach und könntest du nicht mal dafür sorgen, dass dieses forum auch ein viewport design bekommt^^ selbst ür meine 1280/1024 auflösung reicht mein port nicht aus, um die ganze seite anzusehen
und dieser scrollbalken ist echt unschön ;-)

Bestimmt
- und fliegen kann er auch.

Was soll denn mit den Inhalten passieren die nicht in den Viewport passen?
Schriftgröße bis ins unleserliche verkleinern?

Deine png-Grafiken enthalten transparente Bereiche.
Im IE6 fuktioniert das so nicht.

 

[Efchen]

@ efchen: hast du evtl. ein link zu diesem svg thread?

Nein, aber es gibt doch eine Suchfunktion, und "SVG" sollte nicht allzu oft vorkommen, oder?

weil bisher hat mich ein viewport orientiertes design immer in bezug auf meine pics abgeschreckt

Kommt ja auf die Größe der Bilder an. Wenn die durchgehend so 200300px groß sind, dann kann man die bequem mit unterbringen, ohne dass man die skalieren muss.

ach und könntest du nicht mal dafür sorgen, dass dieses forum auch ein viewport design bekommt^^ selbst ür meine 1280/1024 auflösung reicht mein port nicht aus, um die ganze seite anzusehen

Ich weiß ja nicht, wie groß Dein Viewport ist (die Auflösung sagt darüber ja nichts aus ;-)), aber html.de ist bei mir an der Stelle, wo ich gerade so keinen Scrollbalken bekomme, etwa 850px breit.
Das Forum könnte aber ein max-width vertragen, denn bei großen Breiten kann man sogar Romane schreiben und trotzdem passt alles in eine Zeile ;-)
Das liest sich natürlich nicht sehr angenehm.

mein nächstes projekt, werde ich aber mal in dieser hinsicht versuchen aufzubauen. vll. kann man feste breiten und % angaben ja ein wenig miteinander kombinieren

Und em auch! Elemente, die Text enthalten, und nicht direkt abhängig vom Viewport sind, z.B. ein Menü, das idR nur einen kleinen Teil des Viewports einnimmt, gebe ich oft eine Breite in em, so dass der Text immer rein passt.

Ideal wäre natürlich, eine feste variable ;-) Breite in em und ein max-width in % anzugeben. Hmmm..denke ich... :-)

 

[sunoghlin]

Hi.

ich habe glaube den Thread zu den svgs gefunden.

http://www.html.de/showcase/23380-bitte-design-bewerten.html

Ich möchte es gern mal damit versuchen. Hab mich auch damit schon näher
informiert. Und auch schon was ausprobiert. funktioniert gut :grin:

Eine Frage habe ich allerdings noch...
Der IE versteht ja svg nicht (es sei denn, man hat ein Plug-in). Kann man da irgendwie ne andere Variante
den Usern anbieten? Sozusagen, wenn IE dann bilder als .jpg (oder .gif oder
.png) darstellen. Geht sowas? Wenn ja, wie?

Wäre das denn überhaupt empfehlenswert?

Liebe Grüße

sunoghlin

 

[hokage555]

Bestimmt
- und fliegen kann er auch.

... ich glaube efchen hat besser verstanden als du, dass das nicht so ganz ernst gemeint war ^^

Was soll denn mit den Inhalten passieren die nicht in den Viewport passen?
Schriftgröße bis ins unleserliche verkleinern?

nein mit % und em arbeiten ;-) dann passt es in jeden viewport xD

Ich weiß ja nicht, wie groß Dein Viewport ist (die Auflösung sagt darüber ja nichts aus ;-)), aber html.de ist bei mir an der Stelle, wo ich gerade so keinen Scrollbalken bekomme, etwa 850px breit.

was ich mit meiner 1280 * 1024 auflösung meine, ist die tatsache, dass ich selbst auf dieser auflösung (alles wird kleiner dargestellt), und bei meinem kompletten viewport (19 zoll bildschirm) dieses forum nicht komplett angezeigt bekomme^^ wenn ich den viewport kleiner mache, wird es ja noch schlimmer^^
zur auflösung: diese regelt doch ganz allgemein, wie genau alles dargestellt wird. je genauer, desto kleiner wird der input. icons aufm desktop etc. so auch der inhalt im viewport)
würde ich die auflösung noch weiter runter setzen, dann würde dieses forum ja noch größer werden^^
oder sehe ich das falsch?

grüße hokage

 

[Efchen]

würde ich die auflösung noch weiter runter setzen, dann würde dieses forum ja noch größer werden
oder sehe ich das falsch?

Jein. Am Bildschirm wird es Dir größer erscheinen. Die Größe in Pixel bleibt die gleiche.

Komisch, dass Du mit fast 1280px Breite das nicht angezeigt bekommst, ich sag ja, wenn ich mein Fenster verkleinere, gehts bis ca. 850px Breite, erst dann verkleinert es sich nicht mehr und zeigt Scrollbalken.

 

[neuroleptika]

... ich glaube efchen hat besser verstanden als du, dass das nicht so ganz ernst gemeint war ^^

Das Efchen fliegen kann war auch nicht ganz ernst gemeint ;-).

nein mit % und em arbeiten ;-) dann passt es in jeden viewport xD

Das stimmt so nicht.
Irgendwann gibt es immer einen Inhalt der nicht in den viewport passt.

Gerade bei Angaben in em tritt das bei Schriftvergrößerungen sogar schneller ein ( z.B. bei langen Wörtern oder Breitenangaben für Elemente) .

Trotzdem halte auch ich Breitenangaben in % und em offt für geeigneter.

 

[Efchen]

Sehe ich auch so (Das mit dem nicht passenden Viewport und mit meinen Fliegekünsten).

Ganz perfekt geht es nicht. Handy-Display, Schriftgröße auf Maximum und keine Scrollbalken geht irgendwie nicht.

Genauso wenn Du die Schriftgröße auf 4px setzt, erkennt man halt nicht mehr viel.

Aber Leute, die es aus gesundheitlichen Gründen brauchen, dass sie ihre Schrift auf 40px setzen, werden es glabe ich auch nicht erwarten, dass das Layout sich nicht verzieht und dann keine Scrollbalken da sind. Aber in so einem Fall kann man ja die Styles einfach aushebeln und sich die HTML-only-Seite ansehen.

 

[hokage555]

Komisch, dass Du mit fast 1280px Breite das nicht angezeigt bekommst, ich sag ja, wenn ich mein Fenster verkleinere, gehts bis ca. 850px Breite, erst dann verkleinert es sich nicht mehr und zeigt Scrollbalken.

ich habe keine ahnung, was ich da wieder fabriziert habe^^
habe eben diese seite einfach mit strg+scrollrad gezoomed. eine ebene kleiner gezoomed und fertig...
ich dachte dieses zoomen, würde nachdem man den browser neu startet, wieder verschwinden. das das dauerhaft für die jeweilige seite ist, war mir nicht klar^^

naja man lernt dazu xD
jetzt passt es auf alle fälle auch auf meinen viewport

ps: hab mich mal in den viewport svg thread eingelesen xD
scheint wirklich etwas höhere kunst zu sein xD ist auf alle fälle recht interessant ;-) das altbekannte bilderscallierungsproblem macht es halt nur etwas schwierig. aber wenn man ein menu nicht mit backgroundpics und generell keine sehr großen bilder hat, die man skallieren müsste, ist das alles denke ich umsetzbar xD
schwierig wird es nur bei einem banner ;-) da kann man dann überlegen, wie man vorgeht

 

[sunoghlin]

Hi.

Ich habe in den letzten Tag das Design der Seite noch mal "umgeschmissen".
jetzt habe ich das problem, das die Seite im ie7 so aussieht wie ich sie gern
hätte, aber im firefox nicht.

ich kann mir nicht erklären warum. Der hintergrund soll komplett weis sein.
Dazu habe ich einfach mal ein div genommen und ihm die klasse "seite"
zugewiesen. Diese beinhaltet u. a. background-color:#ffffff;. dieses div
gruppiert die komplette seite.

Warum wird dann nicht alles weiß? Liegt es vielleicht an irgendwelchen
anderen eigenschaften?

Ist die Seite jetzt eigentlich immernoch 100% nutzbar? Wie sieht es denn mit der benutzerfreundlichkeit aus?

Typografie

Liebe Grüße

sunoghlin

 

[neuroleptika]

Du clearst falsch.
Ein clearendes Element als letztes in das umschließende Element von
#navigation und .content wäre richtig.

 

[sunoghlin]

Sorry, dass ich noch mal nerven muss, aber das versteh ich nicht..

Du clearst falsch.
Ein clearendes Element als letztes in das umschließende Element von
#navigation und .content wäre richtig.

Wenn ich nur das mache sitzen #navigation und .content nicht mehr
nebeneinander.

Eigentlich wollte ich ja nur, dass die #seite alles weis macht. Eben wie im
IE.

Kann mir jemand helfen? :cry:

Liebe Grüße

sunoghlin