it-swarm.com.de

Sollte ich mein Menü über meine mobile Version dieser Showtimes-Website stellen?

Ich versuche, eine einfache Website zu entwerfen, die Filmvorführungen in einigen Städten zeigt. Es wird eine französische Website, aber ich habe den wichtigen Inhalt in den Screenshots und auf der Website übersetzt, damit Sie mir helfen können.

Ich verwende Bootstrap 2), ein gitterbasiertes CSS-Framework, mit dem "einfach" derselbe HTML-Code für die mobile und Desktop-Version einer Website verwendet werden kann mit bisher:

"Desktop version"

Wie Sie sehen können, gibt es rechts ein Menü, mit dem Sie die links angezeigten Filme ändern können. Ich glaube, es ist eine einfache Möglichkeit, die Stadt und den Tag zu verändern. Inspiration kommt von Google Movies .

Probleme treten jedoch auf, wenn die Website auf einem Telefon angezeigt wird. Wenn das Menü rechts gehalten wird, wird es unten in der mobilen Version angezeigt, und Benutzer müssen nach unten scrollen, um das Menü zu erkennen. Wenn es auf der linken Seite ist, wird es oben angezeigt, und nichts sagt, dass sie nach unten scrollen sollten, um die tatsächlichen Spielzeiten zu sehen. Das Ändern der Fenstergröße reicht aus, um die "mobile Version" zu testen. Hier sind jedoch die relevanten Screenshots auf meinem tatsächlichen Telefon (einem Galaxy S) mit dem Standardbrowser Android 2.3:

enter image description hereenter image description here

Diese Frage zur Menüplatzierung erwähnt, dass Menüs oben stehen sollten und dass Benutzer dies erwarten, aber ich denke nicht, dass dies für Menüs gilt, die größer als der Bildschirm sind. Liege ich falsch?

Wie auch immer, meine Frage ist: Ist eine meiner Optionen die beste Lösung? Wenn nicht, gibt es eine bessere Alternative, über die ich nicht nachgedacht habe?

5
Quentin Pradet

Die Antwort ist, dass Sie nicht einfach denselben Inhalt für beide verwenden können. Sie benötigen Regeln, die einen Teil des Desktop-Inhalts auf einem mobilen Gerät ändern oder ausblenden.

Insbesondere können Sie dieses große Menü in eine einzelne anklickbare Schaltfläche ändern, die das Menü bei Berührung anzeigt (oder zwei davon, eine mit der Bezeichnung "Wo?", Eine mit der Bezeichnung "Wann?"). Diese einfache Änderung ... mit fast der gleiche Inhalt, aber nicht ganz ... wird es der mobilen Version ermöglichen, weitaus benutzerfreundlicher zu sein.

4
Myrddin Emrys

Ihre Argumentation ist richtig, wenn Sie ein so großes Menü oben (das dann den Inhalt verbirgt) oder unten (schwer zu entdecken) platzieren.

Hier gibt es mehrere mögliche Lösungen:

  1. Haben Sie eine Schublade mit einer kleinen Taste links oder rechts, auf die der Benutzer tippt, um das Menü unverändert von der rechten Seite herauszuschieben.
  2. Integrieren Sie das Menü in die kleine "Menü" -Schaltfläche/Schublade oben. Dies kann schwierig sein, wenn Sie versuchen, das Anpassen von Bootstrap zu vermeiden.
  3. Fügen Sie unten eine feste Fußzeile hinzu, auf die der Benutzer tippen kann, um das Menü anzuzeigen und das Menü für eine mobile Erfahrung zu gestalten.

Im Allgemeinen würde es mich weniger darum kümmern, eine konsistente Schnittstelle zwischen dem Web und dem mobilen Browser aufrechtzuerhalten, sondern mich stattdessen darauf konzentrieren, das zu tun, was jeweils die beste Erfahrung macht.

Meine Präferenz wäre es, mit # 3, dann # 1 und schließlich # 2 zu gehen.

5
eDave

Ein alternativer Vorschlag zur Option von @ JOG besteht darin, zum Dropdown-Menü für Mobilgeräte zu wechseln, wenn das Menü zuerst angezeigt werden soll. Sehen:

enter image description here

Bildquelle: http://css-tricks.com/convert-menu-to-dropdown/

3
dubrod

Hier sind einige schnell gemachte Designvorschläge.

enter image description here

  • Links abgebildet: Bewahren Sie die Auswahl stattdessen in einem Dropdown- oder Popup-ähnlichen Steuerelement auf.
  • Rechts abgebildet: Behalten Sie das Veranstaltungsort-Menü bei rechts wenn auf einem PC und fügen Sie einen Sprunglink hinzu und setzen Sie ihn unten wenn auf einem kleiner Bildschirm. Ich habe festgestellt, dass das Layout von Fenstergröße abhängt. Wenn Sie also den Sprunglink abhängig davon ein-/ausblenden können, sind Sie sortiert. :) :)

Wenn Sie nicht können, würde ich das "einfache" Framework nicht für Sie entscheiden lassen. Am Ende ist es oft sogar einfacher, alles selbst zu kontrollieren.

2
JOG