Dirty Tricks mit Axure: Responsive.

Axure ist nach wie vor die erste Wahl beim Entwickeln von Prototypen fürs Web. Auch wenn die Integration dynamischer Funktionen die Graubärtigen unter uns an vielen Stellen noch an Flash 3 erinnert: Axure bietet jede Menge schöner Möglichkeiten, Web-Konzepte mit Leben zu erfüllen.

Wer mit Axure responsive Lösungen für unterschiedliche Bildschirmauflösungen und mobile Endgeräte entwickeln möchte, stößt jedoch schnell an Grenzen. Die haben oft eine einfache Ursache: In Axure können keine individuellen Funktionen mit Javascript integriert werden, so dass selbst grundlegende Werte wir die Breite des Browsers nicht ohne holperige Workarounds ermittelt werden können.

Die Entwickler von Axure versprechen mit der Version 7 Besserung (http://www.axure.com/forum/general-discussion/7275-axure-rp-7-responsive-prototyping.html) und es finden sich auch schon brauchbare Lösungsvorschläge aus der Community: http://www.theinteractive.it/2013/02/how-to-create-a-responsive-prototype-in-axure-tutorial/.

Diese Vorschläge zeigen gut, wieweit Axure aufgebohrt werden kann, sind gleichermaßen noch „haarsträubender“ und komplexer als die im Folgenden vorgestellte Lösung. Kritisch an allen Axure-eigenen Lösungen ist die Verwendung einer Schleife mit kurzen Intervallen, was zu Performanceeinbrüchen und Fehler führen kann.

Bei der Wahl des besten Workarounds geht letztlich darum, den Aufwand zu minimieren und dabei seinem Ziel möglichst nahe zu kommen.  In diesem Sinn folgt jetzt die aus meiner Sicht beste Lösung, um responsives Verhalten mit Axure abzubilden, indem man auf das onRezive-Event des Browsers selbst zurückgreift.

1. Schritt: JavaScript-Funktionen in Axure zur Verfügung stellen.

Mit diesem Schritt ist ein Eingriff in die Basis-Bibliotheken von Axure verbunden, was bei Arbeiten in Teams oder der Weitergabe von Rohdateien nicht immer einfach ist. Solltet Ihr mit der beiliegenden Axure-Datei (Link) arbeiten wollen, dann müsst (!) Ihr diese Änderung auf Eurem Rechner auch durchführen. Zum Betrachten der Demo (Link) ist das nicht notwendig.

Die Anleitung und den zu integrierenden Code findet Ihr hier: http://www.axure.com/forum/tips-tricks-examples/6998-heres-how-add-custom-javascript-css-prototypes-well-one-way-do.html – auf diesem Weg dem unbekannten Autor („zeroskillz“) besten Dank: 5 Minuten Aufwand, die zu einer unglaublichen Erweiterung der Möglichkeiten in Axure führen.

2. Schritt: Externe js-Datei anlegen

Über eine externe JavaScript Datei können nun elementare Funktionen aufgerufen und das Verhalten von Variablen in Axure beeinflusst werden. Die Datei sieht so aus:

function defineNewSize() {
w = document.body.offsetWidth;
SetGlobalVariableValue("screenW", w);
SetPanelVisibility('u1','toggle','none',500);
}
defineNewSize();
window.onresize = defineNewSize;

Zeile 2 ist bekannt. Wer es browserübergreifend haben mag, sollte hier nochmal Hand anlegen für den nötigen Feinschliff.

Zeile 3: So werden aus der externen Datei globale Variablen in Axure definiert; in diesem Fall „screenW“ als aktuelle Breite des Browserfensters.

Zeile 4: Spricht direkt eine Axure-eigene Funktion an, mit der die Sichtbarkeit des Panels „u1“ verändert wird. Die Benennung dieser Panels nimmt Axure selbst bei der Veröffentlichlung des Prototypen vor. „u1“ sollte das erste Element auf der untersten Ebene des Prototypen sein, d.h. dieses Panel sollte immer an dieser (ersten) Stelle liegen bleiben.

Über die im ersten Schritt integrierte zeroskillz-Funktion wird diese Javascriptdatei einmal aufgerufen. Die Bildschirmbreite wird initial übergeben und über die Ansprache des onresize-Events bei jeder Veränderung der Fenstergröße  aktualisiert.

Damit die Datei nicht überschrieben wird, liegt sie neben dem „prototype“-Verzeichnis in einem „custom“-Ordner und wird entsprechend angesprochen: „„../custom/jsFunctions.js“

3. Schritt: Das unsichtbare Panel („u1“)

Das in Zeile 4 angesprochene unsichtbare Panel beinhaltet eine transparente Fläche. Gestalterisch völlig unbedeutend löst das „toggeln“ der Sichtbarkeit durch das externe JavaScript eine Funktion in Axure aus, die zur Anpassung des Seiteninhalts an die Bildschirmbreite führt:

Responsive Umschalten mit Axure

Sobald das Panel durch die JavaScript-Funktion sichtbar wird („OnShow“) wird es wieder auf unsichtbar gestellt. Damit wird unter „OnHide“ die Anpassung an die Browserbreite vorgenommen – das ist einfach und dreckig zugleich. Eine bemerkenswerte Möglichkeit in Axure auch Schleifen zu integrieren.

Der Rest ist Handarbeit.

Die rp-Datei zum Bearbeiten in Axure findet Ihr hier: 

(Bitte beachtet, dass Ihr zumindest den ersten Schritt dieses kleinen Tutorials machen müsst, damit die JavaScript-Funktionen aus Axure heraus aufgerufen werden.)

Die Demo findet Ihr hier:

Have Fun!

16 Gedanken zu “Dirty Tricks mit Axure: Responsive.

  1. Hallo Jesko,
    frage mich gerade immer noch nach dem Sinn eines solchen Hacks. Geht es hier nur darum, das Browserfenster zu vergrössern/verkleinern und dann den Effekt des Layoutwechsels zu sehen? Mehrere Layouts (Content States) muss man ja so oder so konzipieren.
    Verstehe nicht den Aufwand und Zweck das mit Axure zu machen. Dann meiner Meinung nach doch lieber gleich mit einem Frontend Framework wie z.B. Foundation.

    • Hi Daniel,
      wie viele Konzepter und Designer kennst Du denn, die sich an Foundation wagen? In der Praxis ist beim ersten Digitalisieren von Ideen bis hin zum Usabilitytest-fähigem Prototypen Axure eine gute Wahl.
      Der hier beschriebene Fall ist sicher ein Grenzfall: den Layoutwechsel nicht nur durch manuelles Umschalten der Ansichten zu veranschaulichen, sondern eben tatsächlich „onResize“. Die im Beispiel verwendeten Grauflächen sind dabei nur Platzhalter für die Content-Elemente.
      Der Fall demonstriert gleichzeitig drei Probleme, die in der Arbeit mit Axure immer wieder auftauschen können:
      1. Wie verwende ich JavaScript-Schnipsel in Axure?
      2. Kann ich Variablen aus dem JavaScript in Axure übergeben?
      3. Wie sieht eine „Schnittstelle“ in Axure aus, die diese Variablen „onPush“ aufnimmt?
      Das sind Aufgaben, die ohne das hier gezeigte „Aufbohren“ von Axure nicht möglich sind.

      • Du hast recht, da gibt es nicht sehr viele die sich den Schritt wagen, sollten sie aber meiner Meinung nach, wenn sie Konzepte entwickeln die stark von der (Frontend)Technologie abhängen.
        Ansonsten sitzt der Experte dafür nur einen Tisch weiter und lässt sich gerne auch schon in die Konzeptphase mit einspannen.
        Mein letzter Prototype war auch eine responsive Site. Scribbles von den Interaction Designern, 1. Prototyp vom Frontend Entwickler, gemeinsame Iteration bis zum Abschluss Grobkonzept.

        Den Wunsch Axure ab und an aufzubohren kenne und hatte ich auch schon öfters. Das war aber aus meiner Sicht immer so als ob man einem VW Käfer einen Porsche Motor einpflanzen will: Es geht, aber Aufwand und Ertrag…?
        Deshalb fand ich diesen Fall, die Ansichten „onResize“ zu ändern, fragwürdig.
        Interessant wäre meiner aus meiner Sicht vielleicht das Thema Parallax Simulation im Axure, denn auch hier hatten wir in letzter Zeit immer wieder das Thema wie das jemand ohne Frontend Kenntnisse prototypen kann.

    • Es ist und bleibt ein Hack mit einem damit verbundenen riesigen Aufwand. Sicherlich schön zu sehen, dass man sowas sogar mit Axure machen kann. Axure beherrscht auch Variablenhandling und zig. Fallunterscheidungsmöglichkeiten. Dies sind aber alles Dinge, welche in der Konzeption in Axure zu viel Zeit für die initiale Erstellung und den Unterhalt mit sich bringen.

      • Ein Hack – ja. Riesiger Aufwand – kommt drauf an. Für das Einrichten der Responsive Lösung, so dass man auf Panel- oder iFrame-Basis den Effekt demonstrieren kann weniger als 15 Minuten.
        Persönlich bin ich in den vergangenen Jahren oft an Grenzen in Axure gestoßen, die sich mit der beschriebenen Methode schneller lösen lassen, als mit allen anderen Techniken, die ich kenne. Natürlich ist und bleibt Axure dabei ein Wireframe-/Konzept-Werkzeug und kein Ersatz für die Webentwicklung oder Design.

  2. Hi,
    ihr könnt den JS Code auch einfach über den OnPageLoad Event eurer Seite laden – ganz ohne Dateien editieren:

    OnPageLoad –> Add Case –> Open Link in Current Window –> Link to an external URL or file

    …und da einfach das hier reinkopieren.

    javascript: function defineNewSize(){w=document.body.offsetWidth;SetGlobalVariableValue(„screenW“,w);SetPanelVisibility(„u1″,“toggle“,“none“,500)}defineNewSize(); window.onresize=defineNewSize; throw new Error();

    Fertig ist die Laube.

    (Der Error am Ende hält Firefox von dem Versuch ab die „Seite“ zu laden.)

  3. javascript:void(SetGlobalVariableValue%28%22screenW%22%2Cdocument.body.offsetWidth%29);

    Diese Zeile setzt den Wert der Variablen screenW gleich der Fensterbreite, ohne ein externes JavaScript einzuhacken.

    – Variable screenW anlegen
    – Dynamic Layer anlegen
    – function on move
    – open external link in current window: s.o.
    – wait je nachdem wie schnell es reagieren soll
    – move dynamic layer

    damit ist in der variablen screenW immer die aktuelle fenstergröße und ich kann in axure etwas damit anfangen.

    weil das kein hack an der installierten version ist funktioniert das auch auf axshare und ich muss nicht abhängig davon ob ich online bin oder nicht den link zur externen js-datei updaten.

    • Sehr smart! Ähnlich wie Lennarts Lösung. Danke!
      on hide/on show funktioniert auch und es bleibt übersichtlich.
      Auch schön um weitere Parameter abzufragen.

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

*

*

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>