Zusätzlich eine "mobile"-Seite erstelllen im WD6

harryp100 schrieb am 24.03.2013 um 18:25 Uhr

Hallo zusammen,

ich habe bereits eine funktionierende "normale" Webseite und möchte, da sich die Smartphones ja immer mehr verbreiten, zusätzlich eine "mobile" Seite anlegen, auf die bei einem Aufruf von einem Smartphone, automatisch verzweigt wird. Wie kann ich das mit dem WD6 bewerkstelligen?

Danke und viele Grüße

Kommentare

marboe schrieb am 24.03.2013 um 19:31 Uhr

Hallo harryp100,

das wird grad ein Dauerbrenner hier im Forum . Du hast zwei naheliegende Möglichkeiten.

  1. Das Upgrade auf Webdesigner MX premium - die neueste Version von WD erstellt Seiten, die auch in den meisten mobilen Geräten ansehnliche Ergebnisse liefert. Einschränkungen gibt es (dafür suche hier im Forum nach "mobile Darstellung"
  2. Das erstellen separater Seiten und das Einrichten einer Browserweiche. Weitere Info hier.

Gruß Martina

boris-kreuter schrieb am 24.03.2013 um 20:07 Uhr

Ich finde die Frage sehr gut. Ich habe ähnliche Probleme mit den Magix Lösungen. Ich benutze den Website Maker MX 2013. Schöne Darstellung auf Windows PC. Andere Geräte teilweise eine Katastrophe. Zusätzlich habe ich den Magix Website Designer. Dieser läuft auf neueren und älteren ipod, iphone und es lässt sich mit ein paar Grundkenntnissen auch eine eigene Smartphone Darstellung bauen, die auf ipod, iphone, smartphone ganz gut wirkt. Gerade bei Website Maker MX 2013 wünschge ich mir Lösungen. Ähnlich wie die mobile Ansicht beim Online Album von Magix (den ich auch Besitze). Warum geht das nicht bei WebsiteMaker MX 2013?

marboe schrieb am 24.03.2013 um 22:16 Uhr

Warum geht das nicht bei WebsiteMaker MX 2013?

Hallo Boris Kreuter,

weil der WebsiteMaker Seiten in Flash-Technik erstellt. Der Webdesigner arbeitet dagegen mit html-Code. Damit ist die Darstellung auf Smartphones gewährleistet.

Der User harryp100 nutzt aber nur den Webdesigner, weswegen ihm der Beitrag jetzt nicht so viel bringt. Er kann z.B durch die zwei genannten Möglichkeiten seinen Wunsch realisieren. Bestimmt gibt es auch noch andere Wege für ihn, weitere Infos findet man hier und in den verlinkten Threads.   Gruß Martina

harryp100 schrieb am 25.03.2013 um 19:19 Uhr

Hallo Martina,

vielen Dank für deine Ausführungen. Ich habe bereits schon mal die Links für die Browserweiche angesehen, dass scheint mir auf den ersten Bick ja nicht ganz so einfach. Hier muss ich mich erst einlesen und schauen, ob meine Kenntnisse dafür ausreichen... Wenn dir mal ein Beispiel dafür unterkommen sollte, wäre ich dir für einen Link sehr dankbar.

Das upgrade auf den Webdesigner MX premium werde ich ebenfalls für mich prüfen, vor allem, wie das dann mit den mobilen Seiten gelöst ist. Sieht jedenfalls nach einer guten Lösung aus, obwohl mir die Browserweicher eher zusagt, mal sehen.

Ich hoffe du verfolgst meine Anfrage weiterhin und hilfst mir auf die Sprünge.

Viele Grüß, Gregor

marboe schrieb am 25.03.2013 um 19:41 Uhr

Hallo harryp100,

du kannst sehr gerne dich hier wieder melden wenn du noch Fragen hast. Nur: es lesen dann wahrscheinlich nur noch diejenigen mit, die hier geantwortet haben und bei neuen Antworten eine Email erhalten. Du erreichst mehr Nutzer wenn du dann die Originalfrage editierst/ergänzt oder eine neue Frage stellst.

Ich habe leider keinerlei Erfahrung mit einer Browserweiche, da ein Analysetool ergeben hat, dass die Nutzer die meine Seiten aufrufen nur mit einem verschwindend kleinen Teil mit Browsern von Apple oder Android unterwegs sind. Bei mir liegt dieser Anteil bei 0,1 bis 0,3 %. Dafür lohnt sich die Arbeit nicht. Aber das kommt sicher auf die Zielgruppe an. Zumal man seine Seiten auch so aufbauen kann, dass eben auch die Smartphones den wichtigen Textinhalt richtig anzeigen können. Man sollte dann halt auf blinkenden Schnickschnack verzichten. . Für mich ist mit dem WD8 premium momentan alles erfüllt was ich mir von meinen Seiten wünsche.

Weiterhin viel Erfolg beim designen!  Gruß´Martina

BeRo schrieb am 25.03.2013 um 22:23 Uhr

Ich habe gerade zum Thema "Browserweiche" ein kleines Tutorial verfasst, das aber leider noch in der Warteschleife für die Veröffentlichung "kreist".

Wer nicht warten will, der (die ) kann sich das Ergebnis weiter unten schon mal vorab durchlesen:

-----------------------------------

Tutorial Browserweiche zur Umleitung auf mobile- & Desktop Browser:

Da sich in letzter Zeit die Anfragen zu dem Thema "Browserweiche" im Forum häufen, habe ich hier eine Kurzanleitung abgelegt, die sofort für eigene Zwecke genutzt werden kann.

Die weiter unten beschriebene Browserweiche basiert auf PHP. Der Provider, der den Webspace zur Verfügung stellt sollte PHP also unterstützen.

Die Browserweiche wurde so angelegt, dass sie den sogenannten "User Agent" (in unserem Fall den Webbrowser) des Anwenders feststellt und dann entweder die für die Browser der mobilen Geräte optimierte Seite aufruft oder, alternativ, die Seite, die für die Browser der stationären Geräte optimiert wurde.

Um die beiden Browsergruppen unterscheiden zu können, wird von der Browserweiche eine vorbereitete Tabelle "gelesen" (unten blau markiert) und geprüft, ob der festgestellte User Agent in der Tabelle enthalten ist. Das ist im Grunde eine einfache ja/nein Abfrage, die eine ebenso einfache Auswertung ermöglicht.

Zur Umsetzung benötigen wir ein PHP Script, wie das folgende, das wir der Einfachheit halber "index.php" nennen.
Das Script kann mit jedem einfachen Texteditor angelegt werden, z. B. mit dem Windows "Notepad". Der u. a. Code kann dazu mit copy & paste übernommen werden und als Datei "index.php" gespeichert werden:

-------------------------------
<?php
$useragent = $_SERVER['HTTP_USER_AGENT'];
if (preg_match("/(alcatel|amoi|android|avantgo|blackberry|benq|cell|cricket|docomo|elaine
|htc|iemobile|iphone|ipad|ipaq|ipod|j2me|java|midp|mini|mmp|mobi|motorola|nec-|nokia|palm|
panasonic|philips|phone|playbook|sagem|sharp|sie-|silk|smartphone|sony|symbian|t-mobile|telus
|up\.browser|up\.link|vodafone|wap|webos|wireless|xda|xoom|zte)/i",$useragent))
{
header( 'Location: mobil.htm' );
} else {
header( 'Location: desktop.htm' );
}

?>
-------------------------------

Im o. a. Scriptcode bin ich davon ausgegangen, dass die Startseite der mobilen Website "mobil.htm" heißt (oben gelb markiert) und die Startseite der stationären Version "desktop.htm" (oben grün markiert).
Beide Seiten müssen in dem Fall im selben Verzeichnis auf dem Webserver liegen, in dem auch die Browserweiche "index.php" abgelegt wird.

Sollen die für die jeweiligen Browser optimierten Seiten in anderen Verzeichnissen-, oder gar in anderen Webspaces abgelegt werden, muss der Pfad im "Location:" Statement zusätzlich angegeben werden.
Das kann dann so aussehen, wenn die komplette URL angegeben wird:

------------------------------------
header("Location: http://www.beispiel.de/mobil.htm");
------------------------------------

Oder so, wenn die Startdatei "mobil.htm" nur in einem anderen Verzeichnis des aktuellen Webspace liegt (hier im  Verzeichnis "smartphones"):

------------------------------------
header("Location: ../smartphones/mobil.htm");
------------------------------------

Die Browserweiche "index.php" muss in jedem Fall da liegen, wo die üblicherweise genutzte URL hinzeigt. Der ursprüngliche Aufruf der Website ändert sich dann nicht! Gleichgültig, wo die Website liegt, auf die umgeleitet wurde.

Wichtig! Im Startverzeichnis (i. d. R. das root Verzeichnis des Webspace) darf keine weitere Startdatei liegen, wie z. B. eine "index.htm" oder "index.html"

Die o. a. Browserweiche kann über diesen Link getestet werden. Da wird eine von 2 einfachen HTML Seiten aufgerufen, in der darauf hingewiesen wird, welcher Browsertyp (mobil/Desktop) für den Aufruf benutzt wurde.

Zur Unterscheidung habe ich für Desktop Browser eine kleine Flash Animation eingebaut-, die Seite vertikal auf Mitte gesetzt und dem Hintergrund einen Farbverlauf gegeben.

Für die mobilen Browser entfällt die Flash Animation und die vertikale Ausrichtung, außerdem wird der Hintergrund ohne Verlauf dargestellt.

Viel Erfolg

Zuletzt geändert von BeRo am 25.03.2013, 22: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... 🤓

marboe schrieb am 26.03.2013 um 00:27 Uhr

Hallo Bero,

der Link funktioniert - wie zu erwarten :D - mit meinem Androidhandy und dem Desktop wunderbar. Und wieder super erklärt. DANKE. Jetzt denke ich doch drüber nach es irgendwo einzubauen . Scheint ja nicht so schwer zu sein.

Du bist offensichtlich vorerst "nur" davon ausgegangen, dass man die zwei Varianten umsetzen will (also mobil und Desktop) und dort nach Bedarf den Viewport für alle mobilen Seiten gemeinschaftlich ändert. Ich werde es bei Gelegenheit testen ob das für die meisten Smartphonedisplays bzw Mobilbrowser eine bessere Darstellung bringt. Aber vermutlich schon da ja die Mobilinhalte extra erstellt werden. Man muss also seine Website doppelt erstellen. Sicherlich für die meisten machbar.

Herzliche und dankbare Grüße, Martina

BeRo schrieb am 26.03.2013 um 14:42 Uhr

@ marboe

[...] Du bist offensichtlich vorerst "nur" davon ausgegangen, dass man die zwei Varianten umsetzen will [...]

Richtig.

Aber natürlich steht einer weiteren Splittung der Abfrage nichts im Weg. Du kannst z. B. die Abfrage verfeinern, indem Du die mobilen Geräte nach Betriebssystem aufteilst. Sinnvoll wäre hier etwa eine Unterteilung in iOS- und nicht iOS Geräte.

Das entsprechend angepasste PHP Script sieht dann so aus:

-------------------------------
<?php
$useragent = $_SERVER['HTTP_USER_AGENT'];
if
(preg_match("/(ios|iphone|ipad|ipod)/i",$useragent))
{
header( 'Location: imobil.htm' );
}
elseif
(preg_match("/(alcatel|amoi|android|avantgo|blackberry|benq|cell|cricket|docomo|elaine
|htc|iemobile|ipaq|j2me|java|midp|mini|mmp|mobi|motorola|nec-|nokia|palm|
panasonic|philips|phone|playbook|sagem|sharp|sie-|silk|smartphone|sony|symbian|t-mobile|telus
|up\.browser|up\.link|vodafone|wap|webos|wireless|xda|xoom|zte)/i",$useragent))

{
header( 'Location: mobil.htm' );
}
else {
header( 'Location: desktop.htm' );
}

?>
-------------------------------

Der oben gelb markierte "if" Bereich ist für die Abfrage auf mobile Geräte mit iOS Browser (blau markiert) dazugekommen. Wird die Seite also z. B. von einem iPhone aus aufgerufen, wird jetzt die neue Seite "imobil.htm" (grün markiert) geöffnet, die speziell für mobile iOS Browser optimiert sein kann.

Ich habe die Demo der Browserweiche um die 3. Abfrage erweitert. Auf mobilen Geräten mit iOS Browser erscheint also jetzt eine individuelle Seite...

Sollen weitere Abfragen erfolgen, z. B. zur Unterteilung der Browser IE-, FF-, Chrome-, etc. können nach diesem Muster einfach weitere "elseif" Bereiche mit den entsprechenden Abfragen- und Seitenaufrufen eingefügt werden.

Wenn man nicht ins Lager der absoluten Perfektionisten will, sollte es IMHO aber genügen, wenn man sich auf die beiden Besuchergruppen, mobil und stationär, beschränkt.

[...] Man muss also seine Website doppelt erstellen. Sicherlich für die meisten machbar. [...]

Dem ist nichts hinzuzufügen.

Die anfallende Mehrarbeit ist ja spätestens beim Betrachten des optimierten, mobilen Webauftritts vergessen

Viel Erfolg

Zuletzt geändert von BeRo am 27.03.2013, 01:21, 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... 🤓

harryp100 schrieb am 27.03.2013 um 08:23 Uhr

Hallo BeRo,

erstmal vielen Dank für die ausführliche und gut verständliche Anleitung. Ich werde eine zweite mobile Seite anbinden wie von dir vorgeschlagen.

Wichtig! Im Startverzeichnis (i. d. R. das root Verzeichnis des Webspace) darf keine weitere Startdatei liegen, wie z. B. eine "index.htm" oder "index.html"

Ich habe z. Zt. eine Startseite index.htm. Wenn ich dich richtig verstanden habe, muss ich dieses Datei umbenennen in z.B. desktop_start.htm, die alte "index.htm" vom Server löschen und die neue Datei "index.php" im gleichen Verzeichnis wie die vorher "index.htm" speichern. Weitere Einstellungen sind nicht erforderlich, speziell an der Domain www.meine-homepage.de. Ist das so ok?

Viele Grüße

BeRo schrieb am 27.03.2013 um 17:02 Uhr

[...] Wenn ich dich richtig verstanden habe, muss ich dieses Datei umbenennen in z.B. desktop_start.htm [...]

Das ist korrekt.

Vergiss aber bitte nicht, dass ein einfaches Umbenennen nicht genügt, weil die Links, die von den anderen Seiten auf die Startseite zurückführen, immer noch auf die "alte" index.htm" verweisen. Diese Links führen dann ins Leere.

Wenn Du aber die Startseite im WD umbenennst und das Projekt exportierst/veröffentlichst, ist alles i. O.

Ansonsten kannst Du so verfahren, wie Du es beschrieben hast. Du musst nur darauf achten, dass die beiden alternativen Startseiten im selben Verzeichnis auf dem Server abgelegt werden, in dem die Browserweiche liegt. Das sollte das root Verzeichnis des Servers sein.

In dem Fall sind dann tatsächlich keinerlei weitere Einstellungen an der Domain zu machen.

Viel Erfolg und ein paar schöne Feiertage

Zuletzt geändert von BeRo am 27.03.2013, 17:02, 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... 🤓

harryp100 schrieb am 27.03.2013 um 19:05 Uhr

Hallo BeRo,

habe die Änerungen vorgenommen, die index.php erstellt und hochgeladen.

Es funktioniert wunderbar, vielen Dank!