Darstellung am Bildschirm und auf dem Mobiltelefon

[Aqua75]

Hallo,

wenn sich die Seite nicht der Größe des Bildschirmes an auch nicht der Anzeige des Mobiltelefons anpasst, woran kann das liegen? Welche Einstellungen müssen dabei beachtet werden?

Das müsste doch Alles automatisch funktionieren, oder?

Vielen Dank im Voraus!

[Tommy Herrmann]

Hallo,

das ist mit Mobirise eigentlich nicht möglich

Mobirise passt das alles vollkommen automatisch an und das ist in 7 Jahren auch das erste Mal, dass ich so eine Bemerkung lese. Das habe ich noch nie gehört und das geht auch gar nicht. Mobirise generiert mit jedem Publizieren die Seiten komplett neu und diese werden dann immer responsive (an jedes Display angepasst) erstellt.

Es ist also ganz wichtig das zu sehen oder auch zu erfahren, wie Du bisher beim Seitenaufbau vorgegangen bist.

Immer wieder - es ist nicht möglich so etwas zu beurteilen und zu helfen, ohne die Webseite zu sehen. Wie soll man solche Sachen erraten?

Du musst doch ohnehin Deine Seite dann irgendwann auf den Server publizieren. Das sollte man auch dringend "üben" bevor man einen Haufen Arbeit investiert.

Falls Du bereits eine alte Webseite am Server hast, soll diese ja erst einmal nicht überschrieben werden.

Erstelle daher zunächst mal ein neues Verzeichnis am Server, das Du meinetwegen so nennst:

test

Dann schreibe diesen Verzeichnisnamen bei der entfernten Publizierung in den Bereich, wo in meinem Screenshot steht: "/MeinVerzeichnis/" - also dann so:

/test/

... oder publiziere mit Mobirise in Dein lokales Projekt-Verzeichnis und kopiere mit Deinem FTP-Programm (wie "FileZilla") den gesamten Inhalt des Ordners dieser lokalen Publizierung dann in dieses Verzeichnis "test" am Server.

Die Adresse (URL) Deiner Seite sieht dann ungefähr so aus:

Code: Alles auswählen

http://www.DeineDomain.de/test/

... und dann kann man mal in den Quelltext (Code) der Seite gucken und muss nicht mehr raten.

[Aqua75]

Vielen Dank für Deine Hilfe.

Das Problem war schlicht, dass meine Bekannte dachte, dass die Website auf kleineren Monitoren bzw. auf dem Smartphone genauso angezeigt wird wie am Monitor eines PC. Durch die Blockaufteilung bei Mobirise und die flexibilität diesbezüglich wird es natürlich auf kleineren Bildschirmen entsprechend angepasst dargestellt.

War mein Fehler, ich hätte mir vorher die Screenshots zeigen lassen sollen.

[Tommy Herrmann]

... ja - sonst wäre die Seite ja eben nicht "responsive", genau das ist der Unterschied. Die Seiten werden nicht einfach unlesbar verkleinert, sondern vollkommen neu aufgebaut.

[Aqua75]

Wenn man beispielsweise ein Design auf einem 24 Zoll Monitor entwirft und es sich dann an einem 13 Zoll Monitor (z.B. Macbook o.ä.) ansieht, ist es teilweise erschreckend wie anders das Design dann aussieht. Teilweise ist es regelrecht versaut, weil plötzlich Bild- und Textdesign nicht mehr harmonisch zusammenpassen.

Es wäre doch schön, wenn man in Mobirise das Design den einzelnen Bildschirmgrößen anpassen könnte. So wie ich es verstanden habe, geht das aber nicht, oder?

[Tommy Herrmann]

... doch - nur nicht "automatisch".

Du kannst mit Media-Abfragen (@media) die Display-Größe abfragen und entsprechend andere Sachen am Handy anzeigen - oder auch eben eine andere CSS.

Das macht aber Arbeit

[Aqua75]

Was meinst Du mit "Media-Abfragen (@media)"?

Ich kenne das noch nicht.

[Tommy Herrmann]

Hallo,

das kann man jetzt nicht so ganz schnell beantworten. Damit muss man sich recht ausgiebig beschäftigen und das lernen.

Gucke mal hier:

https://getbootstrap.com/docs/5.0/layout/breakpoints/

Media-Abfragen stellen fest, mit welcher Displaygröße der Besucher Deine Webseite besucht. Das ist dann natürlich am Desktop vollkommen anders als am Smartphone.

Hier mal ein aktuelles Beispiel auf einer meiner Seiten, die ich gerade erst vor wenigen Tagen erstellt habe.

https://www.mobirise-tutorials.com/Tuto ... tml#search

Ich habe hier eine eigene Tabelle erstellt (ganz oben auf der Seite), um unabhängig von der Mobirise-Tabelle zu werden. Solche Media-Abfragen beinhalten dann eben die Pixel-Breite des Displays - die sogenannten "Breakpoints".

Wenn Du etwas runter scrollst, findest Du diese Media-Abfrage von mir, die z.B. die Breite mit meiner class="mywidth" anders darstellt.

... am Smartphone auf 100%, ab 768px Breite auf 50% und ab 1400px Breite auf 25% der Container-Breite.

Weiterhin habe ich mit meiner class="mydisplay" hier das Eingabefeld zum Filtern meiner Tabelleneinträge am Smartphone linksbündig (flex-start) und am Desktop rechtsbündig (flex-end) gestellt.

Gucke Dir das am Desktop und am Handy mal an oder schiebe das Browser-Fenster einfach am Desktop horizontal kleiner zusammen.

Code: Alles auswählen

@media (max-width: 767px) {
  .mydisplay {
    display: flex;
    justify-content: flex-start;
  }
  .mywidth {
    width 100%;
  }
  input {
    text-transform: none;
  }
}
@media (min-width: 768px) {
  .mydisplay {
    display: flex;
    justify-content: flex-end;
  }
  .mywidth {
    width 50%;
  }
}
@media (min-width: 1400px) {
  .mywidth {
    width 25%;
  }
}

Damit kann man natürlich sehr vieles gestalten, also z.B. auch ein anderes Bild am Desktop als am Handy zeigen oder auch ein anderes Video oder was auch immer.

Hier mal ein Beispiel mit einer anderen Media-Abfrage, bei der ich am kleinen Bildschirm ein anderes Video als am großen Bildschirm zeige:

https://www.mobirise-tutorials.com/Tutorials-2/

... oder hier das Video im normalen Querformat (Landscape) am Desktop und im Hochformat (Porträt) am Handy:

https://www.mobirise-tutorials.com/Tuto ... ideos.html


Die Anwendungsmöglichkeit sind da unendlich groß.

[Rancher]

So wie ich das sehe, willst Du für jemanden eine Website erstellen, stehst aber selbst mit Deinem Wissen noch am Anfang. Es wäre deshalb gut, wenn Du Fragen von jemandem, der noch weniger weiß als Du, nicht einfach hier weitergibst, ohne vorher nachvollzogen zu haben, was die Person eigentlich meint.

Man kann nun mit Mobirise ohne viele Vorkenntnisse eine ansprechende Website bauen. Wenn man jedoch Sachen haben möchte, die Mobirise nicht fertig abliefert (allerdings wird von Mobirise ziemlich viel geliefert), muss man sich tiefer mit der Materie befassen. Ich empfehle Dir, Dich auch durch die Tutorial-Seiten von Tommy zu arbeiten www.mobirise-tutorials.com und hier im Forum die Schlagwortsuche zu benutzen.

Als Anfänger würde ich Deiner Bekannten klarmachen, dass Du das bist und entweder im Moment nur mit Bordmitteln arbeiten kannst, oder dass sie für Spezialwünsche einen Profi beauftragen und diesen auch bezahlen muss. Oder sie hat Zeit und Ihr arbeitet Euch gemeinsam hoch.

Zu Deiner Frage habe ich Dir als Beispiel einmal eine beliebige Website https://kinsta.com/de/blog/responsiven-webdesign/ herausgegriffen. Es gibt solche und ähnliche viele im Netz. Einfach mal googeln.
Mobirise hat in seinen Blöcken verschiedene Mediaanweisungen, die man mit dem Code-Editor auch ändern kann, man sollte aber wissen, was man tut.

[Aqua75]

Vorab: Vielen Dank für Deine ausführlichen Hinweise!

Es wäre deshalb gut, wenn Du Fragen von jemandem, der noch weniger weiß als Du, nicht einfach hier weitergibst, ohne vorher nachvollzogen zu haben, was die Person eigentlich meint.

Klar, habe doch schon gesagt das es mein Fehler war:
viewtopic.php?p=11705#p11705

Als Anfänger würde ich Deiner Bekannten klarmachen, dass Du das bist und entweder im Moment nur mit Bordmitteln arbeiten kannst, oder dass sie für Spezialwünsche einen Profi beauftragen und diesen auch bezahlen muss. Oder sie hat Zeit und Ihr arbeitet Euch gemeinsam hoch.

Es geht auch um mich selbst, da ich nur einen 24 Zoll Monitor habe und mir nicht bewusst war, wie gravierend anders die Designs auf kleineren Monitoren aussehen können.

Mobirise hat in seinen Blöcken verschiedene Mediaanweisungen, die man mit dem Code-Editor auch ändern kann, man sollte aber wissen, was man tut.

Man sollte davon ausgehen, dass Mobirise schon sehr gute Einstellungen diesbezüglich hat, oder?

Ich arbeite mit Mobirise weil es sehr einfach zu bedienen ist.
Extra Programmieren zu lernen ist nicht mein Ziel, da ich auch nicht so viel Zeit dafür habe.
Ein paar Codeschnipsel einzufügen ist OK aber zu mehr habe ich glaube kein Talent.

Im Adminbereich hat man ja über dem Design die Möglichkeit sich die Ansicht im Monitor und Mobil anzusehen, indem man folgendes Symbol anklickt:

a1.PNG (720 Bytes) 371 mal betrachtet

Wenn man dort die gängigsten Größen zur Auswahl hätte, wäre einem Anfänger auch schon sehr geholfen.

Problematisch können die Designs sein, wo Elemente nebeneinander angeordnet sind, z.B. Bild neben Text. In kleineren Monitoranzeigen ist dann der Text manchmal nicht mehr mit dem Bildelement danaben bündig. Sind die Elemente untereinander angeordnet, gibt es eigentlich keine Probleme.

Es gibt doch bestimmt Seiten im Internet, wo man sich eine Website in unterschiedlichen Monitorgrößen als Vorschau ansehen kann. Könnt Ihr da eine empfehlen?

[Tommy Herrmann]

Moin,

Du hast doch dort an diesen Handy-Symbol insgesamt 4 gängige Display-Größen zum schnellen Testen. Dennoch kann das dann am eigentlich Gerät etwas abweichen. Auch zwischen unterschiedlichen Fabrikaten, wie z.B. einem iPhone oder einem Samsung-Android Handy können von der Anzeige "Welten" liegen.

Mobirise erstellt die Seiten schon sehr optimal, wenn man aber ganz spezielle und individuelle Ansprüche stellt, dann kann man nicht erwarten, dass Mobirise das alles abdeckt. Dann muss man schon mal selbst in den Stil eingreifen.

[Aqua75]

Du hast doch dort an diesen Handy-Symbol insgesamt 4 gängige Display-Größen zum schnellen Testen.

Bei mir kann ich nur zwischen 2 Display-Größen hin- und her schalten. Also entweder "Mobile-" oder "Desktopansicht".
Eventuell gibt es noch eine andere Stelle wo man mehr Auswahlmöglichkeiten hat? Das Symbol was ich meine ist ganz Oben mittig am Monitor zu sehen, direkt oberhalb des Designfeldes, in der waagerechten Menüleiste von Mobirise.

[Tommy Herrmann]

Gehe:

> Menü > Konto (Account) > App-Einstellungen (App-Settings)

und schalte den Schalter "Alle Ansichten" ein:

und speichere dann unten am Button "OK" diese Einstellungen auch ab.

[Rancher]

Ionos gibt diese Tipps: https://www.ionos.de/digitalguide/websi ... r-website/