t3n News Entwicklung

Sidetap: Framework für mobile Webseiten

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.

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
Slides Framework: Schnell animierte Websites erstellen
Slides Framework: Schnell animierte Websites erstellen

Mit dem Slides Framework könnt ihr schnell und unkompliziert schicke und animierte Webseiten erstellen. Wir verraten euch, was ihr für euer Geld bekommt. » weiterlesen

Virtual Reality im Browser: Mozilla stellt Open-Source-Framework für VR-Websites vor
Virtual Reality im Browser: Mozilla stellt Open-Source-Framework für VR-Websites vor

Mozillas A-Frame soll es deutlich einfacher machen, Virtual-Reality-Websites für den Desktop, Smartphones und VR-Brillen zu entwickeln. Wir werfen einen ersten Blick auf das Open-Source-Framework. » weiterlesen

Foundation 6 ist da: Das müssen Designer über die neue Version wissen
Foundation 6 ist da: Das müssen Designer über die neue Version wissen

Mit Foundation 6 hat Zurb die neueste Version seines UI-Frameworks gelauncht. Foundation 6 soll noch schneller, schlanker und leichter zugänglich als seine Vorgänger sein. Wir werfen einen Blick … » weiterlesen

Alle Hefte Jetzt abonnieren – für nur 35 €

Kennst Du schon unser t3n Magazin?