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.

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