onlineumfragen.com Experten-Blog

Tipps und Tricks unserer Survey Consultants für Profis und solche, die es werden wollen.

Kategorien
  • Allgemein (23)
  • Auswerten (Auswertungen, Exporte) (12)
  • Durchführen (Teilnehmer, Versand, Feldphase) (15)
  • Erstellen (Fragetypen, Codes in Fragen) (51)
Frühere Beiträge
  • Juni 2022
  • März 2022
  • November 2021
  • Oktober 2020
  • Juni 2020
  • Oktober 2019
  • Juli 2019
  • August 2018
  • April 2018
  • Februar 2018
  • September 2017
  • Mai 2017
  • April 2017
  • März 2017
  • November 2016
  • September 2016
  • April 2016
  • Februar 2016
  • Oktober 2015
  • September 2015
  • Februar 2015
  • Januar 2015
  • März 2014
  • Februar 2014
  • Juli 2013
  • April 2013
  • Dezember 2012
  • Oktober 2012
  • Mai 2012
  • Januar 2012
  • Dezember 2011
  • September 2011
  • Juli 2011
  • Mai 2011
  • April 2011
  • Januar 2011
  • November 2010
  • Oktober 2010
  • August 2010
  • Juni 2010
  • Mai 2010
  • April 2010
  • März 2010
  • Februar 2010
  • Dezember 2009
  • November 2009
  • Oktober 2009
  • September 2009
  • Juni 2009

Tag Archives: Design

Getting Responsive II – Responsives Headerbild / Logo & Textfelder

By Raffael Meier, CTO onlineumfragen.com in Durchführen (Teilnehmer, Versand, Feldphase), Erstellen (Fragetypen, Codes in Fragen) 15. Februar 2018 0 Comment

Heute schauen wir uns an, wie man für die eigene Umfrage ein Headerbild resp. eine eigenes Log erstellen kann, welches responsive ist. Das heisst, das Headerbild passt sich automatisch der Bildschirmgrösse an, wird also auf einem Smartphone oder Tablet anders dargestellt, wie auf einem breiten Office-Bildschirm.

Als ersten erstellen wir das Bildmaterial für das Header-Bild.

Unser Header-Bild soll nicht ein einfaches Headerbild bestehend aus nur einer Grafik sein, sondern soll den erweiterten Modus nutzen, mit dem man bis zu 3 Bilder als Header selbst arrangieren kann.

Unser Header soll am Ende so aussehen:

Dabei soll der Bereich zwischen «me.» und dem rechten Bild flexibel sein, d.h. sich verbreitern oder verschmälern, je nachdem, wie breit der Bildschirm des Umfrageteilnehmers ist.

Dazu teilen wir das Bild oben in drei Einzelbilder auf (nachfolgend Bild 1, Bild 2 und Bild 3 genannt). Dies machen wir mit einem Bildbearbeitungsprogramm (kostenlos z.B. Irfanview, wir nutzen z.B. gerne Fireworks von Adobe, oder auch Photoshop etc. wird viel genutzt). Ein hervorragender online-Editor ist auch https://pixlr.com/editor/

Dazu erstellen wir erst das Bild wie oben (als Ganzes), mit einer Breite von 1100 Pixel. Dies ist eine gute Ausgangsgrösse für einen Office-Bildschirm.

Dann schneiden wir das Bild in drei Teile (Achtung, der schwarze dicke Rand gehört nicht zum Bild, den haben wir hier im Blog hinzugefügt, damit man besser sieht, wo die Bilder aufhören):

Bild 1: (linker Teil, wir nennen es später Bild 1A)

Bild 2: (mittlerer Teil, der sich horizontal dehnen kann/soll!)
(hier muss darauf geachtet werden, dass kein Motiv zu sehen ist, welches sich sichtbar verzieht. Ein Balken oder eine Linie ist ideal, da hier ein «Auseinanderziehen» des Bildes auf eine beliebige Breite das Motiv optisch nicht verzerrt (das ist quasi der Trick).

Bild 3: (rechter Teil)

Wir erstellen aber auch gleich noch eine zweite Version des Headers, auf Basis des ersten, der aber beim ersten Bild (Bild 1), linker Teil, eine kleinere Version des Motivs enthält. Das sieht dann so aus:

 

Hier also nochmals die beiden Bilder im Vergleich:

Sie sehen schon, dass bei der zweiten Version des Headers das zweite Bild (der mittlere Teil) sich auf Grund des kleineren Motivs im linken Teil deutlich stärker zusammenpressen lässt, weil viel mehr «leerer» Raum vorhanden ist.

Bei der zweiten Version schneiden wir ebenfalls die drei Bilder aus, wobei wir hier nur das erste benötigen. Dieses «ersetzt» dann später das erste Bild der ersten Version.

Also Bild 1b sieht dann so aus:

 

Die drei Bilder 1A, 2, und 3 laden wir nun unter «Fragebogen > Aussehen / Eigenes Logo > Kopfzeile erstellen» (resp. Kopfzeile ändern) hoch. Wir wählen dabei den dritten Modus in der untersten Zeile, bei dem Bild 1 und 3 nicht verändert werden, und Bild 2 je nach Bildschirmbreite automatisch gedehnt wird.

Wir merken uns zudem dem Dateinamen des ersten Bildes, nach es hochgeladen wurde.

In unserem Beispiel ist dies kundenlogos/head373266276.jpg

Dann laden wir Bild 1B (die zweite Version des ersten Bildes links) unter «Fragebogen > Bilder, Sound/Video, PDF» hoch.

Wir merken uns auch hier den Dateinamen, hier also demosport_1b.jpg

Jetzt fügen wir unter «Fragebogen > Eigenes CSS» folgenden Code ein:

 

Der Code lautet also:

@media (min-width: 881px) {
 #kopfzeilemainbild1 {
 content: url(kundenlogos/head373266276.jpg);
 }
}
@media (max-width: 880px){
 #kopfzeilemainbild1 {
 content: url(kundenbilder/demosport_1b.jpg);
 }
}

Der erste Teil definiert, welches Bild an der ersten Position (links) erscheinen soll, wenn das Browserfenster von der Breite her 881px oder grösser ist.

Der zweite Teil definiert, welches Bild erscheinen soll, wenn das Browserfenster maximal 880 Pixel beträgt (oder eben kleiner ist, d.h. Smartphones, etc.)

 

Damit tauscht das System vollautomatisch das Bild aus, sobald die Browserfenster-Breite den Wert 880 Pixel unter- oder überschreitet. Je nach dem wird links das «grössere» oder das «kleinere» Logo angezeigt. Der Rest der Kopfzeile passt sich ebenfalls automatisch an, vor allem das mittlere Bild, welches immer so breit skaliert wird, dass die drei Bilder nahtlos nebeneinander stehen und 100% des Browserfensters ausfüllen.

 

Auf einem Office-Bildschirm oder Laptop sieht das so aus (Browserfenster-Breite hier ca. 1300 Pixel):

In einem kleinen Browserfenster oder Tablet sieht das dann so aus (Browserfenster-Breite hier ca. 950 Pixel). Man sieht schön, wie sich Bild 2 zusammengezogen hat, d.h. es ist nicht mehr so breit wie oben. (Bild 2 skaliert sich ja automatisch, wie im erweiterten Modus des Logo-Uploads definiert).

Auf einem Smartphone oder Browser mit Breite unter 880 Pixel wird nun zusätzlich das erste Bild gegen die «kleine Version» des Logos ersetzt. Der Header lässt sich jetzt noch deutlich mehr zusammenpressen und wirkt immer noch aufgeräumt und sauber.

 

Damit dies reibungslos funktioniert, stellen wir unter «Fragebogen > Aussehen/Eigenes Logo» noch bei den Breiten der Fragedarstellung folgendes ein:

Die Maximal-Breite gibt an, ab welchem Wert der Header nicht mehr weiter auseinandergezerrt werden soll. Statt, dass ab 1100 Pixel das Bild 2 noch weiter horizontal gedehnt wird, fügt das System nun rechts und links von der Umfrage einen Rand ein, so dass die Umfrage dann maximal 1100 Pixel breit ist und mittig erscheint. Dies ist meist auch methodologisch sinnvoll, da z.B, Tabellenfragen oder Antwortbatterien schwerer lesbar sind, wenn diese noch weiter horizontal ausgebreitet werden.

Der Wert «Minimal-Breite» muss auf einen Wert gesetzt werden, z.B. bis min. 300px responsive, damit die Maximal-Breite nicht als fixe Breite 1100 Pixel sondern als Maximalwert eingerichtet wird, die das System auch unterschreiten darf. Sonst hat man ein fixes, statisches Layout, welches sich nicht anpasst.

 

In einigen Fällen, wenn zum Beispiel offene Textfelder genutzt werden, bei denen eine bestimmte Breite in Zeichen eingestellt ist (z.B. Feld ist 100 Zeichen breit) kann auch – was wir hier für eine optimale responsive Darstellung empfehlen – der Wert 100% responsive eingestellt werden. Sonst werden Textboxen zu Elementen, die wegen der fixen Breite allenfalls das Layout horizontal «sprengen» können (der Header kann sonst nicht schmaler werden als die Textboxen breit sind).

Dies stellt man direkt bei entsprechenden Frage ein, unter «Fragebogen > [Frage x] ändern» und dann rechts unten bei «Breite in Zeichen».

Und hier noch ein Video, wie sich der Header nun verändert, wenn das Browserfenster verkleinert und vergrössert wird.

Natürlich sind wir mit unserem Stundensatz von 140 Euro gerne für Sie da, um Umfragen professionell mit allen gewünschten Design- und Responsiveness-Features auszurüsten und Sie bei der Umsetzung zu unterstützen. Unsere Umfrageprofis sind in der Lage, praktisch jedes Layout Ihrer Vorlagen erfolgreich in kurzer Zeit nachzubauen.

https://blog.onlineumfragen.com/wp-content/uploads/2018/02/2018-02-15_19-52-14.mp4

Auf einem Mobiltelefon (hier ein extrem kleiner Viewport eines «alten» Smartphones) kann dann die Umfrage z.B. so aussehen:

 

Jetzt teilen:

  • Print
  • Twitter
  • Facebook
  • LinkedIn
  • WhatsApp
  • Skype
  • Pinterest
  • Tumblr
  • Reddit

Like this:

Like Loading...

Getting Responsive – Umfragen für alle Devices (inkl. Tables, Smartphones, PCs, etc.)

By Josef Jutz, CEO onlineumfragen.com in Durchführen (Teilnehmer, Versand, Feldphase), Erstellen (Fragetypen, Codes in Fragen) 14. Mai 2017 0 Comment

Umfragen sind automatisch auf allen Geräten nutzbar. Über die rein technische Anpassungsfähigkeit der Fragetypen und des Layouts hinaus stellt sich die Frage aber auch immer methodologisch.

  • Sind die im Fragebogen verwendeten Fragen, Antworten, Texte, Bilder usw. für verschiedene Geräte geeignet? (Z.B. kann eine offene Frage, die z.B. nach den Bilanzzahlen des letzten Jahres fragt, nicht an einer Bushaltestelle oder im Restaurant beantwortet werden, sondern erfordert vielleicht den Zugriff auf Dokumente, die nur im Büro liegen.)
  • «Sprengen» diese schon aus inhaltlichen Gründen (Textmenge, Darstellungsart, Komplexität der Aufgabe) den Rahmen? (Nur wenige Menschen haben Lust, auf einem Smartphone lange Lückentexte zu füllen oder ein ausführliches Feedback zu Ihren Führungskräften einzutippen, wobei die «Autokorrektur» oft noch das ihrige dazu beiträgt, die Qualität der Texte und die Teilnahmemotivation zu reduzieren.)
  • Sind die Fragen geeignet, die Teilnahmemotivation auch auf mobilen Geräten zu «erhalten»?
  • Ist das Risiko für Sie kein Problem, dass Teilnehmende abbrechen, wenn der Bus an die Bushaltestelle fährt, der Kellner einkassiert, der Freund oder die Freundin nach Hause kommt, man am Schalter an die Reihe kommt, etc.?
  • Darf die Umfrage «nebenbei» erledigt werden? Ist die Konzentration auf die Umfrage nicht unabdingbar? Oder kann man sie während des Essens, im Wartezimmer des Physiotherapeuten, etc. etc. ausfüllen?
  • Braucht die Umfrage keine Recherchen, die auf einem PC möglich sind, aber auf einem Smartphone oder Tablet (meist abseits des Arbeitsplatzes) nicht?

Diese und weitere Überlegungen sind auf alle Fälle anzustellen.

 

Maximal-Breite und Minimal-Breite / Umfrage einmitten

Im Admin-Bereich können Sie unter «Fragebogen > Aussehen/Eigenes Logo» den Punkt «Maximale Breite Fragedarstellung» mit der Option «Umfrage einmitten» auf «MaxBreite fix, zentriert» stellen. Sie haben dann zwei Breiteneinstellungen:

a) Maximal-Breite Fragebereich, z.B. hier 920px

b) Minimal-Breite (Standard ist «aus (MaxBreite, fix)»)

Die erste Einstellung «Maximal-Breite Fragebereich» ist eine fixe Zahl, die die Breite des Fragebereichs angibt. Sobald aber bei «Minimal-Breite» ein Wert (ausser  «aus (MaxBreite, fix)») erfasst ist, wird die Maximal-Breite Fragebereich als Maximal-Breite (und nicht mehr als verpflichtende, fixe Breite) interpretiert und die «Minimal-Breite» als Mindestbreite.

Beispiele:

Einstellung fixe Breite: «Maximal-Breite Fragebereich» 920 Pixel. «MaxBreite fix, zentriert», Minimal-Breite auf «aus».

Einstellung responsive, Breite min. 480px, max. 920px: «Maximal-Breite Fragebereich» 920 Pixel. «MaxBreite fix, zentriert», Minimal-Breite auf «480px».

2017-05-14_09-37-11

Die Einstellung responsive, Breite min. 480px, max. 920px  sieht dann am Bildschirm so aus:

Auf einem grossen Bildschirm wird die Maximal-Breite genommen, d.h. der Fragebereich ist 920 Pixel breit. Rechts und links davon wird gleichmässig ein Rand eingefügt, damit der Bereich zentriert ist und bleibt.

2017-05-14_09-38-31

Wird der Bildschirm verkleinert oder die Umfrage auf einem kleinen Bildschirm wie Smartphone oder Mini-Laptop oder Tablet etc. aufgerufen, werden zuerst die Ränder rechts und links verkleinert, solange der fixe Bereich von 920 Pixel (Fragebereich) noch «Platz» hat:

2017-05-14_09-38-41

Wird der Bildschirm weiter verkleinert oder auf einem noch kleineren Gerät angezeigt, wird selbst der Fragebereich so weit verkleinert, bis im Extremfall die «Minimal-Breite» erreicht ist, d.h. in diesem Falle mindestens 480 Pixel. Das sieht dann so aus.:

 

2017-05-14_09-38-53

Damit kann das Verhalten des Fragebereichs noch genauer gesteuert werden. Benötigen Sie weitere responsive Funktionen? Gerne sind wir Ihnen bei der Umsetzung Ihres Designs behilflich! Kontaktieren Sie uns unter info@onlineumfragen.com – wir helfen Ihnen gerne.

 

Und hier geht’s zum zweiten Teil: Getting Responsive II – Headerbild & Textfelder

Jetzt teilen:

  • Print
  • Twitter
  • Facebook
  • LinkedIn
  • WhatsApp
  • Skype
  • Pinterest
  • Tumblr
  • Reddit

Like this:

Like Loading...
Neuste Kommentare
  1. Raffael Meier - onlineumfragen.com GmbH zu Tabellenfrage mit Zusatzspalte2. Dezember 2021

    Sie können unter "Fragebogen > Aussehen / Eigenes Logo" und dort unter "Eigene CSS" die Standardklasse "tabspaltentitel" anpassen: .tabspaltentitel {…

  2. Claudia Carduck zu Tabellenfrage mit Zusatzspalte8. Juni 2020

    Wie kann ich die Schriftgröße der Titel der Spalten (im Beispiel "erste/zweite Spalte") vergrößern?

  3. Josef Jutz, CEO onlineumfragen.com zu Smiley-Skala umpolen14. September 2017

    Super nützlich, danke, das hatte ich selbst schon mal suchen müssen ;-)

  4. Josef Jutz, CEO onlineumfragen.com zu Rücklaufraten bei Umfragen – eine Metaanalyse11. April 2016

    Eine nette Art, einen Backlink zu schinden ;-) Sei's drum ;-) Selbstverständlich sind bei uns mobile Geräte genau so als…

  5. Soraya Lachapelle zu Rücklaufraten bei Umfragen – eine Metaanalyse30. Oktober 2015

    Super Beitrag, danke für die wertvollen Tipps.

Blog abonnieren

Geben Sie Ihre E-Mail-Adresse ein, um diesen Blog zu abonnieren, d.h. um eine Benachrichtigung zu erhalten, wenn neue Beiträge geposted werden.

Hilfe - Kontakt - onlineumfragen.com
  • Highlights & Tutorials für den Einstieg in onlineumfragen.com
  • Kontakt zu unserem Experten-Team
  • onlineumfragen.com
Proudly powered by WordPress. Theme: DW Minion by DesignWall.
%d bloggers like this: