Desktop-Design versus mobiles Design

Flo Lauterbach · July 8, 2013 at 4:57 PM

Hallo zusammen,

ich habe mich anfangs wirklich gefreut, dass das WBB von Haus aus eine angenehme Oberfläche für mobile Designs bietet, doch jetzt bin ich an einem Standpunkt angekommen, an dem ich mich wirklich über dieses ärgere. Vorab, ich möchte es definitiv nicht schlechtreden, doch mir fehlt da eine wichtige Funktion.

Doch vorerst hier ein Beispiel aus eigener Produktion:
Ich habe via CSS das Mainmenü auf die Höhe des Logo-Dummys gebracht und das Userpanel nach unten verschoben.

Für meinen Teil bin ich damit zufrieden, doch wenn ich nun das Forum mit Firefox auf Android starte, dann sieht es folgendermaßen aus:

Wie man sieht, sieht man nichts.. die Icons hängen im Kategorie-Container und die Navigation ist komplett verschwunden.

Mein Vorschlag wäre, dass man 2 verschiedene Arten von Standard-Designs erstellen kann:

Das allgemeine Standard-Forendesign
Ein Standard-Design für mobile Endgeräte

Oder mache ich hier grundlegend etwas falsch?

Grüße!
he4dh4ntrz

Christopher Walz · July 8, 2013 at 5:03 PM

Wenn du das Menü verschiebst (welches in der mobilen Ansicht ja noch zum Teil vorhanden ist), verschiebt sich das natürlich auch in der mobilen Ansicht. Mit folgendem CSS Befehl kannst du es in der mobilen ANsicht wieder an die richtige Position schieben.

CSS

@media only screen and (max-width: 800px) {
// css anweisung
}

Marc-Andree · July 8, 2013 at 5:38 PM

Wenn wir schon bei Mobiles Design sind, das erkennt doch Burning Board mittels der Bildschirmauflösung oder? Denn wenn ich mein Fenster vom FF kleiner machen, erscheint Automatisch die Mobile version.

phopium · July 8, 2013 at 5:46 PM

Quote from PatrickGER

Wenn wir schon bei Mobiles Design sind, das erkennt doch Burning Board mittels der Bildschirmauflösung oder?

Ja, korrekt. Sobald man das Fenster kleiner macht und es irgendwann an den Punkt angekommen ist, was WoltLab in den CSS bzw. LESS-Dateien angegeben hat, treten die Änderungen auf.

D3nnis3n · July 8, 2013 at 6:16 PM

Eher Bildschirmgröße? Selbst mein Smartphone hat Full HD Auflösung ...

Marc-Andree · July 8, 2013 at 6:18 PM

Quote from Tyrael

Eher Bildschirmgröße? Selbst mein Smartphone hat Full HD Auflösung ...

Mein ich doch

phopium · July 8, 2013 at 6:24 PM

Einfacher gesagt, es kommt darauf an, wie groß das Browser-Fenster ist. Zieht man es kleiner, kommt man irgendwann zum mobilen Design.

Maximilian Mader · July 8, 2013 at 10:20 PM

Derzeit ist dies der Fall, wenn der Browser in der Breite nur maximal 800px darstellen kann.

DSGVO · July 9, 2013 at 1:14 AM

Anstatt das Menü zu verschieben um es dann nochmals für das "mobile Design" zu verschieben, würde ich mit min-width arbeiten:

Code

@media (min-width: 801px) {
  .selector {}
}

**Marcel Werk** · July 9, 2013 at 2:49 PM Official Post

Es empfiehlt sich, CSS-Änderungen, die sich nicht in der mobilen Ansicht auswirken sollen, entsprechend über Media Queries festzulegen.

TimTaylorX · July 9, 2013 at 8:07 PM

Also ich bin momentan der Meinung das diese Funktion wirklich überarbeitet gehört, warum möchte ich hier mal etwas schildern.

Ansicht auf einem iPhone5:

Durch das Zoom-Verbot ist der ziemlich funktionslose Text-Editor wirklich klein. Auf dem iP5 selber sieht es noch kleiner aus, dadurch haben Leute mit Sehschwäche sicherlich Probleme mit der Schrift.

Ansicht auf einem iPad2:

Durch diese sehr merkwürdige Umsetzung ändert sich das Anzeigeverhalten bei Tablets im Landscape-Modus. Sprich möchte ein User im Landscape-Modus das mobile Design haben, Fehlanzeige.

Ansicht auf einem Nexus7:

Selbiges Thema wie auf dem iPad, wieder wird dem User eine Ansicht mehr oder minder aufgezwungen.

Weiteres:
Auf dem mobilen Gerät bringt einem der "Desktop Ansicht" Button des Browsers nichts mehr, da dies schlichtweg ignoriert wird. Egal in welchem Modus, man kann nicht zoomen. Dies sollte immer möglich sein, auch sollte man Browser-Funktionen nicht aushebeln, diese ist sogar ein Standard-Prozess.

Allgemeins & Lösungen:
Grundsätzlich sollte man gerade bei den mobilen Designs entsprechende Wahlmöglichkeiten anbieten. Schließlich ist der Forum-User der Kunde und dem Fall auch der König.

Folgende Szenarios sind denkbar:

Kunde will immer das Desktop-Design
Kunde will immer das Mobile-Design
Kunde möchte je nach Situation zwischen den Designs wechseln
Kunde möchte in den verschiedenen Designs zoomen

Diese Standard-Bedürfnisse können mit der derzeitigen Lösung nicht abgedeckt werden und dadurch entstehen dann entsprechende Anfragen an den Admins des Board, der entweder hoffen kann, das irgendjemand ein ordentliches Plugin dafür schreibt, oder das Woltlab dieses Feature brauchbar umsetzt, was nüchtern betrachtet, momentan nicht der Fall ist. Dabei ist dies gar kein Hexenwerk, andere System schaffen dies ja schließlich auch.

Ich bin der Meinung hier sollte man dringend nachbessern, so ist es momentan denke ich nicht im Sinne der Massen und ich hoffe man fährt hier nicht die MS-Strategie, sondern berücksichtigt entsprechende Tipps, sind ja auch zum eigenen Wohl.

DSGVO · July 9, 2013 at 9:28 PM

Quote from TimTaylor

Auf dem mobilen Gerät bringt einem der "Desktop Ansicht" Button des Browsers nichts mehr, da dies schlichtweg ignoriert wird. Egal in welchem Modus, man kann nicht zoomen. Dies sollte immer möglich sein, auch sollte man Browser-Funktionen nicht aushebeln, diese ist sogar ein Standard-Prozess.

Das liegt nicht am WBB, sondern am Browser. Ich nehme mal an die "Desktop Version" gaukelt dem Server schlicht einen anderen User Agent vor, betrifft also nicht den ausschlaggebenden viewport.

TimTaylorX · July 9, 2013 at 9:37 PM

Quote from InitArt

Das liegt nicht am WBB, sondern am Browser. Ich nehme mal an die "Desktop Version" gaukelt dem Server schlicht einen anderen User Agent vor, betrifft also nicht den ausschlaggebenden viewport.

Das ist aber nur ein Teilproblem, zu mal es nicht des Browsers Aufgabe sein kann, Quellcode der Website nach Viewports zu durchsuchen und zu ersetzen.

**Marcel Werk** · July 9, 2013 at 9:41 PM Official Post

@TimTaylor
Das hat ja eigentlich nichts mit dem eigentlichen Thema hier zu tun. Zum Wunsch, dass ein Benutzer frei über die Anwendung des Response Designs entscheiden kann, gibt es bereits ein anderes Thema: Mobile Version: Zur Desktop-Version wechseln

TimTaylorX · July 9, 2013 at 9:43 PM

Stimmt, da hatte ich ja sogar schon was geschrieben. Kann ein Mod die Posts gerade bitte entsprechend verschieben? Danke dafür

DSGVO · July 9, 2013 at 10:49 PM

Quote from TimTaylor

Das ist aber nur ein Teilproblem, zu mal es nicht des Browsers Aufgabe sein kann, Quellcode der Website nach Viewports zu durchsuchen und zu ersetzen.

Das beißt sich etwas, warum sollte es dann die Aufgabe des mobilen Browsers sein, dem Server einen Desktop Browser vorzugaukeln? Ich sehe das eher als Browser Funktion an.

D3nnis3n · July 10, 2013 at 6:12 AM

Quote from Marcel Werk

@TimTaylor
Das hat ja eigentlich nichts mit dem eigentlichen Thema hier zu tun. Zum Wunsch, dass ein Benutzer frei über die Anwendung des Response Designs entscheiden kann, gibt es bereits ein anderes Thema: Mobile Version: Zur Desktop-Version wechseln

Das ja schon mit "Wird nicht umgesetzt" getaggt ist, weswegen mich deine Aussage gerade etwas verwundert.

TimTaylorX · July 10, 2013 at 7:06 AM

Quote from InitArt

Das beißt sich etwas, warum sollte es dann die Aufgabe des mobilen Browsers sein, dem Server einen Desktop Browser vorzugaukeln? Ich sehe das eher als Browser Funktion an.

Warum sollte sich das beissen, es ist eine Sache eine andere Browserkennung zu schicken, das kostest keine Performance. Und selbst das wurde nur gemacht, weil es schlechte Webseiten gibt, die den Wechsel nicht anbieten. Warum sollten wir hier halbe Sachen machen, wenn man es richtig machen kann? Wir Diskutieren gerade schon das falsche, es geht nicht darum Workarounds durch andere schaffen zu lassen.
Mir geht es darum die realen Nutzeranforderungen abzudecken und es wäre eben schön, wenn man diese berücksichtigt.

Geronimo · July 11, 2013 at 4:22 PM

Das ganze könnte man ja auch schön umsetzen, bspw. durch so ein Eselsohr in der rechten oberen Ecke, bei Klick wechselt man von der einen zur anderen Ansicht und kann jeweils entscheiden was gerade besser passt.

phopium · July 11, 2013 at 4:32 PM

Quote from Geronimo

Das ganze könnte man ja auch schön umsetzen, bspw. durch so ein Eselsohr in der rechten oberen Ecke, bei Klick wechselt man von der einen zur anderen Ansicht und kann jeweils entscheiden was gerade besser passt.

Das mag sicher sein, aber ich denke es ist ziemlich sicher davon auszugehen, dass derartiges nicht mehr kommt. Die automatisierte Umstellung zwischen der normalen und mobilen Ansicht ist ja fest in den LESS-Dateien verankert. Ich denke nicht, dass WoltLab das nochmal komplett überarbeiten wird. So wird es wohl nicht möglich sein mit einem Button o.ä.

Participate now!