Responsives Design nicht optimiert - Was kann ich tun?

  • Die neue Version von WebsiteX5 Evolution12 ist raus und mit voller Begeisterung beginne ich das Update meiner Website. Insbesondere auf die Verbesserung des Responsives Design war ich besonders gespannt. Trotzdem auch nach durchlesen des Handbuchs, bin ich noch nicht so wiklich schlau draus geworden ob ich mein Responsives Design richtig eigesetzt habe. Derzeit habe ich es einfach zugelassen und es bei 480 belassen. War das schon so richtig?


    Bei Google dem Test auf Optimierung für Mobilgeräte steht allerdings noch: Nicht für Mobilgeräte optimiert


    Habe dazu auch mal das entsprechende Foto hochgeladen.


    Auch bei eigenem Ausprobieren der mobilen Ansicht auf meinem Smartphone war ich geschockt über die schlechte Anpassung meiner Website. z.B. ist der obere Teil meiner Website garnicht zu sehen.. !?!?


    Ich habe schon einen anderen ähnlichen Thread gelesen. Da es vielleicht doch von Website zu Website Unterschiede geben kann, wollte ich mein Anliegen auch nochmal bei euch mitteilen.


    Ich würde mich über eure Hilfe freuen!

  • Hi !
    So einfach wie du denkst ist es nicht! MAn muss einige Anpassungen durchführen da nicht alles auf mobiles umgewandelt werden kann !
    z.B. der Header wird komplett ausgeblendet und kann auch nicht im mobilen Teil bearbeitet werden! MAn kann nur eine Grafik einfügen ! Ebenso der Footer wird ausgeblendet und man kann nur TExt und wenn man sich auskennt HTML Code eingefügt werden!


    Je nach komplexität und Menge der Seiten muss man sich Zeit nehmen und ausprobieren und eventuell korrigieren!


    Du hast z.B. eine Hintergrundgrafik im Header-Hintergrund drinnen die wird nicht benötigt ! Dann solltest du dich in der Struktur der Vorlage für mobile Geräte mal umschauen und korrekturen durchführen.


    Der Fehler mit der Aussage "Die Links liegen zu eng beeinander" ist auf deine Menü STruktur zurückzuführen ! Vielleicht blockiert auch der robot.txt den Testrobotor. Was ist bei Seo&Code alles auf "Disallow" ??

    Wissen ist MACHT ! Nichts zu Wissen macht nichts !
    Wissen ist MACHT ...ohne es zu wissen !

  • Du sagst, dass man einige Anpassungen durchführen muss. Kannst du mir erklären wo ich diese Abänderungen durchführen muss? Ich würde gerne irgendwo anfangen um meine mobile Ansicht entsprechend anzupassen. Vielleicht kannst du mir sagen wo und bei was ich als erstes starten kann? Ist der mobile Teil im Menu "Struktur der Vorlage für Mobilgeräte"? Und wo kann ich dann die Grafik einfügen? Im Header sind doch bei mir eigentlich Grafiken in Form von Bildern.


    Ich kenne mich leider nicht aus, also wie mache ich das mit dem HTML-Code? :)


    1. Im Menu "Struktur der Vorlage für Mobilgeräte" mache ich also erstmal den Header weg?





    Bezüglich der Googlemeldung "Die Links liegen zu eng beeinander" müsste ich meine Menustruktur also noch weiter breiter auseinander machen.
    und bezüglich "Disallow" habe ich dir mal Anhang hochgeladen, was da bei Seo&Code bei mir steht.





    Entschuldige bitte, die vielen Fragen... Hoffe du kannst mir da noch ein bisschen helfen! Danke!

    Dateien

    • test1.jpg

      (57,81 kB, 12 Mal heruntergeladen, zuletzt: )
    • test2.jpg

      (47,28 kB, 10 Mal heruntergeladen, zuletzt: )
  • Außerdem habe ich noch folgendes entdeckt: Auf jeder meiner Seiten steht unten folgende Mitteilung (Siehe Anhang):



    Die Struktur der Seite wurde geändert, daher müssen die responsiven Einstellungen überprüft werden.



    Nur noch so als weiteren Anhaltspunkt :)

  • DAs Problem ist jetzt du hast nur EVO V12 wo einige Funktionen beim mobilen Teil nicht freigegeben sind! Du kannst dir ja mal das Video anschauen!


    http://www.websitex5.com/de/er…-von-mobilen-website.html


    Das mit der Meldung ist normal und kommt wenn man etwas verändert auf der Seite, dann sollte man auf "responsive" drücken und schauen ob man für den mobilen Teil etwas umändern muss!


    Wegen dem robot.txt meinte ich eigentlich nicht den unnötigen Code den du eingefügt hast sondern diesen (siehe Anhang)

    Dateien

    • robot.jpg

      (40,64 kB, 18 Mal heruntergeladen, zuletzt: )

    Wissen ist MACHT ! Nichts zu Wissen macht nichts !
    Wissen ist MACHT ...ohne es zu wissen !

  • Ich werde mir mal das Video anschauen und versuchen die Anpassungen für meine Website durchzuführen.


    z.B. der Header wird komplett ausgeblendet und kann auch nicht im mobilen Teil bearbeitet werden! MAn kann nur eine Grafik einfügen !


    wo und wie kann ich die Grafik für meinen Header einfügen? Im Header sind doch bei mir eigentlich Grafiken in Form von Bildern. Oder muss es ein spezielles Bildformat sein? JPEG PNG?



    Bezüglich "Seo&Code" werde ich meine Seite dann genauso anpassen, wie auf deinem Foto robot.jpg. Vielen Dank schon mal dafür!




    Desweiteren werde ich mir jetzt das Video anschauen! Bis später :thumbsup:

  • um responsiven kommt ein eigener, angepasster header rein. Wurde hier schon behandelt.
    Bikdformat ist egal.

    Bernie


    " Was wir alleine nicht schaffen, das schaffen wir dann zusammen..."


    :thumbsup:

  • Hallo bernie,


    auch dir, vielen Dank für deine Hilfe!


    Also das mit dem Header war jetzt doch leichter als gedacht. Es hat geklappt!


    Trotzdem ist mir da noch ein anderes Problem aufgefallen. Und zwar ist das Seitenmenu bei der mobilen Ansicht mit fehlerhaften Elementen dargestellt. Ich habe diese auf einem Foto makiert und als Anhang hochgeladen.


    Habt ihr da vielleicht eine Idee wie ich das Seitenmenu bei der mobilen Ansicht optimal anpassen kann (ohne diese Fehler)?


    Vielen Dank im Voraus!

  • Hast du schon auf das neueste Update aktualisiert ! Da sind die MEnütrennlinien korrigiert worden ! WEnn es nicht funktioniert musst du irgendetwas ändern im Menü, dass es neu rausgeladen wird !

    Wissen ist MACHT ! Nichts zu Wissen macht nichts !
    Wissen ist MACHT ...ohne es zu wissen !

  • Wenn ich nach neuen Aktualisierungen suche, wird mir von WebsiteX5 angezeigt dass ich bereits das neueste Update besitze.


    Und was soll ich jetzt im Menu verändern? Habe schon selber ein bisschen rum probiert aber verändert hat sich bisher nix!


    Danke im Voraus.

  • Hi Andy,



    deinen Tipp bezüglich der Trennlinien habe ich direkt umgesetzt. Danke!



    Jetzt habe ich nur noch das Problem mit meinen Rubriken und der Überlagerung meiner dafür eingefügten Grafik, welche bei der mobilen Ansicht fehlerhaft dargestellt wird. Um zu wissen, was ich meine, habe ich dir im Anhang ein Foto hochgeladen.


    Vielleicht hast du (oder jemand anderes) dafür auch eine Lösung für mich. Danke für deine Hilfe. Grüße.

    Dateien

    • hier.jpg

      (140,69 kB, 15 Mal heruntergeladen, zuletzt: )
  • Hmm, das sind die Überschriften ! Hast du für die Überschriften (blau hitnerlegt) einen eigenen Code eingefügt, dass es in der Desktop so ausschaut und in der mobilen kann er das dann nicht mehr lesen ! Wenn es so ist müsste man den individuellen Code auch für die mobile Variante anpassen !

    Wissen ist MACHT ! Nichts zu Wissen macht nichts !
    Wissen ist MACHT ...ohne es zu wissen !

  • Wow.. jetzt wirds aber kompliziert :huh:


    Wie passe ich den individuellen Code für die mobile Ansicht an?? Wäre echt nett wenn du mir das mal ausführlich erklären könntest.


    Ich hatte eigentlich nur eine Grafik hochgeladen damit die Rubrik durch eine andere Farbe hevorgehoben wird. Im Anhang habe ich dazu ein Foto hochgeladen.

  • JA, dort gehört normalerweise nur ein Icon für den Menübutton rein ! Du hast ihn aber als Hintergrund der Ebene benutzt ! Für die Desktop Version ja ausreichend, aber für die mobile Variante springt es um auf das Dropdown Menü und dort dürfte es nicht funktionieren !

    Wissen ist MACHT ! Nichts zu Wissen macht nichts !
    Wissen ist MACHT ...ohne es zu wissen !

  • Um meine Rubriken hervorzuheben, blieb mir nichts anderes übrig als diese durch eine Grafik hervorzuheben. Nehme ich diese wieder raus, sieht alles gleich aus. Was kann ich jetzt tun damit es auch im Dropdownmenu bzw. in der mobilen Ansicht funktioniert? Danke.

  • Das wird schwierig, denn der Überschriften-Button ist ja reine Grafik (Text inkludiert) und hat eigentlich keinen normalen Text, deshalb wird er auch nicht im Dropdown Menü angezeigt! Dort wird nur der Text angezeigt, der aber nicht vorhanden ist! Das müsste man irgendwie per CSS machen, aber wie weiss ich noch nicht.


    Das einzige was man vielleicht noch machen kann ist die Ebenen wieder normal beschriften und das Bild zu entfernen und mit CSS eine Hintergrundfarbe zu machen. Die muss man aber auch mobil gestalten, denn da wird es wieder ausgeblendet ! Schwierig deine Seitenstruktur!

    Wissen ist MACHT ! Nichts zu Wissen macht nichts !
    Wissen ist MACHT ...ohne es zu wissen !

  • Das Menu, welches du bei mir vorfindest, ist ein ganz normales, welches du auf vielen anderen Websiten ebenfalls in der selben Struktur vorfindest. Mit WebsiteX5 konnte ich nur über den Umweg einer Grafik einzelne Rubriken hervorheben. Dass die Grafik nicht auf die mobile Ansicht übertragen wird, finde ich eher schwach von WebsiteX5..


    Naja ich war halt auch voller Vorfreude über die Mobile-Anpassung und jetzt das... <X


    Kannst du mir vielleicht helfen, wie ich deine Variante mit dem CSS umsetzen kann? Sorry,, aber ich hoffe wir kriegen das hin. danke.

  • Hallo


    Nehme mal Testweise die Grafik raus welche Du hochgeladen hast, damit die Rubrik durch eine andere Farbe hevorgehoben wird.


    Dann mache mal folgendes:
    Du geht im Programm bei Punkt 4 Erweiterte Einstellungen zu Statistiken, SEO und Code. Dort wählst Du erweitert und dort die Auswahl Vor dem </HEAD> Tag.
    Da füge dann mal folgenden Code ein:


    CSS
    1. @media (max-width: 989px){
    2. #imMnMn .imMnMnTxt {
    3. background-color: #ffff00;
    4. }
    5. }

    Bei mir auf der Testseite werden dann die Hauptpunkte/Ebenen in gelb dargestellt. Probiere es mal aus.


    Gruß Rainer

    Einmal editiert, zuletzt von Cold#gelöscht#Glitter#gelöscht#759 ()