Bei fexiblen und vielseitig einsetzbaren Menü-Strukturen
möchte die
Fähigkeiten der Browser,
die Eigenschaften ihrer Internetverbindung,
die unterschiedliche Ergonomie und Geräteabhängigkeiten berücksichtigen.
Ziel ist ein multi-device-kompatibeles, responsives Webdesign.
Große Informationssysteme sind als Ganzes oft unüberschaubar. Im Hyperspace kann ein Surfer leicht das Ziel verpassen ( Lost in Hyperspace ). Die Navigation eines Schiffes entspricht einer Zielsuche. Ähnlich ist es im "Bit-Meer der Informatik". Die "Faszination des Machbaren" weist auf zahlreich "Klippen" hin, wie z.B. Software-Entwicklungssyteme, Cursware, Autoren-Systeme, Content-Management-Systeme, intelligente tutorielle Systeme, elektronische Bücher, eBooks, elektronische Lehrsysteme, CIM und Simulationen, Information-Retrievel, multimediale Lernprogramme, Storyboard-Perspektiven, Guided Tours, Hypertext-Systeme, Deep-Map-Systeme, Web-Menüs, steuerbare Funktionalitäten und Aktivitäten usw. Navigationssysteme dienen der Zielfindung. Umfangreiche Navigationssysteme können vielschichtig und komplexen sein und wechselseitige Abhängigkeiten zwischen dem aktuellen Kontext und den Navigationsmöglichkeiten auweisen. Es gibt Visualisierungen mit UML-Diagrammen.
In großen Informationssystemen kann die Orientierung des Benutzers "fragmentarisieren" und das Informationssystemen wie ein "pfadloses Land" erscheinen lassen, siehe z.B.: de.wikipedia: Lost in Hyperspace Menschen können sich etwa so orientieren:
Die strukturierenden Prinzipien thematisch gegliederte Navigationshilfen, von Menüs und Web-Design möchten dazu beitragen, individuell-gewünschte, sinnvolle Sichten und Informationsdarstellungen in die "unermeßlich vielen Informationsfraktale" ( Informationsüberflutung ) zu ermöglichen.
Navigationselemente können unterschiedlich angeordnet werden. Weniger Navigationsebenen ergeben einen besseren Überblick.
Bereits 1992 formulierte Ben Shneiderman acht allgemeine Regeln für die Gestaltung interaktiver Systeme ( "Shneiderman's goldene Regeln des Dialogdesigns" )
Die visuellen Wahrnehmungsmöglichkeiten von Menschen führen zu "Graphical User Interfaces" ( siehe de.wikipedia: Grafische Benutzeroberfläche ( GUI ).
Bei Web-Seiten ( einer Homepage ) werden die Methoden der Navigation mit Hyperlinks realisiert. Ein Menü sollte einfach, effektiv, effizient sein und unterschiedliche Sichten auf die Informationen, wie z.B. fachlich-gruppiert, Site map, Einführendes, spezielle Suche und Zusammenstellungen erlauben, Auswahl zusammenstellen, Darstellungen ändern, ästetische Stile, Geräteanpassungen, usw. , wobei das menschliche Verhalten, das psychologische Situationsbewusstsein berücksichtigen ( Blinde, Sehende, ARIA ) und ein "User-Centered Design" angestrebt wird. Web-Entwicklungen müssen das "Corporate Design", die Benutzerfreundlichkeit ( Usability ) und ein barrierefreie Webdesign ( Accessibility ) beachten.
Natürlich sind bei Responsiven Webdesign ( Websiten-Layout ) und ARIA ( Accessible Rich Internet Applications, WAI - Richtlinien, semantische HTML - Erweiterung ) und WCAG ( Web Content Accessibility Guidelines ) die funktionalen Anforderungen vorrangig vor der Ästetik, "Art and Design". Zur elektronischen Steuerung von Geräten und technischen Systemen ( z.B. Auto ) gibt es u.a. direkte Manipulationen, Kommando-Systeme mit Benutzerbedienung, Menü-Systeme, Dialog- und Masken-Systeme, Hypermedia, usw. Ein Menü dient der interaktiven Benutzerführung bei Applikationen ( Computerprogramme ). und ist ein Teil der grafischen Benutzeroberfläche (GUI, TUI bzw. VUI).
Das Layout einer Seite ist das sichtbare Ergebnis des Rendern, d.h. der Umwandlung von strukturierten Informationen ( Bilder, SVG, XHTML, usw ) in die nativ-Pixel des Bildschirm-Speichers.
Grafischen Benutzeroberfläche beinhalten u.a. geführte Systeme ( Wizards ), interaktive Dialoge ( Modal-Dialoge und Modeless-Dialoge ) und Menüs ( zeichenorientiert, sprachorientiert, Block-Grid, Zustandsanzeige, usw. ). Menüleisten sind ein gebräuchlicher User-Zugang ( Bedienung ), siehe z.B. de.wikipedia: Common User Access .
Ein Menü kann hirachisch aufgebaut sein ( z.B. Dateimenü ), aber auch linear oder als Grid. Ein Menü-Item kann Informationen anzeigen ( Hilfeseiten, Versionsinformation ). Ein Menü-Item kann Programmausführungen starten ( Eventsteuerung ). Ein Menü kann abhängig vom Kontext sein ( Kontextmenü ), das nur die aktuell sinnvollen Menü-Punkte anzeigt. Optisch kann ein Nenü wie eine Menü-Leiste aussehen oder z.B. auch wie ein Aufklapp-Menü, Dropout-Menü, Dropdown-Menü, Pulldown-Menü, Popup-Menü, Top-Sidebar, Bottom-Sidebar, Left-Hand-Sidebar. Es gibt Mini- und Maxi-Navigationssysteme, die für sehbehinderte Menschen geeignet/ungeeignet sein können.
Mit Hilfe des Responsive Webdesign ( de.wikipedia de.wikipedia ) wird versucht, eine automatische Anpassung der Darstellung von Webseiten an das jeweils benutzte Endgerät zu erreichen. Dies meint "alle" Ausgabegeräte und nicht nur ein Design für mobile Websites.
Bei CSS3 - Gestaltungsvorlagen gibt es eigenschaftsspezifische Medientypen, die gerätespezifische Merkmale, wie z.B. Breite/Höhe des Gerätes/Browserfensters, die Orientierung bei Quer-/Hochformat und die grafische Auflösung, Bildschirmuflösung berücksichtigen können ( Siehe z.B. de.wikipedia Media Queries ).
Web-Präsentationen sollen i.a. unabhängig von Geräten und speziellen Herstellern sein. Verschiedene Screen-Stylesheets hängen u.a. von der aktuellen Fenstergröße ( window size ) des Browsers und der verfügbaren Geräteauflösung ab. Firmenspezifische (proprietäre) Präsentationen und Software-Anpassungen können auf ein spezielles Gerät zugeschnitten sein. Dies kann Vor- und Nachteile haben. Es gibt neue firmenspezifisch Entwicklungen und die neuesten Produkte nur von einem Hersteller. Anderseits besteht die Kunden-Freiheit in der Wahlmöglichkeit des Herstellers.
Ein Web-Präsentation kann versuchen, gerätespezifische Sonderheiten zu nutzen. Es kann spezielle Gründe geben, die es wünschenswert erscheinen lassen, das Design und die Styles möglichst optimal an das Gerät anzupassen ( building smartphone-optimized websites ). Hierzu werden Geräte-Daten, wie max-device-width oder maximum-scale gebraucht. Die Style-Anpassung kann für ein spezielles Gerät optimiert werden. Siehe z.B. de.wikipedia: Responsive Design , en.wikipedia: Cascading Style Sheets ( Selectoren ) , de.wikipedia: Cascading Style Sheets ( Selectoren ) , und w3.org: CSS3 ( u.a. 4.1 Property Index und 4.2 Selector Index ), CSS21 Media types ( all, braille, embossed, handheld, print, projection, screen, speech, tty, tv ), CSS3-Mediaqueries , .
Bildschirm-Style innerhalb eines CSS-Dokumentes: @media screen { h1 { background: #229; } } Includiere Style für Bildschirm-Ansicht: <link rel="stylesheet" type="text/css" href="my_style.css" media="screen"/> Includiere Style für die Druckausgabe: <link rel="stylesheet" type="text/css" href="my_print.css" media="print"/> Drucker-Style innerhalb eines CSS-Dokumentes einbinden: @media print { h1 { background: #229; } ... } Smartphones und Tablet-PC: <link type="text/css" rel="stylesheet" media="screen" href="my_smart_style.css" /> <link type="text/css" rel="stylesheet" media="only screen and (max-device-width: 480px)" href="my_iphone.css" /> Zoom deaktivieren und Skalierung festlegen: <meta name="viewport" content="width=device-width;initial-scale=1.0;maximum-scale=1.0;user-scalable=0;" /> iPhone / iPod Touch @media only screen and (max-device-width: 480px) { ... } iPhone mit Retina Display: @media only screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) { ... } iPad ( landscape ): @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation : landscape) { ... } oder ( portrait ): @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation : portrait) { ... } device-aspect-ratio: @media screen and (device-aspect-ratio: 16/9 ) { ... } @media screen and (device-aspect-ratio: 1280/720) { ... }
CSS-Reset: Rücksetzen der CSS-Browservorgaben. Ein CSS-Reset setzt alle default Style-Informationen 'auf Null'. Siehe z.B. Reset-Stylesheet und global-css-reset , Siehe auch http://meyerweb.com/eric/tools/css/reset/
Es gibt zahlreiche Varianten und Möglichkeiten, wie die Web-Navigation und Web-Menüs entwickelt, gestaltet und verwendet werden. Mehr oder weniger kann dazu CSS und/oder ECMAScript verwendet werden. Bei größeren Projekten gibt es Gestaltungsrichtlinien in Form von Style-Guides, die bei der Erstellung der Screen-Designs beachtet werden sollen. Styleguides, CSS Frameworks und Grid Systeme mit float/festem Raster können bei der Umsetzung helfen.
Welche Vor-und Nachteile haben die verschiedenen Menü-Stile? Eine abschließende Antwort gibt es nicht.
Die geräteabhängige Fensterbreite und die festen Kachelgrößen haben zur Folge, daß die erzeugten Quelltexte geräteabhängig werden. Hier kommt eine einfache Form von Web-Links. Es wird ein "dynamisches CSS-float-left" verwendet. Dadurch ergibt sich eine größere Geräteunabhängigkeit. Die verwendeten Style-Klassen sind:
<style>
a.width0 {
float :left !important; display:inline !important; overflow: hidden;
margin:3px 2px 3px 2px; padding:3px;border:3px outset #ccc;
}
a.width0:hover {
border:3px inset #999; cursor:pointer;
}
.width0 {
width:170px;
}
.float_clear_left {
clear:left !important;
}
</style>
Dieses Menü besteht lediglich aus a-Tags, wie etwa
<a class="width0" href="http://www.w3.org/People/Berners-Lee/"> Tim Berners-Lee </a>
Bitte dieses Menü experimetell testen. Bitte auch die Fensterbreite ändern.
Tim Berners-Lee Håkon Wium Lie Bert Bos Brendan Eich Douglas_Crockford crockford.com
Es gibt zahlreiche unterschiedliche Arten, ein Menü zu gestalten, wie z.B. Mini- und Maxi-Navigationssysteme, Akkordeons, Drop-Down-Menüs, Fly-Out-Menüs, Cascading-Menüs, Mega-Menüs, Floating Menus, usw.
Hier soll nun eine aufklappbare Select-Box kann als Menü verwendet werden, indem die Ausführung bei einem Mausklick den onchange-Event auslöst und die ECMAScript-Funktion select_auswahl(this) auslöst. Das folgende Beispiel verwendet CSS-, HTML- und ECMAScript-Quellcode:
<style>
.menu_form{ clear:both; background-color:#669;
padding:14px !important; width:97%; float:left;
border-radius:20px;
box-shadow: 5px -4px 12px #444,
-5px 4px 62px #bce,
6px -6px 46px #fce, inset 5px -5px 5px rgba(64,64,64,0.9);
}
.menu_select {cursor:pointer;background:#669;color:#fff;width:99%;
font-size:24px !important;line-height:28px !important;
border-bottom:1px solid #ccc;
}
.screenreader {position:absolute;left:-9999px;overflow:hidden;}
</style>
<script> function select_auswahl(that) { // nur Mausbedienung var el = that, opt = el.options, i = el.selectedIndex, par = (opt[i].value).split(","), fn = par[0], href = par[1], target = par[2] || '_blank'; that.style.cursor = 'pointer'; switch (fn) { case 'weblink': window.open(href, target); break; default: alert('Bitte andere Wahl ...'); break; } } </script>
<form class="menu_form" action="#"> <select class="menu_select" size="1" tabindex="0" onchange="select_auswahl(this);"> <option value=""> Auswahl mit Select-Box </option> <option value="weblink,http://www.w3.org/People/Berners-Lee/"> Tim Berners-Lee</option> ... </select> </form>
Bei einfache Grid-Generatoren werden die Fensterbreite und die Kachelgrößen fest vorgegeben, etwa
<div class="grid-container"> <div class="grid-item-1"> ... </div> <div class="grid-item-2"> ... </div> <div class="grid-item-3"> ... </div> ... </div>
Die geräteabhängige Fensterbreite und die festen Kachelgrößen haben zur Folge, daß die erzeugten Quelltexte geräteabhängig werden.
Mit CSS 3 ist hat das Box-Modell "box-sizing: border-box;" Vorteile!
Hier die "Zahlen-Gymnastik" mit dem kontextbezogenenen W3C-Standard-Box-Modell. Ein "dynamisches CSS-float-Raster" ist flexibler. Mit CSS kann eine größere Geräteunabhängigkeit erreicht werden, indem mit CSS ein "dynamisches float-Raster" verwendet wird. Ein solches Raster kann sich beim Zoomen oder Änderung der Schrift-Skalierung automatisch anpassen. Einleitende Betrachtungen zu einem float:left Entwurf:
|-------------------------------------------------------------------------------|
012345678901234567890123456789012345678901234567890123456789012345678901234567890 = 81
012 margin-left:3px; 012 margin-left:3px;
|-------------------------------------| |-------------------------------------|
width2 = 012345678901234567890123456789012345678 = 39
|-----------------------| |-----------------------| |-----------------------|
width3 = 0123456789012345678901234 = 25
Es gibt zahlreiche Abhängigkeiten, wie z.B. border-width, margin, padding, Realisierungen bei den Browsern, usw. Deshalb wurden width0,1,2 angepaßt. Der Style sieht dann etwa so aus:
<style>
a.width0, a.width1, a.width2, a.width3 {
float :left !important; display:inline !important; overflow: hidden;
margin:3px 2px 3px 2px; padding:3px;border:3px outset #ccc;
}
a.width0:hover, a.width1:hover, a.width2:hover {
border:3px inset #999; cursor:pointer;
}
.width0 { width:170px; }
.width1 { width:77px; }
.width2 { width:30px; }
.float_clear_left { clear:left !important; }
</style>
Die Menu-Daten ( url, img, text) kommen von einem ( externen ) js-Array, wie z.B.
var menu_daten = [
"my_url0 , my_img0 , my_text0",
"my_url1 , my_img1 , my_text1",
...
];
Die Funktion build_html_figure_menu(menu_daten, id_wrapper) baut das Menu zusammen und zeigt es in id_wrapper an.