Smartphone Navigationsleiste

[AtroxExta]

Hallo Leute,

[/URL][/IMG]
meine Navigationsleiste besteht aus 6 Icons, der dazugehörige Text (zb "Anfahrt") erscheint bei mouseover.
Bei Smartphones erscheint statt der Navileiste ein Button, mit dem man alle Icons ein- und ausblenden kann (allein dafür hab ich schon ne gefühlte Ewigkeit gebraucht).

jetzt meine Frage: kann ich beim Klick auf den Button statt den Icons auch eine reine Textnavigation einblenden lassen?
Mein Navi ist für kleine Layouts leider ziemlich schwierig.

hier die seite
http://atroxexta.bplaced.net/index.html

und:

Für smartphone Größe ist mein header viel zu groß, ich kann den aber mit der media query komischerweise nicht ansprechen, hab schon alles mögliche versucht.
Der besteht bei mir aus ner h1, nem subtitle und dem Logo. Einzeln kann ich alles verkleinern, aber das liegt dann alles übereinander statt nebeneinander.



Glaub eh ich hab das Ganze furchtbar umständlich gemacht. Bin auch für Tipps offen die nich das Thema betreffen!

 

[AtroxExta]

keiner ne Idee?

 

[harryman]

Idee?
Ich denke, media-queries sind schon der richtige Ansatz. Ich vermute nur, dass es mit der Umsetzung ein wenig gehapert hat.

Meine Empfehlung:
Versuche die Smartphone-Version erst einmal standalone zu bauen und danach beide Versionen zu vereinen (über media-queries).
Schau dir aber zuvor deinen Source-Code generell an. Nimm am besten einen W3C-Validator und beseitige die Fehler. Damit erleichterst du dir die Arbeit...

 

[MrMurphy]

Hallo,

ich würde die Seite und damit auch die Navigation besucherfreundlicher gestalten.

Grundsätzlich ist es bei dem aktuellen Aussehen ein Problem, die Navigation überhaupt zu erkennen. Die geht bei den Grafikspielereien unter.

Und selbst wenn man sie als Menü erkannt hat weiß man noch lange nicht, welche Informationen sich dahinter verstecken.

Hover-Effekte sind in Zeiten von Touchscreen-Geräten (die bereits zu deutlich über 50% von den Usern beim Surfen im Web verwendet werden) auch nur noch besucherunfreundlich. Die kann man für Mausbenutzer zwar noch verwenden, sollte dies aber nur tun, wenn damit Touchscreennutzern keine Informationen vorenthalten werden. Das ist bei deiner Navigation aber der Fall.

Deshalb sollte der Text zu den Links dauerhaft angezeigt werden. Außerdem sollte die Navigation optisch einfacher zu erkennen sein.

Gruss

MrMurphy

 

[AtroxExta]

danke für die tipps

aber trotzdem: wärs möglich die icons in text umzuschalten?

 

[MrMurphy]

Hallo

wärs möglich die icons in text umzuschalten?

Ja sicher. Jedenfalls grundsätzlich.

Allerdings sollte dazu der HTML-Quelltext in sauberer Form vorliegen. Wie harryman bereits schrieb ist das bei deiner Seite leider nicht der Fall.

Es würde mit deiner Seite wohl auch gehen, erfordert aber fürs Testen und berücksichtigen des unsauberen Quellcodes erheblichen zusätzlichen Aufwand. Das ist halt das Problem, wenn beim Quelltext nicht von Anfang an auf sinnvolle Anwendung der HTML-Elemente geachtet wird.

Dabei geht es nicht nur um sachliche Fehler, sondern auch um das unsinnige Verwenden von HTML-Elementen wie z. B. mit dem br-Tag Abstände zu erzeugen.

Gruss

MrMurphy