Mobile Umfragen Responsive Design (Smartphone & Tablet)

Transkript

1 Mobile Umfragen Responsive Design ( & Tablet) Umfragen und Umfragedesign für mobile Endgräte mit der Umfragesoftware von easyfeedback.

2 Inhaltsübersicht Account anlegen... 3 Mobile Umfragen (Responsive Design)... 4 Optimierte Fragetypen... 5 Ansichtsdarstellung im Fragebogen wechseln... 8 Automatische Anpassung ab <768px... 9 Automatische Anpassung deaktivieren... 9 CSS-Anpassungen am Umfrage-Layout CSS-Anpassungen für spezielle Bildschirmgrößen Beispiel für individuelle CSS-Anpassungen

3 Mit easyfeedback erstellen Sie großartige Umfragen und online Fragebögen. Ergänzend zum Hilfe- Center enthält dieses Manual Mobile Umfragen alle nötigen Informationen um Umfragen auf mobilen Endgeräten durchzuführen. Die einzelnen Funktionen sind in Bereiche aufgeteilt und enthalten neben der Anwendungserklärung auch Hintergrundinformationen zur Funktionsweise. Umfragen machen Sie somit ganz einfach. Account anlegen Bevor Sie mit dem online Fragebogen Erstellen in der Umfragesoftware beginnen, empfehlen wir Ihnen sich einen Account anzulegen. Das Anlegen des Accounts ist kostenlos und unverbindlich. Zum Anlegen eines Account, gehen Sie bitte wie folgt vor: 1. Öffnen Sie das Umfragetool über diese Seite: 2. Sichern Sie sich oben rechts den Account mit Eingabe Ihrer -Adresse. 3. Per erhalten Sie Ihr persönliches Passwort für den Login. <<Info>> Der Testzugang, öffnen des Umfragetools ohne Account sichern, löscht sich automatisch nach 24 Stunden. Damit werden auch alle angelegten Fragebögen, Umfragen, Teilnehmer und Ergebnisse gelöscht. 3

4 Mobile Umfragen (Responsive Design) Jeder online Fragebogen und alle Umfragen mit der Umfragesoftware von easyfeedback sind standardmäßig für den mobilen Einsatz (Tablet & ) optimiert. Sie müssen keine weiteren Einstellungen am Fragebogen und der Umfrage vornehmen. Sobald der online Fragebogen oder die Umfrage auf einem kleineren Bildschirm aufgerufen wird, passt sich der Fragebogen automatisch an. Durch die automatische Anpassung und Ausrichtung des online Fragebogens, erweitern Sie Ihre Zielgruppe und den Teilnehmerkreis für Ihre online Umfrage. Ob Kundenbefragung, Mitarbeiterbefragung oder jede andere online Umfrage mit easyfeedback steht Ihnen ein Umfragetool zur Verfügung, welches Ihren Anforderungen keine Grenzen setzt. <<Info>> Vereinzelt kann die automatische Anpassung des Fragebogens nicht gewünscht sein und über den Layoutkonfigurator deaktiviert werden. Dazu im folgenden mehr. 4

5 Optimierte Fragetypen Neben dem Umfrage-Layout (Breite, Randabstände, individuelle Anpassungen) ist auch jeder einzelne Fragetyp für die mobile Nutzung optimiert. Dies stellt sicher, dass der Fragebogen auf jedem Endgerät optimal zu lesen und zu beantworten ist. Die Übersicht zeigt Ihnen, wie sich die einzelnen Fragetypen auf einem kleineren Bildschirm darstellen. <<Info>> Einige Einstellungen, wie z.b. die gewählte Breite von Textfeldern, werden in der kleineren Darstellung nicht übernommen und von der Umfragesoftware automatisch auf eine optimierte Größe skaliert. Geschlossene Frage: Offene Frage: Beurteilungsfrage (Matrix): 5

6 Doppel-Beurteilungsfrage (Matrix): 10er Skala (NPS): Schieberegler: Rankingfrage: 6

7 Semantische differenzial Frage: Variable Frage: Gewinnspiel-/Newsletterfrage: 7

8 Ansichtsdarstellung im Fragebogen wechseln Zur schnellen und komfortablen Überprüfung des Fragebogens auf den verschiedenen Bildschirmgrößen (, Tablet, ), können Sie in der Umfragesoftware die einzelnen Bildschirmgrößen per Klick simulieren. Dies ermöglicht Ihnen Ihren Fragebogen in der Umfrage ohne das Öffnen der Umfrage- Vorschau auf den verschiedenen Bildschirmgrößen zu betrachten und zu optimieren. Um die Darstellungsgröße direkt im Umfragetool zu wechseln, gehen Sie bitte wie folgt vor: 1. Klicken Sie in der Übersicht auf die betreffende Umfrage. 2. Wählen Sie auf der rechten Seite im Fragebogen die gewünschte Ansichtsdarstellung aus. Der Fragebogen wird Ihnen in der gewünschten Darstellung angezeigt: Tablet 8

9 Automatische Anpassung ab <768px Der Wechsel von der normalen (-)Ansicht auf die mobile Version erfolgt durch die Umfragesoftware automatisch. Sobald die Umfragesoftware eine Bildschirmauflösung von unter 768px erkennt, wechselt der online Fragebogen in der Umfrage in die mobile Ansicht. Dies entspricht einem 9 Zoll Bildschirm auf einem Tablet. <<Info>> Die automatische Anpassung des Fragebogens können Sie auch direkt in der Umfrage-Vorschau überprüfen. Dazu öffnen Sie die Umfrage-Vorschau und ziehen das Browserfenster kleiner. Sobald das Browserfenster die Größe von 768px unterschreitet, wechselt der Fragebogen in der Umfrage automatisch auf die mobile Version. Automatische Anpassung deaktivieren In einigen Fällen ist es nicht vorteilhaft, dass die Umfragesoftware automatisch mit dem online Fragebogen in die mobile Version wechselt. So z.b. wenn Sie die Umfrage per iframe oder als Popup auf Ihrer Website einbinden. In den beiden Fällen soll die Umfrage meistens mit der normalen Darstellung einfach nur kleiner dargestellt werden. Um den Wechsel der Umfrage in die mobile Ansicht zu deaktivieren, gehen Sie bitte wie folgt vor: 1. Wählen Sie den Menüpunkt Layout aus. 2. Wählen Sie aus der Liste Ihr Layout aus, oder legen Sie ein Neues aus. 3. Deaktivieren Sie die Option: Mobile Ansicht (Responsive Design) Die automatische Anpassung des Fragebogens in der online Umfrage ist deaktiviert. Sollten sich bei Ihrer Kundenbefragung oder Mitarbeiterbefragung die Rahmenbedingungen ändern, können Sie zu jeder Zeit die Option aktivieren oder deaktivieren. Die Änderung wird sofort wirksam. 9

10 CSS-Anpassungen am Umfrage-Layout Der CSS-Editor im Layoutkonfigurator gibt Ihnen die Möglichkeit den Fragebogen und die Umfrage mit weiterführenden Anpassungen zu gestalten. Dies sowohl bei der normalen (-)Ansicht als auch bei der mobilen (Tablet- & )-Ansicht. Die Anpassungen im CSS-Editor unterliegen einer höheren Instanz und überschreiben somit alle anderen vorgegebenen Einstellungen aus der Umfragesoftware. Daher überprüfen Sie Ihre Anpassungen immer in der normalen (-)Ansicht und in der mobilen (Tablet- & )-Ansicht. <<Info>> Zum Überprüfen der Layoutänderungen empfehlen wir Ihnen immer die Umfrage-Vorschau zu öffnen. Hier sehen Sie die Umfrage und den Fragebogen mit seinen Elementen 1:1 und können alle Inhalte überprüfen. Sobald Sie im Layoutkonfigurator Änderungen vorgenommen haben, brauchen Sie die Umfrage-Vorschau nur zu aktualisieren und diese nicht erneut öffnen. CSS-Anpassungen nur für spezielle Bildschirmgrößen Über den CSS-Editor können neben den globalen Anpassungen auch nur spezielle Anpassungen für bestimmte Bildschirmgrößen hinterlegt werden. Beispiel: In der normalen (-)Ansicht möchten Sie den Statusbalken um 50px nach unten versetzen. Mit dieser Einstellung gestaltet sich Ihre Umfrage perfekt. Aber wenn Sie jetzt die Umfrage auf dem betrachten, sehen Sie, dass der Statusbalken auch nach unten versetzt ist und über den Umfragetitel liegt. Denn auch in der mobilen Ansicht werden die CSS-Einstellungen übernommen. Mit folgendem Befehl können Sie die Anpassungen im CSS-Editor nur auf bestimmte Bildschirmgrößen (max-width: 767px) { } Alle Befehle, hier innerhalb der beiden geschweiften Klammern, wirkt sich nur auf Bildschirmgrößen von unter 768px aus. 10

11 Beispiel für individuelle CSS-Anpassungen In dem folgenden Beispiel sehen Sie, wie Sie individuelle CSS-Anpassungen für verschiedene Bildschirmgrößen hinterlegen können. Beispiel: In der normalen (-)Ansicht möchten Sie den Statusbalken um 50px nach unten versetzen. Sobald die Umfrage auf einem Tablet aufgerufen wird nur noch um 10px, und wenn die Umfrage auf einem aufgerufen wird, soll sich der Statusbalken nicht nach unten versetzen. In diesem Fall sieht der CSS-Code folgendermaßen aus: header. pull-right { margin-top: 50px; } Statusbalken in der -Ansicht um 50px nach unten (max-width:767px) { header. pull-right { margin-top: 10px; } } Statusbalken bei einer Bildschirmauflösung von unter 768px um 10px nach unten (max-width:360px) { header. pull-right { margin-top: 0px; } } Statusbalken bei einer Bildschirmauflösung von unter 361px um 0px nach unten versetzt. <<Info>> Jede Eingabe kann zu Fehlern führen für die wir keine Haftung übernehmen. Lassen Sie sich bei speziellen Änderungen beraten oder von einem Experten helfen. 11

12 Noch Fragen offen? Nutzen Sie das Hilfe-Center oder nehmen Sie mit uns Kontakt auf. easyfeedback Hilfe-Center easyfeedback Support Mo.-Fr Uhr. 12