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

Websiten Optimierung für Portable Geräte

S

Shrax

Mitglied
Mit einem "wiederkehr" post, da ich lange nicht Online war möchte ich gleich eine Frage und evtl. am besten gleich eine Diskussion starten.

Mit der Suchfunktion fand ich leider nur dieses Thema http://www.html.de/php/19455-psp-browser-erkennung.html das allerdings nur eine Spezifische frage anspricht.

Ich möchte gerne Wissen ob es gute Tutorials gibt, oder auch was ihr davon haltet seine Website für Portable Geräte wie PDE, IPhone, Poket PC, psp und alle anderen Geräte selbiger Art zu Optimieren.

Eine flexible Seite sollte in allen Größen gut dargestellt sein. Doch bei solchen Geräten sollte man einige Sachen zusätzlich Optimieren, denn zum Beispiel, wie ich mit bekommen habe können manche Browser dieser Geräte nur wenig css.

Gibt es zuverlässige Möglichkeiten Speziell die Leute anzusprechen die mit so etwas Surfen? Die Seite --> http://www.kulturbanause.de/2008/09/websites-fur-das-iphone-erstellen-und-optimieren/ erklärt das Speziell fürs Iphone. Hat das schon jemand getestet?


Vielleicht kennt jemand weitere Links zu Seiten die sich damit beschäftigen?
Oder hat jemand selber Erfahrung damit?
 
Code: 
<link rel="stylesheet" media="handheld" />
Klappt prima.
Ansonsten einzelne Seite mit XHTML Basic.
 
Und welche dinge sollte man hier Speziell für das "Handheld" css einsetzen bzw. spezielle Styles oder muss man etwas Speziell beachten?

Und nach der von mir geposteten Seite wird ein IPhone nicht als "Handheld" medium also nicht als Mobiles gerät sondern als PC erkannt.
 
Hurrrican schrieb:
Und welche dinge sollte man hier Speziell für das "Handheld" css einsetzen bzw. spezielle Styles oder muss man etwas Speziell beachten?
Zum Vergrößern anklicken....
Du musst dir halt bewusst machen, dass auf einem mobilen Gerat nur eine sehr geringe Auflösung vorhanden ist, somit auch ein kleiner Viewport im Browser. Ein 3-spaltiges Layout macht dort also wenig Sinn, ebenso zu große Bilder oder breite Tabellen. Verschachtelte Menüs mit hover-Effekt sind auch nicht zu empfehlen, da bleibt also fast nur eine reine Textversion mit 1em Schriftgröße und 100% Breite.

Und nach der von mir geposteten Seite wird ein IPhone nicht als "Handheld" medium also nicht als Mobiles gerät sondern als PC erkannt.
Zum Vergrößern anklicken....
Wenn das wirklich so ist, haben die Entwickler wohl nicht intensiv genug nachgedacht.
 
Du musst dir halt bewusst machen, dass auf einem mobilen Gerat nur eine sehr geringe Auflösung vorhanden ist, somit auch ein kleiner Viewport im Browser. Ein 3-spaltiges Layout macht dort also wenig Sinn, ebenso zu große Bilder oder breite Tabellen. Verschachtelte Menüs mit hover-Effekt sind auch nicht zu empfehlen, da bleibt also fast nur eine reine Textversion mit 1em Schriftgröße und 100% Breite.
Zum Vergrößern anklicken....
Hm also am besten im handheld.css alle grafiken per Display: none oder eben mit negativen px -xxxpx ausbelden und diesen Platz ggf. nutzen um anderen dingen mehr Platz zu machen.

Die hover-Effeckte also per css wegmachen (wo in der "normalen pc ansicht" drin sind) und eine ausweichmöglichkeit einbauen (Alle Links nochmal in die erste Seite des Menüs die man ja auch ohne untermenüs sieht schreiben).

Links die auf dem Medium evtl. zu klein dargestellt werden mit 'title="erklährung des Links"' auszeichen könnte ich mir Vorstellen.

Wenn das wirklich so ist, haben die Entwickler wohl nicht intensiv genug nachgedacht.
Zum Vergrößern anklicken....
Was ja leider öfter so ist ^.^.
 
Hurrrican schrieb:
Hm also am besten im handheld.css alle grafiken per Display: none oder eben mit negativen px -xxxpx ausbelden und diesen Platz ggf. nutzen um anderen dingen mehr Platz zu machen.
Zum Vergrößern anklicken....
Ich würde display: none verwenden.

Die hover-Effeckte also per css wegmachen (wo in der "normalen pc ansicht" drin sind) und eine ausweichmöglichkeit einbauen (Alle Links nochmal in die erste Seite des Menüs die man ja auch ohne untermenüs sieht schreiben).
Zum Vergrößern anklicken....
Die Effekte braucht man nicht zu entfernen, man definiert sie erst garnicht.

Links die auf dem Medium evtl. zu klein dargestellt werden mit 'title="erklährung des Links"' auszeichen könnte ich mir Vorstellen.
Zum Vergrößern anklicken....
Warum sollten die Links zu klein dargestellt werden?
Title wird nicht sehr viel bringen, da es auf diesen Geräten keine Maus gibt.
 
Kann ich jetzt nicht mit Gewissheit sagen, weil ich es noch nicht ausprobiert habe, aber wenn ich mal genauer drüber nachdenke könntest du Recht haben, denn beim Printlayout muss man die nicht erwünschten Elemente auch wieder ausblenden.
 
Handheld frisst media="screen" nicht. Opera Mini/Mobile machen das schon sehr gut. Bilder werden auch runter skaliert. Soweit ich weiß, hat das Iphone zwei Modi, einem in welches es media="screen" frisst und einen wo es die Handheld-CSS frisst.
 
Wenn ich mich mal geschwind zum thema einmischen darf:
Ich hab n Iphone da hab ich mal meine Seite geöffnet die wird einwandfrei dargestellt.
Sogar bei der Navi die ich mit css gemacht habe, verarbeitet das iphone einen Tip auf einen Menüpunkt der Untermenüpunkte enthält wie beim PC der mouseover.
Das einzige problem sind die Bilder die überlappen sich mit der adbar rechts.
....und ich hab in head keinerlei angaben media="screen" oder so was ;)

Liebe Grüße
David
 
Poste mal bitte den Link zu der Seite, mit der du das getestet hast, das interessiert mich jetzt mal.

Hat es denn die Möglichkeit, zwischen screen und handheld zu wechseln?
 
Und die wird so korrekt dargestellt? Nimmt das Menü da nicht einen Großteil des Platzes ein? Hast du Scrollbalken im Browser?
 
Wie gesagt das einzige Problem sind die Bilder sonst wirklich alles korrekt.
Beim Impressum wird die Seite halt ewig lang weil der content bereich aufm iphone schmaler wird un im Impressum viel Text ist.
Also beim Iphone gibts keine Scrollbalken ich weiß nicht ob du rin Iphone hast ;)
Aufm PC hab ich einen
 
Nein, ich hab kein iPhone, nur ein altes Xda neo mit IE6. Deswegen frag ich ja, wie viel Platz das Menü ein nimmt und ob Scrollbalken angezeigt werden, weil ich hier welche hab.
 
Bei n Iphone is denk ich kein balken da bewegt man sich einfach per Stift/finger in die richtungen der Website.

@DeDaffid
Wenn ich das so einwerfen darf, den Newstext wo da von rechts nach Links leuft mit der Farbe gelb fällt auf Gelben hintergrund nicht so auf ^^
 
DeDaffid: HTML sagte einmal, das media per Voreinstellung "screen" ist. Die Browser machten es aber zu "all", also für alle Medien. Deshalb sagt HTML5 jetzt:
http://www.whatwg.org/specs/web-apps/current-work/#attr-link-media schrieb:
The default, if the media attribute is omitted, is all, meaning that by default links apply to all media.
Zum Vergrößern anklicken....
Einige Angaben in deinem CSS sind aber möglicherweise nicht in allen Medien erlaubt, da fällt mir z.B. cursor:; ein, welches in "print" nicht erlaubt.
Wäre also zu empfehlen die Medien genauer anzugeben:
HTML: 
<link rel="stylesheet" media="screen, projection, handheld, print" >
und ggf. einiges, was für die Medien nicht erlaubt ist, separat auszulagern.

Ich gebe das immer ziemlich genau an:
HTML: 
<link rel="stylehsheet" href="all.css" media="screen, projection, handheld, print" >
<link rel="stylehsheet" href="screen.css" media="screen, projection" >
<link rel="stylehsheet" href="print.css" media="print" >
<link rel="stylehsheet" href="handheld.css" media="handheld" >
Wenn die Seite für "print" oder "handheld" schon allein mit der all.css passt, lasse ich jeweils diese Angaben weg.

Wer sich die HTTP-Requests sparen möchte kann natürlich mit @media innerhalb von all.css arbeiten, muss aber davon ausgehen das alte Browser damit Probleme haben.

P.S type="" nicht vergessen :)
 
Wer sich die HTTP-Requests sparen möchte kann natürlich mit @media innerhalb von all.css arbeiten, muss aber davon ausgehen das alte Browser damit Probleme haben.
Zum Vergrößern anklicken....

Wofür man ja immernoch ein Spezielles Design für diese anlegen kann per link. Man muss nur aufpassen das die sich nicht überschneiden oder vill. auch "überdesignen" :D.

Wobei man für den IE ja diese Kommentare nutzen kann.
 
@ Hurricane

Hehe Ich weiß...Ich hab da noch n paar Problemchen, die meldung war so wie so schon unaktuell ;-)

@crash
Hoppla, da hab ich wohl etwas zu schnell gelesen, danke für den Hinweis


Grüße David
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben