Menüs mit Bootstrap asp.net und mobile Sites

Oben von Links nach Rechts, mit Dropdown oder Kontext getrieben, oder etwas breiter wie bei Microsoft Office. Das sind Menüs. Unzählige Optionen auf engstem Raum. Weil so ein Ribbon per Touch unbedienbar ist, bietet Office 2013 eine Touch optimierte Variante

image

Größere und weniger Icons.

Bei ASP.NET kommt in der Vergangenheit gerne das Menü Steuerelement zum Einsatz, weil es Benutzerrechte abbilden kann. Wer nicht Mitglied der Gruppe Admin ist, bekommt den Admin Teil nicht angezeigt. Bei Smartphone Nutzung kommt hinzu, oder besser weg, das manche Funktionen am Handy keinen Sinn machen oder ohnehin unbedienbar sind.

Bootstrap schlägt den Weg ein. ein universelles HTML Interface zu definieren, das sich per CSS und Media Breakpoints dem Device anpasst. Jquery Mobile sieht ein konsequent eigenes UI, einen eigene App parallel zum Desktop.

Ich denke man muss beide Ansätze mischen. Drop Down Menüs sind auf eine kleinen Smartphone unbedienbar. Folglich müssen auf einer Ebene die wirklich relevanten Optionen zu finden sein. Gängig und von Bootstrap vordefiniert, ist in der Zwischenzeit eine Icon rechts, das Aus und Einklappen über den bestehenden Inhalt bewirkt.

image

Auch Google nutzt das so in der Art.

image

Gutes UI Design überrascht seinen Benutzer nicht. Also nehmen wir das so, wie gewohnt.

Im ASP.NET Web Projekt (und Website) Template werden ohnehin zwei Masterpages angelegt in der Form Site.Master und Site.mobile.Master. Es gibt also zwei unterschiedliche Menüs, die von ASP.NET automatisch je nach erkannten Browser umgeschaltet werden.

In der Desktop Variante sind zwei Ebenen enthalten. Definiert werden diese einfach per UL und LI und den nötigen Bootstrap 3 CSS Klassen.

   1:   <div class="navbar navbar-inverse navbar-fixed-top">
   2:      <div class="container">
   3:        <div class="navbar-header">
   4:          <button type="button" class="navbar-toggle" 
data-toggle="collapse" data-target=".navbar-collapse">
   5:                          <span class="icon-bar"></span>
   6:                          <span class="icon-bar"></span>
   7:                          <span class="icon-bar"></span>
   8:          </button>
   9:          <a class="navbar-brand" runat="server" href="~/">ppedv Company</a>
  10:       </div>
  11:      <div class="navbar-collapse collapse">
  12:        <ul class="nav navbar-nav">
  13:           <li><a runat="server" href="~/adr/firma">Firma</a></li>
  14:           <li class="dropdown">
  15:              <a class="dropdown-toggle" data-toggle="dropdown">Details 
  16:               <b class="caret"></b></a>
  17:               <ul class="dropdown-menu">
  18:                 <li><a href="~/adressen/kunde" runat="server" >Kunden</a></li>
  19:                              

In der mobilen Variante werden die Dropdown Menü ebenen entfernt und auch reduziert auf maximal fünf.

   1:  ..ident zu oben 
   2:  <div class="navbar-collapse collapse">
   3:      <ul class="nav navbar-nav">
   4:          <li><a runat="server" href="~/adr/kunde">Kunden</a></li>
   5:          <li><a href="~/adr/ansprechpartner" runat="server">Ansprechpartner</a></li>
   6:          <li><a href="~/adr/dashboard" runat="server">Dashboard</a></li>
   7:          <li><a href="~/adr/tagcloud" runat="server">Tag Cloud</a></li>
   8:      </ul>
   9:                    

Der Ansatz “one size –fits it all” hat sich wieder einmal als Illusion herausgestellt. Das universelle UI ist nach Usability Gesichtspunkten nicht möglich.

Kommentare sind geschlossen