Mobile Version nicht Optimal angepasst

Justin-Friedrich schrieb am 28.12.2020 um 18:13 Uhr

Hallöchen

 

Ich habe mitlerweile die zweite Homepage mit einer Vorlage aus dem Content Katalog erstellt. Diese enthielt auch bereits eine Mobile Version

Jetzt habe ich bei beiden Seiten das Problem damit die Mobile Version nicht optimal angepasst wird. Ich kann auf dem Smartphone immer noch ein Stück nach rechts Scrollen. Habe schon etliches versucht wie seitengröße verkleinern usw.

www.Pinewoodhuskys.de

 

vllt hat jemand eine lösung

Ich nutze den Web Designer Premium 11

 

beste grüße

Justin

Kommentare

marboe schrieb am 28.12.2020 um 19:27 Uhr

Du könntest dir deine Projektdatei mal genau anschauen, am besten jedes Element einzel in der Ebenengalerie. Denn :

Man sieht in der mobilen Version noch ein grünes Rechteck im Hintergrund. Das dürfte der Grund für dein Problem sein. Gruß Marboe

Justin-Friedrich schrieb am 28.12.2020 um 19:56 Uhr

Hey danke für deine Antwort. Es waren tatsächlich ganz weit rechts noch sozial Media Icons versteckt. Habe diese entfernt, nun ist der grüne Balken weg aber die Größe trotzdem nicht angepasst. Ich kann immer noch nach rechts wischen.

 

Beste Grüße

marboe schrieb am 28.12.2020 um 20:07 Uhr

 

Ich kann keine Änderung sehen.

Du hast offenbar im Lineal einen Scheitelpunkt gesetzt da die Koordinaten nicht bei 0 px auf der x-Achse sind. Du hast damit wohl genau diesen Versatz gewollt.

Wenn du das ändern möchtest, dann musst du am Lineal arbeiten. Die Hilfedatei verrät dir wie das genau funktioniert. Gruß Marboe

BeRo schrieb am 28.12.2020 um 20:11 Uhr

[...] Ich kann immer noch nach rechts wischen. [...]

Da ist zmindest noch 1 Objekt zu breit- bzw. zu weit nach rechts verschoben angelegt... 🙃

    

Wenn die Seitenbreite danach immer noch zu groß sein sollte, musst Du weiter nach "Verdächtigen" suchen 🤓

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓

Justin-Friedrich schrieb am 28.12.2020 um 20:11 Uhr

OK also bei mir ist kein grüner Balken mehr.

 

Nichts desto trotz hab ich ja alle Elemente einzeln geprüft und es befinden sich keine außerhalb der eigentlichen Seite.

Justin-Friedrich schrieb am 28.12.2020 um 20:36 Uhr

[...] Ich kann immer noch nach rechts wischen. [...]

Da ist zmindest noch 1 Objekt zu breit- bzw. zu weit nach rechts verschoben angelegt... 🙃

    

Wenn die Seitenbreite danach immer noch zu groß sein sollte, musst Du weiter nach "Verdächtigen" suchen 🤓

Danke erst mal. Habe den copyright Eintrag erst verkleinert aber es ging nicht. Hab ihn jetzt mal komplett gelöscht. Funktioniert trotzdem noch nicht :)

 

Irgendwas ist noch faul aber was

BeRo schrieb am 28.12.2020 um 21:33 Uhr

Wie gesagt:

Wenn die Seitenbreite danach immer noch zu groß sein sollte, musst Du weiter nach "Verdächtigen" suchen 🤓

Das Problem allein durch Quellcode Analyse zu finden ist zu aufwendig. Du wirst jetzt "in die Eingeweide" des Projekts einsteigen müssen und, wie @marboe schon gesagt hat:

deine Projektdatei mal genau anschauen, am besten jedes Element einzel in der Ebenengalerie

Bei der Suche nach falsch angeordneten Objekten kann die Umriss Anzeige sehr hilfreich sein...

Probier's mal damit

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓

marboe schrieb am 29.12.2020 um 06:55 Uhr

@Justin-Friedrich

Ergänzend zu BeRo noch: ich nutze die veraltete Version des WD 11 nicht mehr; aber hast du die Seite wirklich als website veröffentlicht?

Bei einer Kurzanalyse finde ich das da:

Beim Export einer üblichen Projektdatei als Website taucht der Hinweis auf Frames normalerweise nicht auf. Vielleicht hast du aus Versehen eine Präsentation erstellt ... auch da solltest du nochmal nachgucken. Gruß Marboe

Justin-Friedrich schrieb am 29.12.2020 um 19:25 Uhr

@marboe ich habe die web Seite über den Menü Punkt veröffentlichen hoch geladen. Sollte also passen oder?

Zwecks dem frame. Kann es daran liegen das meine Domain über Checkdomain läuft und nur auf Xara weiterleitet?

@BeRo ich habe mit der Umriss Anzeige nochmal alles geprüft. Bin alle Elemente in den Ebenen durch gegangen. Es befinden sich keine Elemente außerhalb der Seite.

 

Ich habe gestern zum test die Seiten breite mal von 500 auf 320 Pixel geändert. Da wurde die Seite dann kleiner angezeigt und es waren links und rechts grüne Balken zu sehen. Also er passt die Seite einfach nicht automatisch richtig an irgendwie.

BeRo schrieb am 29.12.2020 um 19:56 Uhr

[...] Kann es daran liegen das meine Domain über Checkdomain läuft und nur auf Xara weiterleitet? [...]

Genau das ist die Ursache der nicht funktionierenden Viewport Einstellung. Der WD exportiert zwar ganz korrekt die Anweisung:

<meta name="viewport" content="width=device-width, initial-scale=1" />

Die wird aber beim Aufruf Deiner Site über den Link "www.Pinewoodhuskys.de" nicht gelesen, weil die Site über ein Frame geladen wird.
Öffnest Du auf dem Smartphone die Site über den Original Link: http://jtbe7n.xara.hosting ist alles i. O. weil der Browser dann die Viewport Info bekommt und die Darstellung auf die Breite des Geräte Bildschirms anpassen kann.

Lösungsvorschlag:
Buche bei Checkdomain zu der Domain noch ein Hosting Paket, dann kannst Du Deine Website da ablegen, Du bist das Frameset los und Deine Site kann direkt, ohne fehlerträchtige Umwege, über die URL "www.Pinewoodhuskys.de" aufgerufen werden. 🤓

Zuletzt geändert von BeRo am 29.12.2020, 22:49, insgesamt 2-mal geändert.

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓

marboe schrieb am 30.12.2020 um 07:02 Uhr

Der von Bero genannte Lösungsvorschlag ist dir auf das Allerwärmste anzuraten.

Denn so was hier - das geht im Jahre 20/21 einfach nicht mehr. Google ignoriert deine Seite dafür.

Abhilfe tut Not. Beim Buchen eines Hostingpakets solltest du eigentich nur noch ssl-geschützte Seiten mit https angeboten bekommen. Gruß Marboe

Justin-Friedrich schrieb am 30.12.2020 um 21:08 Uhr

Vielen Dank euch beiden 😎 hosting Paket ist schon gebucht. Nun bekomme ich keine Verbindung zum ftp Server hin um die Seite dort hoch zu laden... Neue Baustelle. Aber ich werde die Tage den telefonischen Support dort kontaktieren dann sollte es klappen.

Danke nochmal und guten Rutsch 😋

marboe schrieb am 31.12.2020 um 06:55 Uhr

@Justin-Friedrich

Wenn dein Host umgestellt wird von http auf https, dann benötigst du auf jeden Fall neue Zugangsdaten. In der Regel kann man diese einfach finden in den dortigen Optionen/Einstellungen/Controlcentern. Aber der support dort kann dir da natürlich Neues dazu sagen.

Diese Daten müssen dann in den WD neu eingepflegt werden. Ich habe aber auch eine Website in Pflege, bei der die vorgegebene Übertragung per sftp nicht funktioniert, und ich in den Einstellungen des Veröffentlichungsprozesses nach wie vor eine normale ftp-Übertragung eintragen muss. Das dürfte aber in meinem Fall eine Ausnahme sein, da der Zugang schon sehr sehr alt ist.
Wenn du beim Eintrag der neuen DAten genau die Vorgabe einhältst (auch was die Leerzeichen und Groß-/ -Kleinschreibung angeht), sollte das dann klappen.
Viel Erfolg! Gruß marboe

Justin-Friedrich schrieb am 08.01.2021 um 12:16 Uhr

Hallo Gemeinde

So inzwischen liegt die Seite direkt bei beim Domain Anbieter.

Sie wird nun in der mobilen Version auch angepasst. Nur dauert dies immer eine Sekunde.

 

Kann man das vllt noch irgendwie optimieren damit die Seite direkt optimal angezeigt wird. So ist es etwas nervig, auch weil sie jedes Mal wenn man auf einem anderen Menü Punkt geht erst wieder neu angepasst wird.

 

www.pinewoodhuskys.de

 

Bei einem Bekannten die Seite via WordPress erstellt lädt z. B. Direkt optimal.

www.flynirunners.de

 

 

Lg

Justin

BeRo schrieb am 08.01.2021 um 12:37 Uhr

[...] Kann man das vllt noch irgendwie optimieren damit die Seite direkt optimal angezeigt wird. [...]

Man kann... 😉

Du hast für die Anzeige auf mobilen Geräten einen Breakpoint von 1143 Px gewählt, bei dem der Browser von der Desktop Darstellung auf die mobile Variante umschaltet. Das ist deutlich zu breit, wenn Du berücksichtigst, dass der WD hier 480 Px als optimale Seitenbreite vorschlägt, was bei einer Desktop Seitenbreite von z. B. 1024 Px zu einem Breakpoint von 752 Px führt.

Mit der von Dir eingestellten Seitenbreite passt die Mobile Seite in kein Browserfenster auf einem Smartphone, ohne dass sie zeitaufwändig neu skaliert werden muss.
Die vom WD im HTML Code abgelegte Anweisung ...

<meta name="viewport" content="width=device-width, initial-scale=1" />

...sorgt dafür, dass diese (zeitaufwändige) Neuskalierung bei jedem Aufruf einer der überbreiten Seiten vorgenommen wird... 😠

Zuletzt geändert von BeRo am 08.01.2021, 12:40, insgesamt 1-mal geändert.

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓

Justin-Friedrich schrieb am 09.01.2021 um 18:33 Uhr

oh :) ok wie kann ich das am besten ändern? Ich hatte für die Seite eine Vorlage benutzt also da muss das schon so eingestellt gewesen sein.

Meine Mobile Seitenbreite Beträgt 500px aber den Breakpoint kann ich nicht verstellen.

Erstelle ich eine neue Variante mit 480px steht der Breakpoint auf 490px. Aber dann muss ich ja die ganze Seite wieder neu erstellen.

Justin-Friedrich schrieb am 09.01.2021 um 20:08 Uhr

ok ich hatte jetzt eine neue Mobile Version erstellt aber er macht mir den Breakpoint automatisch wieder auf 1143px. Ich kann das also gar nicht auswählen.

 

Neeeed helllp :)

BeRo schrieb am 10.01.2021 um 01:00 Uhr

[...] er macht mir den Breakpoint automatisch wieder auf 1143px. [...]

Den Breakpoint kannst Du ja auch nur indirekt beeinflussen. Er ist immer ein Produkt aus dem Verhältnis der Desktop Seitenbreite zur Mobil Seitenbreite.

Hat, wie in Deinem Fall, die Desktop Variante eine Seitenbreite von 1788 Px und die Mobil Variante eine Seitenbreite von 500 Px, dann liegt der Breakpoint in der Mitte, also bei 1144 Px.

Das rechnet sich so: (1788 - 500) / 2 + 500 = 1144

Die Stellschraube gibt es also im Doppelpack, in Gestalt der Seitenbreiten der Desktop Variante und der Mobil Variante.
Im Klartext heißt das, dass Du auch die Breite Desktop Variante auf ein "normales" Maß reduzieren musst, damit Du die damit verbundene mobile Variante schneller auf dem Smartphone sehen kannst... 🤓

Die von Dir gewählte Desktop Seitenbreite von 1788 Px ist IMHO ohnehin viel zu breit. Da muss ich auch auf meinem 2560 Px Bildschirm horizontal scrollen, wenn ich den Browser nicht formatfüllend anzeigen lasse.

Wenn Du die Seitenbreiten Desktop/mobil von z. B. 1024/480 Px wählst und einen seitenfüllenden Hintergrund einbaust, dann kann die Seite auch auf den größten Bildschirmen formatfüllend dargestellt werden, ohne dass die Seiten auf Smartphones zeitaufwendig neu skaliert werden müssten, weil dann der Breakpoint bei 752 Px liegt, was die Seitanpassung deutlich einfacher macht... 😉

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓

Justin-Friedrich schrieb am 10.01.2021 um 10:41 Uhr

Ich habe die Seiten jetzt angepasst. Desktop Version 1024px und Mobil 480px

Leider hat das irgendwie nicht zu mein Problem beigetragen. Man sieht immer noch bei jedem Seiten Aufruf damit die Seite erst angepasst wird.

Justin-Friedrich schrieb am 10.01.2021 um 10:49 Uhr

Lustig finde ich ja, wenn ich auf dem Smartphone die Desktop Version wähle. Funktioniert dies einwandfrei. Da wird die Seite ohne mit der Wimper zu zucken sofort angepasst angezeigt.

marboe schrieb am 10.01.2021 um 14:27 Uhr

Da stimmt glaube ich nur in der X und Y Achse was nicht.

Aktuell findet man auf deiner Website folgende Angabe:

Üblich wäre sowas (hier ein Beispiel einer meiner Webseiten mit drei Varianten):

Du hast also den kleinen Versatz von 20 px auf beiden Achsen, der ja deinen grünen HIntergrund erst so erscheinen lässt. Es wäre mal eine Idee, dies auszuschalten. Dann ist dein Problem vielleicht weg.
Als nächsten Tipp könntest du mal diese Funktion ausprobieren:

Die 1234 sind natürich jetzt ein fiktiver Wert. Das hängt von deiner Website ab.

 

Und noch ein kleiner Hinweis:

Da stimmt wohl was nicht....

Gruß Marboe

BeRo schrieb am 10.01.2021 um 16:46 Uhr

[...] Man sieht immer noch bei jedem Seiten Aufruf damit die Seite erst angepasst wird. [...]

Ein paar zehntel Sekunden "Umschaltzeit" sind normal, weil der Browser den Inhalt der Website in jedem Fall neu rendern muss, bevor er ihn passend auf dem Bildschirm des Mobilgerätes darstellen kann.
Die Viewport Einstellung "content="width=device-width" initiiert genau diesen Vorgang, der naturgemäß bei jedem Mobilgerät zu anderen Resultaten führt, weil i. d. R. die Bildschirmgrößen bei jedem Mobilgerät anders sind...

Schau dir dazu mal diesen Upload an (klick), da siehst Du eine der Seiten aus den aktuellen Templates des WD, die mit einem Breakpoint von 760 px bei der Anzeige auf einem Mobilgerät ebenfalls die Verzögerungen zeigt, wenn über die NavBar andere Seiten der Site geöffnet werden (s. Edit am Ende des Kommentars!)

Natürlich ist die "Umschaltzeit" auch abhängig von der Komplexität des Seiteninhalts. Eine einfache Textseite ist schneller neu berechnet, als eine Seite mit vielen, hochaufgelösten Bildern.

Das "Problem" wird übrigens nicht vom WD erzeugt, es ist systembedingt. Du kannst das leicht nachprüfen, wenn Du eine neue Website ohne Varianten erstellst, mit einer Seitenbreite von z. B. 480 px, dann wirst Du sehen, dass diese Seite bei jedem Umschalten auf eine andere Seite neu berechnet wird.
Willst du das Vermeiden, dann müsstest Du für jede gängige Bildschirmbreite eines Mobilgerätes eine passende Variante anbieten.
Die gängigste Bildschirmbreite ist immer noch 360 px. Erstellst Du eine seite in dieser Breite, dann dürfte das Blättern zwischen den Seiten auf den meisten Mobilgeräten ohne nennenswerte Verzögerung zu sehen sein...

Du siehst, das Thema hat leider keine Universallösung, die mit dem WD umzusetzen wäre. 🤓

Edit: 11.01. 15:15 h
Eine Option, die der WD bietet, kann vielleicht helfen, den Umschalteffekt zu minimieren, das ist die "adaptive Seitenanpassung", die dafür sorgt, dass die Anpassung des angezeigten Seiteninhalts fließend an die aktuelle Breite des Browser Fensters angepasst wird. @marboe hatte Dir das ja schon ihrem letzten Kommentar "ans Herz" gelegt 😉

Die o. a. Demo habe ich so "umgebaut".

Zuletzt geändert von BeRo am 11.01.2021, 19:28, insgesamt 2-mal geändert.

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓

Justin-Friedrich schrieb am 11.01.2021 um 19:23 Uhr

@marboe 

das mit der x und y achse habe ich jetzt nicht verstanden was ich dort ausschalten soll.

@marboe @BeRo

Adaptive Seitenanpassung habe ich gerade probiert. An dem Problem mit dem Laden ändert es nichts. Das einzige was es gebracht hat damit in der Mobilen Version rechts kein Grünen Balken meht ist, ich also nicht mehr nach rechts scollen kann. An sich eine gute sache nur hat dann auf einmal meine Menüleiste in der Desktop Version nicht mehr Funktioniert. Ich konnte drauf klicken wo ich will es passierte nichts mehr. Hab die Adaptive Seitenanpasssung jetzt wieder raus genommen, nun geht es wieder. Verrückt

 

 

BeRo schrieb am 11.01.2021 um 19:32 Uhr

adaptive Seitenanpassung...

[...] An sich eine gute sache nur hat dann auf einmal meine Menüleiste in der Desktop Version nicht mehr Funktioniert. [...]

Schwer nachvollziehbar, was da passiert sein kann. Prinzipiell hat die adaptive Seitenanpassung absolut nichts mit der Funktion einer Navigationsleiste zu tun. 😕
Aber, wenn Du die Seitenanpassung ohnehin nicht verwenden willst, suchen wir nicht weiter nach den Gründen, oder? 🤓

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓