Styles für Handynutzer

[RyoBerlin]

Gibt es schon styles welche sparsam sind mit Grafiken etc. damit man vom Handy mobil auch pghBB3 nutzen kann?

Normalerweise hat eine Seite ja ca. 300kb.
Manche schlagen sogar mit 1MB pro seite zu buche.

Ich würde gerne optional nen vereinfachten mobil style zur verfügung stellen. Vielleicht gibt es da ja schon was, sonst schuster ich meinen einfach etwas um

[Kellergeist2]

Da mein Forum auch gerne von mobilen Benutzern besucht wird, bin ich ebenfalls an einem "optimized for mobile devices"-Style interessiert.

Meiner Meinung nach könnte solch ein Style (fast) komplett auf Grafiken verzichten, da die Informationen in den Themen und Beiträgen bei mobilen Besuchern ganz klar im Vordergrund steht.
Die einzigen Grafiken, die man bräuchte, wären die Indikatoren, ob neue Beiträge vorliegen oder nicht (und eventuell die kleinen Icons, um zum letzten/neuesten Beitrag zu gelangen).
Die Grafiken für das Ändern/Zitieren, Neues Thema/Neue Antwort könnten als normale Schaltflächen designt werden.
Kleine Icons für PN, ICQ, E-Mail, Homepage, Beitrag melden/löschen, Benutzer verwarnen, Beitrags-Details wären nützlich, da sie von mobilen Moderatoren eventuell benötigt würden, jedoch nicht zuviel Platz im Display einnehmen sollten.
Avatare sind unnötiger Ballast.

Problematisch wird es bei Bildern in den Beiträgen. Ich bin kein Experte, aber wenn es dafür auch noch eine einfache Lösung (nur für die mobilen Besucher) gibt, wäre das super.


Eine etwas Offtopic-Frage hierzu:
Wäre es sinnvoll, die mobilen Besucher über die Bot-Funktion (am User-Agent) zu erkennen und ihnen automatisch das Super-Light-Style zuzuordnen?
Oder gibt es hier eine elegantere Methode, denn spätestens, wenn sie sich einloggen, würde ja wieder deren ausgewähltes Style zuschlagen?

[MichaelN0815]

Um einen anderen Style für mobile Endgeräte einzubinden, gibt es eine sehr elegante Lösung:
im overall_header braucht man nur ein passendes CSS einbinden:

Code: Alles auswählen

<link rel="stylesheet" media="handheld" type="text/css" href="pda.css">

In diesem CSS-File muss man dann 'nur' alle Definition für Mobiluser anpassen. Dann können alle den gleichen Style benutzen und bei mobilen Endgeräten wird dann automatisch umgeschaltet.

Leider habe ich da auch noch nicht den Dreh gefunden. Auf meinem PDA wird das Forum noch nicht mal halbwegs lesbar angezeigt.

Für Tips wäre ich daher auch dankbar.

[gloriosa]

Hallo,
das >>> phpBB 3 Mobile Add-on <<< passt zum Thema.

[MichaelN0815]

Ich greife das nochmal auf. Der obige Link hat mir nicht weitergeholfen, da finde ich keinen Download und auch sonst keine Infos was der Mod macht.

Am liebsten wäre mir ein spezieller Style für Mobile User. Entweder einen kompletten Style, den der User als seinen Standard einstellt, oder besser noch, ein angepasstes CSS-File für mobile Endgeräte.

Ich habe jetzt folgendes gemacht:
in overall_header.html unterhalb von

Code: Alles auswählen

<link href="{T_THEME_PATH}/large.css" rel="alternate stylesheet" type="text/css" title="A++" />

eingefügt

Code: Alles auswählen

<link href="{T_THEME_PATH}/mobile.css" rel="stylesheet" type="text/css" media="handheld" title="pdaonly" />

Die mobile.css:

Code: Alles auswählen

/* xabbBlue Print Style Sheet
-------------------------------------------------
	Author: subBlue  ( http://www.subBlue.com/ )
	Version: 25 August 2004
	Modified by: www.phpbb-styles.com

	Copyright 2004 phpBB Group
-------------------------------------------------*/


/* Lots still TODO here! */

/* General markup styles */
* {
	padding: 0;
	margin: 0;
}

body {
	font: 11pt Verdana, Arial, Helvetica, sans-serif;
	color:#000000;
}

a:link		{ color: #000000; text-decoration: none; }
a:visited	{ color: #000000; text-decoration: none; }
a:active	{ color: #000000; text-decoration: none; }

img, .noprint, #sub-header, #sub-footer, .box1, .divider, .signature { display: none; }

/* Container for the main body */
#wrap {
	margin: 0 2em;
}

p { font-size: 85%; }
.copyright { font-size: 75%; }
.page-number { float:right; width: auto; text-align: right; font-size: 75%; }

h1, h2, h3, h1 a, h2 a, h3 a {
	font-family: "Trebuchet MS",georgia,Verdana,Sans-serif;
	color: #000000;
	background: none;
	text-decoration: none;
	font-weight: bold;
}

h1 { font-size: 20pt; }
h2 { font-size: 16pt; margin-top: 1em; }
h3 { font-size: 14pt; margin-top: 1em; }

.content {
	font-size: 11pt;
	line-height: 14pt;
	margin-bottom: 1em;
	font-family: "Lucida Grande", "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
	overflow: hidden;
}

/* CSS2 Print tip from: http://www.alistapart.com/articles/goingtoprint/ */
.postbody a:link, .postbody a:visited, .postbody a:active, .postbody a:hover {
	text-decoration: underline;
	padding: 0.1em 0.2em;
	margin: -0.1em -0.2em;
	color: #666;
	background: none;
	font-size: 100%;
}

html>body .postbody a:link:after, html>body .postbody a:visited:after {
	content: " (" attr(href) ") ";
	font-size: 90%;
	text-decoration: none;
}

hr {
	height: 1px;
	background-color: #999999;
	border-width: 0;
}

.author {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 75%;
	margin-bottom: 0.6em;
}

.date {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	float: right;
	position: relative;
	text-align: right;
	font-size: 75%;
}

/* Dont want to print url for names or titles in content area */
.postbody .author a:link, .postbody .author a:visited,
html>body .postbody .author a:link:after,
html>body .postbody .author a:visited:after,
.postquote .quote-by a:link, .postquote .quote-by a:visited,
html>body .postquote .quote-by a:link:after,
html>body .postquote .quote-by a:visited:after,
html>body .postbody h1 a:link:after, html>body .postbody h2 a:link:after {
	text-decoration: none;
	content: "";
}

/* Poster profile */
.postprofile { display:none; }
.grip-show { display:none; }

/* Quote */
.postquote {
	font-size: 85%;
	margin: 1em 18% 1em 4%;
	padding: 0.5em;
	position: relative;
	line-height: 1.5em;
	border: 1px #999999 solid;
}

.postquote img { display: none; }
.postquote span { display: block; }
.postquote span .postquote { font-size: 100%; }
.quote-by { font-weight: bold; }

/* Misc page elements */
div.spacer { clear: both; }

/* Accessibility tweaks: Mozilla.org */
.skip_link { display: none; }

/* als class den div zuweisen, die auf dem Navi ausgeblendet werden sollen */

.nonavi {
    display:none;
}

#wrap {
	width:99%;
}

ul.topiclist dl {
	position: static;
}
ul.topiclist li.row dt a.subforum {
	position: static;
}
ul.topiclist dt {
	width:100%;
	float:none;
}
dd.posts, dd.topics, dd.views {
	width: 100%;
}
dd.extra {
	width: 100%;
}

dd.mark {
	float: none;
	width: 100%;
}

dd.info {
	width: 100%;
}

dd.option {
	width: 100%
}
.postprofile dd, .postprofile dt {
	display:none;
}
blockquote{
	background-image:none !important;
}
.uncited{
	background-image:none !important;
}
.corners-top{
	display:none !important;
}
.postbody{
	width:90%;
}
.forumbg{
	background-image:none !important;
}
.topiclist{
	width:100%;
}
.topictitle{
	width:100%;
}
.icon{
	background-image:none !important;
}

Damit ist die Ansicht schon besser geworden, aber die Forenansicht ist immer noch unleserlich - siehe Foto.[ externes Bild ]
Wenn da noch einer ne Idee hätte...

[MoinMoin]

Weiß jemand ob sich da inzwischen was getan hat mit einer mobile-version?
wird ja doch imme rrelevanter.

[Würzi]

Schau mal hier: viewtopic.php?p=1215595#p1215595

Habe das aber selber nicht getestet.