Darstellung am Bildschirm und auf dem Mobiltelefon
Darstellung am Bildschirm und auf dem Mobiltelefon
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!
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
- Site Admin
- Beiträge: 5921
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: Darstellung am Bildschirm und auf dem Mobiltelefon
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:
... und dann kann man mal in den Quelltext (Code) der Seite gucken und muss nicht mehr raten.
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/
Re: Darstellung am Bildschirm und auf dem Mobiltelefon
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.
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
- Site Admin
- Beiträge: 5921
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: Darstellung am Bildschirm und auf dem Mobiltelefon
... 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.
Re: Darstellung am Bildschirm und auf dem Mobiltelefon
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?
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
- Site Admin
- Beiträge: 5921
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: Darstellung am Bildschirm und auf dem Mobiltelefon
... 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
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
Re: Darstellung am Bildschirm und auf dem Mobiltelefon
Was meinst Du mit "Media-Abfragen (@media)"?
Ich kenne das noch nicht.
Ich kenne das noch nicht.
- Tommy Herrmann
- Site Admin
- Beiträge: 5921
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: Darstellung am Bildschirm und auf dem Mobiltelefon
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.
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ß.
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ß.
Re: Darstellung am Bildschirm und auf dem Mobiltelefon
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.
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.
Wenn Dein Pferd tot ist, steig ab.
Re: Darstellung am Bildschirm und auf dem Mobiltelefon
Vorab: Vielen Dank für Deine ausführlichen Hinweise!
viewtopic.php?p=11705#p11705
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:
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?
Klar, habe doch schon gesagt das es mein Fehler war:
viewtopic.php?p=11705#p11705
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.Rancher hat geschrieben: ↑Mo 23. Okt 2023, 19:41Als 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.
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:
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?
Zuletzt geändert von Aqua75 am Di 24. Okt 2023, 09:58, insgesamt 1-mal geändert.
- Tommy Herrmann
- Site Admin
- Beiträge: 5921
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: Darstellung am Bildschirm und auf dem Mobiltelefon
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.
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.
Re: Darstellung am Bildschirm und auf dem Mobiltelefon
Bei mir kann ich nur zwischen 2 Display-Größen hin- und her schalten. Also entweder "Mobile-" oder "Desktopansicht".Tommy Herrmann hat geschrieben: ↑Di 24. Okt 2023, 09:56 Du hast doch dort an diesen Handy-Symbol insgesamt 4 gängige Display-Größen zum schnellen Testen.
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
- Site Admin
- Beiträge: 5921
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: Darstellung am Bildschirm und auf dem Mobiltelefon
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.
> 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.
Re: Darstellung am Bildschirm und auf dem Mobiltelefon
Ionos gibt diese Tipps: https://www.ionos.de/digitalguide/websi ... r-website/
Wenn Dein Pferd tot ist, steig ab.
Wer ist online?
Mitglieder in diesem Forum: 0 Mitglieder und 7 Gäste