Mobile Version einer Seite erstellen - Einige Fragen

[next user]

Hallo Leute,

ich habe ein paar "Verständnisfragen" bezüglich der Erstellung mobiler Versionen. Ich habe überhaupt keine Erfahrung dabei.
Die Fragen drehen sich aber nicht um Responsive Design, sondern einer Trennung zwischen Desktop- und Mobilversion.
Die mobile Version ist im Quellcode vereinfacht und angepasst und demnach nicht die selbe Datei wie in der Desktopversion.

1. Die Domain domain.de ruft die index.php auf. Wenn die mobile Version auf der Subdomain m.domain.de liegt, macht man das dann so, das diese zu z.b. indexmobile.php führt, oder wie macht man das?

2. Wie sieht Google das? Vom eigentlichen Inhalt(Text, Interaktion,...) ist die mobile Version die gleiche wie die normale. Gibt es da eindeutige Wege, um Google etc. zu sagen, das diese beiden "unterschiedlichen" URLs den gleichen Internetauftritt repräsentieren, und nicht als "schlechter" DC zu sehen sind?

3. Ich würde sagen, das eine Breite von mindestens 720 Pixel mittlerweile ok sein dürften. Alles drüber soll sich dann entsprechend der Auflösung/des Geräts automatisch anpassen. Was würdet ihr sagen, bei welcher Mindestbreite man für mobile Versionen heutzutage ansetzen sollte?


Ich habe mich im Netz umgehört und verschiedenes dazu gefunden. Besonders interessieren mich die Struktur und wie Google das alles sieht.
Ich habe auch da geschaut , bin mir jedoch immer noch nicht im klaren, wie es am besten ist.

[dreamy]

[quote="next user"

1. Die Domain domain.de ruft die index.php auf. Wenn die mobile Version auf der Subdomain m.domain.de liegt, macht man das dann so, das diese zu z.b. indexmobile.php führt, oder wie macht man das?
[/quote]

Ne, eher ein Unterordner (z.b. mobile) und dort eine index.php.
Das hat mit dem Webserver zu tun. Deine Domain zeigt auf ein Verzeichnis, nicht aber auf eine Datei und dort wird eben nach einer index Datei gesucht: also index.php, index.htm, index.html. Das lässt sich bei einem "eigenen" Server auch ändern.

[IMHO]

Eine mobile Version in Form einer eigenen Domin, eines Unterorderns, oder irgendeine andere Lösung die eine eigene URL für die mobilen Seiten zur Folge hat, ist heutzutage einfach nur noch "Gaga" (soll jetzt keine Kritik sein).

Das Mittel der Wahl ist, die Seite responsive zu machen. Und wenn man da nicht die höchsten Ansprüche hat, hält sich der Aufwand auch in Grenzen.

Just my 2 cents

[next user]

Ne, eher ein Unterordner (z.b. mobile) und dort eine index.php.
Das hat mit dem Webserver zu tun. Deine Domain zeigt auf ein Verzeichnis, nicht aber auf eine Datei und dort wird eben nach einer index Datei gesucht: also index.php, index.htm, index.html. Das lässt sich bei einem "eigenen" Server auch ändern.

Ok, hatte mir schon sowas gedacht, danke.

Eine mobile Version in Form einer eigenen Domin, eines Unterorderns, oder irgendeine andere Lösung die eine eigene URL für die mobilen Seiten zur Folge hat, ist heutzutage einfach nur noch "Gaga" (soll jetzt keine Kritik sein).

Das Mittel der Wahl ist, die Seite responsive zu machen. Und wenn man da nicht die höchsten Ansprüche hat, hält sich der Aufwand auch in Grenzen.

Just my 2 cents

Naja, ich finde responsive Seiten nicht schlecht, möchte das Design der Desktopversion jedoch nicht so schlicht halten. und wenn ich die Seite zuerst als Desktopversion erstelle und dann fürs mobile optimiere, muss ich diese ordentlich abspecken.
Entweder, ich halte die Desktopversion zugunsten der mobilen schlank und schlicht, oder ich erstelle die D-Version umfangreich und meinen Vorstellungen und treibe dafür das mobile Datenvolumen in die Höhe. Ich finde eine Trennung und somit bessere, individuelle Anpassung der Versionen, für besser.

[Melegrian]

Kannst Du so machen, einige von den großen Seiten haben auch noch eine mobile Version, wie zum Beispiel die Wikipedia, in der sich untern Links "Mobile Ansicht | Klassische Ansicht" befinden.

Nur wie möchtest Du das lösen?
Über eine Browserweiche?

Damit ist, denke ich, ein wachsendes Problem verbunden, je mehr unterschiedliche User Agents es gibt. Die beschreiben das Problem vermutlich richtig:

Demgegenüber steht eine erhebliche Unsicherheit bei der Gestaltung der Browser-Weiche, also bei der Identifikation der tatsächlichen Zielplattform des Besuchers.

https://emea.nttdata.com/blog/de/2014/0 ... er-weiche/

Und dazu solltest Du in beiden Versionen in allen Seiten die entsprechenden Canonical-Tags setzen, wie hier unter "Separate Mobile-Webseiten" beschrieben:

https://www.trustagents.de/blog/mobile- ... u-beachten

[next user]

Nur wie möchtest Du das lösen?
Über eine Browserweiche?

Damit ist, denke ich, ein wachsendes Problem verbunden, je mehr unterschiedliche User Agents es gibt. Demgegenüber steht eine erhebliche Unsicherheit bei der Gestaltung der Browser-Weiche, also bei der Identifikation der tatsächlichen Zielplattform des Besuchers.

Das ist momentan das Problem? Wie kann man das am besten machen? Die Auflösung abzufragen bringt garnichts. Das Betriebssystem bringt einen auch nicht weiter, da z.b. Android auf nem großen Tablet ja lieber die D-Version anzeigen lassen sollte.
Also, wie geht man da am besten vor? Ich meine bei responsiven Seiten sieht FullHD ja auch nicht gleich auf einem FullHD-Smartphone aus.

Man müsste die Pixeldichte in Erfahrung bringen. Geht das irgendwie?

[Melegrian]

Die Auflösung abzufragen bringt garnichts. Das Betriebssystem bringt einen auch nicht weiter, da z.b. Android auf nem großen Tablet ja lieber die D-Version anzeigen lassen sollte.

Na ja, doch bei responsive mit Media Querys wird ja eigentlich auch nicht viel mehr als min-width und max-width abgefragt.

[next user]

Na ja, doch bei responsive mit Media Querys wird ja eigentlich auch nicht viel mehr als min-width und max-width abgefragt.

Und wie funktioniert das dann, wenn ein 25" und ein 5" die gleiche Auflösung haben?
Oder wird da nur mit Prozenten gearbeitet? Wie wird dann die Schriftgröße festgelegt?

Ich hab gelesen, das man mit media queries und "resolution" auch die Pixeldichte herausfinden kann, allerdings nicht immer die echte. Gibt es sowas in der art auch bei Javascript/Php?

[mogli]

Lass dich von den hohen Auflösungen der Smartphones und Tablets nicht blenden. Intern verwenden die Geräte eine niedrigere Auflösung, so dass beispielsweise ein iPhone trotz hoher sichtbarer Auflösung die Inhalte immer noch nach CSS-Anweisungen der Kategorie 360x240 (genaue Werte nicht im Kopf) etc. anpasst.

[next user]

... so dass beispielsweise ein iPhone trotz hoher sichtbarer Auflösung die Inhalte immer noch nach CSS-Anweisungen der Kategorie 360x240 (genaue Werte nicht im Kopf) etc. anpasst.

Ich weis nicht. Als ich mal eine kleine Testseite erstellt, und diese dann auf meinem Smartphone angeschaut habe, sahen die 720x1280(erstes Handy) und 1080x1920(zweites Handy) Pixel auch entsprechend aus.
Vielleicht habe ich dich auch falsch verstanden, aber ich weiss echt nicht, wie man das für Desktop und für Smartphone mit der Auflösung anpassen kann. Da muss man doch Prozentangaben setzen, oder?

[Melegrian]

Und nach was möchtest Du Dich richten?
Probiere einmal aus auf unterschiedlichen Geräten und poste die Ergebnisse.

Code: Alles auswählen

<!DOCTYPE html>
<html>

<head>
<title>Testseite</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
<h1 style="text-align&#58;center">Testseite</h1>
<div style="margin-left&#58;10%" id="weite"></div>

<script type="text/javascript">
"use strict";
&#40;function &#40;&#41; &#123;
    var a = document.getElementsByTagName&#40;"html"&#41;&#91;0&#93;.offsetWidth;
    var b = screen.availWidth;
    var c = window.innerWidth;
    var d = window.screen.width;
    
    document.getElementById&#40;"weite"&#41;.innerHTML = "<b>Einige Werte&#58;<\/b><br \/>" +
    " <br \/>" +
    " offsetWidth&#58;         " + a + "px nutzbare Breite<br \/>" +
    " screen.availWidth&#58;   " + b + "px beschreibbare Breite<br \/>" +
    " window.innerWidth&#58;   " + c + "px Breite Browserfenster<br \/>" +
    " window.screen.width  " + d + "px Breite Auflösung<br \/>";    
&#125;&#40;&#41;&#41;;
</script>
</body>
</html>

[heinrich]

Da muss man doch Prozentangaben setzen, oder?

Schreib einmal als erstes

Code: Alles auswählen

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

in den Header deiner Seiten.

[next user]

Schreib einmal als erstes

Code: Alles auswählen

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

in den Header deiner Seiten.

Ok, habe ich aufm Smartphone getestet. Nutzbare Breite/Breite Browserfenster unterscheiden sich ja deutlich von der "tatsächlichen" Auflösung des Displays.
Das ist also mit Viewport gemeint. Bin oft über diesen Begriff gestolpert, hatte aber irgendwie nur Pixel im Kopf.
Jetzt stellt sich mir allerdings die Frage, mit welcher mindestbreite man arbeiten sollte.

Und noch eine Frage, wenn ich einer Grafik eine Höhe von 50 Pixel gebe und dann einmal mit und ohne viewport anschaue, so wird die grafik beim viewport ein wenig in der Höhe gestreckt. Hat das mit der geringen Breite zu tun?

Irgendwie komme ich mit dem Viewport nocht nicht so richtig klar.

EDIT: Beim Absenden hat er nicht richtig funktioniert. Die drei gleichen Posts unter mir sind ein Versehen. Wäre gut, wenn die ein Admin löschen könnte.

[next user]

Sorry, beim Absenden hat er nicht geladen. Sehe jetzt, das er 3 mal gepostet hat!

[next user]

Sorry, beim Absenden hat er nicht geladen. Sehe jetzt, das er 3 mal gepostet hat!