Webseite selber erstellen
WorkShop Teil 4: Die Inhalte

WorkShop Teil 4

Teil 4: die Inhalte

Bildformate

Die Frage ist einfach: wie groß soll ein Bild sein? Darauf gibt es 2 richtige Antworten: groß ist eine, klein die andere. Klein ist deswegen richtig, weil klein schnell bedeutet. Groß ist deswegen richtig, weil ich damit auch bei modernen riesigen Displays viele Details in ordentlichen Farben scharf sehen kann. Wie so oft lautet die Antwort eben einfach: es kommt darauf an!

Größe selbst hat ja auch eine doppelte Bedeutung: die Größe betreffend die Ausdehnung und die Größe in Form der Datenmenge (2teres müsste eigentlich Gewicht und nicht Größe heissen, aber ich fürchte mit dieser Idee kommen wir nicht weiter…).

Größe in Pixeln

Zumindest diese Frage läßt sich halbwegs genau beantworten: Ein Bild braucht nicht breiter als die Inhaltsbreite zu sein, in der es angezeigt wird. Diese Breite haben wir in den Einstellungen festgelegt oder den Standardwert von 1140 px übernommen. Ein Bild muss nur dann breiter sein, wenn es als hero eingesetzt wird oder im fullscreen, wenn es also bis zum Rand des Browserfensters oder des Bildschirmes reichen soll. 

Ein MacBook Pro mit 13″, also ein schon recht gutes Gerät, hat eine technischen Auflösung von 2560 px, die 16″-Variante hat 3072 px. Ein IPhone 8+ hat eine Querformatauflösung (bei 5,5″) von 1920 px, das IPhone 11 Pro, also das aktuelle Spitzengerät, kommt bei 6,5″ auf 2688 px).

Jedes Pixel, das ich mehr als notwendig auf den Webserver lade, ist Verschwendung, ja sogar (wenn man genau drüber nachdenkt) schädlich. Viele Bilder kommen heutzutage aus Handykameras, deren Auflösung gerne in Megapixel angegeben wird. 10 MP haben eine Seitenlänge von 3648 px, 20 MP sogar 5152 px. 

Was heißt das jetzt? So gut wie jedes Bild ist in der Rohfassung zu groß für den Einsatz auf der Webseite. Ausser es wurde in der digitalen Übermittlung schon verkleinert, WhatsApp zB. rechnet raus was nur geht, die Bilder sind undruckbar und oft auch für den Einsatz im Web schon hart an der Grenze. Auch E-Mailprogramme verkleinern Bildanhänge in der Grundeinstellung gerne. Niemand mag zu große (schwere) Bilder die nur kosten und nichts bringen. 

Dann kommt noch dazu, dass die Qualität der Hochrechnungen durch die Browser massiv zugenommen hat. Dh. wenn ein Bild eine echte Pixelbreite von 1024 hat und wir es mit 1400 px anschauen kann es sein, dass wir das nicht einmal bemerken. 

Ein praktischer Leitfaden kann also lauten: die Standardbildgröße soll die Inhaltsbreite meines Designs nicht überschreiten (also zB. 1140 px), für Bilder die einen speziellen Einsatzzweck haben werden 1600 px vermutlich ausreichen. 

Auf die dazugehörigen Bildhöhen gehe ich hier nicht näher ein, die Proportionen unterliegen ganz eigenen Gesetzen, auch die Bildschirmhöhen sind sehr unterschiedlich. Wer seinen Fokus auf Mobile Webseiten setzt und von einer hochformatigen Nutzung ausgeht hat mit den obigen Zahlen gute Anhaltspunkte.

Technische Bildformate

Wir haben im Web 5 Speicherformate zur Verfügung die für verschiedene Bildinhalte unterschiedlich gut geeignet sind. Hier eine Übersicht mit den üblichsten Anwendungen:

JPG/JPEG

Das Fotoformat. Durch Komprimierung entstehen Qualitätsverluste, keine Transparenz möglich, unbeschränkter Farbraum.

PNG

Das Logoformat. Verlustfreie Kompression bei eingeschränkter Farbraum  bei PNG 8, PNG 24 unbeschränkter Farbraum, Transparenz möglich. 

GIF

Der Oldtimer. 256 Farben (aus dem ganzen Farbspektrum), Transparenz möglich (nur ja oder nein, kein Alpha-Kanal), Animationen möglich.

Webp

Das Googleformat. Verlustbehaftete Kompression, Transparenz und Animationen möglich. Neu und noch nicht sehr verbreitet.

SVG 

Das Vektorformat. Transparenz und Animationen möglich. SVG kommen oft bei skalierbaren Icons und Illustrationen sowie Infografiken zum Einsatz.

Wer im Web publiziert wird auf jeden Fall zumindest ein Bildprogramm lernen müssen, vermutlich eher mehrere. Mein Tip hier ist die Affinity-Reihe von Serif. Die Programmreihe besticht durch ein herausragendes Preis-Leistungs-Verhältnis und ist für Mac und Windows erhältlich, tw. gibt es sogar IPad-Versionen.

Formulare

Zu den wichtigsten Funktionen einer Webseite gehören schon seit jeher Formulare. Schliesslich will ja vermutlich jeder irgendetwas vom Besucher seiner Webseite. Im einfachsten Fall ein freundliches Hallo, vielleicht auch eine Anfrage zu einem der Angebote, eine Bestellung oder was auch immer. Für einfache Anwendungen können wir das im Elementor eingebaute Formularwesen benutzen, für komplexere Ansprüche gibt es zB. Contact Form 7 oder Gravity Forms, die beide unterstützt werden.

Für unser Beispiel hier bauen wir eine Kontakt Seite, die ein Formular enthält. 

Dashboard > Seiten > Erstellen

Die Seite nenne ich Kontakt, das WordPress-Template Elementor Volle Breite stelle ich bereits jetzt ein. Dann kann man die Seite gleich veröffentlichen, ausserdem werden wir sie wie im Teil 3 dieses Workshops beschrieben ins Menü einbauen.

Website selbst erstellen Kontaktseite
Wir legen eine neue Seite an und legen gleich das WordPress-Template auf Elementor Volle Breite fest.

Auf dieser Seite baue ich jetzt über den Elementor einen Block aus der Bibliothek ein, der über einen Textblock für meine Adressdaten bzw. ein einfaches Kontaktformular verfügt. Die Textinfomationen werden entsprechend an meine Bedürfnisse angepasst. 

Kontaktseite gestaltet mit elementor
Wenn die Seite grafisch fertig ist muss ich die Funktionalität des Formulars einbauen.

Als nächstes klicken wir in den Bereich des Formulars um das Formular selber zu bearbeiten. Der erste Tab Formularfelder ist geöffnet. Der Formularname wird angepasst. Das Feld Name passt schon ganz gut, der Schalter für Pflichtfeld wird auf JA gesetzt. 

Das Feld Email wird umbenannt in E-Mail, der bei uns korrekten Schreibweise. Auch dieses Feld soll ein Pflichtfeld sein.

Das Textarea Message wird umbenannt zu Nachricht.

Im nächsten Tab Absenden Schaltfläche  ändere ich den Text auf Nachricht schicken. 

Im Tab Aktion nach dem Versenden steht Email, das ist gut so.

Der Tab Email schliesslich beherbergt Felder die über Erfolg oder Misserfolg entscheiden: An sollte eine Adresse enthalten, die mit der E-Mail etwas anfangen kann die verschickt wird.  Das Feld Antwort an kann man auf E-Mail umstellen, damit kann ich, wenn das Mail von der Homepage an mich geschickt wird, direkt im Mailprogramm antworten ohne die Mailadresse des Absenders eintragen zu müssen. 

Unter Weitere Optionen gibt es einen Schalter der Eigene Nachrichten heißt: den einschalten und die Angeboten Texte kontrollieren bzw. korrigieren.

Mit dem Aussehen bin ich nicht ganz zufrieden: ich wechsle also auf den Tab Stil, und passe hier unter Typographie die Umwandlung an. Normal ist gut, Großschreibung ist wo auch immer zu vermeiden.

Speichern und dann Seite anzeigen. Formular ausfüllen und nach erfolgreichem Versand die Inbox checken.

Formulare können schon aufgrund der Feldarten und der Anforderungen ganz schön komplex werden. Elementor hat für einen der nächsten Releases auch mehrstufige Formulare angekündigt, was dringend benötigt wird. 
Grundsätzlich sind Mails die so verschickt werden gefährdet, von Spamfiltern abgefangen zu werden. Daher sollte die Absenderadresse gültig sein, ausserdem kann man die eigene Domain in seinem Mailprogramm auf die Whitelist setzen. 

In eigener Sache:
werkform hilft dir beim Aufbau deiner Kundenbeziehungen und entwickelt für dich Feedbackformulare und andere Kontaktmöglichkeiten. Lass uns über deine Möglichkeiten reden.
Werbung

Widgets

Wie man im Detail die unterschiedlichsten Widgets einsetzt und welche Gestaltungsmöglichkeiten sich daraus ergeben wird an anderer Stellen, nämlich bei Elementor.com ausreichend erklärt. Elementor beitreibt einen eigenen Kanal auf Youtube der laufend mit neuen Videos beschickt wird. Ausserdem gibt es einen Newsletter der sehr zu empfehlen ist. Ich möchte hier also nur auf ein paar Videos verweisen, die Möglichkeiten zeigen, auf die man nicht sofort von selber kommen würde. Dringende Empfehlung: stöbern gehen. 

Das Divider Widget

Background Slideshow

Globale Widgets

Für die nächsten Überlegungen legen wir die Seite Über uns an und bauen sie im Menü ein. Dies Seite öffnen wir im Elementor. Nun wollen wir den User dazu bewegen eine Convertion durchzuführen und uns eine Anfrage zu schicken. Um ihn dazu zu motivieren bauen wir überall auf unserer Webseite verteilt CTA’s ein. CTA steht für Call To Action, es gibt auch ein schönes Widget dafür.

Website erstellen Seite
Auf einer Seite haben wir das Widget CallToAction eingebaut. Dieses wird nun gestaltet.

Nun wurde das Widget mit einem saisonalen Bild gestaltet. Es soll auf eine Frühlingsaktion verweisen. Dieses Widget soll auf mehreren Seiten und auch in Beiträgen unserer Webseite zum Einsatz kommen.

Global Wdget
Wir haben unser CTA Widget saisonal gestaltet.

Elementor hat viele gute Bearbeitungsmöglichkeiten, so können wir mit Rechtklick einfach das Widget markieren und kopieren und an einer anderen Stellen einsetzen. Der Nachteil: wenn der Frühling vorbei ist, muss ich das Widget überall dort, wo ich es eingesetzt habe, updaten. Die Lösung besteht darin, das Widget als Global zu definieren. 

Dies ist ganz einfach möglich: Rechtsklick auf den Bleistift und die Option Als Global Speichern auswählen. Dann einen sinnvollen Namen geben und speichern. Globale Widgets findet man im Tab Global der neben dem Tab Elemente steht. 

Anwendungen von Globalen Widgets werden nicht wie andere Elemente in blau, sondern orange umrahmt. Wenn wir das Widget ein 2. Mal auf der Seite einbinden sehen wir das.

 

Globale Widget
Globale Widgets können nun bearbeitet werden indem man eine Anwendung davon bearbeitet. Man kann aber so ein Widget auch wieder von Global trennen und als ganz normales Widget weiter verwenden.

Popups

Popups sind ein wenig wie Greta Thurnberg: sie nerven. Aber sie wirken – auch weil sie nerven. Es geht also darum die richtige Dosis zu finden und Popus dann anzubieten, wenn der Besucher bereit ist aus der Erfahrung, die er gemacht hat, eine Convertion zu machen, also zB. einen Newsletter zu bestellen.

Elementor kennt dir Wirkung dieses Tools und hat ein ordentliches Werkzeug zur Verfügung gestellt. 

Dashboard > Templates > Popups > Popup hinzufügen

Das kennen wir bereits im Wesentlichen. Nur das jetzt eben eine Reihe von Ideen zur Gestaltung eines Popups angeboten werden, an die wir vielleicht noch gar nicht gedacht haben. So können zB. auch Loginfenster, Social Media Buttons oder auch Wartungshinweise in Popups verpackt werden. 

Ich wähle in diesem Beispiel ein Slide-In das eine Einladung für ein Event ankündigen soll aus der Bibliothek. Die Gestaltung erfolgt wie wir es im Elementor gewohnt sind. Spannender wird es beim Speichern: die Bedingungen, zu denen das Popup gezeigt werden kann, sind vielfältig! 

Ich wähle zB., dass das Popup nur auf Single-Seiten angezeigt werden soll, und da nur auf der Startseite. Zusätzlich lege ich unter Triggers fest, dass das Popup beim Laden nach der Seite gezeigt werden soll, aber erst nach 5 Sekunden. 

Popup Speichern
Die Bedingung für das Popup ist, dass es nur auf der Startseite gezeigt werden soll.
Popup trigger
Dazu kommt eine Einblendeverzögerung von 5 Sekunden. Dh. nur Menschen die sich sehr lange auf der Seite aufhalten und zB. einen Text lesen werden das Popup zu sehen bekommen, andere nicht.

Ausserdem lege ich danach fest, dass das Popup nur auf Desktop-Rechnern zu sehen sein soll. Die verschiedenen Optionen wie zB. Animationsdauer, Überlagerungsstärke etc. sind wie bei anderen Seiten auch links unten unter dem Zahnrad versteckt.

Webseite gestalten Popup finish
5 Sekunden nach dem Laden der Startseite fährt diese Grafik von Links über den eigentlichen Seiteninhalt.
In eigener Sache:
Es gibt viele Möglichkeiten eine Webseite zur Unterstützung der eigenen Marke einzusetzen. Reden wir darüber.
Werbung

Das war’s. Beinahe – denn im 5. Teil dieses Workshops geht es um Dinge, die auch zu einer Webseite gehören: die Beobachtung und Analyse, die Vorbereitungen für Suchmaschinen und auch ein wenig um Geschwindigkeit.

Share on facebook
Facebook
Share on twitter
Twitter
Share on whatsapp
WhatsApp
Share on linkedin
LinkedIn
Share on email
E-Mail