Deze worksheet omschrijft hoe je een Snap WebHost enquête bouwt die zich aanpast, afhankelijk van het toestel waarmee de enquête wordt benaderd. De enquête is in dit geval aangepast op basis van de schermdimensies.

Om dit te doen moet je een aparte Snap WebHost editie maken voor elke schermgrootte (bijvoorbeeld voor PC, tablet en smartphone), en deze vervolgens publishen met de optie  Publish all WebHost editions together. Dit plaatst alle verschillende vrageblijsten voor Snap WebHost in één zip bestand. Snap WebHost zal vervolgens de gepaste vragenlijst tonen aan de respondent, op basis van de schermdimensies van het toestel van de respondent

Web questionnaires: schematic

Achtergrond

De vragenlijsten worden naar verschillende toestellen verstuurd door Snap WebHost. Snap WebHosts sorteert de edities volgens pagina-afmetingen en selecteert de grootste enquête die op het scherm van het toestel past. Je kan de verschillende edities identificeren in de data dankzij de paradata variabele Id.format

Wil je de lay-out en het gedrag aanpassen voor verschillende toestellen, dan ken je dat ook doen, door de individuele vragenlijsten te gaan bewerken.

Stap 1: Opzetten van de verschillende edities

We gaan ervan uit dat je in het verleden reeds een enquête voor Snap WebHost hebt gebouwd, gebruik makend van het default Web template

Volg nu de stappen hieronder, om 2 andere WebHost edities te creëren voor Smartphone en Tablet.

  1. Open je enquête in Questionnaire – Design Mode met de Questionnaire window: design mode button.
  2. Klik op de Editions and Style Templates button Editions and style templates button
  3. Klik  [New…] om een nieuwe editie te maken. In het Publication Medium veld, selecteer Web enSnap WebHost.

    New paper edition

  4. Selecteer Load Style en Default Smartphone.qsf in de dropdown lijst om de template van een smartphone te gebruiken. (Je kan ook navigeren in de stijlen via de SBW: browse button button.)
  5. Wijzig de  Edition Name om aan te geven voor welk toestel deze versie wordt gemaakt (bvb. Web: Smartphone)
  6. Klik [OK] om het New Survey Edition dialoogvenster te sluiten.
  7. Herhaal stap 3 en 4 maar selecteer ditmaal Default Tablet.qsf om een template voor een tablet te gebruiken
  8. Wijzig de Edition Name om aan te geven voor welk toestel deze versie wordt gemaakt (bvb. Web: Tablet)
  9. Klik [OK] om terug te keren naar het  Questionnaire – Design Mode scherm

    Editions3

    Ga na of je 3 webhost edities ziet in het Editions and Style Templates dialoogvenster, klik [OK] om terug te keren naar het Questionniare – Design Mode scherm.

  10. Snap creëert voor elke editie een nieuw tabblad met als label de Edition Name.
    tabs

Stap 2: Publish uw enquête

Wanneer je een enquête publisht, moet je Publish all WebHost editions together aanvinken.Dit plaatst alle vereiste bestanden voor alle zichtbare WebHost edities in een enkele zip folder. Wil je niet dat alle WebHost edities in één enkele zipfolder worden gepubliceerd, dan kan je de ongewenste edities verbergen. Verborgen edities zijn niet zichtbaar in het Questionnaire scherm en worden niet gepublished.

Edities die je niet wil publiceren verbergen

  1. Klik Editions and style templates button in de Questionnaire toolbar om het Editions and Style Templates dialoogvenster te tonen (of klik met je rechtermuis op één van de tabbladen en selecteer Editions and Style Templates).
  2. De beschikbare edities zijn aangevinkt. Om een editie te verbergen, vink je ze uit.
  3. Klik [OK] om terig te keren naar de vragenlijst. De verborgen edities zijn niet langer beschikbaar in de tabs onderaan links, en worden niet toegevoegd aan het zip bestand wanneer je een publish uitvoert.

Alle edities naar één bestand publiceren

  1. Selecteer File | Publish.
  2. Selecteer  Output button in de linkerkolom.
  3. Selecteer Publish Without Preview als Output Method.
  4. Selecteer Edition buttonin in de linkerkolom.

    Edition settings

  5. Selecteer Publish all WebHost editions together.
  6. Klik [Publish] om de enquête te publiceren en het zip bestand te maken in de folder die je hebt aangegeven. Nu moet je de enquête opladen naar Snap WebHost zodat ze toegankelijk wordt voor de respondenten

Stap 3: Controleer de weergave van de enquête op je toestel(len)

Het is aangeraden om te controleren of je enquête correct wordt weergegeven op de toestellen. Je kan de test URL doormailen naar een account waar je toegang toe hebt vanop het toestel, of de test URL in de browser intypen van je toestel.

Om de test URL voor de enquête te verkrijgen:

  1. Log in op Snap WebHost.
  2. Selecteer de enquête
  3. Klik op de test URL en kopieer het adres vanuit je browser, OF klik met de rechtermuisknop op de test URL en selecteer "kopieer URL"

    Snap WebHost: updatesurvey.asp showing adding mrogan

  4. Plak de URL in een e-mail en verstuur de mail naar de account die je kan openen vanop je toestel. 
  5. Klik op de link en controleer of de enquête correct wordt weergegeven

TIP : beschik je niet over alle toestellen om na te gaan of alles correct wordt weergegeven? Er bestaan diverse simulatoren van mobiele toestellen op het internet waar je eenvoudig de URL kan invoeren, om te kijken hoe de enquête zal worden weergegeven op dat specifieke toestel. Wij gebruiken zélf dikwijls deze - gratis - simulator omdat er verschillende schermdimensies beschikbaar zijn, en je ook kan simuleren in portrait of landscape: http://www.mobiletest.me/ 

Je enquêtes aanpassen

Wil je de standaard look van je vragenlijsten aanpassen, dan kan je ze onafhankelijk van elkaar wijzigen en ze samen publishen. Je kan verschillende edities bouwen die er anders uitzien en zich ook anders gedragen

Aangepaste afbeeldingen voor elke editie

Wil je afzonderlijke afbeeldingen gebruiken voor verschillende toestellen, dan moet je dit doen door ze in de achtergrond te plaatsen, en ze niet rechtstreeks in te voegen.

Het is aangeraden om aparte afbeeldingen van de juiste grootte te maken, en de afbeelding niet te vergroten of te verkleinen.

  1. Maak de verschillende afbeeldingen die je wil gebruiken en pas ze aan voor grote en kleine schermen
  2. Ga naar Design ModeDesign mode button en selecteer in de toolbar het topic Background.

    Background text

  3. Selecteer de zone waar je een achtergrondafbeelding wil plaatsen in de derde drop down lijst (zie de rode cirkel hierboven). Klik op [Picture]. Het Picture dialoogvenster verschijnt.
  4. Klik  [Browse] en navigeer naar de afbeelding die in deze editie moet komen
  5. Stel de horizontale en verticale aflijning in.
  6. Selecteer Fixed. Dit zorgt dat de afbeelding getoond wordt in de afmetingen waarin ze is gecreëerd

    Inserting tick picture for Web

  7. Ga naar de andere editie(s) en herhaal deze stappen met een andere afbeelding op de achtergrond.
  8. Klik Save button om alle wijzigingen op te slaan

Indien je een kleur én een afbeelding hebt toegepast, zal de kleur worden getoond in de zones waar de afbeelding de ruimte niet opvult. Het background preview schermpje in de toolbar zal een combinatie tonen van de kleur en de afbeelding.

Background preview area - toolbar

De vragen of tekst aanpassen voor de verschillende edities

Wil je minder tekst in één editie van je enquête, dan kan je verschillende versies van de tekst voorzien en de tekst tonen die gepast is voor de betrokken editie.

  1. Maak de verschillende instructies (of vragen)


    Question toolbar Show All box cleared and highlighted

  2. Klik met de rechtermuisknop op het item dat je wil verbergen en selecteer Hide Variable in de dropdown lijst.
  3. Ga naar de andere editie door het gewenste tabblad aan te klikken links onderaan het scherm.

    Questionnaire - Design Mode: change edition selecting tab

  4. Verberg de tekst (of vragen) die je niet wil tonen in die editie
  5. Klik Save button om de wijzigingen op te slaan. RVergeet niet de routing aan te passen indien je routing toepast op vragen die verborgen zijn.

Gebruik verschillende routing in de verschillende edities

Je kan kiezen welke vragen getoond worden door routing toe te passen die zich baseert op de ID.Format variabele.

Je moet kijken naar de ID.format variabele om de code voor een editie te zien.

  1. Klik Variables window button op de Snap toolbar om het Variables scherm te tonen
  2. Scroll naar beneden om de ID.format variabele te vinden, en dubbelklik erop om ze te openen

    Smart reporting: image of

  3. Noteer welke Code staat voor elke editie.

De routing instellen

  1. Creëer de verschillende vragen
  2. Selecteer de vragen die je wil tonen in de specifieke editie
  3. Klik met je rechtermuis op de vragen en selecteer Routing Rules of klik Routing button in het Questionnaire scherm op de toolbar. Het Routing Rules dialoogvenster verschijnt.

    Empty routing dialog for Q3

  4. Klik [Add] om een nieuwe routingregel te maken
  5. Selecteer Conditionally Ask Question en klik [OK].

    New routing instruction dialog: conditionally ask

  6. Het Rule Details dialoogvenster verschijnt.

    Routing Details dialog

  7. Typ ID.format=1 (en vervang 1 door de Code die hoort bij je editie). Dit betekent dat de vraag zal getoond worden indien het format Web:Snap WebHost is (althans voor de enquête in deze worksheet).
  8. KlikSave button om de wijzigingen op te slaan.

Vergeet niet dat je de routing moet wijzigen indien je vragen verbergt waar een routing regel wordt op toegepast, of waarnaar respondenten worden geleid via routing

Controleren of je enquête de juiste inhoud toont voor verschillende toestellen

Je kan de inhoud van je enquête voor elk toestel controleren door elke editie in preview te tonen

  1. Open je enquête in  Questionnaire – Design Mode met de Questionnaire window: design mode knop.
  2. Selecteer File | Publish om het Publish Questionnaire dialoogvenster te tonen.
  3. Selecteer Output button in de linkerkolom
  4. Selecteer Preview Only als Output Method. De Preview zal een nieuw scherm openen en de betreffende editie van enquête tonen zoals ze zou verschijnen in een web browser.
  5. Klik [Publish] om die editie van de enquête te tonen op je computer. Controleer of je de juiste vragen en afbeeldingen voor deze editie hebt gebruikt. Controleer of alle routing werkt (de standaard webeditie zal een vaste breedte hebben, waarbij smartphone en tablet edities gestretched worden om te passen op het scherm)
  6. Keer terug naar Snap en wijzig de editie voor een ander toestel, door onderaan links op het betrokken tabblad te klikken.
  7. Herhaal de preview stappen om zo elke editie die je creëerde te controleren.

Tip : preview je enquête op http://www.mobiletest.me/

Je kan op het internet verschillende tools vinden die een Tablet of Smartphone levensecht nabootsen. Publish je enquête naar Snap WebHost, kopieer de URL en plak die in http://www.mobiletest.me/  om je enquête voor verschillende beeldformaten voor mobiele toestellen te testen.

Er zijn andere oplossingen beschikbaar, maar Mobile Test gebruiken wij zélf dikwijls om het responsieve gedrag van onze eigen creaties te controleren.