Ärger mit dem Responsive Design des Forums

[UweT]

ok, lesbarkeit der threads -> check

to do: beitragsdatum, bearbeitenbutton, link zu einer desktop version

danke fürs feedback, rom wurde auch nicht an einem tag erbaut

[UweT]

beitragsdatum,bearbeitenbutton,letzte beiträge übersicht -> check

desktopvariante vorbereitet, will das aber über den cookie lösen - bedarf ein wenig mehr zeit, kommt in den nächsten 14 tagen.


to do: anmelde, registrier und andere forumlare anpassen.

[Hanzo2012]

Schon besser!

[UweT]

heute sind einige neue funktionen dazugekommen auch das handling von privaten nachrichten sollte jetzt auf dem smartphone wesentlich angenehmer von statten gehen...

wer noch was findet, was man in der responiven variante verbessern kann - nur her damit - der responsive auftritt kann u.a. nicht die informationstiefe bieten wie die desktopvariante aber die grundfunktionalitäten wie: lesen, antworten, thema eröffnen, registrieren, einloggen, PNs schreiben, PNs beantworten - sollten nun "nutzbar" funktionieren.

[nerd]

Ohje, bei euch im quelltext und css siehts aus als waere eine armee von geoutsourcten billig-arbeitskraeften druebergejagt worden! Professionell geht anders, selbt wenn man ein uralt-template von phpbb pflegt was noch auf tabellen layouts setzt und man dieses behalten moechte.


Auf dem desktop habt ist die <textarea> fuer die antwort auf den beitragstext zerschossen.
Da ist per element style max-width auf 450px gesetzt, nach einem pageload ist die textarea aber aufgrund der aeusseren <td>'s nur ~260px breit weil - wieso erlaubt ihr der textarea keine 100% breite fuer alle deren buildschirm groesser als 640x480 ist?

Im "Schnelle antwort" block unter den beitraegen ist die textarea im ersten von 2 <td>s, allerdings ist das 2. (leere) <td> daneben mit width=100% angegeben.
Ungetestet, aber das hier sollte vermutlich besser funktionieren:

Code: Alles auswählen

table.mobileoverhead table td.row1:nth-child(2) {
	display:none;
}

textarea.post {
	width:100%;
}

Schoener ware es natuerlich, wenn man im html sinnvolle classnames verwendet die die teile auch beschreiben, dann koennte man sich auch :nth-class hier oben sparen...

Anscheinend wird dass hier

Code: Alles auswählen

@media screen and (max-width: 600px)
.mobileoverhead {
  display: none;
}

benutzt um konsequent alle elemente mit der entsprechenden klasse fuer kleine displays auszublenden. Ja warum werden dann die zitat/melden buttons explizit versteckt, abwohl die nur 60 oder 80px breit sind und problemlos auf mobile displays passen wuerden? Irgendwer hat sich die muehe gemacht jedes element im antwort-header ueber dem text in ein

Code: Alles auswählen

<span class="mobileoverhead"> </span>

zu packen. Aus irgend einem unerfindlichen grund kamen noch ein paar leere spans mit hinzu.

Um die antwort-buttons benutzbar zu machen sollte ein angemesses padding um die bilder, damit man nicht aus versehen das falsche icon anklickt.
Das einfachste ware es, wenn ihr im html template 2 versionen des posting-headers angebt - meinetwegen

Code: Alles auswählen

<tr class="header desktoponly">
&#40;original header hier&#41;
</tr>
<tr class="header mobileonly">
<td colspan=2>&#40;post datum&#41;  &#40;zitat&#41; &#40;melden&#41; </td>
</tr>

und diese dann via css ein- bzw. ausblendet:

Code: Alles auswählen

@media screen and (max-width: 600px) {

	.mobileonly
		display:block;	
	}

	.desktoponly
		display:none;	
	}
	
}

@media screen and (min-width: 601px) {

	.mobileonly
		display:none;	
	}

	.desktoponly
		display:block;	
	}
	
}

Ich schicke dann mal in den naechsten tagen die rechnung fuer meine unangefragten consulting-dienste per post zu ...

[UweT]

@nerd - danke für dein feedback

Das Template ist alt, die Template-Engine von phpBB noch älter - mobile / responsive ist lt. unserer Statistik für weniger als 5% der Forenmitglieder ein Thema hier im Forum.

Dennoch sehe ich ein Bedarf, dem wir mit ein paar kleinen Anpassungen gerecht werden wollen.

Ich bin mal die Punkte durchgegangen:

textarea) ist nun wieder auf dem zustand wie vorher für desktop und gleichermaßen für mobile nutzbar.

buttons) zitat wurde nun auch in mobile aktiviert, der rest lenkt nur ab...

schnelle antwort) ist wie eh und je - 100% führt auf dem desktop zu einer sehr langen textlaufbreite, was das lesen erschwerd.

grundsätzlich werden für mobile überflüssige elemente mit "mobileoverhead" ausgeblendet und notwendige elemente mit "mobileelement" eingeblendet - das entspricht annäherend deinem .mobileonly .desktoponly beispiel.

dass der code schicker, moderner und schlanker gestaltet werden kann - hast du vollkommen richtig erkannt - aktuell haben wir hierzu jedoch keine prio & ressourcen - das könnte sich bei diesem alten forum zu einer lebensaufgabe entwickeln - es sei denn man macht tabula rasa...

gruß
uwe

[Unifex]

mobile / responsive ist lt. unserer Statistik für weniger als 5% der Forenmitglieder ein Thema hier im Forum.

Wow, ist das echt so? Ich betreibe kein Forum, das weniger als 40 % Smartphone Zugriff aufweisen kann.
Einige liegen sogar bei über 50%.

Ausgerechnet die SEO´s noch mit dem guten Desktop Rechner unterwegs?

[UweT]

@Unifex:



Vielleicht habe ich ein Denkfehler, wenn ich die "login.php" auswerte, über die ein Forenmitglied muss, um sich einzuloggen sind, kam folgends raus:

Von ca. 10.000 Logins hier im Forum waren 364 lt. Google Analytics von Mobiltelefonen.

Da war ich mit 5% sehr optimistisch.

Gruß
Uwe

[fuchs]

Hi,

ich würde mir wünschen, wenn man mit einem Klick auf den letzten Beitrag kommen könnte. Könntet ihr nicht in der viewforum für mobile User den Zähler für die Antworten klickbar machen? (Evtl. den dazu icon_latest_reply.gif ) Ich lese manchmal gerne neue Antworten unterwegs... Wenn dann noch die Paginierung etwas größer für meine Finger wird, dann bekommt das mobile Design von mir ein "OK"

die idee für die mobile version war dabei - den fokus auf die letzten themen

Q: https://www.abakus-internet-marketing.d ... tml#971206

Genauer wäre, der Fokus liegt auf den Themen mit den letzten Antworten, deshalb wird wahrscheinlich auch von anderen dieser Link erwartet, wenn man schon die Themen mit den letzten Antworten verlinkt...

[UweT]

Es gibt jetzt im Footer für die Mobile-Version einen Link zur Desktopversion - sodass man bei Bedarf wieder zur Desktopversion wechseln kann.

[discountnetz]

Es gibt jetzt im Footer für die Mobile-Version einen Link zur Desktopversion - sodass man bei Bedarf wieder zur Desktopversion wechseln kann.

Sehr gute Entscheidung, nun kann ich das Forum wieder besser mobil nutzen.

Freundliche Grüsse
Jan

[UweT]

Hi,

ich würde mir wünschen, wenn man mit einem Klick auf den letzten Beitrag kommen könnte. Könntet ihr nicht in der viewforum für mobile User den Zähler für die Antworten klickbar machen? (Evtl. den dazu icon_latest_reply.gif ) Ich lese manchmal gerne neue Antworten unterwegs... Wenn dann noch die Paginierung etwas größer für meine Finger wird, dann bekommt das mobile Design von mir ein "OK"

die idee für die mobile version war dabei - den fokus auf die letzten themen

Q: https://www.abakus-internet-marketing.d ... tml#971206

Genauer wäre, der Fokus liegt auf den Themen mit den letzten Antworten, deshalb wird wahrscheinlich auch von anderen dieser Link erwartet, wenn man schon die Themen mit den letzten Antworten verlinkt...

In der Forenübersicht (Startseite des Forums) gibt es jetzt einen Link zum letzten Beitrag.