Hängende alte Lampe
Einige hilfreiche webBAU Infos für Sie!
Eine gute Webseiten-Struktur ist die halbe Website …
Struktur ist die halbe Website, dann ist es mit einer Veröffentlichung im World Wide Web nicht mehr weit.
Versuchen Sie Ihre Website zu strukturieren.
Wie viele Seiten benötige ich, brauche ich eventuell Unterseiten?
Fangen Sie mit der Startseite der Website an:
  • 01 / Die Startseite
    Homepage
    Jede Website hat eine Seite, die als erstes aufgerufen wird, die so genannte Startseite (Home oder Homepage). Sie dient als Aushängeschild und ist die Eingangstür einer Website. Der Startseite können beliebig viele Seiten zugefügt werden. Mit der Startseite verraten Sie Ihren Besuchern, von wem die Website ist und was man dort alles finden kann. Die Startseite vermittelt einen ersten Überblick über die Website, außerdem soll sie Neugier wecken.....
    Webbau Info
  • 02 / Seien Sie neugierig
    Sich umschauen …
    Surfen Sie, bevor Sie sich an das Konzept Ihrer neuen Website machen, einige Zeit im Internet und besuchen Sie Webseiten von anderen kreativen Menschen. So werden Sie gut informiert, erhalten neue Ideen und sehen schnell, was man vielleicht besser machen kann...
    Webseiten surfen
    Vertrauen Sie meiner Erfahrung im Bereich der Webgestaltung!
  • 03 / Inhalt kommt vor Design
    Texte für die Website vorbereiten.
    Benutzen Sie für die Texte ein einfaches Textprogramm, damit Sie jederzeit Veränderungen im Text ohne großen Aufwand vornehmen können. Verzichten Sie auf aufwendige Formatierungen, wie Spalten, Tabellen oder bestimmte Schriftarten.
    Strukturieren Sie die Texte, versuchen Sie eine Überschrift (Titel) für jede Seite zu finden. Halten Sie Ihre Texte möglichst kurz und knapp, schreiben Sie in einer einfachen klaren Sprache. Lassen Sie überflüssige Informationen weg, bringen Sie Ihre Informationen auf den Punkt.

    Hilfe beim Texten
    • Wie viele (Web)Seiten kommen zusammen?
    • Benötigen Sie eine Galerie?
    • Wie viele Kategorien soll Ihre Galerie enthalten?
    • Was möchten Sie dort zeigen?
    • Planen Sie eventuell einzelne Webseiten selbst zu bearbeiten und zu aktualisieren? (CMS System)
    • Werden Sie diese Funktion mit Sicherheit nutzen?
    • Überlegen Sie genau, welche Seiten Sie dafür aussuchen.

    Nachdem das grobe Konzept vorliegt, schicken Sie mir Ihre Texte und vorhandene Bilder/Fotos als Anhang in einer Mail, per CD , oder laden Sie die Daten im schauWEB Kundenbereich hoch.
    Texte im Format TXT, als RTF-Datei oder auch als Word-Datei.
    Fotomaterial, wenn möglich, im JPG Format.
    Bitte geben Sie den Bilddateien aussagekräftige Dateinamen.
    Sehr hilfreich ist auch eine Nummerierung der Bilddateien, wie 01, 02, 03, usw.
    Bitte benutzen Sie keine Umlaute, Sonderzeichen oder Leerzeichen im Dateinamen.
    Vorschlag (Beispiel) für Dateinamen: 01_mein_bild_oel.jpg, oder 01-mein-bild-oel.jpg.

    Ich verbinde Ihren Inhalt mit dem Design. Dann ist die Zeit gekommen, um gegebenenfalls gemeinsam Veränderungen im Text, der Informationsstruktur und am Design vorzunehmen. Eine Website muss sich entwickeln!
    struktur_website
  • 04 / Navigation / Menü
    Eine Website besteht aus mehreren (Web)Seiten
    Ausnahme: OnePage / Single Page Websites
    Um zwischen den einzelnen Seiten navigieren zu können, bedarf es einer übersichtlichen Strukturierung:
    Menüführung (Hauptmenü)
    Überlegen Sie sich, ob Sie eine horizontale oder eine senkrechte Navigation bevorzugen. Auch eine Mischung aus beiden Varianten ist möglich.
    Mögliche Unterseiten können als "Drop Down Menü" (dabei klappen die Unterseiten aus dem Menü), oder wie das Hauptmenü entsprechend horizontal oder senkrecht (links oder rechts) auf der Website erscheinen.

    Hauptnavigation horizontal
    Mögliche Unterseiten erscheinen als Menüpunkte links (oder rechts) auf der Website, oder mögliche Unterseiten erscheinen ebenfalls horizontal.

    Menüführung senkrecht
    Die Hauptnavigation, sowie mögliche Unterseiten befinden sich in senkrechter Anordnung auf der Website. Entweder auf der rechten oder auf der linken Seite angeordnet.

    Drop Down Menü horizontal
    Alle Unterseiten "klappen" aus dem Hauptmenü.

    Menü-Mix
    Ein Menü-Mix ist möglich, (Macht Sinn bei größeren Websites) sollte aber mit Bedacht eingesetzt werden, um eine klare Menüführung auf der Website nicht aus dem Auge zu verlieren.

    Ihr Menü?
    Alle angesprochenen Möglichkeiten bieten die Möglichkeit einer benutzerfreundlichen Navigationsstruktur. Bei der Entscheidung für eine bestimmte Menüführung spielen oftmals persönliche Vorlieben eine Rolle. Gerne nehme ich Ihnen die Menü-Entscheidung ab.
    Ihr Menü wie gewünscht
    Lassen Sie sich von meinen Designvorschlägen überraschen!
  • 05 / Den richtigen Farbton treffen
    Webseiten und die Farbe
    Den richtigen (Farb)Ton treffen
    Der Monitor, das Betriebssystem und der verwendete Browser sind grundsätzlich für die farbliche Darstellung einer Website verantwortlich.
    Bei der Farbdarstellung einer Website ist der verwendete Monitor ein wichtiges Bindeglied. Dabei ist es normal, das unterschiedliche Monitore Farben jeweils in einem etwas anderen Farbton darstellen.
    Warum das so ist, können Sie zum Beispiel auf dieser Wikiwand Website nachlesen.

    Auf den Punkt gebracht und einfach ausgedrückt:
    • Ein schlechter Monitor = schlechte Farbwiedergabe
    • Ein guter Monitor = gute Farbwiedergabe
    HTML Farbencode
    Webseiten Farbe Auswahl
    Um möglichst eine gleichbleibende Farbwiedergabe zu bekommen, ist es technisch sinnvoll, mit bestimmten Farbtönen zu arbeiten.
    Schauen Sie sich auf dieser Website die Farben an: HTML color codes
    Bei Bedarf wählen Sie einfach gewünschte Farbtöne aus und senden mir die dazugehörige Farbnummer.
    Keine Sorge!
    Grundsätzlich können Sie sich auf mein gutes Farbgefühl verlassen!
    Wir besprechen immer vorab vorhandene Farbwünsche und Vorstellungen.
  • 06 / Bilder für die Website
    Bilder/Fotografien für die Website - Woher nehmen?
    So ganz ohne Bilder, wie Grafiken oder Fotos, kommt eine moderne Website heutzutage kaum aus. Natürlich muss bei der Gestaltung dabei berücksichtigt werden, das sich die Darstellung einer Website auf dem Handy stark auf das Wesentliche reduziert: Auf den Inhalt!
    Schreibtisch mit Laptop und Buntstiften
    Gute, professionelle ansehnliche Fotos hat man in der Regel kaum selbst, das ist man dann auf verschiedene Quellen im Internet angewiesen. Dieses Foto habe ich bei BURST gefunden.
    Niemals einfach Bilder nutzen, die man über Google irgendwo gefunden hat. Es gilt immer das Urheberrecht! Nur Bilder nutzen, an denen man ein Nutzungsrecht hat.
    Vielleicht hat man einen guten Hobby-Fotografen in der Bekanntschaft, der geeignete Fotos machen kann, oder einfach mal im Ort schauen, ob es einen Fotoclub gibt.
    Verwendete Bilder müssen auf einer Website angegeben werden!
    Die Lizenzbedingungen können recht unterschiedlich sein.

    Links
    Grafiken und Bilder aller Arten gibt es bei kostenpflichtigen Portalen wie:
    123RF
    iStockphotos
    shutterstock
    stockunlimited
    Unbedingt auf die Preise und die Lizenzbedingungen achten.

    Überwiegend kostenloses Material gibt es hier:
    pixabay - Meine Empfehlung!
    picjumbo
    PEXELS
    Unsplash
    kaboompics
    SplitShire
    pigs.de
    stockig
    skitterphoto
    freephotos.cc
    BURST
    Leerer Bilderrahmen
    Bildformate/Bildgrößen
    Achten Sie bei der Bildauswahl auf geeignete Formate.
    Gut geeignet sind meist waagerechte Formate, auch gerne etwas schmaler, wenn man auf einer Website mit Bildern im oberen Bereich arbeiten möchte. (Banner Bilder)
    Geeignete Ausschnitte auswählen gehört selbstverständlich zu meiner Arbeit als Webgestalter.

    Die Bildgröße liegt pauschal bei maximal 1500 Pixel (ca. 53 cm) in der Breite. Kleiner geht es immer, aber damit die Qualität nicht leidet, sollten Bilder immer in einer maximalen Größe vorliegen. Zu kleine Bilder lassen sich ohne sichtbaren Qualitätsverlust nicht vergrößern.

    Zusammen gefasst: Bilder/Fotografien lieber etwas größer, als zu kleine Formate. Verkleinern geht immer, aber umgekehrt ist es meist schwierig, ohne einen sichtbaren Qualitätsverlust.

    Fotomaterial, wenn möglich, im JPG Format.

    Bitte geben Sie Ihren Bilddateien gerne aussagekräftige Dateinamen.
    Sehr hilfreich wäre auch eine Nummerierung der Bilddateien, wie 01, 02, 03, usw.
    Bitte benutzen Sie keine Umlaute, Sonderzeichen oder Leerzeichen im Dateinamen.
    Vorschlag (Beispiel) für Dateinamen: 01-mein-bild.jpg, oder 01-mein-bild-banner.jpg.

    Kein Problem, wenn Ihnen das alles nicht viel sagt. Es sind nur Tipps und Hinweise. Mit meiner Erfahrung im Rücken, bekommen wir immer etwas gutes hin.
  • 07 / Responsive Webdesign
    Responsive Webdesign
    Beim Responsive Webdesign wird das Layout einer Website flexibel gestaltet, um auf Desktop-Computern, Tablets und Smartphones eine gleichbleibende Benutzerfreundlichkeit zu bieten. Somit kann der Inhalt auch auf mobilen Geräten schnell und unkompliziert vom Besucher aufgenommen werden.Monitore mit Responsive Webdesign
    Der Begriff Responsive Webdesign bedeutet im übertragenen Sinne "reagierendes Webdesign“, weil die Navigations- und die Inhaltselemente einer Website sich der Bildschirmauflösung des mobilen Endgeräts anpassen.
    3 wichtige Punkte bei der Gestaltung im Responsive Webdesign:
    1. Der Content-Bereich muss für Besucher ohne horizontales Scrollen oder zoomen lesbar sein
    2. Links müssen so weit voneinander entfernt platziert sein, sodass sie bequem mit dem Finger zu bedienen sind
    3. Der Text muss ohne Zoom lesbar sein
    Keine Unterstützung mehr für den Internet Explorer von Microsoft
    Ab April 2015 werden von mir alle Webseiten in der Technik des Responsive Webdesign erstellt.
    Responsive Webdesign benötigt moderne Browser!
    Der Internet Explorer gehört schon lange nicht mehr dazu.
    Ab Januar 2016 werden die IE-Versionen 7, 8, 9 und 10 von Microsoft nicht mehr unterstützt. Lediglich der Internet Explorer 11 wird hinsichtlich der Sicherheit noch gepflegt. Der IE11 ist in Windows 8.1 und 10 noch enthalten.

    Es wird daher von mir, bei der Erstellung von Webseiten, keine Unterstützung mehr für den Internet Explorer in den Versionen 7, 8, 9 und 10 von Microsoft geben.
    Ich rate Ihnen, wenn Sie aus nachvollziehbaren (!?) Gründen beim Internet Explorer bleiben müssen, mindestens die Internet Explorer Version 11 zu nutzen.
    Mit Windows 10 ist 2015 ein neuer Webbrowser von Microsoft veröffentlicht worden: Microsoft Edge
    Edge löst den Internet Explorer ab!
    Mit Edge wagt Microsoft einen Neuanfang. Das Programm agiert unter Windows 10 als Standard-Browser, der im Vergleich zum IE etwas schlanker wirkt.
    Browser Edge
    Browser Firefox
    Browser Chrome
    Browser Opera
    Browser Safari
    Browser Vivaldi
    Es gibt viele Alternativen zum Internet Explorer und Edge von Microsoft: Firefox, Google Chrome, Opera, Safari von Apple, oder auch Vivaldi.
  • 08/ Eine Bitte am Schluss!
    Machen Sie sich bitte mit den Bedienelementen eines Browsers vertraut!
    Was ist ein Browser?
    Der Browser ist ein Computerprogramm, das genutzt wird um Webseiten im Internet betrachten zu können. Beliebte Browser sind zum Beispiel Firefox, Google Chrome, Internet Explorer und Safari von Apple. Diese genannten Browser können in verschiedenen Versionen vorliegen, abhängig vom verwendeten Computer Betriebssystem. Es ist immer ratsam, die aktuellste Version eines Browsers zu nutzen.

    Schauen Sie sich die sichtbaren Bedienelemente eines Browser an.Browser Bedienelement Beispiel
    Die wichtigsten Bedienelemente sind: Adresszeile, sowie die Symbole "Zurück", "Vorwärts", "Neu laden" und auch "Stopp".
    Je nach Browser unterscheidet sich der Sitz der Symbole, jeder Browser ist von der Aufmachung etwas anders, aber vom Prinzip her arbeiten alle Browser gleich und sind somit ähnlich bedienbar.

    Beim Erstellen einer Website, oder bei Änderungen an einer Website kann es vorkommen, das Ihr Browser Ihnen nicht die aktuelle und richtige Darstellung Ihrer Website präsentiert. Dann kommt das wichtige Symbol "Neu laden" ins Spiel ..........

    Kurze vereinfachte Erläuterung:
    Ein Browser speichert jede besuchte Website im Cache (Gedächtnis) ab.
    Beim nächsten Besuch wird die Seite aus dem Cache geladen.
    Nun kann es vorkommen, je nach Browser oder Betriebssystem, das ein Browser Aktualisierungen auf einer Website nicht mitbekommt, da ein Browser immer große Teile einer Website aus dem "Gedächtnis" holt ........ gerade wenn man seine eigene Website oft besucht ............. dann muss man das Symbol "Neu laden" anklicken. Dadurch wird die Website im Browser aktualisiert und somit der aktuelle Stand angezeigt.

    "Seite neu laden" ist sehr wichtig, gerade wenn man Webseiten wiederholt besucht
    Browser Symbol Refresh
    Ein wichtiges Browser-Symbol: "Neu laden" (auch "Seite aktualisieren" / "Refresh")
Meine Tipps und Hinweise für Ihre neue Website.
Eine individuelle und neue Website zu erstellen kann sich für einen Laien unter Umständen zu Beginn als recht schwierig herausstellen. Da geht es um das passende Webdesign und die richtige und funktionale Webgestaltung sowie um aussagekräftige Inhalte und ein bisschen mehr. Doch wer sich schon einmal diverse Webseiten angeschaut hat, dem wird aufgefallen sein, dass ein gut strukturierter Internetauftritt nicht nur die persönlichen Fakten und Aussagen auf den Punkt bringt, sondern zudem dem User eine benutzerfreundliche Oberfläche bietet, auf der er sich gern umschaut und sich seine Informationen herausnimmt.
Eine gut durchdachte Struktur Ihrer neuen Website ist also schon die halbe Miete, oder in diesem Fall die halbe Website. Nutzen Sie meine hilfreichen Tipps und Hinweise, für die Erstellung Ihrer ganz persönlichen Webseiten. Gern stehe ich Ihnen mit meinen Erfahrungswerten, meinem fachmännischen Wissen und meinen kreativen Ideen hilfreich zur Seite, wenn es um Ihr Webdesign und Ihre Webgestaltung geht. Ich berate Sie jederzeit und gern zum webBAU und Ihrem ganz individuellen Internetauftritt, der Sie und Ihre Angebote immer in das richtige Licht rückt und Ihnen den problemlosen Kontakt mit Ihrer Zielgruppe ermöglicht.
Notizzettel
Ihre Entscheidung für eine eigene Webseite ist nun gefallen. Gut so. Nach der Wahl des Web-Designs (das betrifft die Struktur des Gesamt-Auftritts sowie die Verknüpfung der einzelnen Web-Seiten untereinander), ist der Text – Ihr Text – das nächste, woran Sie denken müssen.

Wie wollen Sie sich und Ihr Projekt darstellen?
Was wollen (oder sollten) Sie schreiben?
Und nicht zuletzt: Wie?
Auf Wunsch biete ich Ihnen auch hierfür eine Hilfestellung.
Ein Texter, eine Texterin schaut sich Ihre Entwürfe an und bespricht Ihre Ideen.
Gemeinsam mit Ihnen oder auch – nach Absprache – selbstständig werden Texte für Ihren eigenen Web-Auftritt gestaltet.
Der Preis wird individuell vereinbart.
Einige hilfreiche Tipps für Sie!
webBAU Infos auf schauWEB.de