Grundsätzliche Überlegungen für ein einfaches Responsive-Design

[oxo888oxo]

Hallo

Ich mache mir gerade Gedanken über ein Responsive Webdesign.
Dabei geht es mir um ein ganz einfaches Konstrukt.
Die "normale" also nicht-responsive Website hat einen ganz einfachen Aufbau:
* Links die Navigation
* Rechts der Inhalt
* Eine Fußzeile

Wenn man sowas responsive umsetzen will, würden sich für kleine Fewports (Smartphones) doch im Grunde die 3 folgenden Varianten anbieten:
* Navigation nach oben über den Inhalt
* Navigation nach unten unter den Inhalt
* Navigation nach oben im Form eines Aufklappmenüs (mit Burger-Button oder so)

Mir geht es mit diesem Posting nun darum, zu überlegen, welche der drei genannten Varianten wohl die sinnvollste ist.

Bei der Website handelt es sich um einen kleinen Online-Shop.
Die Navigation beinhaltet ca. 15 Links.

Bisher bin ich zu der Meinung gelangt, dass alle 3 Varianten jeweils einen eigenen Nachteil haben:
* Navigation nach oben über den Inhalt ... Wenn man die Seite auf dem Smartphone aufruft, hat man erstmal nur die Navigation vor der Nase. Eher unerfahrene User könnte das evtl. verwirren.
* Navigation nach unten unter den Inhalt ... Um an die Navigation zu gelangen, muss man ganz nach unten scrollen. Wenn die Seite viel Inhalt hat, könnte man übersehen, dass unten ja noch die Navigation "dranhängt". Und dann könnte man evtl. das Problem haben, dass man garnicht weis, wie man die Seite bedienen soll "ohne Navi".
* Navigation nach oben im Form eines Aufklappmenüs (mit Burger-Button oder so) ... Unerfahrene User könnten nicht auf die Idee kommen, mittels des Burger-Buttons das Navi-Menü aufzuklappen. Und diese User würden sich dann wieder wundern, wie man denn die Seite gescheit bedienen soll.

Tja ... und nun? ... Was wäre Eurer Meinung nach denn da der sinnvollste/beste Weg?

Gruß
Ingo

Gruß
Ingo

[T-Rex]

Moin,

bezüglich der Navigation hat Gunnar hier im Forum mal einen coolen Link ausgegraben. Da wurden verschiedene Navigationsmöglichkeiten mit Vor- und Nachteilen beleuchtet.
Über die Suchfunktion findest du das bestimmt irgendwie.

Gruß
doppelt
T-Rex

Gruß
gemoppelt
T-Rex

[Matthias Apsel]

Om nah hoo pez nyeetz, T-Rex!

bezüglich der Navigation hat Gunnar hier im Forum mal einen coolen Link ausgegraben. Da wurden verschiedene Navigationsmöglichkeiten mit Vor- und Nachteilen beleuchtet.

Du meinst http://bradfrostweb.com/blog/web/responsive-nav-patterns/?

Über die Suchfunktion findest du das bestimmt irgendwie.

Du nicht?

Gruß
doppelt
T-Rex

Gruß
gemoppelt
T-Rex

Ich hätte den gründlichen T-Rex bevorzugt. Den, der in das Suchfeld »author:bittersmann body:navigation« eingetippt und das entsprechende Posting verlinkt hätte.

;-)

Matthias

[molily]

Hallo,

* Navigation nach unten unter den Inhalt ... Um an die Navigation zu gelangen, muss man ganz nach unten scrollen.

Oder man verlinkt sie mit einem Button oben.

* Navigation nach oben im Form eines Aufklappmenüs (mit Burger-Button oder so) ... Unerfahrene User könnten nicht auf die Idee kommen, mittels des Burger-Buttons das Navi-Menü aufzuklappen.

Deshalb ist ein Label wie »Navigation« oder »Menü« angebracht. Das zeigen Usability-Untersuchungen:
http://exisweb.net/menu-eats-hamburger
http://mor10.com/hamburger-bad/

Eine allgemeine Übersicht über verschiedene Navigationsmöglichkeiten gibt es hier:
http://bradfrost.github.io/this-is-responsive/patterns.html#navigation
http://responsivenavigation.net/

Mathias

[oxo888oxo]

Hallo

Deshalb ist ein Label wie »Navigation« oder »Menü« angebracht. Das zeigen Usability-Untersuchungen:
http://exisweb.net/menu-eats-hamburger
http://mor10.com/hamburger-bad/

Ah OK alles klar.
Das hört sich logsiceh an.
Ich bin auch ein großer Fan von sprechenden Links.

Nachdem Mozilla im Firefox ja nun bei Version 29 auch den Burger-Button eingeführt hat, wird die Akzeptanz dessen sicher eher steigen. Aber ein sprechender Link oder Button mit "Navigation" toppt das sicher schon noch.

Gruß
Ingo

[oxo888oxo]

Hallo

Oder man verlinkt sie mit einem Button oben.

Jo stimmt, das ist ja auch eine feine Idee.
So hat man es beiden Usergruppen recht gemacht.
Die, die Navo oben suchen/erwarten und die, die sie unten suchen/erwarten, haben dann beide Ihren Spaß.

Gruß
Ingo

[MrMurphy]

Hallo

Wenn man sowas responsive umsetzen will, würden sich für kleine Fewports (Smartphones) doch im Grunde die 3 folgenden Varianten anbieten:

Nein. Es gibt viel mehr Möglichkeiten.

Die "normale" also nicht-responsive Website hat einen ganz einfachen Aufbau:
* Links die Navigation
* Rechts der Inhalt
* Eine Fußzeile

Auch das ist nicht zingend so.

Tja ... und nun? ... Was wäre Eurer Meinung nach denn da der sinnvollste/beste Weg?

Das hängt von der konkreten Seite und deren Inhalt ab. Nur wenn du die zeigst ist eine konkrete Hilfe möglich.

Dein Problem ist, das du die Möglichkeiten von vornherein auf einige wenige LÖsungen beschränkst. Da kann eigentlich nichts vernünftiges rauskommen.

Eine einfache Möglichkeit wäre zum Beispiel, die Navigation aufzuteilen. Die wichtigsten Links über die Seite, die eher unwichtigen am Ende.

Gruss

MrMurphy

[oxo888oxo]

Hallo

Danke erstmal für Euren netten Beiträge!

Nein. Es gibt viel mehr Möglichkeiten.

Ja das ist klar.
Ich wollte eben nur 3 "gängige" und "einfache" aufzählen.

Auch das ist nicht zingend so.

Habe ich auch nicht sagen wollen.
Ich meinte damit meine Website.

Das hängt von der konkreten Seite und deren Inhalt ab. Nur wenn du die zeigst ist eine konkrete Hilfe möglich.

Da es sich um einen kommerziellen Shop handelt, wollte ich das hier nicht posten.
Es wird doch in Foren eher immer sehr ungern gesehen, wenn man kommerzielle Seiten verlinkt.
Ich bin dafür schon oft hat beschimpft worden.

Dein Problem ist, das du die Möglichkeiten von vornherein auf einige wenige LÖsungen beschränkst. Da kann eigentlich nichts vernünftiges rauskommen.

Die Beschränkung habe ich vorgenommen, weil ich mir ja auch schon ein paar Gedanken gemacht hatte. Und die 3 von mir genannten Dinge erscheinen mir doch irgendie "gängig". Also ich will sagen, mann begegnet diesen 3 Methoden in Internet recht oft.

Eine einfache Möglichkeit wäre zum Beispiel, die Navigation aufzuteilen. Die wichtigsten Links über die Seite, die eher unwichtigen am Ende.

Stimmt, das ginge natürlich auch. Ich mag das aber ehrlich gesagt für meine eigene Seite nicht so sehr. Ich möchte gerne nur eine Navi an nur einer Stelle haben.

Gruß
Ingo

[Matthias Apsel]

Om nah hoo pez nyeetz, oxo888oxo!

Da es sich um einen kommerziellen Shop handelt, wollte ich das hier nicht posten.
Es wird doch in Foren eher immer sehr ungern gesehen, wenn man kommerzielle Seiten verlinkt.
Ich bin dafür schon oft hat beschimpft worden.

Da gibt es hier einen goldenen Mittelweg: Verlinke den Shop über die optionale URL, die du bei deinem Nicknamen angeben kannst. Diese wird nicht mit in das Archiv übernommen, sodass du dir nicht den Vorteil zusätzlicher Backlinks erschleichst ;-)

Und du umgehst auch die Gefahr der Herabwirkung, wenn deine Seite hier zerrissen und als das Negativbeispiel schlechthin dargestellt wird …

Matthias

[oxo888oxo]

Hallo

Da gibt es hier einen goldenen Mittelweg: Verlinke den Shop über die optionale URL, die du bei deinem Nicknamen angeben kannst.

Ah OK, alles klar.

Und du umgehst auch die Gefahr der Herabwirkung, wenn deine Seite hier zerrissen und als das Negativbeispiel schlechthin dargestellt wird …

Das verstehe ich nicht. Wenn der Link oben neben meinem Nicknamen auftaucht, kann man meine Seite doch trotzem zerreißen.

Gruß
Ingo

[Matthias Apsel]

Om nah hoo pez nyeetz, oxo888oxo!

Das verstehe ich nicht. Wenn der Link oben neben meinem Nicknamen auftaucht, kann man meine Seite doch trotzem zerreißen.

Ja, aber der Link landet nicht für alle Ewigkeiten im Archiv. Und wenn einer der Zerreißer doch einen Link auf deine Seite ins Archiv schickt, dann bittest du die Moderation, den Thread nicht zu archivieren oder den Link zu entfernen. Die machen das bstimmt ;-)

Matthias

[1UnitedPower]

Meine Herren!

Hier kannst du dir auch noch zusätzliche Inspiration holen: http://www.mobile-patterns.com/