Howto: Mobillayout

Aus Imperia Support Wiki

Im mobilen Layout wird das selbe Markup wie im Desktop-Layout verwendet. Es gibt keine zweite Version der Seite, die für mobile Geräte angezeigt wird. Die Änderungen passieren über CSS-Regeln.

Eine Übersicht über das vorhandene Markup finden Sie in den Masterlayouts. Wenn Sie Ihren Browser zusammen schieben, sehen Sie das Seitenlayout in der mobilen Version.

Nachfolgend sehen Sie die Startseite des Regierenden Bürgermeisters im Vergleich Desktop - Mobil.

Die Startseite vom Regierenden Bürgermeister im Desktop-Layout Die selbe Seite in Mobil-Layout

Häufige Fragen / FAQ

Wo finde ich das Markup für die mobile Seite?

Das Markup ist identisch zum Markup der Desktop-Seiten. Am besten sehen Sie sich die Masterlayouts an und übernehmen von dort die entsprechenden Elemente. Wenn Sie die Seite zusammen schieben, sehen Sie das Layout der mobilen Version.

Ab welcher Breite erfolgt der Umbruch in das mobile Layout?

Wenn der sichtbare Bereich für die Webseite eine Breite von 767px unterschreitet, wird das mobile Layout ausgespielt. Der Breakpoint liegt also bei 767px.

Meine Applikation sieht mobil nicht so rund aus. Wie kann ich Regeln einfügen, die nur bei diesem Layout greifen?

Dafür können sog. media queries genutzt werden. Für die Berlin.de Seiten lauten diese wie folgt:

  • Mobile only: @media screen and (max-width: 767px) { /* CSS here */ }
  • Desktop only: @media screen and (min-width:768px) { /* CSS here */ }

Ich habe in meiner externen Anwendung keine mobile Navigation. Warum ist das so und wie kann ich eine erzeugen?

Je nach dem welches Layout Sie nutzen, wird aus dem Redaktionssystem bereits eine Navigation vom Auftritt mitgeliefert. Dort sollte auch die mobile Navigation vorhanden sein. Wenn Sie bspw. nur den blauen Header nutzen dürfen, ist keine mobile Navigation im Layout vorhanden. Die Navigation im Landeslayout speist sich aus der Navigation der jeweiligen Auftritte. Daher können Sie die mobile Navigation selbst bestücken, wie Sie das auch für die Navigation im Desktop-Layout getan haben.

Um sich das Markup anzusehen, nutzen Sie am besten die Masterlayouts. Wenn Sie die Seite zusammen schieben, sehen Sie das Layout der mobilen Version.

Hier ein Auszug aus dem Quelltext zur mobilen Navigation als erste Orientierung:

<nav class="navigation-mobile hidden-desktop hidden-tablet"> <div class="sticky-header bde-gradient"> <div class="red-line"></div> <div class="portal-logo"> <a title="Link führt zur Startseite von Berlin.de" href="#"> <img title="Link führt zur Startseite von Berlin.de" alt="Bild zeigt: Berlin.de Logo" src="https://www.berlin.de/i9f/images/berlin_de.png"> </a> </div> <button class="btn nav-toggle" id="mobile-nav-toggle" title="Mobile Navigation" aria-labelledby="hiddenNavToggler"> <span class="icon-menu"> <span class="line line-1"></span> <span class="line line-2"></span> <span class="line line-3"></span> </span> </button> </div> <div class="wrapper"> <div class="sticky-container-head"> <div class="offcanvas-search"> <form class="institutionssuche institutionssuche-mobile" method="get" action="#"> <div class="control-group searchform mobile" role="search"> <input type="search" placeholder="Suchbegriff" name="x"> <button class="btn global-search-submit" type="submit"><span class="hidden-phone">Suchen</span></button> </div> </form> </div> </div> <div class="nav-container"> <div class="nav-container-body"> <ul class="nav-menu menu"> <li class="menu-item has-dropdown is-active"> <a href="#!" class="menu-link">Haupt 1</a> <ul class="nav-dropdown menu is-visible"> <li class="menu-item"> <a href="#" class="menu-link">Sub 1</a> <ul class="nav"> <li class=" menu-item"> <a href="#" class="menu-link">Sub 1 a</a> </li> </ul> </li> </ul> </li> </ul> </div> </div> </div> </nav>