Templete für Alternativgeräte konfigurieren

  • Hallo liebe Forengemeinde,

    ich bin grad beim letzten feinschliff meiner ersten WP-Homepage.

    Mir ist in diesem Zuge aufgefallen, dass das Template auf bestimmten Geräten (Apple-Kram; Tablets oder auch der Mac-Browser) ganz seltsam angezeigt wird. Der "Hauptframe" wird allein unter dem Headder angezeigt. Menü und rechte Spalte darunter, was unvorteilhaft ist und äußerst unprofessionell aussieht.

    Auf dem Iphone wechselt er zumindest schonmal auf das Alternativmenü innerhalb des headders.

    Ich möchte nun erreichen, dass er nur die Huaptseite und das Alternativmenü im headder anzeigt, wenn er sich nicht in der Lage sieht alle drei Spalten nebeneinander anzuzeigen.
    geht das, wenn ja wie stell ich das an?

    Hier ist der link zum Entwurtf:
    http://zzhh.hawk-hhg.de

    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

  • das mögen User mobiler Endgeräte gar nicht, wenn ihnen Inhalte vorenthalten werden,

    so wie du es schilderst wäre es 1. korrekt, 2. userfreundlich,

    entscheide dich zwischen deinem indivuellen Ästhethik Bedürfnis und Userfreundlichkeit => was ist dir wichtiger?

  • Habe mal mein Browserfenster zusammengeschoben, anders teste ich meine Media Queries bisher nicht, denn so viele Endgeräte habe ich gar nicht. Dieses Header-Image stimmt bei kleineren Fenstergrößen nicht mit dem restlichen Content überein. Das Menü würde ich eventuell als Menü ausweisen, wenn es sich unter dem eigentlichen Content befindet. Herausnehmen würde ich nichts, nur anpassen. Anpassungen erreichst Du unter Media Queries, also alles, was mit Media beginnt.

    Nur sieht das nicht nach Mobile First aus. Beginne mit der kleinsten Screengröße, so wie es ist passe die Inhalte dafür an und arbeite Dich dann hoch. Also nichts entfernen, nur die Darstellung von klein nach groß anpassen.

    Einmal editiert, zuletzt von Melewo (2. Juli 2014 um 14:22)

  • Wie genau ist das mit dem Header-Image gemeint? Das passt sich doch wunderbar an.

    Ich stelle mir eigentlich folgende Lösung vor:
    Sobald er die drei Spalten nicht merh abbilden kann und das Menü nach unten rutscht, soll er nur noch das dann auftauchende schwarze Menü im Header benutzen und das andere rausnehmen. Ist das zu ergeizig?

    Außerdem hatte ich beim letzten mal auf einem Apple gesehen, dass er zwar die beiden äußeren Spalten (also auch das Menü) nach unten verschiebt, aber nicht das Hilfsmenü im Header abbildet. So ist eine Navigation natürlich sehr schwer.
    Ist das ein problem das nur bei Apple auftaucht, bzw. wie kann ich die HP Applefreundlicher machen? Hat jemand einen Aplle und kann sich das mal ansehen? ich habe selber keinen zur verfügung zur Zeit.

  • Wie genau ist das mit dem Header-Image gemeint? Das passt sich doch wunderbar an.


    Mit welchen Screen-Größen testest Du das denn?

    Über 1060 Pixel ist es gut, unter 1060 stimmt die Breite nicht mehr mit der Seite überein, ist aber noch bis etwa 440 Pixel mittig, unter dieser Größe einseitig nach links versetzt. Gut, ich kenne mich kaum aus, was da wie weit verbreitet ist, 320px waren zumindest vor wenigen Jahren wohl noch weit verbreitet, doch wie sieht es heute aus? Kann zumindest nicht schaden mit dieser Breite zu beginnen. Würde bei dieser Breite den grauen Hintergrund ganz herauszunehmen. Hier mal eine Liste (von 2010?):

    http://www.urbandigital.de/blog/webdesign…martphones.html

    Wie bereits geschrieben, schiebe meist nur das Browserfenster zusammen. Doch Du könntest auch damit testen:

    http://www.opera.com/developer/mobile-emulator

    Menü könntest Du auf display:none setzen oder so.

    Einmal editiert, zuletzt von Melewo (3. Juli 2014 um 10:36)

  • Habe mal nur bei Amazon nach preiswerten Angeboten geschaut und 320 x 480 Pixel finde ich da schon noch bei den Smartphones. Setze das einfach als untere Grenze an und arbeite Dich dann hoch, würde ich meinen, falls es keiner besser weiß.

  • Mich würde halt konkret interessieren, ob ich ihm irgendwo sagen kann, dass er sofort das schwarze Hilfsmenü einblenden soll, wenn die Seitenspalten verschwinden.

    Außerdem würde ich gern definieren, dass er die rechte Spalte zuerst und dann die linke nach unten setzt. zur zeit werden beide gleichzeitig nach unten geschoben. Bei bestimmten Auflkösungen wäre das aber nicht nötig.

  • Die erste Seite ist gleich herausgehopst. Nun weiß ich zwar nicht wie die aussehen würde, dafür aber, dass der Framebrecher selbst dann noch funktioniert, wenn man nicht mehr an diesem denkt.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!