{"id":1339,"date":"2019-06-24T15:17:09","date_gmt":"2019-06-24T13:17:09","guid":{"rendered":"https:\/\/www.designbrandes.de\/brandesblog\/?p=1339"},"modified":"2019-08-28T18:26:33","modified_gmt":"2019-08-28T16:26:33","slug":"strukturplanung-fuer-eine-website","status":"publish","type":"post","link":"https:\/\/www.designbrandes.de\/brandesblog\/strukturplanung-fuer-eine-website\/","title":{"rendered":"Websitestruktur planen"},"content":{"rendered":"<p>An der Men\u00fcleiste einer Website erkennen Sie die Seitenstruktur. Je einfacher, desto besser: Man findet sich ohne komplexe Sitemap intuitiv zurecht.\u00a0 Besucher einer Website sind n\u00e4mlich keine Buchleser sondern Suchende, die gezielt das Passende zu ihrem Interesse finden m\u00f6chten. Das Zauberwort beim Anlegen der Seiten hei\u00dft <strong>Aufr\u00e4umen<\/strong>.<\/p>\n<h2>Die 2-Ebenen-Navigation<\/h2>\n<p>Jeder Link in der Men\u00fcleiste ist eine einzelne Seite. Aber Website-Neulinge k\u00f6nnen zun\u00e4chst die Seitentitel nicht vom Inhalt unterscheiden, legen f\u00fcr jeden Textabsatz eine neue Unterseite an und verschachteln die Men\u00fcleiste unn\u00f6tig. Wie erstellt man nun aber eine gute Seitenstruktur?<\/p>\n<p>Idealerweise hat die Men\u00fcleiste maximal 2 Ebenen: Die Hauptebene und die Unterebene. Die Hauptebene ist beim \u00d6ffnen einer Website meistens oben oder seitlich zu sehen. Wir nehmen die Beispielfirma &#8222;Bio Obstanbau M\u00fcllermeier&#8220;:<\/p>\n<p><strong>Start | <a href=\"#\">Obst<\/a> | Saft | Marmelade | M\u00fcllermeier | Kontakt <\/strong><\/p>\n<p>Die Unterebene ist erst beim Ausw\u00e4hlen eines Hauptlinks zu sehen:<\/p>\n<p><strong>Obst &gt; <\/strong><em>\u00c4pfel + Birnen + Pflaumen + Kirschen<\/em><\/p>\n<p>Das Obstbeispiel zeigt sehr sch\u00f6n, dass es bei der Struktur um das klare, eindeutige Sortieren geht. Die Unterseiten <em>\u00c4pfel, Birnen usw.<\/em> entstehen deshalb, weil es zu den Sorten noch mehr Inhalt und Informationen gibt, die nicht auf die Hauptseite passen. Wissenswertes zum biologischen Anbau kann entweder als zus\u00e4tzliche Hauptseite erg\u00e4nzt oder direkt im Textinhalt zu den einzelnen Sorten erl\u00e4utert werden. Und was Ihnen hier am Obstbeispiel ganz einfach und sinnvoll vorkommt, gilt ebenso f\u00fcr abstrakte Themen und komplexe Dienstleistungen. Klare Sortierung ist alles. Halten Sie die Hauptebene so kurz und klar wie m\u00f6glich &#8211; f\u00fcgen Sie nur dort Unterseiten hinzu, wo Umfangreiches zu erkl\u00e4ren und voneinander zu unterscheiden ist.<\/p>\n<p><strong>Das schematische Grundprinzip sieht zum Beispiel so aus:<\/strong><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1407\" src=\"https:\/\/www.designbrandes.de\/brandesblog\/wp-content\/uploads\/2019\/08\/seitenstruktur3.jpg\" alt=\"\" width=\"977\" height=\"530\" srcset=\"https:\/\/www.designbrandes.de\/brandesblog\/wp-content\/uploads\/2019\/08\/seitenstruktur3.jpg 977w, https:\/\/www.designbrandes.de\/brandesblog\/wp-content\/uploads\/2019\/08\/seitenstruktur3-300x163.jpg 300w, https:\/\/www.designbrandes.de\/brandesblog\/wp-content\/uploads\/2019\/08\/seitenstruktur3-973x528.jpg 973w, https:\/\/www.designbrandes.de\/brandesblog\/wp-content\/uploads\/2019\/08\/seitenstruktur3-508x276.jpg 508w\" sizes=\"(max-width: 977px) 100vw, 977px\" \/><\/p>\n<h3>So planen Sie die Struktur<\/h3>\n<p>Gehen Sie am besten zuerst ganz altmodisch analog vor mit Papier, Zetteln und Stift. Legen Sie leere Karten oder Papierseiten nebeneinander auf einen Tisch und schreiben Sie auf jede Karte oben den <strong>kurzen Seitentitel<\/strong> drauf. <strong>Wichtig: Kurze Links, sonst passt nicht genug in die Men\u00fcleiste.<\/strong><\/p>\n<p>Beginnen Sie mit <strong>Startseite, Firma, Kontakt<\/strong> und f\u00fcgen Sie maximal 4 weitere Themenseiten hinzu. Die Seitentitel bitte nicht zu allgemein benennen, besser sind konkrete Begriffe. &#8222;Angebot&#8220; steht auf Tausenden von Internetseiten und ist nicht unterscheidbar f\u00fcr Suchmaschinen. Wenn Sie also Akupunktur anbieten, hei\u00dft Ihr Angebote-Link nat\u00fcrlich &#8222;Akupunktur&#8220;.<\/p>\n<p>Sie haben nun eine Reihe von 6 Seiten oder Karten auf dem Tisch liegen. Notieren Sie mit Farbstift stichpunktartig die Inhalte, die auf der Seite stehen sollen. Beispiel:<\/p>\n<p><strong>Inhalt auf der Kontaktseite<\/strong><br \/>\n<span style=\"color: #993300;\"><em>Anschrift, Telefon, Mailadresse, Lageplan, \u00d6ffnungszeiten, Kontaktformular,<br \/>\n<\/em><em>2 Fotos: Hofladen und Qualit\u00e4tssiegel<\/em><\/span><\/p>\n<p>TIPP: Gehen Sie bei allen Seiten so vor und notieren Sie erstmal nur Stichpunkte auf den Karten, um zu \u00fcberblicken, wo mehr Umfang entsteht oder wo schon mit einem Satz alles gesagt ist.\u00a0 Sortieren Sie m\u00f6glichst klar zueinander, was zusammen geh\u00f6rt, keine Doppelungen, keine Wiederholungen! Wo Unterseiten n\u00f6tig werden, legen Sie kleinere Karten als senkrechte Reihe direkt unter die Hauptkarte. Auch hier notieren Sie als Stichpunkt, was eine Unterseite enthalten soll.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1406\" src=\"https:\/\/www.designbrandes.de\/brandesblog\/wp-content\/uploads\/2019\/08\/seitenstruktur2.jpg\" alt=\"\" width=\"980\" height=\"600\" srcset=\"https:\/\/www.designbrandes.de\/brandesblog\/wp-content\/uploads\/2019\/08\/seitenstruktur2.jpg 980w, https:\/\/www.designbrandes.de\/brandesblog\/wp-content\/uploads\/2019\/08\/seitenstruktur2-300x184.jpg 300w, https:\/\/www.designbrandes.de\/brandesblog\/wp-content\/uploads\/2019\/08\/seitenstruktur2-973x596.jpg 973w, https:\/\/www.designbrandes.de\/brandesblog\/wp-content\/uploads\/2019\/08\/seitenstruktur2-508x311.jpg 508w\" sizes=\"(max-width: 980px) 100vw, 980px\" \/><\/p>\n<p>Wenn der Aufbau der Seitenstruktur steht, beenden Sie die Zettelwirtschaft und \u00fcbertragen den Aufbau in eine digitale Textdatei. So entsteht eine Sitemap. In eine digitale Liste \u00fcbertragen sieht die Sitemap so aus:<\/p>\n<p><strong>Startseite<\/strong><br \/>\n<strong>Obst<\/strong> &gt; \u00c4pfel + Birnen + Pflaumen + Kirschen<br \/>\n<strong>Saft<\/strong> &gt; Naturtr\u00fcb + Gemischte + Pfandsystem<br \/>\n<strong>Marmelade<\/strong> &gt; Kompott + Gelee<br \/>\n<strong>Bioanbau<\/strong> &gt; Hofladen + Liefern + Wochenmarkt<br \/>\n<strong>M\u00fcllermeier<\/strong><br \/>\n<strong>Kontakt<\/strong><\/p>\n<p>&nbsp;<\/p>\n<h2>Wie gro\u00df ist eine Themenseite?<\/h2>\n<p>Wie lang ein Blatt Papier ist, sieht man ja, aber eine Internetseite ist theoretisch unendlich lang. Da passt viel rein! Man ist fr\u00fcher knickerig mit dem Platz umgegangen, weil das Abw\u00e4rts-Skrollen unbeliebt war, aber heute mit Touchscreen ist das kein Thema mehr und Wischen ist beliebter als Klicken.<\/p>\n<p><a href=\"https:\/\/www.designbrandes.de\/brandesblog\/gute-suchergebnisse-seo\/\">Google sieht das auch so<\/a> und mag viel Text auf einer Seite: Mit 500 W\u00f6rtern sind Sie gut dabei. Als Orientierung zur Menge empfehle ich 3\/4 oder eine ganze Wordseite in 12 Punkt-Schrift. Texte werden sehr schnell geladen, aber wenn noch Bilder hinzukommen, ist es sinnvoll, den Inhalt zu begrenzen und in Unterseiten zu portionieren.<\/p>\n<h2>Inhaltstexte schreiben<\/h2>\n<p>Das Lesen einer Website unterscheidet sich gravierend von Gedrucktem, es ist eher eine interaktive Handlungsabfolge, eine zeitliche Dramaturgie unter der Regie der Websitenutzerinnen und Besucher. Optisch nimmt man nicht von oben nach unten sondern von Gro\u00df zu Klein wahr:<\/p>\n<ul>\n<li>die ganz gro\u00dfe \u00dcberschrift mit der News<\/li>\n<li>danach fallen andere gut lesbare \u00dcberschriften ins Auge<\/li>\n<li>und erst danach der Flie\u00dftext in Abs\u00e4tzen<\/li>\n<\/ul>\n<p>Nicht nur die Internetbesucher sondern auch die Suchmachinen ben\u00f6tigen diese Gliederung mit \u00dcberschriften und Verlinkungen. Daher kann ich als Webdesignerin nicht einfach Kundentexte direkt in eine Internetseite reinsetzen, ohne selbst ausgiebig Hand anzulegen. Ihre Textlieferung ist\u00a0 Rohmaterial, das weiter bearbeitet wird. Lassen Sie mir als Webdesignerin bitte f\u00fcr suchmachinenfreundliche freie Hand, denn ich kann das. Lesen Sie noch ein paar <a href=\"https:\/\/www.designbrandes.de\/brandesblog\/texte-fuer-das-internet\/\">Tipps zu Texten f\u00fcr das Internet<\/a>\u200e<\/p>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-25 alignleft\" src=\"https:\/\/www.designbrandes.de\/brandesblog\/wp-content\/uploads\/2016\/04\/logo.png\" alt=\"logo\" width=\"55\" height=\"56\" \/><br \/>\nEine Kundeninformation von Marion Brandes Design.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>An der Men\u00fcleiste einer Website erkennen Sie die Seitenstruktur. Je einfacher, desto besser: Man findet sich ohne komplexe Sitemap intuitiv zurecht.\u00a0 Besucher einer Website sind n\u00e4mlich keine Buchleser&#8230;<\/p>\n","protected":false},"author":2,"featured_media":1390,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2,5],"tags":[],"_links":{"self":[{"href":"https:\/\/www.designbrandes.de\/brandesblog\/wp-json\/wp\/v2\/posts\/1339"}],"collection":[{"href":"https:\/\/www.designbrandes.de\/brandesblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.designbrandes.de\/brandesblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.designbrandes.de\/brandesblog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.designbrandes.de\/brandesblog\/wp-json\/wp\/v2\/comments?post=1339"}],"version-history":[{"count":6,"href":"https:\/\/www.designbrandes.de\/brandesblog\/wp-json\/wp\/v2\/posts\/1339\/revisions"}],"predecessor-version":[{"id":1465,"href":"https:\/\/www.designbrandes.de\/brandesblog\/wp-json\/wp\/v2\/posts\/1339\/revisions\/1465"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.designbrandes.de\/brandesblog\/wp-json\/wp\/v2\/media\/1390"}],"wp:attachment":[{"href":"https:\/\/www.designbrandes.de\/brandesblog\/wp-json\/wp\/v2\/media?parent=1339"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.designbrandes.de\/brandesblog\/wp-json\/wp\/v2\/categories?post=1339"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.designbrandes.de\/brandesblog\/wp-json\/wp\/v2\/tags?post=1339"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}