Beitragsbild Blog Nr. 3: Hansueli Guyer baut ohne Holz

Webseite erstellen – Hansueli Guyer baut ohne Holz

Der Weg zur eigenen Webseite

Hansueli Guyer’s Webseite ist nun schon seit ein paar Monaten online. Noch immer hat er Freude daran und ist stolz auf sein Werk. Er hat einen heute „üblichen“ Aufbau für eine KMU Firmenwebseite. Angefangen von einer Startseite mit Bildern, Erbrachte Dienstleistungen, Neuigkeiten der Firma, Erwähnung der Aktivitäten der Sponsoren bis hin zu ein paar Zeilen „über uns“. Eines Tages kommt Meier Urs, Hansueli’s Kumpel aus der freiwilligen Feuerwehr, auf ihn zu und meint: „Sag mal, ist es eigentlich normal dass deine Webseite auf meinem Handy so komisch aussieht?“ Hansueli, selber Besitzer eines Smartphones, staunt nicht schlecht als er seine Seite sieht. „Sieht wirklich nicht so aus wie auf meinem Computer“, antwortet er knapp und geht nach Hause. Dort fängt Hansueli an zu forschen, warum seine Seite nicht so aussieht wie auf seinem Computerbildschirm.
Da kommt seine Frau Ruth ins Büro gestürzt und fragt: „Was hast du gemacht? Warum erhalten wir eine Rechnung über 300 Franken? Was hast du genau bestellt?“ Hansueli versucht seine Frau zu beruhigen, er habe nichts bestellt, es handle sich sicher nur um einen Irrtum. Als Ruth das Büro verlässt, schaut sich Hansueli die hohe Rechnung etwas genauer an und erschrickt – es ist eine Rechnung des Urhebers der Bilder die er im Netz kopiert und auf seiner Homepage eingefügt hat.

 

Drehen wir die Zeit etwas zurück und fangen dort an, wo sich Hansueli für ein Webseiten Tool entschieden hat und was er hätte berücksichtigen sollen – Schritt für Schritt.

Bauen - Modell in sieben Schritten zum erfolgreichen Webauftritt

Auswahl des Webseitentools / CMS

Seien wir ehrlich – Hansueli hat sich hinreissen lassen, fast so wie manche Frauen sich von Schmuck oder Schuhen hinreissen lassen. Er hat sich vorab nicht informiert, auf was er alles achten sollte. Heute gibt es unzählige Tools und Anbieter, da kann man sehr leicht den Überblick verlieren. Dennoch sollte man die wichtigsten Begriffe kennen und darauf bedacht sein, dass das Tool oder auch das Template (Vorlagen die mit Inhalt gefüllt werden können) die Anforderungen erfüllt. Auch hier ist die Planung Ihres Online Auftritts relevant. Sehen Sie hierzu unseren letzten Blogbeitrag.

Überlegen Sie sich also im Vorfeld was Sie auf Ihrer Webseite präsentieren möchten und Listen Sie diese auf. In Hansueli’s Fall könnten dies Beispielsweise die folgenden Punkte sein:

 

  • Kontaktformular / Kontaktangaben / Google Map Karte einbauen
  • Dienstleistungsbeschreibungen mit Bildern
  • Verlinkung von gesponserten Vereinen und deren aktuelle Events
  • Startseite mit grossem Bild, welches nach mehreren Sekunden wechselt, sowie der Möglichkeit Texte einzufügen und zu animieren (Slider)

Diese Punkte zeigen die offensichtlichen Bedürfnisse von Hansueli. Jedoch geht genau da das „nicht Offensichtliche“ meist vergessen. Bei der Wahl Ihres zukünftigen Webseitentools sind zwingend die folgenden Minimalkriterien zu prüfen:

 

  • Keine Werbung des Anbieters
  • Eigene Domain verwenden (zum Beispiel www.guyer-holz.ch)
  • Responsives Design – zur optimalen Darstellung der Webseiten auf verschiedenen Bildschirmgrössen
  • Einfache Suchmaschinenoptimierung – zur Beschriftung und Beschreibung der einzelnen Seiten, Bilder und so weiter
  • Einfache Pflege der Inhalte

Bei fast allen Anbietern gibt es verschiedene Packages die man beziehen kann. Von gratis, zu einmaligem Anschaffungspreis bis zu monatlicher Miete. Lesen Sie ganz genau, was in den Gratispackages inklusive ist. Ein kleiner Tipp: Das günstigste Angebot ist meist fehl am Platz. Oftmals kann keine eigene Domain gewählt werden oder es hat überall Werbung des Anbieters drauf. Je nach Nutzen der Webseite mag das kein Problem und auch nicht störend sein. Vielfach stört es aber… Und dies besonders bei professionellen Webseiten für KMU’s. Daher besser ein Package kaufen.

 

Wählen Sie für sich ein Tool, womit Sie sich wohl fühlen und den Überblick haben.

Webseite mit WordPress erstellen

Wir persönlich arbeiten mit WordPress, was von Haus aus keine Packages anbietet sondern mit Templates und Plugins erweitert werden kann. Die Benutzeroberfläche, Werkzeuge und Plugins sind gut verständlich. Weiterer Vorteil zu älteren Programmen – es braucht kein Programm dazu. Lediglich eine Internetverbindung und ein Browser.

Auch ohne Programmierkenntnisse sind professionelle Webauftritte und auch Webshops damit möglich. Der Einstieg ist zwar etwas schwieriger als bei Anbietern wie Jimdo oder Wix – jedoch kann sich der initialaufwand lohnen.

Schauen wir uns an wie Sie vorgehen sollten.

 

1. Auswahl des Templates

WordPress selbst, aber auch Drittanbieter, bieten unzählige Templates / Vorlagen an. Googeln Sie am Besten. In Hansueli’s Fall können Suchanfragen wie „WordPress Template Schreiner“ oder auch in Englisch „WordPress Template carpenter“ zum Erfolg führen.
Schauen Sie sich verschiedene Templates an und überlegen sich dabei, was ihnen gefallen könnte. Hierbei geht es nicht um Bilder oder Farben. Es geht lediglich um die Struktur. Ist das Menu oben, rechts oder auf der linken Seite, gefällt mir das Logo mittig oder doch eher rechts, wie ist die Aufteilung der Startseite und den Unterseiten. Es ist schwierig sich nicht von den Inhalten der Templates ablenken oder gar beeinflussen zu lassen. Versuchen Sie wirklich, sich nur auf das Raster, das erste Erscheinungsbild, die Menuführung und mögliche Aufteilungen zu achten. Schauen Sie sich auch die Unterseiten an, alles, was das Template hergibt. Überlegen Sie sich, wie Sie ihre Inhalte einfügen und wo was hinkommen könnte. Farbe, Schriften, wo was platziert wird – all das kann geändert werden.

Nehmen Sie sich Zeit für Ihre Wahl. Wenn Sie sich für ein Template entschieden haben, warten Sie noch mit dem Kauf! Lesen Sie zuerst, was das Template alles beinhaltet – welche Funktionen sind integriert, wie schnell ist es und ist es responsive? Wir selber haben dabei die Erfahrung gemacht, dass es sich lohnt ein kostenpflichtiges Template anstelle eines kostenlosen Templates zu wählen. Und kostenpflichtig heisst nicht gleich hunderte von Franken.

Wenn alles geboten wird was Sie benötigen, dann kaufen Sie es. Ansonsten schauen Sie am besten weiter – Sie werden sicherlich fündig.

 

2. Hosting und Domain kaufen

Vielleicht besitzen Sie schon eine Domain und wissen auch bereits, wo Sie das Hosting beziehen können. In diesem Fall können Sie diesen Schritt überspringen.

Was ist ein Hosting?
Hosting Provider stellen die benötigte Infrastruktur an (Webserver, Datenbanken usw.) damit eine Webseite im Internet verfügbar ist.

Was ist eine Domain?
Dies ist die Internetadresse (http://gujer-holz.ch) unter welcher die Webseite aufgerufen werden kann. Diese wird auch für die e-Mailadressen verwendet.

Überlegen Sie sich Ihre Wunschdomain und prüfen Sie, ob diese noch erhältlich ist. Verschiedenste Hoster bieten die Möglichkeit zur Prüfung und Kauf des Domainnamens. Ganz einfach geht das beispielsweise bei Hostpoint. Domainname eingeben und fertig:

Screenshot Domain prüfen und kaufen
3. Neues WordPress Template installieren

Die WordPress Umgebung ist aktiv, das Template ist gekauft. Melden Sie sich nun in WordPress an und beginnen Sie mit der Installation Ihres Templates.
Viele Template Anbieter bieten Installationsanleitungen. Im Grundsatz funktioniert das aber immer ähnlich:

Screenshot Theme installieren

In WordPress auf den Menupunkt Design –> Themes klicken

Screenshot Wordpress Theme hochladen Theme hochladen

Neues Theme hinzufügen indem Sie auf den Knopf „Theme hochladen“ klicken

Screenshot Theme auswählen

Das heruntergeladene Template auswählen

Screenshot Theme aktivieren

Abwarten bis das Template installiert ist und „Aktivieren“ klicken

Screenshot Wordpress Theme installiert

Und schon fertig!

Je nach Template werden Sie neue Menupunkte im WordPress Adminbereich finden. Dort können Sie meist Ihr Template individualisieren – Farben ändern, Schriften und Schriftgrössen wählen, Kopfbereich verändern oder sogar einen Demo-Inhalt herunterladen.

 

Mit dieser Basis können Sie sich jetzt an den Inhalt wagen. Beginnen Sie ihre Seiten zu erstellen und Ihre Webseite so zu gestalten, wie Sie es gerne hätten. Tipps und Tricks zu Inhalten und der Erstellung von Seiten erhalten Sie im nächsten Blogbeitrag.

Auf was Sie sonst noch achten müssen

Responsive Design

Heute sind wir fast überall online – dabei spielt die Bildschirmgrösse keine Rolle mehr. Ob Mobile, Tablet oder Smart-TV – überall können wir surfen. Daher ist es wichtig, dass alles was wir online stellen, auch auf allen Geräten:

 

  • gut aussieht
  • lesbar ist
  • funktioniert

 

Kurzum: Responsive Design heisst im übertragenen Sinn, dass die Webseite anpassungsfähig ist. Egal auf welchem Gerät die Webseite geöffnet wird – sie sieht immer gut aus und ist immer funktional. Sie passt sich also an die Bildschirmgrösse an.

 

Wenn Sie sich für ein Tool oder Template entscheiden, achten Sie auch den Begriff „Full Responsive“ . Wenn Sie unerfahren in Sachen Webdesign sind und ihre Seite selber auf alle Geräte anpassen müssen, kostet Sie das viel zu viel Zeit. Nutzen Sie die Hilfe, die bereits in einem Template integriert ist.

 

Bilder

Das Internet ist kein Selbstbedienungsladen. Das hat Hansueli leider auf die harte Tour lernen müssen. Seien Sie vorsichtig bei Bildern und auch bei Texten – sie dürfen nicht alles einfach kopieren. Es gibt viele Anbieter, die Bilder zur kommerziellen Verwendung zur Verfügung stellen. Manchmal gratis, meistens jedoch kostenpflichtig. Aber auch hier gibt es gute und günstige Anbieter. Lassen Sie sich die Bilder lieber etwas kosten – die „Rechnung danach“ wird um ein vielfaches höher sein. Verletzen Sie das Urheberrecht keinesfalls. Wenn Sie unsicher sind, dann wenden Sie sich besser an den Inhaber und fragen, ob Sie die Bilder verwenden dürfen.

 

Private Bilder dürfen Sie selbstverständlich verwenden. Seien Sie aber auch hier vorsichtig – sollten beispielsweise Personen oder Kinder drauf sein (ausser Ihnen), fragen Sie die betroffenen Personen um deren Erlaubnis, das Bild zu verwenden. Vorsicht ist bei Kinder geboten, das ist ein heikles Thema und wenn möglich wählen Sie andere Bilder.

 

Bildergrösse

Als nächstes widmen wir uns der Bildergrösse. Sie brauchen für Ihre Webseite keine Bilder in Druckauflösung (300 dpi). Für Bilder im Web reicht eine Auflösung von 72 dpi. Dies war jedoch mal. Inzwischen hat sich einiges geändert und viele Bildschirme haben eine Auflösung von über 100 dpi. Heutzutage spielt es keine Rolle mehr, ob ein Bild mindestens 72 dpi gross ist oder mehr. Von zu grossen Bildern ist jedoch abzuraten! Wenn Sie ein Bild auf Ihre Webseite stellen welches 6 MB gross ist (ja, das funktioniert), dann wundern Sie sich bitte nicht, warum es so lange dauert bis das Bild geladen ist. Komprimieren Sie ihre Bilder bevor Sie es auf Ihre Webseite stellen. Sie können gut mit 72 dpi arbeiten, oder auch ein bisschen mehr.

 

Retina

Retina ist heute ein gängiger Begriff. Viele Templates haben Retina bereits integriert. Für Sie heisst das, Sie laden ein Foto in ihrer gewünschten Grösse hoch und für Retina verdoppeln Sie einfach die Grösse. Retina heisst nicht, dass die die Auflösung ändern müssen. Verdoppeln Sie lediglich die Grösse (Höhe und Breite) und das Bild wird in der gleichen Grösse wir ihr „Standardbild“ dargestellt. Aber dafür schärfer.

 

Schriften

Natürlich macht es Spass, verschiedene Schriften (Fonts) auszuprobieren und anzuwenden. Aber auch hier ist Vorsicht geboten – wenn es keine Webfont ist, dann wird Ihre Lieblingsschrift in eine Standartschrift umgewandelt. Es gibt eine riesen Auswahl an Webfonts – nur schon Google Fonts bietet eine grosse und breite Auswahl an. Und dies erst noch gratis! Vielfach haben Sie auch eine Auswahl in ihrem gekauften Template integriert welche Sie verwenden dürfen. Sollten Sie eine Webfont herunterladen so achten Sie auch hier darauf, dass Sie diese kommerziell nutzen dürfen und nicht nur für private Zwecke. Eine Webseite ist öffentlich und somit nicht privat.

 

Sie sehen also, es ist nicht schwierig eine Webseite zu bauen und online zu stellen – aber man sollte dennoch ein paar Punkte berücksichtigen. Im kommenden Blogbeitrag in zwei Wochen werden wir das Thema „Inhalt“ genauer anschauen. Auch hier werden wir Ihnen aufzeigen, auf was geachtet werden soll und vertiefen einige Beispiele.