Vorheriger Artikel Nächster Artikel

Sidetap: Framework für mobile Webseiten

Mobile 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 Apps. 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.

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.
Vorheriger Artikel Zurück zur Startseite Nächster Artikel
Eine Antwort
  1. von K_Pliester am 26.09.2012 (16:17 Uhr)

    Hey ho,

    der Link zu sitetap funktioniert leider nicht! :)

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

    Antworten Teilen
Deine Meinung

Bitte melde dich an!

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

Jetzt anmelden

Mehr zum Thema Frameworks
20 Jahre Cascading Style Sheets: Wie CSS das Web verändert hat
20 Jahre Cascading Style Sheets: Wie CSS das Web verändert hat

Die Cascading Style Sheets werden heute 20 Jahre alt. Wir werfen einen Blick auf die Geschichte von CSS. » weiterlesen

t3n sucht freie Autoren (m/w) für das Ressort „Entwicklung & Design“
t3n sucht freie Autoren (m/w) für das Ressort „Entwicklung & Design“

Du willst auf freier Basis schreiben, hast einen guten Stil und Webentwicklung und -design gehören zu deinen thematischen Steckenpferden? Dann haben wir was für dich: Wir suchen ab sofort freie … » weiterlesen

Themify Builder: WordPress-Themes per Drag & Drop erstellen
Themify Builder: WordPress-Themes per Drag & Drop erstellen

Der Themify Builder ist ein Framework, das die Erstellung von WordPress-Themes ganz ohne Code-Kenntnisse möglich macht. Die Bearbeitung neuer Designs erfolgt im Frontend per Drag & Drop. » weiterlesen

Kennst Du schon unser t3n Magazin?

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