Sprung zum Inhalt

Webdesign nach Maß von webdesign weisshart

Mein Blog

RSS Feed AbonnementRSS 2.0 Feed

zum Archiv und den Kategorien

Webdesign für alle Browser

Samstag, 21. Januar 2006

Ja, für alle! und damit meine ich nicht nur Firefox, Opera oder den IE, sondern z.B. auch Browser, die auf einem PDA oder sogar Handy laufen.
Das sieht am Beispiel dieser Seite dann so aus:

Diese Seite auf einem PDAWohlgemerkt:
Es handelt sich nicht um eine spezielle Version dieser Seite, sondern um exakt dieselbe Seite, mit allen Inhalten, und mit der vollen Funktionalität. Lediglich Designelemente, die zum Lesen des Inhalts nicht unbedingt erforderlich sind, werden für handhelds per CSS ausgeblendet. Dafür werden andere Elemente eingeblendet: auf dem Bild zu sehen: der Sprunglink zum Überspringen der Navigation, direkt zum Inhalt. Auf diesen Displays, gerade mal 240 × 320 Pixel klein, hat einfach nicht viel Platz. Und Ladezeit ist ein K.o.-Kriterium.
Wer Lust hat, sich meine Seiten mal in einem PDA anzuschauen, und mit anderen Webseiten zu vergleichen, ist herzlich eingeladen. Ich freu mich über jede Kritik.



5 Kommentare

  1. Die gleiche ide habe ich auch für meine Seite gerade.
    ich möchte auch, das man sie in allen Browsern besuchen kann und halt mit PDA oder communicator usw auch einigermassen gut lesen kann.
    Ich kann dir zu deiner seite leider keine anderen screens geben, als du sie selber schon hast.

    Aber ich habe mal ne frage, wie du es angestellt hast (im quelltext ist leider nichst zu finden)
    ich habe im netz eine JS lösung gefunden nur weis ich nicht ob die 100% funktioniert.
    Würde mich über etwas Infos und erfahrungen von dir Freuen.

    grus Musel

    Kommentar von Musel — Sonntag, 9. Juli 2006 - 13:33 Uhr

  2. @1 Musel,
    oh je! Ich hab Hunderte von Stunden Studium in diese Thematik investiert, und Du bittest hier mal schnell um Infos ;-)

    Aber ein paar Stichworte kann ich Dir gern liefern:
    - Mach Deine Seiten barrierefrei, dann sind sie fast automatisch auch für handhelds geeignet.
    - Trenne markup und Design (verwende externe Stylesheets)
    - Verzichte auf Tabellen zu Layoutzwecken.
    - Verzichte auf Javascript zur Anzeige von Inhalten
    - Minimiere die Seitengröße
    - …

    Doch, im Quelltext siehst Du das sehr wohl, mit Ausnahme diverser PHP-Anweisungen, die natürlich nicht mit dem HTML ausgeliefert werden.
    Aber da gibt es natürlich keinen Tag in der Form: "show_for_PDA" oder ähnliches. Da mußt Du Dir schon etwas mehr Mühe geben, den Quelltext zu verstehen, insbesondere den Aufbau des HTML und des CSS.

    Wenn Du das alles machen willst, wünsche ich viel Spaß und Erfolg. Es lohnt sich.

    Gruß Fritz

    Kommentar von Fritz — Montag, 17. Juli 2006 - 22:30 Uhr

  3. hey danke für die antwort…
    Ich habe jetzt eine lösung für mich gefunden und zwar lass ich mittels Script den Browser abfragen und wenn es einer von den PDA/PPC oder sonstiges ist:
    http://aktuell.de.selfhtml.org/artikel/css/mobile-endgeraete/
    dann habe ich einfach bzw bin vol dabei meine Hauptseite zu spiegeln, da das meiste e nur in der DB ist geht das gut. Also ich erstelle ein PDA freundliches ausehen und leite dann einfach dahin um ;)
    Aber dauert noch etwas, das Forum bei mir macht noch viel arbeit, so, das man dort gut lesen kann mit dem PDA/PPC Browser.

    Gruss Musel

    Kommentar von Musel — Montag, 17. Juli 2006 - 22:44 Uhr

  4. @3 Musel,
    cool, genau die gleiche Funktion zur Browserabfrage setze ich auch ein. Um dann allerdings, ohne Inhalte zu spiegeln, einfach ein spezielles CSS einzusetzen.
    Ja, den Link bin ich Dir schuldig geblieben.

    Gruß Fritz

    Kommentar von Fritz — Dienstag, 18. Juli 2006 - 0:14 Uhr

  5. thank you ihnen das ist super

    Kommentar von Webdesign — Montag, 24. November 2008 - 12:42 Uhr

Einen Kommentar abgeben

Damit Code-Beispiele richtig angezeigt werden, müssen Sonderzeichen maskiert werden (z.B. < zu &lt;).


(notwendig)

(notwendig)

Spamschutz:
Je nach Inhalt wird Ihr Kommentar eventuell nicht sofort angezeigt, sondern muss manuell freigeschaltet werden.

Archiv:

Kategorien:

Creative Commons Lizenzvertrag
Alle Texte (nicht Bilder!) Creative Commons CC BY-NC-SA 3.0 DE