Menüsteuerung für Desktops und mobile Geräte - wie am besten realisieren?

  • Hallo,


    da das Konzept unserer derzeitigen Homepage schon 11 Jahre alt und nicht mehr zeitgemäß ist (die habe ich damals noch mit Frames und Tabellen gemacht),
    bin ich derzeit dabei, unsere neue HP im Schweiße meines Angesichts und unter Zuhilfenahme etlicher Tutorials per Editor in HTML und CSS3 zu schreiben (für die Diashow auf der Titelseite ist auch ein wenig JS mit JQuery dabei).


    Ich bin schon von Haus aus kein Profi und habe seit 11 Jahren nichts mehr auf diesem Gebiet gemacht, daher ist das sehr mühselig und - da ich aus Design-, Kosten- und Wartungsgründen keine fertigen Templates, keine Design- und keine CMS-Tools verwende - auch mit enormem Zeitaufwand verbunden.


    Da die HP auf möglichst vielen Endgeräten akzeptabel rüberkommen soll, habe ich sie von Haus aus resizeable für unterschiedliche Bildschirmauflösungen und -ausrichtungen ausgelegt. FÜr den Desktop- und Notebook-Bereich konnte ich bisher ganz brauchbare Design-Lösungen erarbeiten, und die Tests verliefen zumindest mit den mir zur Verfügung stehenden Geräten und Browsern zufriedenstellend. Getestet habe ich mit ie9 und den jeweils aktuellen Letztversionen von Firefox, Opera, Gogle Chrome und Safari unter WinXP und Win7 mit Desktops und Notebook und mit verschiedenen, verschieden großen Bildschirmen. Bedauerlicherweise habe ich aber in meinem Umfeld keine älteren Browserversionen zum Testen zur Verfügung, diesbezüglich bewege ich mich also im "Blindflug" (es wäre nett, wenn ich Rückmeldungen bekäme, wie die Seite auf diesen oder jenen Browsern aussieht - vor Allem ältere ie- und Firefox-Versionen sowie Linux- und Mac OS X-Systeme würden mich brennend interessieren).


    Weniger zufriedenstellend verliefen erwartungsgemäß die Tests mit Smartphones - die aber meines Erachtens mittlerweile nicht mehr zu vernachlässigen sind.
    Derzeit kämpfe ich mit drei Problemstellungen, die bei mir ausschließlich bei mobilen Browsern auftreten und für die ich trotz Googeln noch keinen brauchbbaren Lösungsansatz gefunden habe:


    1. Mit dem Browser "Opera mini" (Sony Xperia go unter Android 2.3.7) funktioniert die Größenanpassung und Positionierung des Seitenkopfs und der Drop-Down-Menüleiste überhaupt nicht. Die HP ist für den "Opera mini" in ihrem derzeitigen Erscheinungsbild absolut unbrauchbar. Für dieses Problem habe ich bisher noch keinen Lösungsansatz gefunden.


    2. Mit den Browsern "Opera Mobil" (Sony Xperia go unter Android 2.3.7) und "Safari" (Apple iPod) wird die ganze - eigentlich zentrierte - Seite nach links verschoben, der rechte Rand ist viel zu breit. Wie ich durch Versuch und Irrtum herausgefunden habe, ist die Ursache der div-Container #menu_centering_2, der zusammen mit dem div-Container #centering_1 der Zentrierung der Menüleiste dient. Auch dafür habe ich noch keinen brauchbaren Lösungsansatz gefunden.


    3.Obwohl für die Drop-Down-Menüs lediglich html und css zum Einsatz kommen, funktioniert die Bedienung beim iPod (mit Safari) erstaunlicherweise einwandfrei. Beim Xperia mit Android funktioniert lediglich der "Opera Mobile"-Browser einwandfrei. Hier gibt es allerdings das oben beschriebene Problem, dass die Seite "aus der Mitte gerutscht ist". Beim "Dolphin"-Browser lassen sich die Menü-Heads zwar ansprechen, aber danach tut sich nichts, es werden keine Drop-Down-Listen ausgeklappt. Und beim "Firefox"-Browser werden die Listen zwar ausgeklappt, reagieren aber nicht.


    Ich weiß jetzt im Augenblick nicht so recht weiter und hätte gerne einen Rat, welche(n) Weg(e) ich zur Lösung der Probleme einschlagen soll:


    Soll ich darauf hoffen, dass die Browser-Hersteller demnächst das hover-Problem aufgreifen und das hovern auch auf Touchscreens zum Standard erheben? Mir ist in dieser Richtung kein Hinweis bekannt, aber vielleicht hab' ich da ja was verschlafen....?


    Soll ich das Design responsive machen, das Drop-Down-Menü bei Handhelds ausblenden und ein eigenes Menü für Touchscreen-Mobilgeräte schreiben (dann würde sich auch das Problem der oben beschriebenen Seitenverschiebung automatisch von selbst lösen, da die horizontale Menüleiste ja dann bei Handheld-Devices nicht sichtbar wäre), oder soll ich das Drop-Down-Menü durch ein Javascript ergänzen - und wenn ja, durch welches - möglichst einfaches und durchschaubares (JQuery ist installiert). In diesem Fall müsste ich mich allerdings auch um eine Änderung der Menüzentrierung kümmern, dafür habe ich aber bisher beim Googeln keine Lösungsansätze gefunden, weil offensichtlich so gut wie Alle "mit dem gleichen Wasser kochen".


    Mir würde aus rein visuellen, gestalterischen Gründen die zweite Variante (ein einziges Drop-Down-Menü mit Javascript) besser gefallen, da ich persönlich die Bedienerführung vieler mobiler Homepages als zwar vielleicht ganz praktisch, aber als absolut hässlich empfinde. Ich befürchte aber, dass ich mir mit diesem Lösungsansatz unter Umständen eine Menge leerer Kilometer einhandle und ich letztendlich doch auf ein spezielles Menü für mobile Endgeräte zurückgreifen müsste. Vielleicht liest diese Zeilen ja ein Webdesigner, der Erfahrung mit derlei Aufgabenstellungen hat und mir einen Tip geben kann...?


    Hier die Links zur "alten" und zur "neuen" Homepage (bei der neuen HP sind manche Seiten noch nicht vorhanden, deren Aufruf liefert daher einen 404-Error). Zwecks leichterer Analyse habe ich bei der neuen Homepage-Startseite index.html die Stylesheet-Definitionen des Drop-Down-Menüs aus der Datei css-Datei noch einmal in den Seitenkopf kopiert).


    Hier die alte HP: http://gasthof-thaller.com/index.html
    Und hier die neue: http://gasthof-thaller.com/neu/index.html


    Die Bezeichnung der Style-Definitionen ist teilweise noch etwas chaotisch und ein "Denglishes Durcheinander", da muss ich erst ein Konzept reinbringen. Und das Formular zur Zimmeranfrage ist ein wenig danebengegangen, das weiß ich (ich muss das neu machen).


    Vielleicht ist ja hier im Forum jemand, der Erfahrung mit der Lösung solcher Aufgabenstellungen hat. Auf jeden Fall herzlichen Dank im Voraus für Eure Hilfsbereitschaft


    Herb

  • Danke für den Tip, habe alle Fehler behoben, die Validierung erfolgreich bis auf eine Warnmeldung die Doctype-Definition betreffend:


    der Validator gibt die Warhnmeldung "Override in effect!" aus und ersetzt meine Doctype-Definition durch exakt die gleiche Definition! (habe den vom Validator eingesetzten String 1:1 kopiert und statt meines Strings eingesetzt - ohne Erfolg, es kommt die gleiche Warnmeldung! Was ist da los, was ist dafür die Ursache?


    Bei der CSS-Validierung gibt es noch einige zweifelhafte Einträge, die werde ich mir demnächst zu Gemüte führen.


    Jedenfalls herzlichen Dank für den wertvollen Tip und Dein Engagement!


    Nicht gelöst ist allerdings nach wie vor die Frage, ob ein Fachmann in meinem Fall und mit meinem grafischen Design eher die bestehende horizontale Menüleiste mit Javascript touchscreentauglich machen würde, oder ob ein responsives Design mit einem extra Menü für Handheld Devices vorzuziehen ist (beides hat ja Vor- und Nachteile).


    LG Herb