Bau der eigenen Website 2.0

Kommen wir zum Bau der eigenen Website, also zur Praxis.

Zuvor nochmal die Checkliste für das was vorher erledigt sein sollte.

Du kennst die wichtigsten Begriffe und weisst worauf du achten solltest!

Du hast einen Web Hoster gewählt, und besitzt eine Domain mit SSL Zertifikat

Egal ob kostenlose Subdomain Variante oder kostenpflichtiges Komplettpaket mit Support. Auch egal ob wordpress oder anbieterbaukasten…

Du weißt was du brauchst /Möchtest

Wird es die einfache Homepage, der E-Commerce Shop oder eine Blog-Page. Wie viele Seiten benötigst du ..was muss alles unbedingt mit rein.

Inhalt grob entworfen

Auf der Seite geht es um …… , das müssen andere ÜBER …… Wissen. Diese Themen möchte ich ansprechen. Hast die jeweiligen Keywords recherchiert und passende Bilder organisiert und komprimiert.

Bist deiner Verpflichtung nachgekommen

Du hast dich um eine Datenschutzerklärung und um ein Impressum gekümmert. Falls nicht, hier zum kostenlosen Generatoren.

Impressum oderIMPRESSUM

Datenschutz oder Datenschutz

Ganz gleich für welchen Anbieter oder welcher Baukasten System ihr euch entschieden habt, oder was um was für eine Homepage/ Blog-Page es sich handelt. Ich gehe den Aufbau mit euch durch.

Die Hauptseite bzw. Startseite !!

Ist eure Visitenkarte, das Aushängeschild! Das Erste, was der Besucher sieht.

Wenn der erste Eindruck ihn nicht überzeugt, verlässt er mit hoher Wahrscheinlichkeit, ohne sich irgendwas durchzulesen, die Seite wieder.

Deswegen ist es sinnvoll im ersten abschnitt genau zusagen,
Um was es geht. Stelle dein Projekt, deine Seite oder Firma kurz vor. Lockere deine Texte mit passenden Bildern auf.

Das könnte so aussehen

Dein Bild

Egal ob es dein Logo, dich selbst, deine Firma oder das Thema symbolisiert, Es ist dein Aushängeschild. Achte auf Bildrechte (Lizenzen) komprimiere es (40-60 KB.) und schreibe was genau auf dem Bild zusehen ist (am besten sollte dein Keyword)in die alt-Text Zeile.

Willkommen auf

H2 Überschrift, es macht nichts das sie vor der H1 Überschrift steht.

Firmenname /Seitenname/ Blockname

H1 Überschrift, die sollte auch dein keyword drin haben.

…..name… ist …….,ein Beispielsatz um euch den Aufbau des ersten abschnitt zu zeigen und die Seite mit gutem SEO auszustatten.

Kurzer Textabschnitt, in dem euer Keyword nochmal am Anfang aufgegriffen sein sollte und ihr die Funktion der Seite oder Firma kurz darstellt. Ihr könnt auch Eckdaten mit einbauen. Wie gründung der firma oder so

Bei den meisten Baukästen gibt es Bausteine, die dir ein fertiges Layout (Vorlage) für einzelne Abschnitte geben, dieser wird z.B als Hero bezeichnet..
Natürlich kannst du so einen Hero Baustein an jede beliebige Stelle deiner Seite setzen. Allerdings solltest du darauf achten, dass die Seite nur eine einzige H1 Überschrift hat. Bei einem Hero Baustein ist immer eine H1 Überschrift gesetzt, das müsstest du also ändern.

Fertige Bausteine oder Seitenlayouts machen, den Bau der eigenen Website wesentlich einfacher!

Oft empfiehlt es sich wirklich auf fertige Layouts vom Profi zurückzugreifen. Die meisten Baukästen bieten ein paar kosten lose Seitenlayouts oder Bausteine an. Im Video zeige ich dir einige Templates(vorlagen) von Elementor. Zwar sind nicht alle kostenlos, aber ich nutze nur kostenlose Versionen der Plugins und mit der Auswahl kommt man gut zurecht.

Solche vorlagen zu nutzen, hat viele vorteile

1. Sie wirken professionell

Das Erscheinung-Bild einer Seite ist sehr wichtig und ist meist ausschlaggebend, wie sehr wir dem vertrauen, was dort steht.

2. sind weniger zeit intensiv

Es geht viel schneller, die vorlagen zu bearbeiten und mit deinen texten und Bildern zu füllen als alles selbst zusammenzuschustern, sodass es gut aussieht

3. Häufig sind sie Responsiv eingestellt

Heißt, sie sind so eingestellt, dass sie auch am Handy gut aussehen. Das ist wirklich wichtig.viele menschen gehen mit dem handy online und was auf dem großen pc monitor gut aussieht,sieht noch lange nicht auf dem schmalen handydisplay gut aus

4..Sie können beliebig genutzt werden

Nahezu alles kann verändert werden, Schrift, Anordnung, es können Abschnitte gelöscht & mehrere Vorlagen kombiniert werden.

Dass sie beliebig genutzt und verändert werden können, räumt auch gleichzeitig das, was gegen solche Vorlagen, spricht aus. Klar, wer eine Vorlage 1zu1 nutzt, büßt an Individualität ein. Besonders kostenlose Vorlagen werden oft genutzt. Deswegen können solche Vorlagen dafür sorgen, dass sich eine Website nicht mehr von anderen Unternehmen abhebt.

Damit sich deine optisch abhebt, solltest du genutzte vorlagen ausreichend verändern. Nutze andere Schriften /Farben /Abstände. oder nutze Teile von verschieden layouts

Hier ist es vielleicht sinnvoll, etwas herumzuprobieren. Wenn dir etwas gut gefällt für eine andere Seite kann man meistens die Anordnung auch als eigenes Template speichern.

Bitte, sei ehrlich zu dir selbst!

Bei meinem ersten Bau meiner Startseite habe ich komplett auf Vorlagen verzichtet, habe stunden lang alles fein säuberlich selbst gebastelt. Meine Seite selber ohne irgendwelches vor Wissen gebaut nach meinen Vorstellungen man was war ich stolz!

Die Wahrheit ist, die Seite war Scheiße, zu bunt, chaotisch. Optisch total ausladend.ZU lange Text abschnitte mit extrem wenig Bildern.

Man konnte sehen, das ich kein plan von der Materie hatte. Das ist auch nicht mit Geschmacksache, schön zureden. Darum sei ehrlich zu dir selbst.

Hättest du jemanden für kleines Geld beauftragt, wärst du mit dem Ergebnis zufrieden?

Ich persönlich mag es, wenn man sieht, dass ich als NICHT PROFIE, meine Website gebaut habe. Ich finde für meine Zwecke, ist das unperfekte ideal, es hat einen eigenen Charme und spiegelt meine Aussage wider, bringt mir also Authentizität.

Wie professionell eure Seite aussehen sollte, hängt von eurem Projekt ab. Stell dir die Frage, wärst du Leser oder Kunde, würde dich die Website ansprechen, wärst du daran interessiert, die Firma zu beauftragen oder den Blog zu lesen?

Finde deinen eigenen Style, und baue deine Marke/Website lückenlos in diesem Style auf!

Damit dein Projekt im Gesamtbild stimmig ist, und ehrlich rüberkommt, solltest du deinen eigenen Stil finden und dem treu bleiben. Dabei spielt auch die verwendete Schriftart eine Rolle.

z.b. ein fachlicher Fakten-Text der förmlich geschrieben ist (unpersönlich) sollte nicht in Schnörkelschrift dargestellt werden. Das wirkt unecht. Andersrum ist Arial auch nicht ideal für einen emotionalen Text!

Sinnvoll ist es, sich auf wenige Schriftstile bzw. Schriftarten zu beschränken,(sonst wirkt alles sehr schnell, unprofessionell & chaotisch, gleichzeitig sollten sich unterschiedliche -Textarten voneinander abheben Praktisch könnte das so aussehen

Überschriften
H1

[Audiowide 35px]

z. B. könntest du die Schrift und Fabe aus dem Logo aufgreifen oder eine Schrift, die die Aufmerksamkeit auf sich zieht.

[Auch H2/H3 Audiowide 24px]

Informationen /Haupttexte

Starre Informationen oder deine Normalgentextabschnitte gestaltetest du nach gängigen Standards [Arial 16px]

Meinungen/Eingebungen

Persönliche Gedanken, Schlussfolgerungen oder neben Handlungen [Comic soon 17px]

Achtung!!
Solltet ihr wie ich Google Schriften (Google Fonts) nutzen, solltet ihr auf jeden Fall ein Plugin installieren _ " Self-Hosted Google Fonts "

Sonst könntet ihr aus Datenschutz gründen abgemahnt werden! Das kann teuer werden.
Aber so bleibt ihr DSGVO-konform!

Leider kenne ich nur für WordPress eine einfache Lösung.

wer also einen Anderen baukasten nutzt,sollte Seine genutzten schriftarten von google runterladen und auf seinem Ftp server speichern. Das ist leider Nichts für anfänger!

Das A&O alle Schriften müssen gut lesbar sein!

Es gibt sogenannte web-sichere Schriften. z.b. Arial (sans-serif) · Verdana (sans-serif) · Tahoma (sans-serif) · Trebuchet MS (sans-serif) · Times New Roman (serif). Diese Schriften werden in jedem Browser auf jedem System gleich angezeigt und sind allgemein gut zu lesen.

Leider unterscheiden sich diese Schriften voneinander kaum, wirken eher nichts-sagend. Was bei emotionalen Texten unvorteilhaft sein kann. Aber das kommt immer auf das Projekt selbst an.

Egal für welche Schrift du dich entscheidest; deine Schrift sollte angemessen groß sein und ein hohen, Kontrast zum Hintergrund aufweisen, damit deine Texte zum Lesen einladen.

In letzter Zeit stoße ich immer wieder auf graue Texte auf weißen hintergrund

Solche texte, sind grauenvoll zu lesen & machen keinen Spaß.Der kontrast von hintergrund und schrift würde ich sogar als wichtiger wie die schrift größe einstufen

Da es im Browser leicht möglich ist, ohne großen Aufwand etwas zu zoomen und sich so die Schrift schnell vergrößern lässt. Der Kontrast lässt sich nicht so einfach umstellen. trozdem sollte der Leser nicht zoomen müssen

Selbst bin ich ein Fan von Schriften der Kategorie Handschrift Nutze hauptsächlich google-Fonts. z.b. Handlee Im Schriftschnitt Bold und in Größe 20 wie ich hier in diesem Blogartikel für die Texte genutzt habe.

Ich finde, die Schrift passt zu mir und meiner Aussage ist auch bei längeren, Text-abschnitten einfach zu lesen. Die meisten Menschen nutzen Google, also wird die Seite bei den meisten so angezeigt wie es soll.Auch sind mir jedenfalls keine Probleme bei anderen systemen bekannt!

Die Responsive schon beim Bauen der Website beachten.

Generell solltet ihr zwischendurch kontrollieren, ob eure Seite auch auf dem Handy gut aussieht und lesbar ist. Desto öfter ihr das nach Änderung kontrolliert, desto weniger müsst ihr ändern. Denn leider wirken sich manche Änderungen nicht nur auf die Responsive Ansicht aus, sondern auf das generelle Erscheinungsbild.

Wenn ihr die Seite am PC Monitor komplett fertig habt .. ihr findet sie perfekt und ihr kontrolliert erst dann die Responsive, müsst etwas ändern und plötzlich rutscht der Text 2 cm runter. Ist nicht gesagt, dass andere abschnitte mit herunterrutschen. Wenn es ganz blöd läuft, müsstet ihr alles wieder abändern, weil man sonst texte nicht mehr lesen kann.

Kontakt Daten

Anja Busczynsky alias A.B.

Hünxer straße 337
46537 Dinslaken

(+49) 1763 325879837 (mailbox)
kunst.von.a.b@gmail.com (E-Mail)

Bau der eigenen Website 2-0