800x600 nurmehr für "puristen"?

[Herwig]

hallo zusammen,

es gibt ja die unterschiedlichsten philosophien zum thema bildschirmauflösung.

was meint ihr, ist im sinne der barrierefreiheit/usability besser:

layout gennerell fluid gestalten, sodass es mit (beinahe) jeder ausflösung zurecht kommt, oder sind auch webseiten mit einem anderen ansatz "erlaubt"?

Herwig

[rob]

Hi!

layout gennerell fluid gestalten, sodass es mit (beinahe) jeder ausflösung zurecht kommt, oder sind auch webseiten mit einem anderen ansatz "erlaubt"?

Alles ist erlaubt. Man sollte sich aber überlegen, wieviel Sinn ein bestimmter Ansatz ergibt...
Fluid Layout muß nicht immer gut sein. Wenn man ein Browserfenster auf einem großen Screen (mit hoher Auflösung) maximiert, dann könnte es sein, daß der Fließtext, der auf einem Screen mit 1024px Breite eine ganze Seite einnimmt, in drei oder vier Zeilen untergebracht wird.
Das ist dann für die Lesbarkeit natürlich nicht gerade schön.
Mit Hilfe eines festen Bereiches könnte man das umgehen.

Dann ist noch zu bedenken, daß der Trend nicht nur zu größeren Auflösungen hingeht, sondern daß auch immer mehr Leute mit Handy, PDA, ... unterwegs sind, wo es nur einen recht kleinen Anzeigebereich gibt.

Wie du die Sache jetzt angehst, bleibt dir überlassen.
Am Ende sollte aber möglichst eine Site bei rauskommen, die mit jeder Auflösung/Viewportgröße brauchbar ist.
Was ich in keinem Fall machen würde, ist die Bildschirmgröße mit JS auslesen und dann dementsprechend verschiedene Seiten ausliefern.
Scripte wie das Folgende findet man leider ab und zu mal im Netz:

if (screen.width > 1000) {  
 location.href="1024.html";  
}  
else  {  
 location.href="800.html";  
}

Sowas solltest du in keinem Fall einsetzen.

Aber sonst...
Am besten arbeitest du so, daß es überall irgendwie passt.
In keinem Fall würde ich eine Site für eine bestimmte Auflösung "optimieren".
Wenn ich sowas schon lese... Das ist ein Zeichen dafür, daß ein Webdesigner es nicht besser kann.

Und dann kannst du für bestimmte Ausgabemedien noch andere Stylesheets ausliefern:
Für kleine Screens kannst du ein eigenes Stylesheet über media="handheld" einbinden.
Für Beamer oder Projektoren kannst du ein Stylesheet mit media="projection" einbinden.
Für die Ausgabe auf einem Fernseher kannst du media="tv" einsetzen.
SelfHTML sagt dir mehr dazu.

Schöner Gruß,
rob

[Jeena Paradies]

Hallo,

if (screen.width > 1000) {

location.href="1024.html";
}
else  {
location.href="800.html";
}

  
Da jetzt das iPhone draußen ist, wird man wohl öfter das hier stattdessen sehen:  
  
~~~css
@media handheld and (max-width: 20em), screen and (max-width: 20em) {  
 #sidebar1 {  
  float: left;  
  width: 6em;  
 }  
 #sidebar2 {  
  width: 100%  
 }  
 #main {  
  width: 14em;  
 }  
}  
  
@media handheld and (min-width: 20em), screen and (min-width: 20em) {  
 #sidebar1 {  
  float: left;  
  width: 25%;  
 }  
 #sidebar2 {  
  width: 25%;  
  float: right;  
 }  
 #main {  
  width: 50%;  
 }  
}

Naja, oder so ähnlich zumindest.

Jeena

[Tim Tepaße]

Hallo Jeena,

Da jetzt das iPhone draußen ist, wird man wohl öfter das hier stattdessen sehen:
@media handheld and (max-width: 20em), screen and (max-width: 20em)

Leider nicht. Oder besser nicht. Ich hab mich da noch nicht zu einer endgültigen Meinung entschieden.

Apfel unterstützt „handheld“ nicht. Der Grund liegt darin, dass Safari/iPhone ein zoomender Browser ist. Es wird also per default ein größerer virtueller Viewport (980 gedachte Pixel in der Breite) und damit mehr Platz zum Rendern genutzt als die native Auflösung (320 Pixel Breite hochkant, 480 Pixel quer) bereit stellt. Sozusagen ein imaginärer richtiger Bildschirm. Konsequenterweise kein Medientyp „handheld“ sondern „screen“, Safari reagiert nur auf letzteres. Wohl ein Resultat aus Apfels Marketing-Claim, „richtiges Internet“ zur Verfügung stellen zu wollen. Und natürlich daraus, dass das Web nun mal das reale Web ist und nicht das bessere Web.

Andererseits bietet Safari auf dem iPhone an, Webseiten, Webanwendungen auch ungezoomt, direkt in nativer Auflösung anzubieten. Die Informationen dazu muss man merkwürdigerweise im HTML als meta-Elemente zur Verfügung stellen, ungefähr so:

~~~html <meta name="viewport" content="width=320,
                                intitial-scale=1.0,
                                user-scalable=no" />

  
Man kontrolliert also direkt den Viewport, den Safari zum Rendern nutzt und auch das Zoomverhalten. Ich denke mal, die Möglichkeit wurde wegen Apfels „Anwendungen auf dem iPhone? Nehmt Web-Apps!“-Haltung eingeführt. Warum als Meta-Daten in HTML? Keine Ahnung, ich hätte einfach herstellerspezifische CSS-Eigenschaften genommen, CSS 3 bietet ja nichts per Default zum Zoomen an. Ein iPhone-spezifisches Stylesheet dagegen wird wieder ganz (bis auf die handheld-Sache)  im Sinne von CSS Media Queries an:  
  
  ~~~html
<link media="only screen and (max-device-width: 480px)"  
 href="iPhone.css" type="text/css" rel="stylesheet" />

Das ganze wurde bislang wegen der dämlichen WWDC-NDAs vom Experimentierern zusammengereimt, jetzt gerade hat Apfel auch etwas Dokumentation online gestellt. Leider steht da nix zu den Gründen; ich hoffe da noch auf ein erklärendes Weblog-Posting. Aber „handheld“ scheint echt nur eine gut gemeinte Totgeburt zu sein.

Tim

[Jeena Paradies]

Hallo,

<meta name="viewport" content="width=320,

intitial-scale=1.0,
                                user-scalable=no" />

Diesen Codeschnipsel hätte ich eher von Microsoft erwartet, wie kommt man auf so einen Schwachsin?  
  
   Jeena  
![](http://jeenaparadies.net/pavatar.png)

-- 
[Operas Speeddial](http://jeenaparadies.net/weblog/2007/jun/operas-speeddial)  | [Jlog](http://jeenaparadies.net/webdesign/jlog/) | [Gourmetica Mentiri](http://jeenaparadies.net/gourmetica-mentiri/)

[Cybaer]

Hi,

Diesen Codeschnipsel hätte ich eher von Microsoft erwartet, wie kommt man auf so einen Schwachsin?

Wenn MS ihren Schwachsinn auch immer so sauber in META-Elemente gepackt hätte, gäb es ein paar Probleme weniger.

Was ist daran auszusetzen?

Ärgerlicher finde ich eher, daß das iPhone seine Viewport-Maße nicht im Request-Header oder UserAgent mitsendet, wie es viele andere Handhelds tun ...

... aber egal: meine Lib ist bereits angepaßt ... :)

Gruß, Cy-"fleißig am 'viewporten'"-baer

[MudGuard]

Hi,

Andererseits bietet Safari auf dem iPhone an, Webseiten, Webanwendungen auch ungezoomt, direkt in nativer Auflösung anzubieten. Die Informationen dazu muss man merkwürdigerweise im HTML als meta-Elemente zur Verfügung stellen, ungefähr so:

<meta name="viewport" content="width=320,

intitial-scale=1.0,
                                user-scalable=no" />

  
Bietet Safari auf dem iPhone denn auch eine Möglichkeit, wie der User dieses Element in die gerade angezeigte Seite einfügen bzw. daraus wieder entfernen kann?  
Oder wird die Entscheidungsgewalt darüber dem Seitenersteller statt dem Setennutzer überlassen?  
  
cu,  
Andreas

-- 
[Warum nennt sich Andreas hier MudGuard?](http://MudGuard.de/)  
[O o ostern ...](http://ostereier.andreas-waechter.de/)  
  
Fachfragen unaufgefordert per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.  

[Tim Tepaße]

Hallo Andreas,

Bietet Safari auf dem iPhone denn auch eine Möglichkeit, wie der User dieses Element in die gerade angezeigte Seite einfügen bzw. daraus wieder entfernen kann? Oder wird die Entscheidungsgewalt darüber dem Seitenersteller statt dem Setennutzer überlassen?

Wie meinen? Das ist natürlich eine Seitenanbieter-Geschichte. Otto Normalnutzer hat bei nicht-angepassten Webseiten durch Doppel-Tippen oder Pinchen binnen Momente zu Zoomen. Klar, einen Hauch nerviger als direktes Anzeigen, aber in Anbetracht der Tatsache, dass geschätzte 99% der Webseiten auf 320 Pixel Breite eh nicht so toll dargestellt werden halte ich das nun gerade nicht für das Drama.

Tim

[Cheatah]

Hi,

es gibt ja die unterschiedlichsten philosophien zum thema bildschirmauflösung.

ja. Die realitätsnächste besagt, dass nichts, aber auch wirklich gar nichts von alledem, was Du eventuell einmal im Zusammenhang mit der Web-Entwicklung machen wirst, auch nur den geringsten Zusammenhang zu einer Bildschirmauflösung hat.

was meint ihr, ist im sinne der barrierefreiheit/usability besser:

Ich bin verwirrt. Stellst Du gerade wirklich die Frage, ob es im Hinblick auf die Barrierefreiheit sinnvoll sein kann, eine fiktive Größe als Barriere zu verwenden?

layout gennerell fluid gestalten, sodass es mit (beinahe) jeder ausflösung zurecht kommt, oder sind auch webseiten mit einem anderen ansatz "erlaubt"?

Es ist in jedem Fall besser, sich vom Begriff "Auflösung" vollständig zu trennen. Schmeiß ihn in konzentrierte Schwefelsäure, dann hat er wenigstens noch einen Selbstzweck.

Cheatah

[Cybaer]

Hi,

layout gennerell fluid gestalten, sodass es mit (beinahe) jeder ausflösung zurecht kommt, oder sind auch webseiten mit einem anderen ansatz "erlaubt"?

Sicher ist es das. Z.B. ist eine Breite > 35em für Fließtext auf dem Bildschirm ohnehin nicht mehr sinnvoll.

Gruß, Cybaer

[Gunther]

Hallo Herwig!

es gibt ja die unterschiedlichsten philosophien zum thema bildschirmauflösung.

Wie dir ja bereits mehrfach mitgeteilt wurde, ist das nicht der entscheidende Punkt, und wahrscheinlich auch nicht das, was du meinst. Reden wir also lieber von der Viewportgröße. ;-)

was meint ihr, ist im sinne der barrierefreiheit/usability besser:

layout gennerell fluid gestalten, sodass es mit (beinahe) jeder ausflösung zurecht kommt, oder sind auch webseiten mit einem anderen ansatz "erlaubt"?

Zum Glück ist ja (noch zumindest) alles erlaubt. Die Frage ist daher eher "Was ist benutzerfreundlich?".

Viele Ansätze sind ja bereits genannt worden, wie

• unterschiedliche Stylesheets für die verscheidenen Ausgabemedien
• Fließtexte nicht breiter als ca. 35em

Zum Thema Handy/ PDA habe ich so meine eigenen Ansichten. Ich persönlich erachte solche Geräte nur für sehr begrenzt tauglich, um damit im Internet zu surfen. Es gibt m.M.n. auch nur sehr wenig Informationen im Netz, die für den Abruf mit dem Handy interessant sind (u.a. Fahrplan-, Adress- und Telefonauskünfte). Dafür sollte es dann auch entsprechende Seiten geben. Wer derlei Informationen auf seinen Seiten nicht bereitstellt, und auch sonst keine Informationen, die für den Abruf mit einem Handy geeignet sind, der kann sich überlegen, ob er auch dafür noch ein extra Stylesheet erstellen will.

Nur weil etwas technisch möglich ist, heißt das noch lange nicht, dass es auch sinnvoll ist. Längere Fliesstexte und/ oder visuelle Informationen per Grafiken mit einem Handy/ PDA zu betrachten, ist in meinen Augen ungefähr so, als würde man seine Tageszeitung im DIN A8 Format lesen. Wie gesagt: Ausnahmen bestätigen die Regel.

Ich halte es aber z.B. durchaus für sinnvoll, das Layout per JS (sofern aktiviert) anzupassen. Hat der jeweilige User also JS aktiviert, darf man es sehr wohl zur weiteren Anpassung des (CSS-) Layouts an seine jeweilige Viewportgröße verwenden (natürlich _nicht_ per screen.width, sondern eher per offsetWidth oder Abfrage der body-Breite per getPropertyValue("width") etwa).

Die Breite deiner Site ist aber eh nur ein (kleiner) Teilaspekt der Barrierearmut. Die vielen anderen Aspekte wie etwa

• Bedienbarkeit der Seite per Tastatur (Acceskeys, Tab-Reihenfolge)
• Screenreader "tauglicher" Quellcode
• Farbwahl
  um nur mal einige zu nennen, sind meist die viel größeren "Stolperfallen" auf dem Weg.

Ein Tipp nebenbei: Seite immer auch mal ohne Styles (Text only Version) angucken und "bedienen". Wenn das "ordentlich" funktioniert, hast du zumindest schon einen großen Schritt in Richtung "Barrierearmut" getan!

Gruß Gunther

[Blaubart]

Tach.

Nur weil etwas technisch möglich ist, heißt das noch lange nicht, dass es auch sinnvoll ist.

Und nur weil etwas nicht sinnvoll ist, heißt das noch lange nicht, daß es nicht trotzdem im großen Stil genutzt wird. Hui, das waren viele "nicht"s. :)

Handys z. B. sind gleich nach Eierschneidern so ziemlich das unpassendste Gerät zum Musikabspielen/-anhören. Mit Kopfhörern vielleicht noch annehmbar, aber über die eingebauten Lautsprecher ... Trotzdem scheint sich dieser Sport wachsender Beliebtheit zu erfreuen, und die Hersteller bauen auch weiterhin die entsprechenden Geräte.

Wie gesagt: Ausnahmen bestätigen die Regel.

Oder werden letztendlich gar selber zur Regel; sinnvoll hin oder her.

[Gunther]

Tach.

Nur weil etwas technisch möglich ist, heißt das noch lange nicht, dass es auch sinnvoll ist.

Und nur weil etwas nicht sinnvoll ist, heißt das noch lange nicht, daß es nicht trotzdem im großen Stil genutzt wird. Hui, das waren viele "nicht"s. :)

Handys z. B. sind gleich nach Eierschneidern so ziemlich das unpassendste Gerät zum Musikabspielen/-anhören. Mit Kopfhörern vielleicht noch annehmbar, aber über die eingebauten Lautsprecher ... Trotzdem scheint sich dieser Sport wachsender Beliebtheit zu erfreuen, und die Hersteller bauen auch weiterhin die entsprechenden Geräte.

Hmmm, was willst du mir jetzt eigentlich sagen?
Zumindest bei deinem Beispiel und der Sache auf die ich mich bezogen habe, gibt es einen gravierenden Unterschied: Auf das was Handyhersteller tun und lassen, habe ich persönlich keinen Einfluss. Auf eine von mir online gestellte Website schon! Also kann ich hier frei für mich entscheiden, ob ich mir extra Arbeit für eine Sache mache, die ich eh als nicht sinnvoll erachte, oder nicht.

Wie gesagt: Ausnahmen bestätigen die Regel.

Oder werden letztendlich gar selber zur Regel; sinnvoll hin oder her.

Dass das Handy zum bevorzugten Ausgabegerät für Internetseiten wird, wage ich dann doch mal zu bezweifeln (zumindest solange es noch keine Projektionsbrillen mit mind. 1200px x 900px Viewport gibt)!

Gruß Gunther

[Blaubart]

Tach.

Hmmm, was willst du mir jetzt eigentlich sagen?

Das, was ich bereits sagte: Trends, die sich letztendlich durchsetzen, sind nicht immer "sinnvoll".

Zumindest bei deinem Beispiel und der Sache auf die ich mich bezogen habe, gibt es einen gravierenden Unterschied: Auf das was Handyhersteller tun und lassen, habe ich persönlich keinen Einfluss. Auf eine von mir online gestellte Website schon! Also kann ich hier frei für mich entscheiden, ob ich mir extra Arbeit für eine Sache mache, die ich eh als nicht sinnvoll erachte, oder nicht.

Ja, tu das. Mir ging es überhaupt nicht um ein flammdendes Plädoyer für handytaugliche Webseiten o. ä., sondern ich wollte lediglich ein Beispiel für etwas aufzeigen, das auch nicht "sinnvoll" ist, sich aber dennoch weit verbreitet hat.

[Manuel B.]

Ich grüsse den Cosmos,

Zum Thema Handy/ PDA habe ich so meine eigenen Ansichten. Ich persönlich erachte solche Geräte nur für sehr begrenzt tauglich, um damit im Internet zu surfen.

Ähnliches hört man bei allen technischen Neuerungen. Wenn sie sich dann ein paar jahre später durchgesetzt haben, hört man von den gleichen Leuten "ich habs ja schon immer gesagt".

Wer beim aktuellen Trend, das Internetzugänge per handy immer billiger werden, nicht folgt, wird bald als Webdesigner nicht mehr wettbewerbsfähig sein. Ist meine persönliche Prognose, die sich aber, aufgrund der anwachsenden mobilen Datenverfügbarkeit, bewahrheiten wird.

Möge das "Self" mit euch sein

[Gunther]

Hi Manuel,

Zum Thema Handy/ PDA habe ich so meine eigenen Ansichten. Ich persönlich erachte solche Geräte nur für sehr begrenzt tauglich, um damit im Internet zu surfen.

Ähnliches hört man bei allen technischen Neuerungen. Wenn sie sich dann ein paar jahre später durchgesetzt haben, hört man von den gleichen Leuten "ich habs ja schon immer gesagt".

Von mir nicht. Hier geht es ja auch weniger um die technische Machbarkeit, als vielmehr um gegenläufige Zielrichtungen. Handys sollen immer kleiner & leichter werden, wodurch sich auch für die Displays eine gewisse Größenbeschränkung ergibt. Internetseiten sollen Informationen übermitteln, die in den allermeisten Fällen für die visuelle Darstellung auf einem Display eine gewisse Größe benötigen, um von "Otto normal" User vernünftig aufgenommen werden zu können.

Wer beim aktuellen Trend, das Internetzugänge per handy immer billiger werden, nicht folgt, wird bald als Webdesigner nicht mehr wettbewerbsfähig sein. Ist meine persönliche Prognose, die sich aber, aufgrund der anwachsenden mobilen Datenverfügbarkeit, bewahrheiten wird.

Also ich würde da ja mehr auf Sub-/ Notebooks und Hotspots setzen.
Es gibt sicherlich auch Informationen/ Inhalte die _auch_ für den Abruf mit einem Handy/ PDA geeignet sind. Diese machen jedoch imho einen verschwindend geringen Teil aus. Wer solche Inhalte nicht auf seiner Website anbietet, der kann es sich imho zweimal überlegen, ob er ein extra Stylesheet für den Media Type Handheld erstellt oder nicht.

Möge das "Self" mit euch sein

Gruß Gunther

[Manuel B.]

Ich grüsse den Cosmos,

Es gibt sicherlich auch Informationen/ Inhalte die _auch_ für den Abruf mit einem Handy/ PDA geeignet sind. Diese machen jedoch imho einen verschwindend geringen Teil aus.

Also wenn Mails für dich einen verschwindend geringen Teil der Informationen im Internet ausmachen, kann ich deine Argumente nachvollziehen.
Bei dem aktuellen Mailaufkommen ist das ganze aber in keinster Weise verschwindend gering. Und Mails sind nur ein einzelnes Beispiel, da gibts noch einige mehr.

Möge das "Self" mit euch sein

[Gunther]

Hallo,

Es gibt sicherlich auch Informationen/ Inhalte die _auch_ für den Abruf mit einem Handy/ PDA geeignet sind. Diese machen jedoch imho einen verschwindend geringen Teil aus.

Also wenn Mails für dich einen verschwindend geringen Teil der Informationen im Internet ausmachen, kann ich deine Argumente nachvollziehen.

Nun gut, wenn Mails für dich zur Kategorie "Webseiten" (siehe Ausgangsposting) zählen ...!

Bei dem aktuellen Mailaufkommen ist das ganze aber in keinster Weise verschwindend gering. Und Mails sind nur ein einzelnes Beispiel, da gibts noch einige mehr.

Und bei den Mails müsste man ja auch noch zwischen Text- und HTML Emails differenzieren. Bei Text-Emails ist eh kein Stylesheet von Nöten.

Also um meine Aussagen vielleicht etwas klarer zu stellen: Ich sprach und spreche von Websites - also dass, was jeder gemeinhin über eine entsprechende URL mit einem Browser an Informationsseiten im Internet abrufen kann (Webmail u.ä. mal ausgenommen).

Möge das "Self" mit euch sein

Gruß Gunther

[Cybaer]

Hi,

Wer solche Inhalte nicht auf seiner Website anbietet, der kann es sich imho zweimal überlegen, ob er ein extra Stylesheet für den Media Type Handheld erstellt oder nicht.

Angesichts des Umstands, daß wohl die meisten Handhelds "handheld" ohnehin ignorieren, ist es wohl auch dann egal, falls man solche Inhalte doch anbietet. >;-> SCNR

Gruß, Cybaer