Eigene Templates für die Smartphone-Version der Website

Zwei neue Templates für die "mobile Version" + eine Anleitung: So integrierst du einige speziell für Smartphones gemachte Seiten in deine Website.

Smartphone-Version "Light"

Die "Mobile Version" der Website

Die Website für Smartphones optimieren - darüber wird gerade viel geredet. Als Heilbringer wird dabei oft "Responsives Webdesign" angesehen; allerdings stößt man dabei auf stetige Probleme: Hat man eins gelöst, taucht das nächste auf.
Die mit Abstand einfachere Möglichkeit ist es, einige Seiten extra für Smartphones herzurichten - mit mehr oder weniger eigenen Inhalten. Der Aufwand hält sich mit WebsiteBaker sehr in Grenzen.

Demo-Seite

So gehts:

Das Beste ist es, wenn man die Handy-Version als Unterseite der "normalen", = Desktop-Version macht, sinnvollerweise als Verzeichnis "m". Eine Subdomain m.domain.tld ist unter bestimmten Voraussetzungen möglich; wenn die Subdomain wiederum auf (pages)/m zeigt.

Ich habe 2 Templates gemacht; sie unterscheiden sich in der Farbe und in anderen Details. Beide sind recht spartanisch und können gerne angepasst werden. "mobile320-06.zip" und "mobile320blue-06.zip"

In der Index.php sind ganz oben einige Werte anzupassen; es sind keine "normalen" Templates.

Lege also eine Seite "m" an und ordne ihr das mobile Template zu. Wahrscheinlich ist es sinnvoll, die Sichtbarkeit dieser Seite auf "versteckt" zu stellen.
Der Seite "m" ordnest du die weiteren Seiten unter, normalerweise werden das WYSIWYG-Seiten sein.

Trick#17: So wird "m.php" zu "m/" (optional)

Ganz einfach: Sobald du sicher weißt, welche die Startseite sein soll, kopiere das Access-File m.php in den Ordner (pages) /m hinein, passe die Pfade zur config.php an und benenne sie "index.php"

Anpassungen in der Template-index.php

Das ist der einfachste Weg, um die Mobile Version und die Desktop-Version auseinander zu halten.

$mobileparent = 55; //Gib hier die page_id der Seite m an.
$mobilehomelink = WB_URL.'/m/'; //und hier die URL dahin
$mobilehomelinktext = 'Start'; //und den Linktext; alternativ kannst du auch ein Bild <img.. /> nehmen.
$useprevousnextbuttons = 1; //Schaltet die Vor/Zurück-Pfeile ein. Dazu später

Wer mal "ein bisschen responsiv" (ohne CSS + jQuery Overkill) ausprobieren will, kann sich das neue Template "Stygg" ansehen.

Seiten befüllen:

Am einfachsten ist es natürlich, du kopierst von vorhandenen Seiten das Wesentliche in die Smartphone-Seiten; ebenso legst du neue Formulare odgl. an. Das geht schnell und unkompliziert.

Bei manchen Modulen kannst du die Inhalte "rüberholen": Lege einen Abschnitt "Code" an und kopiere so etwas (am Beispiel eine Foldergallery) hinein:

$section_id=57; //die Section, die du dir "ausleihen möchtest
include(WB_PATH.'/modules/foldergallery/view.php');

Ob und wie das mit anderen Modulen funktioniert, musst du ausprobieren; häufig machen dann die Links Ärger, weil sie zur Desktop-Version führen. Mehr dazu hier.

Bitte nicht die Kommentarfunktion hier für Fragen nutzen, dazu gibt es ein Forum.

Bleibt noch die Frage: Wie kommen die Besucher auf die Mobile Version? Ja - dazu ein andermal. ;-)

Neuere Themen:

WebsiteBaker: nicht Top3 - aber Top10
Aktuelle Zahlen: Die Verwendung durch Webdesign-Agenturen und freiberufliche Webdesigner.

Neue Templates mit Responsive Webdesign
Wie die neuen Templates am besten zu nutzen sind.

Ältere Themen:

Webdesign für Smartphones - Der Stand 2012
einfach mal zuwarten, eigene Smartphone-Version oder Responsive Webdesign?

Sicherheitslücken beim Hoster
Der Hoster ist NIE schuld! Aber nie, ganz sicher nie!

Zurück


Kommentare:

05.08.2015

Rainer

Hallo,
bei beiden mobil Templates funktioniert bei mir das (main) Menue nicht.?? Getrennt instaliert von der Desktop version.Mach ich was falsch?

Das CMS WebsiteBaker im professionellen Einsatz