CSS Webdesign - Navigation - Darstellung

Sogar der IE kommt mit dem Element klar, das heißt was ;)

Von Dropdown-Navigationen bin ich nicht so Freund von, ist sowas sinnvoller? Vor allem auf mobilen Geräten ist das so eine Sache. Die würde ich problemlos ohne Javascript hinbekommen. Oder besser eine 2te feste Navigation einbauen wenn ich die brauche wie bei der aktuellen Seite?

mfg
auchda
 
Der Vorteil an Suckerfish-Navigationen ist, dass man viele verschachtelte Menüpunkte auf wenig Raum unterbringen kann. Was Touch-Devices angeht: die meisten interpretieren einen einmaligen Tap als :hover.
Außerdem sollte man auf schmalen Displays eh keine Suckerfish-Navi anzeigen, sondern z.B. n <select>. Sieht dann auf dem Smartphone auch wirklich toll aus, weil Auswahlfelder im OS-Style dargestellt werden.
 
Also ich bin kein Fan von Select Navigationen. Denn gerade weil es im OS Style gezeigt wird passt es nicht zum Design der Seite. Besser man baut sich ein mobiles Navigation selbst. Wirkt dann auch viel professioneller.
 
Na ja, eine andere Lösung wäre, die ul/li - Struktur zu "glätten" und untereinander, evtl. mit ein paar Einrückungen, darzustellen. Hab ich auch schon gemacht. Meiner Meinung nach ist der Bedienkomfort mit <select> aber etwas höher, gerade bei umfangreicheren Navigationen. Kann aber jeder für sich selbst entscheiden, beides funktioniert wunderbar.
 
WhiteShark schrieb:
Also ich bin kein Fan von Select Navigationen. Denn gerade weil es im OS Style gezeigt wird passt es nicht zum Design der Seite. Besser man baut sich ein mobiles Navigation selbst. Wirkt dann auch viel professioneller.
Stimmt natürlich. Aber dennoch finde ich, dass gerade bei mobilen Seiten auf wirklich kleinen Displays (also 320px Bereich) das Design zwar nicht unwichtig wird, aber dann doch etwas in den Hintergrund rückt und eine gute (und vor allem schnelle Bedienung) der Seite wichtiger wird. Hängt dann aber auch ein wenig vom Umfang der Navigation ab würde ich mal sagen.
Dennoch hat das mit "professioneller" imho nicht viel zu tun. Ist aber natürlich Geschmackssache und je nachdem, wie empfindlich der Designer ist ;-)
 
Auch der pingeligste Designer muss sich den technischen Gegebenheiten beugen.
Eines unserer jüngeren Kundenprojekte hat (aktuell) >20 Punkte, die über die Navigation erreichbar sind. Die Seite sieht, von Winzigkeiten abgesehen, auf Hochkant-Smartphones immer noch ziemlich gut aus und ist gut bedienbar. Ich will mir aber nicht vorstellen, wie furchtbar die Bedienbarkeit wäre, wenn die Navigation nicht als Select-Box im OS-Style (sprich: große separat scrollende Box als Overlay) gelöst wäre, sondern alle Punkte als Liste untereinander wären. Da scrollst du dich tot.
 
Das "professioneller" war wohl etwas unglücklich ausgedrückt. Stimmiger (bzgl Design) trifft es da wohl besser.
Es kommt natürlich immer auf die Webseite und in diesem Fall auf die Anzahl der Menupunkte an.
Wobei man natürlich überlegen muss, ob es Sinn macht 30 Menupunkte ins Hauptmenu zu packen, oder ob man da lieber einzelne Übersichtsseiten aufbaut.

Man kann auch eine Navigation machen wie bspw in Tapatalk. Man slidet die ganze Seite ein Stück nach links und hat dort dann sein Menu. Ist natürlich alles dann ein wenig aufwendiger und man muss eine Alternative anbieten (da nicht jedes Gerät Touch im Browser unterstützt, bspw Windows Phone 7).

Aber ich denke wir sind uns einig das es nicht "die Lösung" gibt und man immer den Kompromis zwischen gutem Design und Usability finden muss.
 
WhiteShark schrieb:
Wobei man natürlich überlegen muss, ob es Sinn macht 30 Menupunkte ins Hauptmenu zu packen, oder ob man da lieber einzelne Übersichtsseiten aufbaut.
Besucher-Psychologie: Alles, was er nicht in 3 Schritten erreichen kann, liest er gar nicht.
Niemand will erst separate Übersichtsseiten laden (müssen), um sich von da weiter zu hangeln.

Man kann auch eine Navigation machen wie bspw in Tapatalk. Man slidet die ganze Seite ein Stück nach links und hat dort dann sein Menu.
Das setzt voraus, dass du horizontal genug Platz hast. Natürlich könnte man die Navi von der Seite hereinsliden, aber da hast du dann wieder die Probleme mit sehr langen Navigationen. Wenn die Navi jetzt länger als der Content wird, musst du ganz schön basteln, damit alles korrekt dargestellt wird.

Der Aufwand für solche Lösungen muss gerechtfertigt sein, und das ist er sehr selten. <select> geht schnell, kommt im Zweifel sogar ohne JavaScript aus, funktioniert auch auf klassischen Desktops mit geringer Fensterbreite (Touch-Steuerung hingegen nicht) und sieht auf Smartphones auch gar nicht so übel aus, vor allem weiß der SP-User direkt, wie er mit der Komponente zu interagieren hat.

Was oftmals gern vergessen wird: Es gibt auch Bekloppte, die auf ihrem Fernseher surfen. Damit die dann von der Couch gut lesen können, drehen die die Zoomstufe im Browser hoch. Wenn dein Layout DAMIT klar kommt, dann hast du's richtig gemacht.
 
Daaron schrieb:
Was oftmals gern vergessen wird: Es gibt auch Bekloppte, die auf ihrem Fernseher surfen. Damit die dann von der Couch gut lesen können, drehen die die Zoomstufe im Browser hoch. Wenn dein Layout DAMIT klar kommt, dann hast du's richtig gemacht.

Wie kann ich den sowas testen? Habe es bei Firefox mal mit "Bildschirmgrößen testen" probiert. Finde ich aber persönlich nicht so das wahre.

mfg
auchda
 
Im Zweifel: Surf auf deinem Fernseher *G*

Ne, mal ernsthaft: Firefox ist für Webentwicklung zwar deutlich besser als der IE, aber genauso deutlich schlechter als Chrome. Die Chrome-internen Entwicklertools ermöglichen eine große Bandbreite an Simulationen: Auflösungen, User Agents sogar Touch-Devices lassen sich simulieren.
 
Mein Fernseher ist zu sowas nicht fähig. ;) Werde ich gleich mal mit Chrome ausprobieren.

mfg
auchda
Ergänzung ()

Aktuell arbeite ich an einem Kontakformular, schön und gut. Nur brauche ich dafür eine Webanwendung was es abschickt? Oder wie läuft sowas ab. Habe hier mal den Code reingestellt. Vielleicht findet ihr ja Fehler. ;)

HTML:
<form class="feedback" method="POST" action="mailto:info@teutonica-server.de">
<h3>Kontaktformular</h3>
<i>Pflichtfelder (*) </i>
<p>Dein Nickname im Spiel: (*)</p>
<div class="input">
<input type="text" required="true" name="1d65c[1]" value="">
</div>
<p></p>
<p>Deine eMail: (*)</p>
<div class="input">
<input type="text" required="true" name="1d65c[2]" value="">
</div>
<p></p>
<p>Titel: (*)</p>
<div class="input">
<input type="text" required="true" name="1d65c[4]" value="">
</div>
<p></p>
<p>Nachricht: (*)</p>
<div class="input">
<textarea required="true" name="1d65c[3]" rows="5"></textarea>
</div>
<p></p>
<center>
<input class="readmore" type="submit" value="Senden" name="mailto:info@teutonica-server.de">
</center>
</form>

mfg
auchda
 
- keine leeren <p>-Tags (oder <br>) verwenden. Wenn du Abstände brauchst, dann gibt es dafür Margin und Padding
- keine <p>-Tags für Feldbeschriftungen. Dafür gibts <label>, inklusive des "for"-Attributs
- name ist nicht dafür da, dass du da mailto-kram reinschreibst, das funktioniert so oder so nicht

Und ja, du brauchst eine serverseitige Anwendung, um das Formular auszuwerten. PHP, ASP.NET, Ruby, Perl, C, Node.JS,.... irgendwas davon.

Edit: Was seh ich da? <center>? In welchem Jahrtausend lebst du?
Außerdem ist es nutzlos, die <input>s auch noch in <div>s zu kapseln.

Fang am besten noch einmal von 0 an, und zwar indem du wirklich nur die Elemente schreibst, die für die FUNKTION und SEMANTIK des Formulars notwendig sind. Mach GAR NICHTS, was irgendwie nach Optik riecht. Gewöhn dir das ganz schnell ab. Optik hat in HTML gar nichts zu suchen, nur pure Semantik und Funktionalität.
 
Zuletzt bearbeitet:
Ich ärgere mich gerade über mich selbst. War der falsche Code, habe aber/musste trotzdem noch was geändert. Hatte den Code noch im Zwischenspeicher, hatte denn aus einer Webseite raus kopiert. Durch Google bin ich auf diese Seite gestoßen http://php.net/manual/de/function.mail.php. Allerdings verstehe ich ganz ehrlich gesagt nichts davon.

HTML:
<form method="post">
	<fieldset>
	<div class="tabellenzeile">
			<label for="beans">
		          W&auml;hlen:
			</label>
             <select name="kaffee">
              <option value="Hilfe">Hilfe</option>
              <option value="Cheater melden!">Cheater melden!</option>
            </select>
 		</div>
		<legend>Kontakt</legend>
		<div class="tabellenzeile">
			<label for="name">Nickname:</label>
			<input type="text" id="name" name="name" value="" placeholder="Nickname" required> 
		</div>
		<div class="tabellenzeile">
			<label for="adresse">E-Mail-Adresse:</label>
			<input type="text" id="adresse" name="adresse" value="" placeholder="E-Mail" required> 
		</div>
		<div class="tabellenzeile">
			<label for="betreff">Betreff:</label>
			<input type="text" id="stadt" name="stadt" value="" placeholder="Betreff" required> 
		</div>
		<div class="tabellenzeile">
			<label for="kommentare">Nachricht:</label>
            <textarea id="kommentare" name="kommentare"></textarea>
		</div>
		<div class="tabellenzeile">
			<label></label>
			<input type="Submit" name="absenden" value="absenden">
		</div>
		
		<form action="mailto:info@teutonica-server.de" method="post">

</form>

Danke das du so bemüht bist. ;)

mfg
auchda
 
Auf Form-Action "mailto" wird nicht funktionieren. Formular absenden = Formular irgendwo in irgend einer Form auswerten lassen. Das heißt: Deine SERVER-Anwendung muss die Formulardaten auf Sauberkeit prüfen, die Mail zusammenstellen und dann verschicken. Wenn du dafür PHP einsetzen willst, dann wäre mindestens mail() notwendig, eher aber eine Bibliothek, die per SMTP-Auth versendet.

Was <label for="blabla"> angeht: Dieses "blabla" muss es dann auch als Name eines <input> geben. Anders würde ja keine Zuordnung zwischen Beschriftung und Feld geben. Wäre irgendwie blöd, oder? Da beschreibst du etwas, und das Etwas das du beschreibst, existiert in der Form gar nicht oder irgendwo ganz anders...

<legend>... kann man durchaus einsetzen, genau wie <fieldset>. Aber die Regel heißt trotzdem: KISS - Keep It Simple, Stupid. Schreib nicht mehr HTML, als für das SEMANTISCHE Verständnis notwendig ist. Schreib auch keine <div>-Orgien. Lass alles weg. Wenn du eh nur eine "Gruppe" von Eingabefeldern hast, dann ist ein Fieldset, und somit auch die Legende, recht überflüssig. Fieldsets machen dann sinn, wenn du Felder wirklich mal gruppieren willst, weil sie zusammen gehören. Wenn du z.B. Radio Buttons oder Checkboxes verwendest, dann macht ein umhüllendes Fieldset wirklich Sinn.

<label> soll nicht leer sein. Wenn du über ein Submit-Feld nichts beschreibendes zu sagen hast, dann leg kein Label an. Ist doch Verschwendung, oder?

<textarea> sollte eien Angabe für Zeilen und Spalten erhalten. In HTML5 ist das nicht mehr verpflichtend, aber immer noch ziemlich nett.
 
Um das Formular kümmere ich mich später. ;)

Aber ich habe mal wieder ein Problem mit der Navigation..ich habe die Navigation von dem Tutorial von der Navigation relativ viel Code übernommen, das war genau die Navigation die ich haben wollte. ;) Deswegen wollte ich sie auch nicht großartig ändern. Ich habe mich jetzt mal an einem Dropdownmenü probiert, übrigens bin ich definitiv kein Freund von Navigationen. Nun jetzt beim Hover-Effekt verschiebt sich alles, und die "2te" Navigation nimmt die Breite von last-child an. Wieso? :O

Ich kapiere es einfach nicht...

Fast der komplette Inhalt fehlt..;) Nicht wundern. Der Link zu der Seite, aktuell ist es nur bei Einführung zu sehen.

mfg
auchda
 
kommt drauf an, was du wieder falsch gemacht hast...
Normal ist:
- alle <ul> mit Margin/padding: 0 und List-Style-Type:none. Jedes <ul> erhält ne Klasse für das Level
- .level_1 > li {float: left; position: relative;}
- .level_2 {position: absolute;}
 
Nach vielen Stunden arbeit hab ich es endlich geschafft. ;)

Aber 2 kleine Probleme gibt es noch. Ich möchte die Breite vom Button "Forum" ändern, wenn ich nun aber "last-child" nehme verändern sich auch die Punkte in der ""2ten-Ebene". Ich bekomme es einfach nicht angepeilt. Ich musste "position: absolute;" wählen damit es funktioniert. Somit lässt sich aber die Höhe nicht mehr steuern. Also dem Body "padding-top: 270px;" zugewiesen, und der Navigation eine Außenabstand von -104. Funktioniert ist aber jetzt nicht der edelste Weg.


mfg
auchda
 
Zuletzt bearbeitet:
Rechts vom Menüpunkt "Forum" sind ein paar Pixel frei geblieben. Das kommt von absoluten Breiten. Lies dich mal in die CSS3 Flexbox (display:flex) ein, damit kannst du die Navi deutlich eleganter gestalten... aber sorge für n Fallback für IE<10
 
Zurück
Oben