Drücke die Tasten ◄ ► für weitere Artikel  

Sidetap: Framework für mobile Webseiten

Mobile Webentwicklung ist aus einer zeitgemäßen Kommunikationsstrategie nicht wegzudenken. Mit dem Sidetap Framework wird das Entwickeln von mobilen Anwendungen zum Kinderspiel.

Sidetap: Framework für mobile Webseiten

Sidetap wird vielen bekannt vorkommen. Denn dieses Framework ermöglicht die Entwicklung von Web-Applikationen im Stil der Facebook-App für das iPhone. Möglichst viel Platz wird für Content zur Verfügung gestellt. Im oberen Bereich der App ist eine Leiste, in der Navigationselemente und der Seitentitel untergebracht werden. Durch einen Tap auf einen dafür vorgesehenen Button kann eine zusätzliche Seitenleiste mit zusätzlichen Navigationselementen ausgeklappt werden.

Sidetap in Aktion
Sidetap in Aktion

Sidetap - Konvention statt Konfiguration

Das nur 2kb große Framework nimmt uns als Webworker jede Menge Arbeit ab. Sidestap liefert die bestmögliche User-Experience an alle Geräte. Es beginnt mit den einfachsten Animationsfunktionen und erweitert diese automatisch, je nach Fähigkeiten des Gerätes. Gleichzeitig nimmt es uns durch die vorgegebene Funktionsweise Designentscheidungen ab. Man kann direkt loslegen und muss nicht erst das Rad neuerfinden, bevor der eigentliche Inhalt der Seite bzw. App erstellt werden kann.

Sidetap Nutzung - Theorie

Die Nutzung von Sidetap ist recht simpel, sobald man die etwas wirre Dokumentation der Macher durchgeblickt hat. Alles beginnt mit dem Aufbau der HTML-Struktur. Hierfür liegt ein Beispiel Sekeleton vor. Auf dem ersten Blick erkennt man sofort den Bereich für die Sidebar in dem sich eine Beispiel Navigation verbirgt. Innerhalb von div.stp-nav können neben der Navigation ergänzende Elemente für die Seitenleiste wie z.B. eine Suche eingebaut werden.

<div class="stp-nav">

<div>

<nav>

<a href="#" class="selected">Selected Nav Item</a>

<a href="#">Second Nav Item</a>

<a href="#">Third Nav Item</a>

<a href="#">Fourth Nav Item</a>

</nav>

</div>

</div>

Mit dem folgenden Code werden in Sidetap Unterseiten definiert.

<div class="stp-content-panel">

<header>

<a href="javascript:void(0)" class="header-button icon menu"><span>Menu</span></a>

<h1>Header Text</h1>

</header>

<div class="stp-content-frame">

<div class="stp-content-body">

<div>Content goes here.</div>

</div>

</div>

</div>

Nehmen wir das Ganze ein wenig auseinander: In dem div.stp-content-panel befindet sich ein <header> Bereich. Dort kann die Headline und UI-Elemente wie zum Beispiel der Button zum Ausklappen der Seitennavigation positioniert werden. Im div.stp-content-body kann dann der eigentliche Content eingebunden werden.

Nun muss das Grundgerüst mit den jeweiligen Funktionen von Sidetap ausgestattet werden:

<script type=“text/javascript“>

/*Script Initiieren*/

var st = sidetap();/

*Menü Button Funktionen zuweisen*/

$(".header-button.menu").on("click",st.toggle_nav);

</script>

Um nun die Navigation zwischen einzelnen Sections zu ermöglichen bietet Sidetap die Methode show_section(). Diese erwartet die Parameter element und options. Für Element übergibt man eine Referenz zum jeweiligen Objekt. Dies kann z.B. mithilfe von IDs realisiert werden. Der Parameter Options erwartet die Animationsrichtung, aus der die neue Seite erscheinen soll (upfrombottom, downfromtop, infromright, infromleft). So lässt der folgende Aufruf die Section mit der id #about von rechts in den Viewport hereinsliden.

<script type="text/javascript">

st.show_section($('#about'), {animation: 'infromright'});

</script>

Sidetap Nutzung - Praxis

Sidetap bietet die Grundfunktionen für die Erstellung einer mobilen App. Klarer Nachteil des Basis-Aufbaus ist aber der aufgeblähte Code und ggf. lange Ladezeiten, wenn alle Inhalte sofort im Skeleton hinterlegt werden und dementsprechend auch geladen werden müssen. Das kann man aber leicht umgehen, indem man z.B. zwei Sections anlegt, sie abwechselnd via AJAX-Call mit Inhalten füllt und erst anschließend in den Viewport fahren lässt. Da jQuery Grundvoraussetzung für das Framework ist, bieten sich die dort verfügbaren Methoden zur Lösung an. (Beispiel unten im Download)

Ein weiterer Fehler liegt in der Darstellung der Inhalte. So kann es passieren, dass man trotz eingefügten Inhalt nichts zu sehen kriegt, weil er sich hinter der oberen Navigationsleiste verbirgt. Das lässt sich durch eine kleine Anpassung an der sidetap.css beheben. Wir ergänzen bei .stp-content-body ein padding-top von 50px und haben unseren Inhalt auf der Höhe, auf den wir ihn brauchen.

Ein weiterer Fehler des liegt in der Sidebar. Wird diese mit vielen Inhalten gefüllt, verschwinden sie irgendwann außerhalb des Viewports. Eine Möglichkeit zum herunterscrollen ist von Haus aus nicht integriert. Auch dieses Problem lässt sich durch eine Anpassung des Stylesheets sidetap.css beheben. Dafür muss .stp-nav um folgende Werte ergänzt werden:

.stp-nav {

(...)

height:100%;

overflow:scroll;

-webkit-overflow-scrolling:touch;

}

Ein Beispiel mit den angewandten Korrekturen und einem grundsätzlichen Ansatz einer AJAX-Loader-Navigation habe ich euch hier im Sidetap Spezialpaket zusammengestellt. Das Framework in seinem Urzustand findet ihr auf der Sidetap Webseite oder im GitHub Repository des Projektes.

Insgesamt bietet Sidetap eine gute Grundlage zum Entwickeln von mobilen Webseiten und . Allerdings hat das Framework einige Schwächen. Hat man jedoch ein wenig Ahnung von der Materie, lassen sich diese Fehler schnell ausbügeln und die Produktion des Projektes kann ohne vorherige Entwicklung von Grundgerüsten beginnen.

Über den Autor

Foto von Ilja ZaglovAls selbstständiger Kommunikations- & Mediendesigner und Software Entwickler unterstützt Ilja Zaglov kleine und mittelständische Unternehmen bei der Erstellung von Online- und Offline Medien. Neben Web-Gestaltung gehören Motion-Graphics und 3D-Inhalte zu seinen Spezialgebieten.

64 Shares bis jetzt – Dankeschön!

Bewerten
VN:F [1.9.22_1171]
5 Antworten
  1. von K_Pliester am 26.09.2012 (16:17Uhr)

    Hey ho,

    der Link zu sitetap funktioniert leider nicht! :)

    PS: Danke für den Tipp, ich kannte diese Seite noch nicht!

  2. von Matthäus Pielok via facebook am 26.09.2012 (16:26Uhr)

    schönes Teil was wie ihr schon sagtet es hat noch ein paar Kinderkrankheiten...

  3. von Boris Hofferbert via facebook am 26.09.2012 (16:40Uhr)

    Beim Blick auf das Logo war mein erster Gedanke "It goes to eleven" :)

  4. von Sidetap: Framework für mobile Webse… am 26.09.2012 (23:16Uhr)

    [...] Sidetap: Framework für mobile Webseitent3n MagazinDa jQuery Grundvoraussetzung für das Framework ist, bieten sich die dort verfügbaren Methoden zur Lösung an. (Beispiel unten im Download). Ein weiterer Fehler liegt in der Darstellung der Inhalte.  [...]

  5. von 5 nützliche JavaScript Funktionen und j… am 08.04.2013 (09:08Uhr)

    [...] jPanelMenu ist ein jQuery-Plugin für die Erstellung von Seiten-Navigationen. Bootstrap bietet eine ähnliche Funktion für responsive Layouts. Dabei klickt man auf einen Button, das Menü fährt von oben nach unten heraus und schiebt den Content nach unten. Bei jPanelMenu fährt das Menü von der Seite herein. Einen ähnlichen Ansatz speziell für mobile Navigation bietet euch Sidetap. [...]

Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Mehr zum Thema Frameworks
Mobile SEO: 7 Praxistipps für deine Website [SEO Campixx 2014]
Mobile SEO: 7 Praxistipps für deine Website [SEO Campixx 2014]

Auf der SEOCampixx 2014 hat Johann Moor, SEO-Constultant von gjuce, am Beispiel von Best-Practices konkrete Tipps für die Optimierung mobiler Websites geliefert. Wir fassen das Wichtigste für euch.. ... » weiterlesen

Foundation 5: Zurbs responsive UI-Framework startet durch
Foundation 5: Zurbs responsive UI-Framework startet durch

Zurb hat die fünfte Version des beliebten UI-Frameworks namens Foundation veröffentlicht. Wir zeigen euch die wichtigsten Neuerungen und warum Foundation 5 auch für Einsteiger leicht zu meistern is ... » weiterlesen

Bootstrap 3 vs. Foundation 5: Die Top-Frameworks im ersten Vergleich
Bootstrap 3 vs. Foundation 5: Die Top-Frameworks im ersten Vergleich

Heute zeigen wir euch, was die größten Unterschiede dieser beiden Frameworks sind. Im kommenden „Bootstrap 3 vs. Foundation 5“-Teil zeigen wir euch, wie sich die Frameworks im „Prototyping“ ... » weiterlesen

Kennst Du schon unser t3n Magazin?

t3n 35 jetzt kostenfrei probelesen! Alle Inhalte des t3n Magazins Diesen Hinweis verbergen