Adobe Muse problem with Breakpoint for iPad Pro 10.5

[patrick_from_hamburg]

Hallo,

I have the problem that I don't know how to display my musician's website satisfactorily on the iPad Pro 10.5 (2017):

On my iPad, the portrait format shows the design created in Muse at breakpoint 1024px. But that works differently on the iPad.
E.g. some elements on the iPad are shown larger and not as desired and centered in Muse s. Screenshot (photo gallery not centered).

In my standard browser on the desktop computer, the "Responsive Design" mode for the iPad shows the design in the breakpoint width of 768 x 1024 px - it does not correspond to the "real display" on the web, so it does not help with control.
What can I do so that the website is also designed for the iPad?

patrickpagels.de

I am happy about your feedback.

Patrick

:::::::::::::::::

Ich habe das Problem, dass Ich nicht weiss, wie ich die Darstellung meine Musiker-Website auf dem iPad Pro 10.5 (2017) befriedigend darstellen kann:

Auf meinem iPad wird in der Hochformatversion der in Muse im Breakpoint 1024px angelegte Design dargestellt. Aber auf dem Ipad wirkt dass dann anders.

Z.B. werden einige Elemente auf dem IPad grösser und auch nicht wie gewünscht und in Muse angelegt zentriert dargestellt s. Screenshot (Fotogalerie nicht zentriert)

.

Im meinem Standardbrowser auf dem Desktoprechner  wird unter dem Modus „Responsive Design” für das iPad  das Design im Breakpoint Width von 768 x 1024 px angezeigt – es entspricht also nicht der „realen Darstellung” im Netz, hilft also nicht bei der Kontrolle.

Was kann ich machen, damit die Website auch für das iPad sinnvoll angelegt ist?

patrickpagels.de

Ich freue mich über Dein Feedback.

Patrick

:::::::::::::::::::

iPad Pro 10.5. (2017):

Safari Preview for iPad Pro:

[Nancy OShea]

#1 Muse is discontinued software.  I urge you to switch to other software like Dreamweaver or Pinegrow that are keeping up with modern web technologies.

#2 Ideally sites should be responsive to fit on ALL devices  -- from extra small to extra large and everything in between.  To accomplish this, you need multiple CSS Media Queries (aka breakpoints).

Bootstrap 4,  currently the world's most popular responsive framework, performs much of the heavy lifting with it's built-in classes & media queries.  Even if you don't use Bootstrap, their breakpoint model is a good one to follow.

Bootstrap 4 Breakpoints

XS = <576px

S = ≥576px

M = ≥768px

L = ≥992px

XL = ≥1200px

https://www.w3schools.com/bootstrap4/

[patrick_from_hamburg]

Thanks Nancy for your feedback.

I have already noticed that the days of Adobe Muse are numbered. I have created several websites (also for customers) in Muse. At the moment I am still working with Muse.
Do you have a tip which program is most similar to Adobe Muse? I am a graphic designer and not a programmer. I do not want to use programs that bring additional costs for each individually created website.

Best regards

Patrick

[fotoroeder]

Hi Patrick (guten Morgen),

ich müßte Dein .muse sehen, damit ich Dir helfen kann. Wir haben hier noch Guenter am Start, der diese ganze Auflösungsgeschichte mit 2x und 4x und so drauf hat, falls das Dein Problem sein sollte. Aber das .muse, möglichst nur eine Seite hilft mir bestimmt auch schon weiter. Am besten dieses .muse dann unter einem anderen Namen oder als Kopie in Dein CC speichern und einen Link hier teilen.

Den Ansatz von Nancy kannst Du leider vergessen, der hilft Dir hier nicht weiter. Das hat nix mit Muse zu tun.

Machs gut,

Uwe

[patrick_from_hamburg]

Hallo Uwe,
Danke für Dein Feedback. Hier kommt der Link zum reduzierten .muse Dokument.

https://adobe.ly/2zdMJz6

Schönen Gruss, Patrick

P.S.: Den Hinweis auf Nancy's Antwort habe ich gelesen, und verstehe ihn soweit...
Auf Dauer stellt sich natürlich für mich schon die Frage, was es für mich als Non-Coder-Grafiker an Alternativen zu Muse gibt? Gibt es eine aktuelle Vergleichsübsicht? Irgenwelche aktuellen Tips, was es an Programmen gibt, die Muse sehr nahe kommen, bzw. mit denen ich möglichst problemlos meine Muse-Projekte überführen kann, ohne Unmegen an Geld auszugeben?

[fotoroeder]

Es gibt nix vergleichbares zu Muse. Am ehesten vielleicht momentan noch Adobe XD, weil Du ja eh die volle CC brauchst und somit keine weiteren Kosten entstehen - erst mal. Es gibt für XD auch ein/zwei oder mittlerweile vielleicht auch mehr plugins, die das "Design" als html exportieren. Trotzdem wird dann schon noch etwas Code nötig sein, fürchte ich. Ich versuche mich gerade an Pinegrow, auch weil das kein Abomodell ist. Es gibt einige Alternativen und sogar eine Liste dafür hier in diesem Forum.

Uwe

[fotoroeder]

Grundsätzliches zuerst: Text sollte auf jeden Fall in einer sogenannte Webfont geschrieben sein, sonst macht der Browser daraus ein "Bild" und das hat zur Folge, daß der Text anders skaliert, nämlich in Breite und Höhe kleiner wird, während er richtigerweise nach unten hin "größer" wird, wenn das Browserfenster kleiner wird. Das mag in Deinem Fall nicht so schlimm aussehen, weil er so eingestellt ist, daß es nicht skaliert, trotzdem wird er als Image exportiert, ist also auch nicht für Suchmaschinen auffindbar.

2) Die Breakpoints auf Deiner Masterpage sollten schon übereinstimmen, mit den Breakpoints auf der Seite, sonst wird es ganz schön unübersichtlich - diesen Breakpoint kannst Du getrost weglassen, da ändert sich nix grundlegendes im Design, oder:

320 muß/sollte kein Breakpoint sein sondern die minimale Breite - einfach bei 375 die minimale Breite von 320 eingeben und 320 als Breakpoint löschen.

Aber grundsätzlich verwendest Du zu viele Breakpoints - es hat sich bewährt, auch wenn das sich ändern kann, (1920 ist auch fast schon unnötig, weil die meisten User kaum diesen Breite verwenden aber das ist nicht soo wichtig), 1200 - 960 - 768 - meinetwegen noch was um die 500 und die minimale Breite von 320 und gut. Vor allem bei Deiner Masterpage tut sich ja nicht so viel bei dem Menue, so stellt sich Bild hier für mich eigentlich eher so dar - die Headerline habe ich angepasst-verschoben, hilft beim Design:

Das Problem mit Deiner Gallery taucht auf beim Breakpoint 568, bei dem die Diaschau aus irgendeinem Grund nicht mehr "fluid" ist (obwohl sie so eingestellt ist).

Ich kann hier in Deinem Fall lediglich empfehlen, entweder die Diaschau hier auf "ohne" also fest einzustellen und etwas kleiner zu machen oder und das ist der deutlich größere Aufwand, weil alle anderen Elemente auch neu "eingestellt werden müssten - verwende eher nur fixed width breakpoints. 

Hierhttps://adobe.ly/2KnTFfC ist Deine, auf die Diaschau reduzierte Seite in "meiner" Version. Bezogen auf diese würde ich nur feste Breakpoints verwenden. Ich hab mir jetzt allerdings nicht alles angeschaut, das wäre mir jetzt zu zeitaufwendig und zu übergriffig. Ich will ja nicht Dein gesamtes Design ändern. Grundsätzlich ist dann aber alles weniger wackelig, wenn fixed width verwendet wird:

https://adobe.ly/2KnTFfC

Wenn Du die senkrechten Schieber verschiebst nach innen sollte dieses Bild nie entstehen:

Ich hoffe, das hilft Dir weiter.

Uwe

[fotoroeder]

https://community.adobe.com/t5/muse/list-of-possible-alternatives-for-muse/m-p/9788896?page=1#M40727

[patrick_from_hamburg · Accepted solution]

Danke für Deine Version, Deine Mühe.
Ich kann es aber noch nicht richtig nachvollziehen:
In Deiner Versionen sind in diesen Punkten die Galerie (beim ersten Click) in diesen Breakpoints auf „Responsive Breite” eingestellt (in den andern auf „Ohne”) : 

420 px

667 px

768 px

1024 px

Das Problem das ich hatte ist auch m.E. nict im Breakkpoint 568 px aufgetaucht sondern, in den Darstellungen auf den iPad in den Breakpoints 1024 px (hoch) und 1366 px (quer) – hier ist die Galerie nicht zentriert:

Den Menüpunkt 320 px habe ich gelöscht (meinetst aber wohl 375 px)? Glaube auch nicht, dass es daran liegt, oder?

Zumindest sind aktuell meine Breakpoint synchronisiert – dies hat das Problem allerdings leider immer noch nciht gelöst.
Ich hatte auch schon mal so ein Problem – da waren die Eintel-Thumbnails unterschiedlich gepint. Auch hier habe ich probiert, und komme nicht weiter.

Hier die aktuelle Version von mir:

https://adobe.ly/3bn3ciJ


(Habe nur meinen Namen als Bild eingesetzt, da es mein Logo ist. Alles andere ist in Webfonts gestezt. Ich glaube auch nicht, dass das Problem daran liegen kann.)

Schönen Gruss, Patrick

[fotoroeder]

Es ist mir unmöglich, die Seite zu testen, weil auf Grund der "fluid width" breakpoints alles verschoben wird, sobald ich diesen senkrechten "Schrubber" nach innen schiebe, um das zu testen. Das einzige, was ich sagen kann, es sind leider immer noch viel zu viele Breakpoints. Alleine diese Dichte an Breakpoints innerhalb der "mobilen" Geräte ist nicht sinnvoll. Es macht auch Deine Website viel zu langsam, weil ja alles auch als weitere Version geladen werden muß.

Schon bei der Masterpage solltest Du und kannst auch alle Breakpoints löschen - Dein Design "bricht" ab 768 nicht mehr und nur dafür werden die Breakpoints ja benötigt. Diese Menge hier …:

… sollte die gesamte Menge an Breakpoints sein und nicht wesentlich übersteigen (320 ist immer noch ein Breakpoint).

Ich empfehle jetzt alsonochmal und etwas dringlicher, statt der fluid nur fixed width zu verwenden. Die Masterpage dürfte im Unetrschied dazu auch fluid width breakpoints verwenden, damit Dein Logo und das Menü da bleibt, wo Du es willst.

Uwe

[patrick_from_hamburg]

Danke Uwe

... nachdem ich die Seiten auf „fixed width” eingestellt habe, ist das Problem behoben.