<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	xmlns:media="http://search.yahoo.com/mrss/" >

<channel>
	<title>Webdesign &#8211; Andreas Stocker</title>
	<atom:link href="https://www.andreasstocker.at/tag/webdesign/feed/" rel="self" type="application/rss+xml" />
	<link>https://www.andreasstocker.at</link>
	<description>Digital Business Mentor</description>
	<lastBuildDate>Tue, 06 May 2025 22:03:30 +0000</lastBuildDate>
	<language>de</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.9.4</generator>

<image>
	<url>https://www.andreasstocker.at/wp-content/uploads/2020/07/cropped-STO-Logo-neu-Favicon-32x32.png</url>
	<title>Webdesign &#8211; Andreas Stocker</title>
	<link>https://www.andreasstocker.at</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>DB Podcast Season 2 / Folge 03 &#8211; Deep Dive: Fokus statt Feuerlöschen – Wie du dein Business endlich entspannter steuerst</title>
		<link>https://www.andreasstocker.at/db-podcast-season-2-folge-03-deep-dive-fokus-statt-feuerloeschen-wie-du-dein-business-endlich-entspannter-steuerst/</link>
					<comments>https://www.andreasstocker.at/db-podcast-season-2-folge-03-deep-dive-fokus-statt-feuerloeschen-wie-du-dein-business-endlich-entspannter-steuerst/#respond</comments>
		
		<dc:creator><![CDATA[]]></dc:creator>
		<pubDate>Sun, 04 May 2025 10:47:18 +0000</pubDate>
				<category><![CDATA[Digital Business]]></category>
		<category><![CDATA[Podcast-Digital Business]]></category>
		<category><![CDATA[Webdesign]]></category>
		<guid isPermaLink="false">https://www.andreasstocker.at/?p=13693</guid>

					<description><![CDATA[Nachdem Lisa &#38; Diggy uns gezeigt haben, warum Klarheit und Struktur im Business entscheidend sind, geht es jetzt darum, wie du gezielt Kommunikation und Workflows so aufbaust, dass sie dich im Alltag wirklich entlasten. Ich zeige dir:&#8211; Warum klare Kommunikation der Schlüssel zu weniger Missverständnissen und reibungsloseren Abläufen ist&#8211; Wie du smarte, schlanke Workflows entwickelst [&#8230;]]]></description>
										<content:encoded><![CDATA[



<figure class="wp-block-image size-large"><img fetchpriority="high" decoding="async" width="1024" height="658" src="https://www.andreasstocker.at/wp-content/uploads/2025/05/BP_DBPodcast_S02F03-1024x658.jpg" alt="" class="wp-image-13699" srcset="https://www.andreasstocker.at/wp-content/uploads/2025/05/BP_DBPodcast_S02F03-1024x658.jpg 1024w, https://www.andreasstocker.at/wp-content/uploads/2025/05/BP_DBPodcast_S02F03-300x193.jpg 300w, https://www.andreasstocker.at/wp-content/uploads/2025/05/BP_DBPodcast_S02F03-768x494.jpg 768w, https://www.andreasstocker.at/wp-content/uploads/2025/05/BP_DBPodcast_S02F03-600x386.jpg 600w, https://www.andreasstocker.at/wp-content/uploads/2025/05/BP_DBPodcast_S02F03.jpg 1120w" sizes="(max-width: 1024px) 100vw, 1024px" /><figcaption class="wp-element-caption">DB Podcast Season 2 / Folge 03 &#8211; Strategie wird Alltag &#8211; wie Lisa mit Diggy Fokus, Teamspirit und Flexibilität verbindet</figcaption></figure>



<p><strong><strong>Nachdem Lisa &amp; Diggy uns gezeigt haben, warum Klarheit und Struktur im Business entscheidend sind, geht es jetzt darum, wie du gezielt Kommunikation und Workflows so aufbaust, dass sie dich im Alltag wirklich entlasten.</strong></strong></p>



<span id="more-13693"></span>



<p><strong>Ich zeige dir:<br></strong>&#8211; Warum klare Kommunikation der Schlüssel zu weniger Missverständnissen und reibungsloseren Abläufen ist<br>&#8211; Wie du smarte, schlanke Workflows entwickelst – passend zu deinem Business und deinem Team<br>&#8211; Welche Fragen du immer stellen solltest, bevor du Aufgaben verteilst<br>&#8211; Wie kleine Rituale und transparente Prozesse für mehr Leichtigkeit und Wachstum sorgen<br>&#8211; Und warum es nicht darum geht, mehr zu reden – sondern besser zu steuern</p>



<p><strong>Diese Folge ist für dich, wenn du …</strong><br>mehr Struktur, aber keine Bürokratie willst<br>Zusammenarbeit leichter gestalten möchtest – ob im Team oder mit Dienstleister:innen.<br>und endlich wieder Zeit und Fokus für die wichtigen Aufgaben haben willst</p>



<p>Denn echte Klarheit entsteht nicht durch noch mehr To-do-Listen – sondern durch durchdachte Kommunikation und sinnvoll gelebte Abläufe.</p>



<p>Hol dir heute deinen Fahrplan für ein entspannteres, wirkungsvolleres Business.<br>Praktisch, umsetzbar, auf den Punkt.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.andreasstocker.at/db-podcast-season-2-folge-03-deep-dive-fokus-statt-feuerloeschen-wie-du-dein-business-endlich-entspannter-steuerst/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>DB Podcast Season 2 / Folge 02  &#8211; Strategie wird Alltag &#8211; wie Lisa mit Diggy Fokus, Teamspirit und Flexibilität verbindet</title>
		<link>https://www.andreasstocker.at/db-podcast-season-2-folge-02/</link>
					<comments>https://www.andreasstocker.at/db-podcast-season-2-folge-02/#respond</comments>
		
		<dc:creator><![CDATA[]]></dc:creator>
		<pubDate>Sun, 27 Apr 2025 13:50:43 +0000</pubDate>
				<category><![CDATA[Planung & Konzeption]]></category>
		<category><![CDATA[Digital Business]]></category>
		<category><![CDATA[Podcast-Digital Business]]></category>
		<category><![CDATA[Webdesign]]></category>
		<guid isPermaLink="false">https://www.andreasstocker.at/?p=13663</guid>

					<description><![CDATA[In der zweiten Folge der neuen Staffel begleiten wir Lisa durch die nächste Etappe ihrer Unternehmerinnenreise: Sie hat eine Strategie – aber jetzt geht es darum, sie wirklich im Alltag zu leben. Du erfährst, wie Lisa und ihr kleines Team ihren ersten Sprint-Review meistern, wie kleine Rituale wie der tägliche Emoji-Check-in für Fokus sorgen, und [&#8230;]]]></description>
										<content:encoded><![CDATA[



<figure class="wp-block-image size-large"><img decoding="async" width="1024" height="658" src="https://www.andreasstocker.at/wp-content/uploads/2025/04/BP_DBPodcast_S02F02B-1024x658.jpg" alt="" class="wp-image-13702" srcset="https://www.andreasstocker.at/wp-content/uploads/2025/04/BP_DBPodcast_S02F02B-1024x658.jpg 1024w, https://www.andreasstocker.at/wp-content/uploads/2025/04/BP_DBPodcast_S02F02B-300x193.jpg 300w, https://www.andreasstocker.at/wp-content/uploads/2025/04/BP_DBPodcast_S02F02B-768x494.jpg 768w, https://www.andreasstocker.at/wp-content/uploads/2025/04/BP_DBPodcast_S02F02B-600x386.jpg 600w, https://www.andreasstocker.at/wp-content/uploads/2025/04/BP_DBPodcast_S02F02B.jpg 1120w" sizes="(max-width: 1024px) 100vw, 1024px" /><figcaption class="wp-element-caption">DB Podcast Season 2 / Folge 02  &#8211; Strategie wird Alltag &#8211; wie Lisa mit Diggy Fokus, Teamspirit und Flexibilität verbindet</figcaption></figure>



<p><strong>In der zweiten Folge der neuen Staffel begleiten wir Lisa durch die nächste Etappe ihrer Unternehmerinnenreise: Sie hat eine Strategie – aber jetzt geht es darum, sie wirklich im Alltag zu leben.</strong></p>



<span id="more-13663"></span>



<p>Du erfährst, wie Lisa und ihr kleines Team ihren ersten Sprint-Review meistern, wie kleine Rituale wie der tägliche Emoji-Check-in für Fokus sorgen, und was passiert, wenn mal nicht alles nach Plan läuft. Und genau da liegt die Stärke: Lisa lernt, flexibel zu reagieren, ohne ihre Richtung zu verlieren – und Diggy zeigt, wie eine Strategie nicht starr bleibt, sondern wächst.</p>



<p><strong>Diese Episode zeigt dir:</strong></p>



<ul class="wp-block-list">
<li>Wie du mit Sprints &amp; Retrospektiven in kleinen Schritten Großes erreichst</li>



<li>Warum Fehler wertvolle Lernmomente sein können</li>



<li>Wie du mit einfachen Ritualen Strategie in den Alltag integrierst</li>



<li>Was das Rose-Bud-Thorn-Format mit Teamkultur zu tun hat</li>



<li>Und wie du deine Ziele bei Veränderungen klug weiterentwickelst</li>
</ul>



<p>Eine Geschichte für alle, die nicht nur planen, sondern auch ins Tun kommen wollen – mit Gelassenheit, System und einem klaren Blick fürs Wesentliche.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.andreasstocker.at/db-podcast-season-2-folge-02/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>DB Podcast Season 2 / Folge 01  &#8211; Wachstum braucht Richtung – wie Lisa mit Diggy zur Unternehmerin wird</title>
		<link>https://www.andreasstocker.at/db-podcast-season-2-folge-01-wachstum-braucht-richtung-wie-lisa-mit-diggy-zur-unternehmerin-wird/</link>
					<comments>https://www.andreasstocker.at/db-podcast-season-2-folge-01-wachstum-braucht-richtung-wie-lisa-mit-diggy-zur-unternehmerin-wird/#respond</comments>
		
		<dc:creator><![CDATA[]]></dc:creator>
		<pubDate>Tue, 22 Apr 2025 08:56:22 +0000</pubDate>
				<category><![CDATA[Planung & Konzeption]]></category>
		<category><![CDATA[Digital Business]]></category>
		<category><![CDATA[Podcast-Digital Business]]></category>
		<category><![CDATA[Webdesign]]></category>
		<guid isPermaLink="false">https://www.andreasstocker.at/?p=13643</guid>

					<description><![CDATA[Willkommen zurück bei Lisa &#38; Diggy – deiner erzählten Reise in ein modernes, digitales Unternehmertum. Vielleicht erinnerst du dich: Im Dezember hat Lisa, damals noch als Einzelkämpferin, erste Schritte gemacht. Mit Unterstützung von Diggy, ihrem digitalen Wegbegleiter, hat sie Ordnung ins Chaos gebracht, Prozesse sortiert – und gemerkt, wie viel leichter der Arbeitsalltag werden kann, [&#8230;]]]></description>
										<content:encoded><![CDATA[



<figure class="wp-block-image size-large"><img decoding="async" width="1024" height="658" src="https://www.andreasstocker.at/wp-content/uploads/2025/04/BP_DBPodcast_S02F01_opt-1024x658.jpg" alt="" class="wp-image-13644" srcset="https://www.andreasstocker.at/wp-content/uploads/2025/04/BP_DBPodcast_S02F01_opt-1024x658.jpg 1024w, https://www.andreasstocker.at/wp-content/uploads/2025/04/BP_DBPodcast_S02F01_opt-300x193.jpg 300w, https://www.andreasstocker.at/wp-content/uploads/2025/04/BP_DBPodcast_S02F01_opt-768x494.jpg 768w, https://www.andreasstocker.at/wp-content/uploads/2025/04/BP_DBPodcast_S02F01_opt-600x386.jpg 600w, https://www.andreasstocker.at/wp-content/uploads/2025/04/BP_DBPodcast_S02F01_opt.jpg 1120w" sizes="(max-width: 1024px) 100vw, 1024px" /><figcaption class="wp-element-caption">Digital Business Podcast Season 2 / Folge 01 – Wachstum braucht Richtung – wie Lisa mit Diggy zur Unternehmerin wird</figcaption></figure>



<p><strong>Willkommen zurück bei <em>Lisa &amp; Diggy</em> – deiner erzählten Reise in ein modernes, digitales Unternehmertum.</strong></p>



<p><strong>Vielleicht erinnerst du dich: Im Dezember hat Lisa, damals noch als Einzelkämpferin, erste Schritte gemacht. Mit Unterstützung von Diggy, ihrem digitalen Wegbegleiter, hat sie Ordnung ins Chaos gebracht, Prozesse sortiert – und gemerkt, wie viel leichter der Arbeitsalltag werden kann, wenn man Digitalisierung nicht nur als Technik, sondern als Teil einer echten unternehmerischen Entwicklung versteht.</strong></p>



<p><strong>Heute, ein paar Monate später, ist Lisa nicht mehr allein. Ihr Business wächst. Sie hat ein kleines Team, neue Ideen – und neue Herausforderungen.</strong></p>



<span id="more-13643"></span>



<p>Und genau hier geht es jetzt weiter: Jeden Monat nimmt dich Lisa mit in einen der 14 Bereiche der Digitalisierung. Von Strategie bis Automatisierung, von Kommunikation bis Skalierung.</p>



<p>Was dich erwartet? Zwei Perspektiven:<br>Zuerst die Geschichte – einfach erzählt und inspiriert vom echten Alltag.<br>Und danach der Deep Dive mit mir: konkrete Tipps, Erfahrungen und Impulse, wie du das Gehörte in deinem eigenen Business umsetzen kannst.</p>



<p>Nicht als Theorie. Sondern als Reise. Zum Mitfühlen, Mitdenken – und vielleicht sogar Mitmachen.</p>



<p>Erlebe jetzt, wie es Lisa jetzt geht und welche neuen Herausforderungen vor ihr liegen.</p>



<h2 class="wp-block-heading">Wachstum braucht Richtung – wie Lisa mit Diggy zur Unternehmerin wird</h2>



<p>Mit Unterstützung von Diggy entwickelt Lisa ihre erste Digitalstrategie: eine klare Vision, messbare Ziele, realistische Zeitpläne und ein System für Verantwortung im Team. In fünf kurzen Episoden erlebst du, wie aus einem wachsenden Business ein strukturiertes Unternehmen wird – Schritt für Schritt, praxisnah und inspirierend.</p>



<h2 class="wp-block-heading"><strong>Was du aus dieser Folge mitnimmst:</strong></h2>



<ul class="wp-block-list">
<li>Warum Wachstum ohne Richtung teuer werden kann</li>



<li>Wie du eine Vision formulierst, die wirklich trägt</li>



<li>Wie SMART-Ziele dir helfen, Fokus zu behalten</li>



<li>Was das RACI-Prinzip ist – und wie du damit Klarheit im Team schaffst</li>



<li>Warum Reflexion, Pufferzeiten und kleine Rituale deine Strategie lebendig halten</li>
</ul>



<p>Eine Folge für alle, die raus wollen aus dem Reagieren – und rein in ein bewusst gestaltetes, digitales Business.</p>



<p><strong>Mitten aus dem Alltag. Und ganz ohne Druck.</strong></p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.andreasstocker.at/db-podcast-season-2-folge-01-wachstum-braucht-richtung-wie-lisa-mit-diggy-zur-unternehmerin-wird/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Das richtige Tool zur Website Erstellung (Alternativen zu Dreamweaver, Muse und WordPress)</title>
		<link>https://www.andreasstocker.at/das-richtige-tool-zur-website-erstellung/</link>
					<comments>https://www.andreasstocker.at/das-richtige-tool-zur-website-erstellung/#comments</comments>
		
		<dc:creator><![CDATA[]]></dc:creator>
		<pubDate>Thu, 12 Mar 2020 09:57:39 +0000</pubDate>
				<category><![CDATA[Planung & Konzeption]]></category>
		<category><![CDATA[Umsetzung]]></category>
		<category><![CDATA[Dreamweaver]]></category>
		<category><![CDATA[Muse]]></category>
		<category><![CDATA[Responsive Webdesign]]></category>
		<category><![CDATA[Tools]]></category>
		<category><![CDATA[Webdesign]]></category>
		<category><![CDATA[WordPress]]></category>
		<guid isPermaLink="false">https://www.andreasstocker.at/?p=4065</guid>

					<description><![CDATA[Mit welcher Technik und mit welchem Tool zur Website Erstellung soll ich arbeiten? Wo und wie betreibe ich meine Website? Egal welches Tool wir betrachten. Adobe Dreamweaver, Adobe Muse (mittlerweile aufgelassen), WordPress mit diversen Pagebuildern oder auch Tools wie Webflow, Pinegrow und BLOCS. Alle haben die Möglichkeit, dass damit Websites erstellt werden können. Welches Programm [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p><strong>Mit welcher Technik und mit welchem Tool zur Website Erstellung soll ich arbeiten? Wo und wie betreibe ich meine Website?</strong></p>



<p><strong>Egal welches Tool wir betrachten. Adobe Dreamweaver, Adobe Muse (mittlerweile aufgelassen), WordPress mit diversen Pagebuildern oder auch Tools wie Webflow, Pinegrow und BLOCS. Alle haben die Möglichkeit, dass damit Websites erstellt werden können.</strong></p>



<p>Welches Programm ist aber jetzt die beste Wahl und warum gibt es überhaupt so viele verschiedene Lösungen?</p>



<p>Diese Fragen möchte ich dir mit meiner Artikel Serie, die mit diesem Beitrag, beginnt beantworten.</p>



<span id="more-4065"></span>


<p>[toc]</p>



<p>Viele kennen mich wahrscheinlich durch meine Inhalte zum Thema Website Erstellung mit den Produkten <strong>Adobe Dreamweaver oder Adobe Muse</strong>.</p>



<p>Spätestens, seit Adobe Muse im Jahr 2018 von Adobe eingestellt wurde und dessen Support 2020 ausläuft, ist an vielen Stellen die Frage offen: was nehme ich jetzt? Am Markt gibt es kaum Vergleichbares, womit man durch freies Hin- und Herschieben von Elementen statische responsive Websites erzeugen kann.</p>



<h2 class="wp-block-heading">Welche Tools für Webseiten Erstellung gibt es?</h2>



<p>Sind CMS (Content Management System) Lösungen die richtige Wahl? </p>



<p>Ich verwende seit längerem <strong>CMS, wie z.B. Typo 3, Contao oder WordPress</strong> und bin damit auch sehr zufrieden. Für meine Kunden, die gerne <strong>selbst Hand anlegen</strong> wollen, biete ich vor allem Unterstützung im Bereich <strong>WordPress</strong> an.</p>



<p>Aber auch <strong>WordPress</strong> erzeugt bei vielen Website Betreibern <strong>immer mehr Unmut</strong>. Irgendwann bemerken sie, dass nicht alles so einfach ist, wie oftmals erzählt wird.</p>



<p>Damit endet die Auswahl an Lösungen noch nicht. Es gibt nicht nur die gerade genannten Tools, da sind noch einige mehr am Markt. </p>



<p>Ich verwende für eigene Projekte und als Empfehlung für meine KundInnen, die selbst Websites erstellen und betreiben wollen, immer öfter Alternativen zu den bereits genannten.</p>



<p>Dazu zählen Tools wie <strong>Webflow, Pinegrow und BLOCS</strong>. Aber wie schon erwähnt, zählt auch WordPress &#8211; im speziellen mit dem <strong>Pagebuilder Elementor</strong> &#8211; zu meinem Angebot.</p>



<p>Auf die Frage, was jetzt am besten verwendet werden soll, gibt es leider keine eindeutige Antwort. Zwar versuchen viele da draussen in der Internet Welt ihren Kunden einzureden, dass z.B. <strong>WordPress das einzig wahre Tool</strong> ist. </p>



<p>Aber <strong>ist das wirklich so</strong>?</p>



<p>Es ist richtig &#8211; WordPress ist einfach in wenigen Minuten installiert. Dann noch einige Erweiterungen dazu &#8211; geht auch ruck zuck. Schließlich noch ein Template auswählen und am Schluss mit eigenen Inhalten befüllen. Schon ist die eigene Website fertig. Alles kein Problem, oder?</p>



<p><strong>Wenn die Welt so einfach wäre</strong>, dann würde ich mich freuen und ich könnte mir diesen Artikel sparen. <strong>Aber so ist es halt leider nicht</strong>. Warum manche gerade bei WordPress früher oder später die Erkenntnis erlangen, den falschen Weg gewählt zu haben, ist etwas komplexer und wird noch in einem eigenen Beitrag behandelt.</p>



<p>Übrigens &#8211; auch das Thema „<strong>Soll ich mit vorgefertigten Templates arbeiten?</strong>“ werde ich in einem eigenen Beitrag noch ausführlich besprechen.</p>



<h2 class="wp-block-heading">Welches ist das beste Tool zum Webseiten erstellen?</h2>



<p>Welches ist denn jetzt <strong>das ideale Tool zum Erstellen von Websites</strong>?</p>



<p>Bei dieser Frage kommt von mir in der Regel immer die Antwort &#8211; <strong>„Kommt darauf an …“</strong>.</p>



<p>Worauf es ankommt und was ich als Auswahl empfehle, <strong>darum geht es in diesem Beitrag, bzw. in dieser Beitragsserie</strong>.</p>



<p>Ich habe dabei neben einigen meiner Favoriten auch Tools ausgewählt, die am Markt recht beliebt sind. </p>



<p>Ich werde aber nicht nur eine Übersicht mit Vor- und Nachteilen zusammenstellen. Ich werde noch etwas weiter gehen. </p>



<p>Es geht vor allem darum, <strong>wie einfach</strong> man mit diesen Lösungen <strong>Websites erstellen und betreiben</strong> kann. </p>



<p>Ich spreche mit diesem Beitrag vor allem jene an, die <strong>für sich selbst</strong>, für ihr eigenes Unternehmen, für ihren Verein u.ä. eine <strong>Webseite erstellen</strong> wollen. Er ist weniger für Nerds und Freaks gedacht, die über ein ganz anderes technisches Basiswissen verfügen.</p>



<p>Im Vordergrund stehen Einfachheit, Flexibilität aber auch Sicherheit und Aufwand für den laufenden Betrieb.</p>



<p>Um den Unterschied bezüglich <strong>Einfachheit und Flexibilität</strong> bei der Erstellung beurteilen zu können, habe ich ein und dieselbe Webseite mit den verschiedenen Tools umgesetzt. Ich habe dafür die Seite, die in meinem Dreamweaver Kurs erstellt wird, als Basis hergenommen.</p>



<p>Die <strong>Erfahrungen</strong>, die ich dabei gemacht habe, möchte ich dir jetzt <strong>weitergeben</strong>. Damit bekommst du einmal eine Übersicht, <strong>was man</strong> mit den einzelnen Tools prinzipiell <strong>machen kann</strong> und wo die <strong>Grenzen</strong> liegen.</p>



<p>Zusätzlich gehe ich dann jeweils auf den Betrieb und die <strong>anfallenden Kosten</strong> ein. Beides Faktoren, die nicht unwichtig sind. Willst du dich <strong>selber darum kümmern</strong> oder am besten alles <strong>aus der Hand geben</strong> und deine Ruhe haben? Auch diese Frage spielt bei der Wahl des richtigen Tools eine entscheidende Rolle. </p>



<p>Bei der Software kannst du zwischen drei grundlegenden Typen unterscheiden:</p>



<p>Auf der einen Seite sind da Produkte für die Erstellung einer <strong>statischen Website</strong>. Auf der anderen Seite gibt es Websites, die mit einem <strong>CMS (Content Management System)</strong> betrieben werden. </p>



<p>Dazu kommen noch die diversen <strong>Baukastensysteme</strong>, die für mich keinem der beiden Bereiche so richtig zuzuordnen sind.</p>



<p>So, jetzt genug der einleitenden Worte; gehen wir über zu den Tools.</p>



<p>In diesem Beitrag will ich dir einmal vorstellen, was dich erwartet. Du bekommst eine <strong>Übersicht, welche Produkte</strong> ich mir mit dir gemeinsam ansehen will, und eine <strong>kurze Beschreibung zu den Tools</strong>, damit du sie besser einordnen kannst.</p>



<h2 class="wp-block-heading">1. Adobe Dreamweaver</h2>



<p>Fangen wir mit der Software an, mit der ich angefangen habe, Webseiten zu erstellen. Naja, nicht ganz richtig &#8211; ich habe zu Beginn meiner Webdesign Karriere im Jahr 1995 mit einem reinen Text Editor gearbeitet. Einfach deshalb, weil es kaum brauchbare Tools gab, und weil ich am Anfang Geld sparen wollte.</p>



<p>Schließlich gab es doch ein Produkt am Markt, das mich überzeugte. Es war von der Firma <strong>Macromedia</strong> und nannte sich <strong>Dreamweaver</strong>, bevor es dann vor vielen Jahren an die Firma <strong>Adobe</strong> verkauft wurde, die sich von nun an um die Weiterentwicklung kümmerte.</p>



<div class="wp-block-image img-space"><figure class="aligncenter"><img loading="lazy" decoding="async" width="971" height="598" src="https://www.andreasstocker.at/wp-content/uploads/2020/03/WebTools_01_Dreamweaver-1.png" alt="" class="wp-image-4058" srcset="https://www.andreasstocker.at/wp-content/uploads/2020/03/WebTools_01_Dreamweaver-1.png 971w, https://www.andreasstocker.at/wp-content/uploads/2020/03/WebTools_01_Dreamweaver-1-300x185.png 300w, https://www.andreasstocker.at/wp-content/uploads/2020/03/WebTools_01_Dreamweaver-1-768x473.png 768w" sizes="(max-width: 971px) 100vw, 971px" /></figure></div>



<p>Dreamweaver ist eigentlich immer noch der <strong>Klassiker</strong> unter den Website Erstellungstools. Das Programm hat sicher auch eine so große Verbreitung, weil es Teil der <strong>Adobe Creative Cloud</strong> und daher in vielen <strong>Agenturen</strong> vertreten ist.</p>



<p>Die Unterstützung der <strong>Betriebssysteme Windows und MacOS</strong> ist sicher ein weiterer Grund für die Verbreitung.</p>



<p>Zudem haben alle anderen Nutzer der Creative Cloud von Adobe (Privat, EPU, KMU, Vereine, …) die Möglichkeit, auf dieses Tool zurückzugreifen, und tun dies auch.</p>



<p><strong>Dreamweaver</strong> ist ein <strong>WYSIWYG (What you see is what you get) Editor.</strong> Das bedeutet, du siehst beim Erstellen der Webseite sofort, wie diese auch später im Browser aussehen wird. Zumindest annähernd.</p>



<p>Dreamweaver bietet aber noch mehr. Du kannst mit diesem Programm auch komplett auf den WYSIWYG Mode verzichten und den sehr guten <strong>Code Editor (Brackets)</strong> nutzen. </p>



<p>Man kann beide Optionen zugleich nutzen und im Split Modus in beiden Darstellungen arbeiten. Damit ist Adobe Dreamweaver sowohl für Designer als auch für Entwickler geeignet, die oftmals eine der beiden Darstellungsformen bevorzugen, trotzdem aber die Unterstützung der anderen Darstellung benötigen.</p>



<p>Ich nutzte das Tools selbst noch bei dem einen oder anderen Projekt und gebe mein Wissen bei On- und Offline Schulungen weiter.</p>



<p>Der Markt entwickelt sich weiter und es gibt mittlerweile Tools, die Dreamweaver in der Funktion überholt haben und auch vom Preis wesentlich attraktiver sind. Eines dieser Tools ist in meiner Übersicht &#8211;  es handelt sich dabei um Pinegrow.</p>



<p><em><strong>Link: <a href="https://www.adobe.com/de/products/dreamweaver.html" target="_blank" rel="noopener">https://www.adobe.com/de/products/dreamweaver.html</a></strong></em></p>



<h2 class="wp-block-heading">2. Webflow</h2>



<p>Ich gebe es gleich zu &#8211; <strong>Webflow</strong> ist derzeit <strong>einer meiner Favoriten</strong> im Bereich Website Erstellung.</p>



<p>Mit Webflow kannst du deine Website einfach <strong>online bauen</strong>. Es handelt sich dabei aber nicht um eines der typischen Baukasten Systeme. Es ist mehr ein Webdesign Tool, mit dem man keinen Code angreifen muss.</p>



<p>Da du bei der visuellen Erstellung deiner Webseiten „normale“ Webtechniken benutzen kannst, sind dir <strong>beim Layout fast keine Grenzen</strong> gesetzt.</p>



<div class="wp-block-image img-space"><figure class="aligncenter"><img loading="lazy" decoding="async" width="969" height="597" src="https://www.andreasstocker.at/wp-content/uploads/2020/03/WebTools_02_webflow-1.png" alt="" class="wp-image-4060" srcset="https://www.andreasstocker.at/wp-content/uploads/2020/03/WebTools_02_webflow-1.png 969w, https://www.andreasstocker.at/wp-content/uploads/2020/03/WebTools_02_webflow-1-300x185.png 300w, https://www.andreasstocker.at/wp-content/uploads/2020/03/WebTools_02_webflow-1-768x473.png 768w" sizes="(max-width: 969px) 100vw, 969px" /></figure></div>



<p>Beim <strong>Betrieb</strong> deiner Webflow Website hast du <strong>verschiedene Möglichkeiten</strong>. Die einfachste wäre, auch das <strong>Hosting von Webflow</strong> übernehmen zu lassen. Dann kannst du unter deiner eigenen Domain die Webseite direkt bei Webflow freischalten. Änderungen erstellst du zuerst in deinem internen Bereich und kannst sie dann bei Bedarf mit einem Klick freigeben.</p>



<p>Wenn du das Hosting nicht von Webflow haben möchtest, kannst du dir die fertige <strong>Website auch als ZIP File mit allen HTML, CSS und JavaScript Dateien herunterladen</strong> und auf deinem eigenen Webspace ablegen.</p>



<p>Das funktioniert sehr gut, solange du nicht irgendwelche dynamischen Elemente, wie Shop oder Blog, verwendest.</p>



<p>Zur Unterstützung bei der Erstellung gibt es eine Menge Templates, die man nicht nur für eigene Projekte verwenden, sondern von denen man sich auch Einiges abschauen kann.</p>



<p>Auch eine umfangreiche Sammlung an umgesetzten Projekten hilft dir Ideen sammeln, was man mit Webflow so alles verwirklichen kann.</p>



<p>Das <strong>Betriebssystem</strong> spielt bei der Erstellung von Webseiten mit Webflow <strong>keine</strong> große <strong>Rolle</strong>. Du benötigst einfach <strong>nur einen Browser</strong> und schon kannst du damit arbeiten.</p>



<p><strong><em>Link: <a href="https://webflow.com/" target="_blank" rel="noopener">https://webflow.com/</a></em></strong></p>



<h2 class="wp-block-heading">3. WordPress und Elementor</h2>



<p><strong>Auch WordPress</strong> ist einer meiner <strong>Favoriten</strong>, um Webprojekte umzusetzen. Für die Gestaltung setzte ich dabei aktuell auf den <strong>Pagebuilder Elementor</strong>.</p>



<p>Genauer genommen ist Elementor <strong>auch ein Themebuilder</strong>, aber das ist an dieser Stelle jetzt nicht so wichtig.</p>



<div class="wp-block-image img-space"><figure class="aligncenter"><img loading="lazy" decoding="async" width="969" height="597" src="https://www.andreasstocker.at/wp-content/uploads/2020/03/WebTools_03_Elementor-1.png" alt="" class="wp-image-4061" srcset="https://www.andreasstocker.at/wp-content/uploads/2020/03/WebTools_03_Elementor-1.png 969w, https://www.andreasstocker.at/wp-content/uploads/2020/03/WebTools_03_Elementor-1-300x185.png 300w, https://www.andreasstocker.at/wp-content/uploads/2020/03/WebTools_03_Elementor-1-768x473.png 768w" sizes="(max-width: 969px) 100vw, 969px" /></figure></div>



<p>Ich habe schon erwähnt, dass ich <strong>WordPress</strong> immer etwas <strong>kritisch</strong> gegenüber stehe. Denn es muss dir klar sein, dass der Einsatz von WordPress <strong>nicht immer so einfach</strong> ist, wie es auf den ersten Blick <strong>aussieht</strong>.</p>



<p>Erstens musst du dich <strong>regelmäßig</strong> um deine WordPress Installation <strong>kümmern</strong> und du musst darauf achten, <strong>nicht in den Plugin Installations Wahn zu verfallen</strong>. Denn ein Grossteil der Probleme, die man mit WordPress haben kann, kommt von Plugins, die nicht gut zusammenarbeiten oder vielleicht gar nicht mehr supported werden.</p>



<p>Wenn du aber weißt, worauf du dich einlässt und im Notfall auch jemanden an der Hand hast, der sich bei technischen Problemen um dein WordPress kümmert, dann steht auch einer Verwendung dieser Software nichts im Wege.</p>



<p>Worauf du beim Einsatz einer eigenen WordPress Website achten solltest, das erfährst du von mir noch in einem eigenen Beitrag.</p>



<p>Mit dem <strong>Elementor Pagebuilder</strong> hast du ein <strong>ausgereiftes und leistungsfähiges Plugin</strong>, um deine Layout Wünsche recht einfach Wirklichkeit werden zu lassen.</p>



<p>Das <strong>Elementor Pagebuilder</strong> Plugin ist genauso wie WordPress <strong>kostenlos</strong> erhältlich. Damit kannst du das komplette System theoretisch ohne weitere Zusatzkosten &#8211; abgesehen von den anfallenden Providerkosten &#8211; betreiben.</p>



<p>Allerdings gibt es von Elementor auch eine PRO Version, die dieses Tool noch um einige sehr praktische Funktionen erweitert. Ob man diese wirklich braucht, hängt sehr vom jeweiligen Projekt ab.</p>



<p><strong><em>Link zu WordPress: <a href="https://wordpress.org/" target="_blank" rel="noopener">https://wordpress.org/</a></em></strong></p>



<p><strong><em>Link zum Elementor Pagebuilder: <a href="https://elementor.com/?ref=2402" target="_blank" rel="noopener">https://elementor.com/</a></em></strong><em> </em></p>



<h2 class="wp-block-heading">4. Pinegrow</h2>



<p><strong>Pinegrow</strong> ist für mich der <strong>bessere Dreamweaver</strong>. Es ist ein Tool, das  &#8211; ähnlich wie Dreamweaver &#8211; darauf ausgelegt ist, Webseiten im <strong>WYSIWYG</strong> Verfahren zu erstellen und dabei die <strong>volle Kontrolle über den HTML und CSS</strong> Code zu haben.</p>



<p>Auch bei Pinegrow ist es notwendig, sich etwas intensiver mit der Software und der darunter liegenden Technik auseinander zu setzen.</p>



<p>Wenn du dazu bereit bist oder vielleicht schon mit Dreamweaver gearbeitet hast, dann solltest du diese Alternative durchaus einmal ins Auge fassen. </p>



<div class="wp-block-image img-space"><figure class="aligncenter"><img loading="lazy" decoding="async" width="969" height="597" src="https://www.andreasstocker.at/wp-content/uploads/2020/03/WebTools_04_Pinegrow-1.png" alt="" class="wp-image-4062" srcset="https://www.andreasstocker.at/wp-content/uploads/2020/03/WebTools_04_Pinegrow-1.png 969w, https://www.andreasstocker.at/wp-content/uploads/2020/03/WebTools_04_Pinegrow-1-300x185.png 300w, https://www.andreasstocker.at/wp-content/uploads/2020/03/WebTools_04_Pinegrow-1-768x473.png 768w" sizes="(max-width: 969px) 100vw, 969px" /></figure></div>



<p>Der Vorteil: du erstellst <strong>schnelle und wartungsfreie Webseiten</strong>, hast aber trotzdem die volle Kontrolle über das Design.</p>



<p>Im Vergleich zu Dreamweaver unterstützt Pinegrow unterschiedliche Methoden um responsive Webseiten aufzubauen. Natürlich gehört das bekannte CSS Framework Bootstrap dazu, das ja auch von Dreamweaver unterstützt wird.</p>



<p>Pinegrow bietet aber auch einige Funktionen, die in Dreamweaver fehlen und aus meiner Sicht unbedingt notwendig wären. </p>



<p>So kann man mit <strong>Pinegrow</strong> seine Website in der <strong>Struktur planen</strong> und daraus die <strong>Navigation</strong> für die Website <strong>erstellen lassen</strong>. Ein Feature, das vor allem bei größeren Websites unbedingt notwendig ist.</p>



<p>Aber auch das Arbeiten im WYSIWYG Modus ist wesentlich einfacher, intuitiver und moderner.</p>



<p>Mit dem Erstellen von Websites endet die Funktion der Pinegrow Produkte aber nicht. Es gibt eine Version, mit der du aus den statisch erstellten Websites dein <strong>eigenes WordPress Theme machen</strong> kannst.</p>



<p>Damit kannst du deine individuellen Design Ideen direkt in WordPress bringen und benötigst keinen speziellen Themebuilder mehr.</p>



<p>Und dann ist auch noch das Thema Animationen abgedeckt; ähnlich einfach, wie die <strong>Erstellung, kannst du Animationen</strong> und damit <strong>Interaktivität</strong> in deine Website einbauen.</p>



<p>Ähnlich wie Dreamweaver ist <strong>Pinegrow</strong> für die Betriebssysteme <strong>Windows und MacOS</strong> verfügbar.</p>



<p>Bei den <strong>Kosten</strong> unterscheidet sich Pinegrow ein wenig von Dreamweaver. Es gibt <strong>kein Abo Modell</strong>. Für Pinegrow zahlst du jährlich eine Lizenz, wenn du regelmäßig Updates erhalten willst, was ich auf jeden Fall empfehlen würde. Wenn du nicht verlängern möchtest, dann kannst du das Programm trotzdem weiter nutzen.</p>



<p>Die Kosten dafür liegen in etwa bei 100 Euro, was meiner Ansicht nach ein fairer Preis ist. Verlängerungen gibt es dann meist wesentlich günstiger (oft nur 50 % vom Initialpreis).</p>



<p><strong><em>Link: <a href="https://pinegrow.com/" target="_blank" rel="noopener">https://pinegrow.com/</a></em></strong></p>



<h2 class="wp-block-heading">5. BLOCS</h2>



<p><strong>BLOCS</strong> gehört zu den Programmen, mit denen <strong>statische Websites</strong> erstellt werden können. Dieses Tool würde ich am ehesten als <strong>Adobe Muse Nachfolger</strong> bezeichnen.</p>



<p>Ähnlich einfach zu bedienen, ist es damit möglich <strong>Websites mit Drag &amp; Drop </strong>zu <strong>erstellen</strong> und dabei keine Berührung mit dem darunter liegenden Code haben zu müssen.</p>



<div class="wp-block-image img-space"><figure class="aligncenter"><img loading="lazy" decoding="async" width="969" height="597" src="https://www.andreasstocker.at/wp-content/uploads/2020/03/WebTools_05_BLOCS-1.png" alt="" class="wp-image-4059" srcset="https://www.andreasstocker.at/wp-content/uploads/2020/03/WebTools_05_BLOCS-1.png 969w, https://www.andreasstocker.at/wp-content/uploads/2020/03/WebTools_05_BLOCS-1-300x185.png 300w, https://www.andreasstocker.at/wp-content/uploads/2020/03/WebTools_05_BLOCS-1-768x473.png 768w" sizes="(max-width: 969px) 100vw, 969px" /></figure></div>



<p>Sollte es doch mal notwendig sein, dann hast du im Gegensatz zu Muse sogar die <strong>Möglichkeit, den Code zu bearbeiten</strong> oder zu erweitern.</p>



<p>Selbstverständlich kannst du damit auch sehr einfach <strong>responsive Websites</strong> erstellen. Ich würde dir gar kein Tool vorstellen, mit dem das nicht möglich wäre.</p>



<p>Mit BLOCS kannst du die <strong>Struktur planen</strong> und daraus &#8211; wie von einem modernen Tool zu erwarten ist &#8211; eine <strong>Navigation erstellen</strong> lassen.</p>



<p>Das Ergebnis deiner Arbeit sind <strong>statische Webseiten</strong>, die du dann nur mehr auf deinen <strong>Webspace hochladen</strong> musst.</p>



<p>Von allen Tools, die ich getestet habe, kommt dieses am <strong>ehesten an Adobe Muse heran</strong> und zwar hinsichtlich der <strong>einfachen Bedingung</strong> und der Möglichkeit, <strong>statische Seiten</strong> zu erzeugen.</p>



<p>Einziger Nachteil dieses Tools ist, dass es <strong>nur für das MacOS</strong> Betriebssystem verfügbar ist. Windows User können dieses tolle Programm leider nicht nutzen.</p>



<p>Für BLOCS ist ein <strong>einmaliger Betrag</strong> fällig, der alle Updates innerhalb der aktuellen Release abdeckt. Für Upgrades auf eine neue Release gibt es dann meist günstige Upgrade Angebote.</p>



<p><strong><em>Link: <a href="https://blocsapp.com/" target="_blank" rel="noopener">https://blocsapp.com/</a></em></strong></p>



<h2 class="wp-block-heading">6. WIX</h2>



<p><strong>WIX</strong> ist eines der <strong>typischen Baukastensysteme</strong>. Früher war ich ein großer Gegner dieser Tools. Mittlerweile haben sie sich aber stark weiterentwickelt und ich habe meine Meinung etwas geändert.</p>



<p>Da ich immer öfter die Frage gestellt bekomme, was ich von diesen Tools halte, habe ich zwei davon in meinen Test aufgenommen. </p>



<div class="wp-block-image img-space"><figure class="aligncenter"><img loading="lazy" decoding="async" width="969" height="597" src="https://www.andreasstocker.at/wp-content/uploads/2020/03/WebTools_06_WIX-1.png" alt="" class="wp-image-4063" srcset="https://www.andreasstocker.at/wp-content/uploads/2020/03/WebTools_06_WIX-1.png 969w, https://www.andreasstocker.at/wp-content/uploads/2020/03/WebTools_06_WIX-1-300x185.png 300w, https://www.andreasstocker.at/wp-content/uploads/2020/03/WebTools_06_WIX-1-768x473.png 768w" sizes="(max-width: 969px) 100vw, 969px" /></figure></div>



<p>Auf der einen Seite ist das einmal WIX, und dann noch weiter unten erwähnt, Squarespace. </p>



<p>Die Entscheidung für diese beiden Tools ist eher durch mein Umfeld gefällt worden, da ich bei beiden Anwender kenne, die sehr zufrieden damit sind.</p>



<p>Das soll nicht bedeuten, dass andere Baukastensysteme schlechter sind. Hätte ich diese aber alle in meinen Test reingenommen, hätte das den Rahmen bei weitem gesprengt.</p>



<p><strong>Baukastensysteme</strong> bauen <strong>meist</strong> darauf auf, dass du mit einer der vielen <strong>Vorlagen</strong> beginnst und diese an deine persönlichen Bedürfnisse <strong>anpasst</strong>.</p>



<p>Wenn du bei der Auswahl der Vorlagen einige wichtige Grundlagen beachtest, muss deren Verwendung nicht schlecht sein. Ich persönlich bin der Meinung, dass es <strong>besser</strong> ist, mit einem <strong>gut gestalteten</strong> und mit einer gewissen Sorgfalt ausgewählten <strong>Template</strong> zu arbeiten, als eine nicht responsive Website zu haben, die <strong>aussieht</strong>, als wäre sie <strong>aus den 1990er</strong> Jahren.</p>



<p>Auch sonst brauchen sich die Baukastensysteme in ihrer Funktion nicht vor den anderen Lösungen zu verstecken.</p>



<p>Du musst allerdings in Kauf nehmen, dass es <strong>mitunter Grenzen</strong> bei den Gestaltungsmöglichkeiten gibt, und auch damit leben können, dich in eine <strong>gewisse Abhängigkeit</strong> zu begeben. Wenn das kein Problem ist, dann solltest du auch diese Systeme in deine Wahlmöglichkeiten aufnehmen.</p>



<p><strong><em>Link: <a href="https://de.wix.com/" target="_blank" rel="noopener">https://de.wix.com/</a></em></strong></p>



<h2 class="wp-block-heading">7. Squarespace</h2>



<p>Wie schon oben erwähnt, habe ich mich für zwei der am Markt befindlichen <strong>Baukastensysteme</strong> entschieden. </p>



<p>Auf der einen Seite WIX und dann eben Squarespace. Beide Lösungen sprechen unterschiedliche Zielgruppen an, was man schon bei den zur Auswahl stehenden Vorlagen sieht.</p>



<div class="wp-block-image img-space"><figure class="aligncenter"><img loading="lazy" decoding="async" width="969" height="597" src="https://www.andreasstocker.at/wp-content/uploads/2020/03/WebTools_07_Squarespace.png" alt="" class="wp-image-4054" srcset="https://www.andreasstocker.at/wp-content/uploads/2020/03/WebTools_07_Squarespace.png 969w, https://www.andreasstocker.at/wp-content/uploads/2020/03/WebTools_07_Squarespace-300x185.png 300w, https://www.andreasstocker.at/wp-content/uploads/2020/03/WebTools_07_Squarespace-768x473.png 768w" sizes="(max-width: 969px) 100vw, 969px" /></figure></div>



<p>Im Prinzip gelten auch bei Squarespace ähnliche Argumente, wie bei WIX vorhin erwähnt. </p>



<p><strong>Squarespace</strong> präsentiert sich etwas <strong>moderner und mit besseren Designs</strong>, WIX dafür etwas einfacher und flexibler.</p>



<p>Worin Unterschiede bestehen, wirst du dann bei meinen Detail Tests sehen.</p>



<p><strong><em>Link: <a href="https://de.squarespace.com/" target="_blank" rel="noopener">https://de.squarespace.com/</a></em></strong></p>



<h2 class="wp-block-heading">8. WordPress und DIVI</h2>



<p>Über <strong>WordPress</strong> habe ich ja schon vorhin ausführlich gesprochen. Diese Argumente gelten für alle Lösungen, die technisch auf WordPress aufbauen.</p>



<p>Doch mit WordPress alleine hat man selten eine ausreichende Lösung. Man braucht in der Regel ein Theme oder eben einen <strong>Pagebuilder</strong>, um damit einfach seine Seiten erstellen zu können.</p>



<div class="wp-block-image img-space"><figure class="aligncenter"><img loading="lazy" decoding="async" width="969" height="597" src="https://www.andreasstocker.at/wp-content/uploads/2020/03/WebTools_08_DIVI.png" alt="" class="wp-image-4055" srcset="https://www.andreasstocker.at/wp-content/uploads/2020/03/WebTools_08_DIVI.png 969w, https://www.andreasstocker.at/wp-content/uploads/2020/03/WebTools_08_DIVI-300x185.png 300w, https://www.andreasstocker.at/wp-content/uploads/2020/03/WebTools_08_DIVI-768x473.png 768w" sizes="(max-width: 969px) 100vw, 969px" /></figure></div>



<p><strong>DIVI von Elegant Themes</strong> ist eine Lösung, die es schon sehr <strong>lange am Markt</strong> gibt und die sehr ausgereift ist.</p>



<p>Vor nicht allzu langer Zeit gab es ein großes Update, bei dem dieses Produkt wieder hinsichtlich seinen Funktionen und der Bedienung gegenüber moderneren Pagebuildern aufgeholt hat.</p>



<p>DIVI hat jetzt, wie auch Elementor, eine <strong>Themebuilder Funktion</strong>. </p>



<p>Ich selbst betreibe DIVI immer noch bei sehr vielen Kunden Projekten und kann darüber nicht wirklich viel Kritik üben. </p>



<p>Warum ich lieber mit Elementor arbeite, ist zum Teil auch eine persönliche Vorliebe. Es sind Funktionen und die Art damit zu arbeiten, die mir an Elementor besser gefallen.</p>



<p>DIVI ist aber ein solides und leistungsfähiges Tool und wird daher auch Bestandteil der Tests sein.</p>



<p>Was die <strong>Kosten</strong> betrifft, so ist DIVI <strong>nicht gratis</strong> verfügbar. Allerdings gibt es von DIVI im Gegensatz zu anderen Anbietern, wie etwa Elementor, auch eine <strong>Lifetime Version</strong> und das zu einem relativ günstigen Preis. Vor allem, wenn man an einen der Aktionstage, wie etwa am Cyber Monday kauft.</p>



<p><strong><em>Link zu WordPress: <a href="https://wordpress.org/" target="_blank" rel="noopener">https://wordpress.org/</a></em></strong></p>



<p><strong><em>Link zu DIVI: <a href="https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=34112" target="_blank" rel="noopener">https://www.elegantthemes.com/</a></em></strong></p>



<h2 class="wp-block-heading">9. Brizy (WordPress oder Cloud Hosting)</h2>



<p>Wie auch Elementor oder DIVI ist <strong>Brizy</strong> ein <strong>Pagebuilder</strong>, den man mit <strong>WordPress</strong> betreiben kann.</p>



<p>Brizy hat aber einen großen Unterschied. Du kannst eine Brizy Website <strong>auch ohne WordPress</strong> betreiben. Dazu kannst du dir einfach einen Zugang bei <strong>Brizy Cloud</strong> anlegen und dann deine Website von <strong>Brizy hosten</strong> lassen. In diesem Fall steht kein WordPress dahinter und auch die Wartung wird von Brizy übernommen.</p>



<div class="wp-block-image img-space"><figure class="aligncenter"><img loading="lazy" decoding="async" width="969" height="597" src="https://www.andreasstocker.at/wp-content/uploads/2020/03/WebTools_09_Brizzy.png" alt="" class="wp-image-4056" srcset="https://www.andreasstocker.at/wp-content/uploads/2020/03/WebTools_09_Brizzy.png 969w, https://www.andreasstocker.at/wp-content/uploads/2020/03/WebTools_09_Brizzy-300x185.png 300w, https://www.andreasstocker.at/wp-content/uploads/2020/03/WebTools_09_Brizzy-768x473.png 768w" sizes="(max-width: 969px) 100vw, 969px" /></figure></div>



<p>Brizy kann aber noch mehr: du kannst die erstellen <strong>Webseiten als HTML und CSS exportieren</strong> und dann manuell auf deinen <strong>eigenen statischen Webspace ablegen</strong>. Zusätzlich kannst du deine in Brizy Cloud erstellten Seiten mit deinem Server <strong>automatisch synchronisieren</strong>.</p>



<p>Der Pagebuilder ist einfach und recht intuitiv bedienbar und am Projekt wird sehr aktiv gearbeitet.</p>



<p>Aktuell gibt es bei Brizy übrigens noch die Möglichkeit eines <strong>Lifetime Zugangs für die PRO Version</strong>. Damit kostet Brizy PRO einmalig 299.- statt jährlich 99.- für eine unlimitierte Anzahl an Websites &#8211; siehe <a href="https://www.brizy.io/account/aff/go/andreasstocker?i=4" target="_blank" rel="noopener">https://www.brizy.io/brizy-pro-pricing/</a><em>. </em></p>



<p>Brizy ist damit eine Lösung, die vielfältige Optionen für den Betrieb deiner erstellten Website anbietet.</p>



<p><strong><em>Link: <a href="https://www.brizy.io/account/aff/go/andreasstocker?i=1" target="_blank" rel="noopener">https://www.brizy.io/</a> </em></strong></p>



<p><strong><em>Brizy für WordPress: <a href="https://www.brizy.io/account/aff/go/andreasstocker?cr=aHR0cHM6Ly93d3cuYnJpenkuaW8vZG93bmxvYWQtYnJpenk%3D" target="_blank" rel="noopener">https://www.brizy.io/download-brizy</a></em></strong><a href="https://www.brizy.io/account/aff/go/andreasstocker?cr=aHR0cHM6Ly93d3cuYnJpenkuaW8vZG93bmxvYWQtYnJpenk%3D" target="_blank" rel="noopener">/</a><em> </em></p>



<p><strong><em>Brizy mit Hosting: <a href="https://www.brizy.io/account/aff/go/andreasstocker?i=7" target="_blank" rel="noopener">https://www.brizy.cloud/</a> </em></strong></p>



<h2 class="wp-block-heading">10. sitejet.io</h2>



<p><strong>Sitejet</strong> behauptet von sich selbst, eine <strong>Adobe Muse Alternative</strong> zu sein. </p>



<p>Eigentlich habe ich nicht vorgehabt, dieses Tool in meine Vergleiche mit aufzunehmen. Aber wenn ein Unternehmen eine solche <strong>Behauptung</strong> aufstellt, dann muss diese auch <strong>überprüft werden</strong>.</p>



<div class="wp-block-image img-space"><figure class="aligncenter"><img loading="lazy" decoding="async" width="969" height="597" src="https://www.andreasstocker.at/wp-content/uploads/2020/03/WebTools_10_sitejet.png" alt="" class="wp-image-4057" srcset="https://www.andreasstocker.at/wp-content/uploads/2020/03/WebTools_10_sitejet.png 969w, https://www.andreasstocker.at/wp-content/uploads/2020/03/WebTools_10_sitejet-300x185.png 300w, https://www.andreasstocker.at/wp-content/uploads/2020/03/WebTools_10_sitejet-768x473.png 768w" sizes="(max-width: 969px) 100vw, 969px" /></figure></div>



<p>Sitejet hat viel <strong>Ähnlichkeit mit Webflow</strong>, hat aber aus meiner Sicht <strong>nicht dieselbe Verbreitung</strong> &#8211; zumindest, wenn man sich an vorhandenen Beiträgen und Tutorials im Internet orientiert.</p>



<p>Im Gegensatz zu Webflow ist Sitejet mehr <strong>auf die Arbeit in Agenturen ausgelegt</strong>. Das sieht man schon am <strong>Workflow</strong>, den sie beim Erstellen von Websites zu Verfügung stellen. Auf die <strong>Verwaltung</strong> von Projekten und die <strong>Kommunikation</strong> im Team und mit dem Kunden wird viel Wert gelegt.</p>



<p>Den Eindruck, dass man als „normaler“ Kunde nicht so erwünscht ist, hat man auch, wenn man Anfragen an Sitejet stellt. Ich habe noch nie ein Unternehmen erlebt, das so ignorant und überheblich auf Anfragen reagiert.</p>



<p>Man könnte annehmen, dass man bezüglich Kommunikation mit einem Unternehmen aus dem deutschsprachigen Raum, wie Sitejet, besser bedient ist, aber das war zumindest bei mir nicht der Fall.</p>



<p>Aber egal, es soll ja das Tool im Vordergrund stehen. Vielleicht war ich auch nur zur falschen Zeit an der falschen Stelle.</p>



<p>Mit Sitejet kannst du <strong>online im Browser</strong> deine Webseiten erstellen und dann entweder von <strong>Sitejet hosten</strong> lassen oder die <strong>HTML und alle verbundenen Files herunterladen</strong>, um diese dann auf deinen eigenen Webspace hochzuladen.</p>



<p>Mit <strong>Drag &amp; Drop</strong> werden verschiedene Elemente zu deiner Seite hinzugefügt, deren Eigenschaften dann vielfältig verändert werden können.</p>



<p>Der Designer der Seite hat bei den Elementen die Möglichkeit, anzugeben, ob die Inhalte dieser Bereiche von Usern mit Editor Rechten bearbeitet werden können. Auch daran erkennt man die Ausrichtung auf Agenturen, die ja nicht wollen, dass Kunden alles uneingeschränkt verändern können.</p>



<p><strong>Mehrsprachigkeit und E-Commerce Funktionalitäten</strong> runden die Palette dieses Tools ab.</p>



<p>Bezüglich der Preise gibt es drei Pläne. Ab der zweiten Stufe hast du die Möglichkeit, deine Website als ZIP File zu exportieren und selbst zu hosten. </p>



<p>Bei jedem Plan ist bereits das Hosting für eine Website inkludiert und es kann relativ günstig das Hosting für weitere Websites dazu gekauft werden.</p>



<p><em><strong>Link: <a href="https://www.sitejet.io/de" target="_blank" rel="noopener">https://www.sitejet.io/de</a></strong></em></p>



<h2 class="wp-block-heading">Bereit für die Tests </h2>



<p>So, das waren einmal die 10 verschiedenen Tools, die ich jetzt schrittweise im Detail testen werde um herauszufinden, wie einfach, schnell und flexibel eine Website damit umgesetzt werden kann.</p>



<p>Ich werde dabei vor allem darauf Wert legen, herauszufinden, wie weit diese Programme eine Alternative zu Lösungen bieten, die du bereits kennst oder auch schon verwendest. </p>



<p>Wenn du einen Tipp für mich hast, worauf ich bei meinen Test noch achten sollte, dann <strong><em>schreibe mir bitte ein Kommentar </em></strong>unter diesen Beitrag.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.andreasstocker.at/das-richtige-tool-zur-website-erstellung/feed/</wfw:commentRss>
			<slash:comments>6</slash:comments>
		
		
			</item>
		<item>
		<title>Website Tipp &#8211; Worum geht es auf deiner Website &#8211; der 5 Sekunden Test</title>
		<link>https://www.andreasstocker.at/website-tipp-worum-geht-es-auf-deiner-website-der-5-sekunden-test/</link>
					<comments>https://www.andreasstocker.at/website-tipp-worum-geht-es-auf-deiner-website-der-5-sekunden-test/#respond</comments>
		
		<dc:creator><![CDATA[]]></dc:creator>
		<pubDate>Thu, 14 Nov 2019 09:52:49 +0000</pubDate>
				<category><![CDATA[Design & Layout]]></category>
		<category><![CDATA[Betrieb & Optimierung]]></category>
		<category><![CDATA[Webdesign]]></category>
		<category><![CDATA[Website Tipp]]></category>
		<guid isPermaLink="false">https://www.andreasstocker.at/?p=3892</guid>

					<description><![CDATA[Verstehen die Besucher deiner Website, worum es bei deiner Seite geht und was du anbietest? Wissen die User, was sie alles machen können und welche Aktionen als nächstes sinnvoll wären? Ist deine Website für deine Besucher überhaupt vertrauenswürdig? Soll ich hier bleiben oder wieder gehen? Die Nutzer deiner Website treffen viele Entscheidungen beim Besuch deiner [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p class="p1"><strong>Verstehen die Besucher deiner Website, worum es bei deiner Seite geht und was du anbietest?</strong></p>



<p class="p1"><strong>Wissen die User, was sie alles machen können und welche Aktionen als nächstes sinnvoll wären?</strong></p>



<p class="p1"><strong>Ist deine Website für deine Besucher überhaupt vertrauenswürdig?</strong></p>



<p><strong>Soll ich hier bleiben oder wieder gehen?</strong></p>



<p class="p1"><strong>Die Nutzer deiner Website treffen viele Entscheidungen beim Besuch deiner Webseite. Für diesen ersten Eindruck nehmen sie sich in etwa 5 Sekunden Zeit. Nicht viel &#8211; oder?</strong></p>



<p class="p1">Es ist also eine ganz schöne Herausforderung diese Fragen deiner Besuchern beantworten zu können. </p>



<p class="p1">Schaffen kannst du das durch eine gut optimierte Website. Aber wie kannst du nach all der getaner Arbeit dein Ergebnis überprüfen?</p>



<p class="p1">Dafür gibt es den <strong>5 Sekunden Test</strong>, den ich dir im folgenden vorstellen möchte. Am Schluss zeige ich dir noch ein Tool von mir, mit dem du diesen Test bei der Zielgruppe deiner Website ganz einfach selbst durchführen kannst.</p>



<span id="more-3892"></span>



<p class="p1">Ich persönlich finde den Test genial, weil man mit sehr geringem Zeitaufwand sehr wichtige Informationen über das Design der eigenen Website erhalten kann.</p>



<p>Beginnen wir aber einmal ganz von vorne</p>



<h2 class="h-topspace wp-block-heading">Was ist der 5 Sekunden Test und wofür benötigen wir ihn?</h2>



<p class="p1">Du wirst auf deiner Website sicher oft Besuche von Usern bekommen, die noch nie bei dir waren und dich noch gar nicht oder kaum kennen.</p>



<div class="wp-block-image"><figure class="alignleft"><img loading="lazy" decoding="async" width="263" height="205" src="https://www.andreasstocker.at/wp-content/uploads/2019/11/Computer-mit-Suchfeld.png" alt="Suchmaschinenanfrage" class="wp-image-3899"/><figcaption>Besucher kommen sehr oft über Suchmaschinenanfragen</figcaption></figure></div>



<p class="p1">Vor allem, wenn die Besucher über Suchmaschinen auf deine Seite kommen.</p>



<p class="p1">In diesem Fall musst du die neuen Besucher in kürzester Zeit von dir überzeugen und deine Kernbotschaft rüberbringen. Die Besucher stehen ja vor der Entscheidung, ob sie auf deiner Seite bleiben und sich näher mit deinen Inhalten auseinander setzen oder ob sie lieber eines der anderen Suchergebnisse ausprobieren.</p>



<p class="p1">Besucher deiner Website kommen in der Regel mit einem bestimmten Bedürfnis auf deine Seite. Wird dieses Bedürfnis aus ihrer Sicht von deiner Seite nicht abgedeckt, dann verlierst du diesen Besucher wieder.</p>



<p class="p1">Wenn der User deine Seite einmal verlassen hat, dann wirst du in auch nicht mehr so leicht zurückbekommen. Es ist also sehr wichtig diesen ersten Eindruck nicht zu verspielen.</p>



<p class="p1">Auch das, was deine Website Besucher auf deiner Seite tun können musst du rasch und klar vermitteln.</p>



<p class="p1">Selbst ist man oft nicht mehr in der Lage diese Fragen beantworten zu können, da man betriebsblind ist und sich schwer in die Situation eines neuen Users hineinversetzen kann.</p>



<p class="p1">Um herauszufinden, ob all diese Kriterien von deiner Website erfüllt werden, gibt es einen einfach und rasch durchzuführenden Test &#8211; den 5 Sekunden Test für deine Website.</p>



<h2 class="h-topspace wp-block-heading">Wie funktioniert der 5 Sekunden Website Test?</h2>



<figure class="wp-block-image"><img loading="lazy" decoding="async" width="558" height="185" src="https://www.andreasstocker.at/wp-content/uploads/2019/11/5-Sek-Step-1-und-Step.2.png" alt="" class="wp-image-3901" srcset="https://www.andreasstocker.at/wp-content/uploads/2019/11/5-Sek-Step-1-und-Step.2.png 558w, https://www.andreasstocker.at/wp-content/uploads/2019/11/5-Sek-Step-1-und-Step.2-300x99.png 300w" sizes="(max-width: 558px) 100vw, 558px" /></figure>



<p class="p1">Die Funktion des 5 Sekunden Website Tests ist sehr einfach beschrieben. Er ist in <strong>zwei Schritte</strong> unterteilt. Zuerst einmal der eigentliche Test &#8211; das Betrachten der Website. Im weiteren dann die Auswertung in Form einer Befragung.</p>



<h3 class="h-topspace wp-block-heading">Zuerst einmal zu den Voraussetzungen.</h3>



<p class="p1">Du benötigst einen Computer, auf dem die zu testende Webseite angezeigt werden kann. Bei der Webseite muss es sich nicht um die Startseite deiner Website handeln. Du solltest jene Seite auswählen, die dich speziell interessiert und die du optimieren willst.</p>



<p class="p1">Das kann eine deiner Unterseiten, eine spezielle Landingpage oder auch eine Verkaufsseite sein.</p>



<p class="p1">Weiteres benötigst du natürlich einen oder mehrere User, die an diesem Test teilnehmen wollen. Eine wichtige Voraussetzung für diesen Test ist, dass die zu testende Seite vom Betrachter vorher noch nie angesehen wurde.</p>



<p class="p1">Gut wäre es, wenn die Testpersonen aus deiner Zielgruppe sind. Das ist aber nicht immer notwendig, denn es hängt sehr davon ab, welches Ziel du verfolgst und wie die anschliessenden Fragen lauten.</p>



<p class="p1">Für einen ersten Gesamteindruck oder wenn es um Vertrauenswürdigkeit geht, müssen die testenden User nicht unbedingt aus deiner Zielgruppe kommen.</p>



<p class="p1">Wenn es um das Verständnis der Inhalte und Leistungen geht, dann ist es sehr wohl notwendig.</p>



<p class="p1">Es macht aber auf jeden Fall Sinn die für diesen Test wichtigsten Daten und Eigenschaften deiner Testpersonen zu notieren. Damit kannst du später die Auswertungen leichter in Bezug auf deine Zielgruppen prüfen.</p>



<p class="p1">Jetzt aber zur eigentlichen Durchführung. Diese ist sehr einfach und auch relativ schnell gemacht. Zumindest der erste Teil ist in wenigen Sekunden erledigt.</p>



<h3 class="h-topspace wp-block-heading">Der erste Schritt &#8211; Website betrachten</h3>



<div class="wp-block-image"><figure class="alignleft"><img loading="lazy" decoding="async" width="218" height="177" src="https://www.andreasstocker.at/wp-content/uploads/2019/11/Step1-User-mit-Computer.png" alt="Schritt 1: Website 5 Sekunden lang betrachten" class="wp-image-3902"/><figcaption>Schritt 1: Website 5 Sekunden lang betrachten</figcaption></figure></div>



<p class="p1">Dabei sitzt die Testperson vor einem Computer. Wenn diese bereit ist, dann wird für 5 Sekunden deine zu testende Website angezeigt.</p>



<p class="p1">Dabei soll der User nichts tun, ausser die Website in der zur Verfügung stehenden Zeit betrachten. Genauso, wie er es auch machen würde, wenn die Website das erste mal zum Beispiel über eine Suchmaschine aufgesucht wird.</p>



<p class="p1">Also kein Scrollen und kein Klicken &#8211; nur schauen.</p>



<p class="p1">Nach 5 Sekunden wird die Website wieder ausgeblendet. Teil 1 ist damit schon erledigt.</p>



<h3 class="h-topspace wp-block-heading">Im zweiten Schritt kommt die Befragung.</h3>



<div class="wp-block-image"><figure class="alignleft"><img loading="lazy" decoding="async" width="201" height="161" src="https://www.andreasstocker.at/wp-content/uploads/2019/11/Step2-Computer-Checkliste.png" alt="Schritt 2: Befragung durchführen" class="wp-image-3903"/><figcaption>Schritt 2: Befragung durchführen</figcaption></figure></div>



<p class="p1">Die Befragung kann auf unterschiedliche Art erfolgen. Würde ich hier alles aufzählen, was es zum Thema Befragung zu sagen gibt, würde das den Rahmen dieses Artikels sprengen. Daher hier das Wichtigste zusammengefasst.</p>



<p class="p1">Es gibt bei der Befragung 2 Entscheidungen, die du treffen musst. Erstens in welcher Form die Befragung stattfinden soll und zweitens, welche Fragen du stellen solltest.</p>



<h4 class="h-topspace wp-block-heading"><b>Form der Befragung</b></h4>



<p class="p1">Wenn du den Betrachter neben dir sitzen hast, dann kannst du ein persönliches Interview führen.</p>



<p class="p1">Ist dein Testuser Remote, dann ist diese Variante nur eingeschränkt möglich. Am ehesten ist das noch mit einer Online Meeting Software möglich.</p>



<p class="p1">Für das Interview solltest du aber bereits klare Vorstellungen haben, was du fragen möchtest. Am besten hast du deine Fragen schriftlich vorbereitet und kannst dir dann gleich die Antworten dazu eintragen.</p>



<p class="p1">Wenn du es etwas mehr automatisieren möchtest, dann kannst du auch einen Fragebogen bereitstellen, den deine Testpersonen ausfüllen können. Der Nachteil an dieser Variante ist, dass du die Antworten nicht gleich hinterfragen kannst. Gerade bei den offenen Fragen kann ein Hinterfragen möglicherweise sinnvoll sein.</p>



<p class="p1">Welche Variante du wählst hängt auch sehr vom Ziel und der Art der Fragen ab.</p>



<h4 class="h-topspace wp-block-heading"><b>Welche Fragen soll ich stellen?</b></h4>



<p class="p1">Jetzt wirst du dir wahrscheinlich schon die Frage stellen „Welche Fragen soll ich meinen Website Testern stellen?“</p>



<p class="p1">Dazu möchte ich dir einige Beispiele geben, damit du siehst in welche Richtung die Fragen gehen können.</p>



<p class="p1">Achte darauf bei diesem Test nicht zu viele Fragen zu stellen. Ein gute Anzahl sind drei bis fünf Fragen.</p>



<p class="p1">Den ganzen Test kannst du, wenn du willst und wenn es Sinn macht mit einem erklärenden Satz einleiten. Das ist vor allem dann sinnvoll, wenn du den Kontext vorgeben möchtest. Zum Beispiel, wenn die Seite nach einer Suche in einer Suchmaschine aufgerufen wird. Dadurch wird der Testperson klarer in welchem Zusammenhang die Fragen stehen.</p>



<p class="p1"><strong>Praktisch sieht das dann so aus:</strong></p>



<p class="p1">„Du hast in Google nach xyz gesucht und auf ein Ergebnis geklickt. Folgende Seite wurde geöffnet …&#8220;</p>



<p class="p1"><strong>Mögliche Fragen die du dann stellen kannst:</strong></p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"><p><i>Worum geht es bei der Website?</i></p><p><i>Was hast du auf der Seite gesehen?</i></p><p><i>Woran kannst du dich erinnern</i>?</p><p><i>Was macht das Unternehmen</i>?</p><p><i>Was ist der Zweck der Seite?</i></p><p><i>Welche sind die wichtigsten Elemente, an du dich erinnern kannst?</i></p><p><i>Welche Bilder auf der Webseite sind in Erinnerung geblieben?</i></p><p><i>Welche Farben wurden auf der Webseite verwendet?</i></p><p><i>An welche Begriffe oder Slogans erinnerst du dich? </i></p><p><i>Hast du dich von der Webseite angesprochen gefühlt? Falls ja, was hat dich angesprochen? Falls nein, warum nicht? </i></p><p><i>Was glaubst du, wer die Zielgruppe ist?</i></p><p><i>Was war dein Eindruck vom Layout?</i></p><p><i>Was kann man auf der Seite alles machen?</i></p><p><i>Was ist der nächste Schritt, den du machen kannst? </i></p></blockquote>



<p class="p1">Du kannst die Antworten auch einschränken, in dem du Fragen formulierst, wie etwa.</p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"><p><i>Bietet diese Webseite Produkt A oder Produkt B an?</i></p></blockquote>



<p class="p1">Bei der Frage:</p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"><p>Wirkt das Design oder die Marke vertrauenswürdig?</p></blockquote>



<p>Kannst du als Antwort eine JA / NEIN Entscheidung stellen oder aber auch eine Scala z.B. von 1 bis 10. Das könnte dann im Fragebogen so aussehen.</p>



<figure class="wp-block-image"><img loading="lazy" decoding="async" width="607" height="155" src="https://www.andreasstocker.at/wp-content/uploads/2019/11/fragebogen_vertrauen_mit_skala_r.png" alt="Frage mit Skala" class="wp-image-3914" srcset="https://www.andreasstocker.at/wp-content/uploads/2019/11/fragebogen_vertrauen_mit_skala_r.png 607w, https://www.andreasstocker.at/wp-content/uploads/2019/11/fragebogen_vertrauen_mit_skala_r-300x77.png 300w" sizes="(max-width: 607px) 100vw, 607px" /><figcaption>Frage mit Skala</figcaption></figure>



<p>Und man könnte auch nach Verbesserungsvorschlägen fragen. Dazu solltest du angeben, was dein Ziel war. Stelle diese Frage aber immer erst am Ende.</p>



<p class="p1">Ich glaube du merkst, in welche Richtung es gehen kann und soll. Passe die Fragen einfach an deine persönlichen Ziele für den Test an.</p>



<h2 class="h-topspace wp-block-heading">Was benötige ich für den Test?</h2>



<p class="p1">Du weisst jetzt schon, warum du einen 5 Sekunden Website Test machen sollst und auch worauf es ankommt, bzw. wie der Test abläuft.</p>



<p class="p1">Wie aber kannst du jetzt einen solchen Test in der Praxis durchführen.</p>



<p class="p1">Dafür gibt es verschiedene Methoden, die vor allem davon abhängen in welcher Umgebung der Test durchgeführt wird und ob du den Test individuell oder automatisiert abwickeln willst.</p>



<p class="p1">Gehen wir jetzt die verschiedenen Möglichkeiten und Methoden durch.</p>



<h3 class="h-topspace wp-block-heading">Variante 1: Du sitzt daneben</h3>



<p class="p1">Wenn du physisch neben deiner Testperson sitzt, dann ist der eigentliche 5 Sekunden Test sehr einfach auszuführen. Du bereitest den Computer in der Abwesenheit der Tester vor, in dem du die gewünschte Webseite im Browser aufrufst. Dann kannst du das Browserfenster fürs erste kleiner machen oder auf einen anderen Tab wechseln.</p>



<p class="p1">Wenn der Test beginnt bringst du das Browserfenster mit der Website in den Vordergrund oder wechselst auf den Tab mit deiner Webseite. Du stoppst dann 5 Sekunden mit oder zählst langsam bis 5. Sind die 5 Sekunden vorbei schliesst du das Fenster oder den Tab.</p>



<p class="p1">Achte unbedingt darauf, dass die Seite vorher bereits geladen wurde. Würde die Seite erst während der 5 Sekunden geladen werden, bekommst du kein eindeutiges Ergebnis bezüglich der Bewertung der Inhalte. Es spielt dann eine Rolle, wann die Seite vollständig am Bildschirm erscheint.</p>



<p class="p1">Wenn du die Tester neben dir hast, dann kannst du auch noch eine sehr einfache ganz und gar nicht technische Methode nutzen. Drucke einen Screenshot von der Seite aus, wie sie im Browser zu sehen ist und führe den 5 Sekunden Test damit durch. Dadurch ist für den gesamten Test kein Computer notwendig und kann leicht überall hin mitgenommen und durchgeführt werden.</p>



<p class="p1">Ist der erste Teil abgeschlossen, kann die Befragung beginnen.</p>



<p class="p1">Hier hast du die Wahl zwischen dem oben bereits erwähnten persönlichem Interview oder einem Fragebogen, der sich lokal auf dem Computer befinden oder online gespeichert werden kann.</p>



<p class="p1">Für den Test kannst du natürlich auch eines der Online Tools verwenden, die ich noch vorstellen werde.</p>



<h3 class="h-topspace wp-block-heading">Variante 2: Remote über Online Meeting Software</h3>



<p class="p1">Befindet sich den User entfernt und du machst den Test mittels Hilfe einer Online Meeting Software, dann hast du ebenfalls 2 Möglichkeit für den Test.</p>



<p class="p1">Auf der einen Seite kannst du auch hier eines der speziellen Online Tools verwenden und dann die anschliessende Befragung als persönliches Interview durchführen. Auf der anderen Seite, kannst du deinen Bildschirm mit der Testpersonen teilen und dann die Seite bei dir für 5 Sekunden anzeigen.</p>



<p class="p1">Auch hier achte darauf, dass die Seite vorher schon geladen wurde.</p>



<p class="p1">Die Auswertung kann ähnlich wie bei der ersten Variante mittels einem Interview oder auch mit einem Online Befragungstool stattfinden.</p>



<h3 class="h-topspace wp-block-heading">Variante 3: Remote automatisiert</h3>



<p class="p1">Bei dieser Variante kann alles völlig automatisch ablaufen.</p>



<p>Für den Test benötigst du auf jeden Fall ein Online Tools, dass die Website 5 Sekunden lang anzeigt und dann wieder verdeckt. </p>



<p>Im Anschluss an die 5 Sekunden wird die Testperson auf einen Fragebogen weitergeleitet.</p>



<p>Hat er diesen ausgefüllt, dann ist der Test komplett abgeschlossen.</p>



<p>Ein Beispiel aus Sicht einer Testdurchführung habe ich dir bei den Tools unten vorbereitet, da kannst du selbst einmal einen solchen Test durchführen. </p>



<h2 class="h-topspace wp-block-heading">Welche Tools gibt es?</h2>



<p class="p1">Zum Schluss möchte ich dir noch eine Auswahl an Tools zeigen, damit du den Test mit der Remote Variante einfach durchführen kannst.</p>



<h3 class="h-topspace wp-block-heading">Usability Hub 5 Sekunden Test</h3>



<p class="p1">Auf der Seite von Usability Hub findest du einige Tools zum Thema Usability Tests. Darunter auch ein Tool für einen 5 Sekunden Test. Über folgenden Link kommst du direkt auf die Seite mit dem 5 Sekunden Test.</p>



<p><a href="https://usabilityhub.com/product/five-second-tests" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">https://usabilityhub.com/product/five-second-tests</a></p>



<figure class="wp-block-image"><img loading="lazy" decoding="async" width="602" height="527" src="https://www.andreasstocker.at/wp-content/uploads/2019/11/usabilityhub-5sekunden-test.png" alt="" class="wp-image-3910" srcset="https://www.andreasstocker.at/wp-content/uploads/2019/11/usabilityhub-5sekunden-test.png 602w, https://www.andreasstocker.at/wp-content/uploads/2019/11/usabilityhub-5sekunden-test-300x263.png 300w" sizes="(max-width: 602px) 100vw, 602px" /></figure>



<p class="p1">Um das Tool nutzen zu können, musst du dich vorher registrieren. Die einfache Variante des Tests kannst du kostenlos nutzen.</p>



<p class="p1">Beim Test über Usability Hub, musst du von deiner Website vorher eine Bild erstellen, dass dann hochgeladen werden muss. Hast du das Bild hochgeladen, dann ist es möglich sich eine Vorschau anzeigen zu lassen und es bei Bedarf noch zu editieren.</p>



<p class="p1">Jetzt kann man noch Fragen eingeben, die im Anschluss an die 5 Sekunden angezeigt werden.</p>



<p class="p1">Ist das erledigt, kannst du einen Link erstellen, den du dann deinen Testern weitergeben kannst.</p>



<p class="p1">Deine Tester können sich jetzt die Seite ansehen und anschliessend die vorbereiteten Fragen beantworten. Ist dieser Vorgang abgeschlossen, wird der Test im Backend gespeichert. Im Backend siehst du dann, wieviele Tests durchgeführt wurden und was die anschliessende Umfrage ergeben hat.</p>



<h3 class="h-topspace wp-block-heading">Webdesign Coach 5 Sekunden Test Tool</h3>



<p>Ich habe auch nach einem ganz unkomplizierten Tool gesucht, wo man sich nicht registrieren muss und auch einfach eine URL eingeben kann statt ein Bild hochzuladen.</p>



<p>Leider habe ich da nichts gefunden und daraufhin beschlossen selbst so ein Tool zu erstellen. </p>



<p>Das Ergebnis findest du unter:</p>



<p><a href="https://tools.webdesign-coach.com/" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">https://tools.webdesign-coach.com/</a></p>



<figure class="wp-block-image"><img loading="lazy" decoding="async" width="602" height="442" src="https://www.andreasstocker.at/wp-content/uploads/2019/11/webdesigcoach-5sekunden-test.png" alt="" class="wp-image-3911" srcset="https://www.andreasstocker.at/wp-content/uploads/2019/11/webdesigcoach-5sekunden-test.png 602w, https://www.andreasstocker.at/wp-content/uploads/2019/11/webdesigcoach-5sekunden-test-300x220.png 300w" sizes="(max-width: 602px) 100vw, 602px" /></figure>



<p>Dort musst du einfach aus der Liste das Tool &#8222;<strong>Website 5 Sekunden Test</strong>&#8220; auswählen und es geht schon los. </p>



<p>Einfach 2 URLs eingeben. Einmal für die Testseite und eine zweite optionale für die anschliessende Seite z.B. den Fragebogen. Dann auf &#8222;Test Link erstellen&#8220; klicken und das war es schon.</p>



<p>Du bekommst im Anschluss einfach einen Link, den du an deine Tester weitergeben kannst.</p>



<p>Wie das Ganze genau abläuft ist in einem eigenen Artikel und Video von mir beschrieben.</p>



<p>Damit du selbst so einen Test als Tester durchführen kannst, habe ich dir mit meinem Tool einen Test vorbereitet. Vielleicht hast du ja Lust mir eine ehrliche Rückmeldung zu meiner Seite zu geben (obwohl du sie ja zum Teil schon kennst).</p>



<p><a href="https://tools.webdesign-coach.com/5sekundentest/start5sectest.html?url=aHR0cHM6Ly93d3cuYW5kcmVhc3N0b2NrZXIuYXQv&amp;aurl=aHR0cHM6Ly9mb3Jtcy5nbGUvZGtaUkxLZVA5VXRpRDlQNDY=" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">https://tools.webdesign-coach.com/5sekundentest/start5sectest.html?url=aHR0cHM6Ly93d3cuYW5kcmVhc3N0b2NrZXIuYXQv&amp;aurl=aHR0cHM6Ly9mb3Jtcy5nbGUvZGtaUkxLZVA5VXRpRDlQNDY=</a></p>



<p>Wenn du eine Befragung ähnlich wie in meinem gerade geannten Beispiel erstellen willst, dann kann ich die Google Forms empfehlen. Du erreichst die Website unter: <a href="https://docs.google.com/forms/u/0/" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">https://docs.google.com/forms/</a></p>



<h2 class="h-topspace wp-block-heading">Zusammenfassung</h2>



<p class="p1">Es bleiben dir knappe 5 Sekunden Zeit um die Besucher deiner Website von deiner Website und deren Inhalten zu überzeugen. Gelingt dir das nicht, dann kann es leicht passieren, dass sie die Website eines Mitbewerber aufsuchen.</p>



<p class="p1">Damit du weisst, ob deine Website ihre Aufgaben erfüllt und den User abholen kann, gibt es den 5 Sekunden Test. Dabei wird dem Webseite Besucher deine Webseite 5 Sekunden lang angezeigt und anschliessen wieder geschlossen.</p>



<p class="p1">Im Anschluss soll die Testperson einige von dir vorbereitete Fragen zur Website und deren Inhalten beantworten.</p>



<p class="p1">Damit kannst du leicht feststellen, ob du dein gewünschtes Ziel erreichst.</p>



<p class="p1">Du kannst mit dieser Methode zum Beispiel messen welche Informationen Benutzer erfassen bzw. mitnehmen, welchen Eindruck haben die Benutzer von deiner Webseite haben oder ob deine Botschaft effektiv kommuniziert wird.</p>



<p class="p1">Der Vorteil dieser Test Methode gegenüber anderen Usability Test ist, dass er relativ schnell und auch unkompliziert durchgeführt werden kann und sehr rasch Ergebnisse liefert. Der 5 Sekunden Test kann schnell einmal zwischendurch durchgeführt werden. Auch die Bereitschaft daran teilzunehmen erhöht sich durch den geringen Arbeitsaufwand deiner Tester.</p>



<p class="p1">Er eigenet sich daher auch einmal schnell eine Arbeit zu prüfen, bevor man weiter macht.</p>



<p class="p1">Auch um Änderungen oder eventuell eingearbeitete Rückmeldungen aus vorigen Test zu prüfen ist dieser Test hervorragend geeignet. Ob es Sinn macht den Test mit den selben Personen zu machen oder komplett andere Testpersonen zu suchen hängt auch hier von deinem Ziel und den Umständen ab.</p>



<p class="p1">Dieser 5 Sekunden Test kann natürlich auch mit anderen Usability Testmethoden kombiniert werden um noch mehr herauszuholen. Du kannst zum Beispiel mit der Eyetracking Methode die Blicke aufzeichnen und weisst dann ganz genau, welche Elemente und Bereiche sich der User wie lange angesehen hat.</p>



<p class="p1">Dieser Test ist dann allerdings nicht mehr so einfach, schnell und kostengünstig durchzuführen.</p>



<p><strong>Jetzt wünsche ich dir viel Erfolg bei deinen Test und es würde mich freuen, wenn du mir in den Kommentaren deine Erfahrungen mit dem Test mitteilst.</strong></p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.andreasstocker.at/website-tipp-worum-geht-es-auf-deiner-website-der-5-sekunden-test/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Website Tipp &#8211; Optimiere die Dateigröße deiner Bilder</title>
		<link>https://www.andreasstocker.at/website-tipp-optimiere-die-dateigrosse-deiner-bilder/</link>
					<comments>https://www.andreasstocker.at/website-tipp-optimiere-die-dateigrosse-deiner-bilder/#respond</comments>
		
		<dc:creator><![CDATA[]]></dc:creator>
		<pubDate>Fri, 04 Oct 2019 15:02:39 +0000</pubDate>
				<category><![CDATA[Umsetzung]]></category>
		<category><![CDATA[Betrieb & Optimierung]]></category>
		<category><![CDATA[Grafik]]></category>
		<category><![CDATA[Webdesign]]></category>
		<category><![CDATA[Website Tipp]]></category>
		<guid isPermaLink="false">https://www.andreasstocker.at/?p=3870</guid>

					<description><![CDATA[Es gibt einige Argumente, warum man darauf schauen sollte eine schnelle Website zu haben. Dazu gehören z.B. eine positive Nutzererfahrung. Daraus resultierend eine höhere Conversion und mehr Verkäufe. Aber auch Google mag schnelle Seiten und belohnt das mit einem besserem Ranking. Einer der Gründe, warum Webseiten langsam sind, liegt oft daran, dass die grosse Datenmenge [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p><strong>Es gibt einige Argumente, warum man darauf schauen sollte eine schnelle Website zu haben. Dazu gehören z.B. eine positive Nutzererfahrung. Daraus resultierend eine höhere Conversion und mehr Verkäufe. Aber auch Google mag schnelle Seiten und belohnt das mit einem besserem Ranking.</strong></p>



<p>Einer der Gründe, warum Webseiten langsam sind, liegt oft daran, dass die grosse Datenmenge der Bilder die Ladezeit erhöht.</p>



<p>Aus diesem Grund empfehle ich dir auf die Dateigrößen deiner Bilder zu schauen und diese bei Bedarf zu optimieren.</p>



<p>In diesem Artikel zeige ich dir, wie du das einfach, schnell und kostenlos machen kannst.</p>



<span id="more-3870"></span>



<h2 class="h-topspace wp-block-heading">Bilder optimieren geht schneller und einfacher als du denkst</h2>



<p>Um das zu machen, benötigst du weder viel Wissen über Bildbearbeitung noch viel Zeit und auch keine teueren Tools. Mit dem Online Tool TinyPNG geht das mit Drag&amp;Drop in wenigen Sekunden.</p>



<p>Besuche dazu die Website <a rel="noreferrer noopener" aria-label=" (opens in a new tab)" href="https://tinypng.com/" target="_blank">https://tinypng.com</a></p>



<div class="wp-block-image"><figure class="aligncenter"><img loading="lazy" decoding="async" width="1011" height="470" src="https://www.andreasstocker.at/wp-content/uploads/2019/09/wst-tinypng-upload.png" alt="Website Tipp: Bilder mit TinyPNG optimieren - Upload" class="wp-image-3868" srcset="https://www.andreasstocker.at/wp-content/uploads/2019/09/wst-tinypng-upload.png 1011w, https://www.andreasstocker.at/wp-content/uploads/2019/09/wst-tinypng-upload-300x139.png 300w, https://www.andreasstocker.at/wp-content/uploads/2019/09/wst-tinypng-upload-768x357.png 768w" sizes="(max-width: 1011px) 100vw, 1011px" /><figcaption>Website Tipp: Bilder mit TinyPNG optimieren &#8211; Upload</figcaption></figure></div>



<p>Mittels Drag &amp; Drop kannst du dein oder deine Bilder auf die Website ziehen. Die Bilder werden hochgeladen und anschließend optimiert. Alternativ zum Drag &amp; Drop kann man die Bilder auch durch einen Klick auf den Button „Drop your .png or .jpg file here!“ mittels Dateiauswahl von der Platte hochladen.</p>



<p>Sind die Bilder optimiert, dann wird dir angezeigt, wie gut das Bild komprimiert werden konnte. Es wird dir die neue Dateigröße und in Prozent angezeigt, wieviel du gespart hast.</p>



<p>Es gibt jetzt verschiedene Möglichkeiten die Files herunter zu laden. Entweder kannst du die Bilder einzeln mittels dem Link „download“ herunterladen oder alle gemeinsam über den darunter stehenden Button „Download all“. Ebenso kannst du deine Bilder direkt in deine Dropbox spielen. Ein einfach Klick auf den Button „Save to Dropbox“ genügt.</p>



<div class="wp-block-image"><figure class="aligncenter"><img loading="lazy" decoding="async" width="1004" height="574" src="https://www.andreasstocker.at/wp-content/uploads/2019/09/wst-tinypng-download.png" alt="Website Tipp: Bilder mit TinyPNG optimieren - Optimierung und Download" class="wp-image-3865" srcset="https://www.andreasstocker.at/wp-content/uploads/2019/09/wst-tinypng-download.png 1004w, https://www.andreasstocker.at/wp-content/uploads/2019/09/wst-tinypng-download-300x172.png 300w, https://www.andreasstocker.at/wp-content/uploads/2019/09/wst-tinypng-download-768x439.png 768w" sizes="(max-width: 1004px) 100vw, 1004px" /><figcaption>Website Tipp: Bilder mit TinyPNG optimieren &#8211; Optimierung und Download</figcaption></figure></div>



<p>Der Dienst kann mit PNG und JPG files umgehen. In der kostenlosen Variante kann man 20 Bilder gleichzeitig hochladen. Dabei darf jedes Bild maximal 5MB gross sein.</p>



<p>Wenn du mehr benötigst, dann kannst du für $25 pro User und Jahr auf die Pro Version upgraden.</p>



<h2 class="h-topspace wp-block-heading">Das Ergebnis</h2>



<p>Um dir zu zeigen, ob man einen Unterschied merkt, habe ich mir ein Bild aus meinem letzten Urlaub ausgewählt und es optimiert. </p>



<p>Hier siehst du das Ergebnis:</p>



<p>Das Original Bild (192KB) &#8230;</p>



<div class="wp-block-image"><figure class="aligncenter"><img loading="lazy" decoding="async" width="1024" height="769" src="https://www.andreasstocker.at/wp-content/uploads/2019/10/P1060043_v-1024x769.jpg" alt="" class="wp-image-3881" srcset="https://www.andreasstocker.at/wp-content/uploads/2019/10/P1060043_v-1024x769.jpg 1024w, https://www.andreasstocker.at/wp-content/uploads/2019/10/P1060043_v-300x225.jpg 300w, https://www.andreasstocker.at/wp-content/uploads/2019/10/P1060043_v-768x577.jpg 768w, https://www.andreasstocker.at/wp-content/uploads/2019/10/P1060043_v.jpg 1280w" sizes="(max-width: 1024px) 100vw, 1024px" /><figcaption>Website Tipp: Bilder mit TinyPNG optimieren &#8211; Bild vorher</figcaption></figure></div>



<p>&#8230; und das optimierte Bild (118KB / -39%).</p>



<div class="wp-block-image"><figure class="aligncenter"><img loading="lazy" decoding="async" width="1024" height="769" src="https://www.andreasstocker.at/wp-content/uploads/2019/10/P1060043_n-1024x769.jpg" alt="" class="wp-image-3880" srcset="https://www.andreasstocker.at/wp-content/uploads/2019/10/P1060043_n-1024x769.jpg 1024w, https://www.andreasstocker.at/wp-content/uploads/2019/10/P1060043_n-300x225.jpg 300w, https://www.andreasstocker.at/wp-content/uploads/2019/10/P1060043_n-768x577.jpg 768w, https://www.andreasstocker.at/wp-content/uploads/2019/10/P1060043_n.jpg 1280w" sizes="(max-width: 1024px) 100vw, 1024px" /><figcaption>Website Tipp: Bilder mit TinyPNG optimieren &#8211; Bild nachher</figcaption></figure></div>



<p>Du merkst also an diesem Vergleich, dass kein Unterschied zu festzustellen ist.</p>



<h2 class="h-topspace wp-block-heading">Mit dem WordPress Plugin Bilder noch einfacher optimieren</h2>



<p>Wenn du mit einem CMS wie WordPress arbeitest, dann geht der Vorgang noch einfacher. TinyPNG stellt ein Plugin zur Verfügung, dass dir die Arbeit automatisiert abnimmt. </p>



<div class="wp-block-image"><figure class="aligncenter"><img loading="lazy" decoding="async" width="965" height="438" src="https://www.andreasstocker.at/wp-content/uploads/2019/09/wst-tinypng-wordpress.png" alt="Website Tipp: Bilder mit TinyPNG optimieren - WordPress Plugin" class="wp-image-3866" srcset="https://www.andreasstocker.at/wp-content/uploads/2019/09/wst-tinypng-wordpress.png 965w, https://www.andreasstocker.at/wp-content/uploads/2019/09/wst-tinypng-wordpress-300x136.png 300w, https://www.andreasstocker.at/wp-content/uploads/2019/09/wst-tinypng-wordpress-768x349.png 768w" sizes="(max-width: 965px) 100vw, 965px" /><figcaption>Website Tipp: Bilder mit TinyPNG optimieren &#8211; WordPress Plugin</figcaption></figure></div>



<p>Einfach die Bilder wie gewohnt hochladen. Die Bilder werden dann automatisch im Hintergrund optimiert. In der kostenlosen Variante kannst du bis zu 100 Bilder pro Monat optimieren.</p>



<h2 class="h-topspace wp-block-heading">Sieh dir vorher an, wie deine Website optimiert werden könnte</h2>



<p>Zum Schluss noch ein kleiner Zusatz. Auf der Unterseite Analyzer (<a href="https://tinypng.com/analyzer" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">https://tinypng.com/analyzer</a>) kannst du deine Website URL eingeben und TinyPNG berechnet dir, wie die Bilder deiner Website komprimiert werden können und welche Auswirkungen das auf die gesamte Dateigröße aller Bilder und der Ladezeit hat.</p>



<div class="wp-block-image"><figure class="aligncenter"><img loading="lazy" decoding="async" width="991" height="178" src="https://www.andreasstocker.at/wp-content/uploads/2019/09/wst-tinypng-analyse.png" alt="Website Tipp: Bilder mit TinyPNG optimieren - Analyse" class="wp-image-3864" srcset="https://www.andreasstocker.at/wp-content/uploads/2019/09/wst-tinypng-analyse.png 991w, https://www.andreasstocker.at/wp-content/uploads/2019/09/wst-tinypng-analyse-300x54.png 300w, https://www.andreasstocker.at/wp-content/uploads/2019/09/wst-tinypng-analyse-768x138.png 768w" sizes="(max-width: 991px) 100vw, 991px" /><figcaption>Website Tipp: Bilder mit TinyPNG optimieren &#8211; Analyse</figcaption></figure></div>



<p>Wenn du sehen willst, wie der ganze Ablauf funktioniert, dann sieh dir zu diesem Thema auch mein Video an.</p>



<p><strong><a rel="noreferrer noopener" aria-label="Zum YouTube Video (opens in a new tab)" href="https://www.youtube.com/watch?v=imUQdMnkkvw" target="_blank">Zum YouTube Video &#8222;Dateigöße deiner Bilder optimieren</a></strong><a rel="noreferrer noopener" aria-label="Zum YouTube Video (opens in a new tab)" href="https://www.youtube.com/watch?v=imUQdMnkkvw" target="_blank"><strong>&#8222;</strong></a></p>


<figure class="wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><a href="https://www.andreasstocker.at/website-tipp-optimiere-die-dateigrosse-deiner-bilder/"><img decoding="async" alt="YouTube Video" consent-original-src-_="https://www.andreasstocker.at/wp-content/plugins/wp-youtube-lyte/lyteCache.php?origThumbUrl=%2F%2Fi.ytimg.com%2Fvi%2FimUQdMnkkvw%2Fmaxresdefault.jpg" consent-required="5823" consent-by="services" consent-id="5824" consent-thumbnail="{&quot;embedId&quot;:&quot;9066299e2e481d0dc119385c2facdb4e&quot;,&quot;fileMd5&quot;:&quot;33abd37db7a1ad5282584d1ec2863a46&quot;,&quot;url&quot;:&quot;https:\/\/www.andreasstocker.at\/wp-content\/uploads\/embed-thumbnails\/9066299e2e481d0dc119385c2facdb4e-33abd37db7a1ad5282584d1ec2863a46.jpeg&quot;,&quot;title&quot;:null,&quot;width&quot;:1280,&quot;height&quot;:720}"></a><br /><br /><figcaption></figcaption></figure>]]></content:encoded>
					
					<wfw:commentRss>https://www.andreasstocker.at/website-tipp-optimiere-die-dateigrosse-deiner-bilder/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Gutes Webdesign und was das mit deiner Küchenuhr zu tun hat</title>
		<link>https://www.andreasstocker.at/gutes-webdesign-und-deine-kuechenuhr/</link>
					<comments>https://www.andreasstocker.at/gutes-webdesign-und-deine-kuechenuhr/#respond</comments>
		
		<dc:creator><![CDATA[]]></dc:creator>
		<pubDate>Tue, 02 Apr 2019 11:28:04 +0000</pubDate>
				<category><![CDATA[Design & Layout]]></category>
		<category><![CDATA[Grafik]]></category>
		<category><![CDATA[SEO]]></category>
		<category><![CDATA[Webdesign]]></category>
		<guid isPermaLink="false">https://www.andreasstocker.at/?p=3723</guid>

					<description><![CDATA[Was hat diese Uhr mit gutem Webdesign zu tun? Zwei mal im Jahr, wenn die Zeitumstellung erfolgt frage ich mich, wie man bei meinem Herd die Uhr einstellt. Was hat das aber jetzt mit gutem Webdesign zu tun? Lerne in diesem Artikel kennen, was gutes Webdesign ausmacht.]]></description>
										<content:encoded><![CDATA[
<p><strong>Was hat diese Uhr mit gutem Webdesign zu tun? Zwei mal im Jahr, wenn die Zeitumstellung erfolgt frage ich mich, wie man bei meinem Herd die Uhr einstellt. Intuitiv würde man die Taste mit der Uhr drücken. Leider ist das aber nicht der richtige Weg.</strong></p>



<p>Was hat das aber jetzt mit gutem Webdesign zu tun?</p>



<p>Lerne in diesem Artikel kennen, was gutes Webdesign ausmacht.</p>



<span id="more-3723"></span>


<p>[toc]</p>



<p>Um die Frage zu beantworten, möchte ich einmal ein wenig den Begriff Design, bzw. Webdesign  beleuchten.</p>



<p>Wenn man eine Umfrage macht, was Menschen unter gutem Webdesign verstehen, dann wird meist über hübsche, ansprechende, ästhetisch und gut gestaltete Webseiten gesprochen. </p>



<p>Das ist sicher ein wichtiger Teil guten Designs, macht aber ein solches alleine sicher nicht aus. Zu einem guten Design gehört viel mehr.</p>



<p>Um das besser zu verstehen, möchte ich mein Lieblingszitat zu diesem Thema aufschreiben.</p>



<blockquote class="wp-block-quote h-topspace is-layout-flow wp-block-quote-is-layout-flow"><p>Design ist nicht, wie es aussieht, Design ist wie es funktioniert.</p><cite>Steve Jobs</cite></blockquote>



<p>Diesen Satz hat kein geringerer als Steve Jobs gesagt, der in Richtung Design sicher hervorragende positive Beispiele geliefert hat.</p>



<p>Was meint Steve Jobs aber mit dieser Aussage?</p>



<h2 class="h-topspace wp-block-heading">Zurück zu unserer Uhr</h2>



<p>Das Einstellen diverser Uhren mindestens zweimal im Jahr erinnert mich immer wieder an diesen Satz. Denn dieser Vorgang kann zeitweise schon eine Herausforderung sein.</p>



<p>So toll manche Geräte im Haushalt aussehen, wenn es nicht einfach möglich ist die zugedachte Funktion nutzen zu können, kann man auch nicht von gutem Design sprechen.</p>



<p>Es nützt dir dabei gar nichts, wenn das Gerät ein noch so tolles Aussehen hat und stylisch durch nichts zu überbieten ist. Wenn man es nicht ordentlich bedienen kann, dann verfehlt es seinen Zweck.</p>



<p>Man könnte das Spiel jetzt noch mit anderen Arten von Geräten im Haushalt oder im täglichen Leben spielen. Aber wir wollen ja wissen was gutes Webdesign ausmacht.</p>



<p>Wenden wir uns dazu einmal dem Computer zu. Was zeichnet eine gute Software aus? Richtig sie soll einfach und intuitiv bedienbar sein. Es sollte möglich sein, die wichtigsten Funktionen bedienen zu können, ohne lange in der Anleitung nachlesen zu müssen.</p>



<p>Klar erwartet man sich auch ein modernes Aussehen, gut lesbare Schriften, ansprechende Farben und einiges mehr in dieser Richtung.</p>



<p>Im Vordergrund sollte aber bei einer Software die Funktion stehen. Wie schon erwähnt, sollte diese ohne viel denken zu müssen bedient werden können.</p>



<h2 class="h-topspace wp-block-heading">Liefere, was der Nutzer erwartet</h2>



<p>Erreichen kann man das zum Beispiel durch eine klare nachvollziehbare Menüstruktur oder durch Icons bzw. Symbole, die klar verständlich sind. </p>



<p>Aber auch klar durchdachte Abläufe die nachvollziehbar oder noch besser vorhersehbar sind.</p>



<p>Ebenfalls wichtig ist es Konventionen einzuhalten. Das Warenkorbsymbol hat sich bereits in den Köpfen der User verankert und man muss nicht nachdenken, was es bedeutet. Der User sucht sogar in seiner Mustersammlung im Kopf nach diesem Symbol, wenn er den Warenkorb sucht.</p>



<p>Ähnlich ist es mit dem Symbol für das Speichern. Viele, vor allem junge Leute kennen heute Disketten gar nicht mehr. Dennoch ist es bis heute das Symbol zum Speichern von Inhalten. Würde man hier versuchen kreativ zu sein und dem User eine Festplatte oder ein Cloud-Symbol für die Speicherfunktion anbieten, würden das wahrscheinlich nur wenige auf Anhieb verstehen. Man wird jedes mal erneut nachdenken müssen, wie man jetzt auf die Speichern Funktion zugreifen kann.</p>



<h2 class="h-topspace wp-block-heading">Gutes Design für Webseiten</h2>



<p>So wie es mit der Software ist, so ist es auch mit Webseiten. </p>



<p>Naja nicht ganz.</p>



<p>Wenn man bei einer Software etwas nicht versteht, dann versucht man doch einmal mit einer Anleitung zu Ziel zu kommen. </p>



<p>Aber kennst du einen User, der bei einer Website nach einer Anleitung sucht, wenn er nicht weiterkommt? Ich nicht. </p>



<p>Was machen die Besucher der Website stattdessen? Richtig sie verlassen die Seite, wenn es ihnen nicht möglich oder zu mühsam ihr Ziel zu  erreichen. </p>



<p>Die Folg daraus. Es kann sich auf der einen Seite negativ auf die finanzielle Situation auswirken, aber auch ein schlechteres Ranking bei Suchmaschinen zu Folge haben.</p>



<p>Jene Menschen, die hier Geduld zeigen und es weiter probieren werden immer weniger. Man muss schon ein sehr grosses Interesse an den Inhalten der Website oder dem Thema haben, wenn man trotz der Schwierigkeiten bleibt und sich weiter abmüht.</p>



<h2 class="h-topspace wp-block-heading">Warum ist Einfachheit und Klarheit,  wichtig?</h2>



<h3 class="wp-block-heading">Was du über das Hirn des Menschen wissen solltest</h3>



<p>Wenn du dich mit dem Design deiner Website auseinander setzt, dann solltest du dich auch ein wenig mit dem Hirn des Menschen beschäftigen.</p>



<p>Unser Hirn ist sehr effizient. Es ist normalerweise einer der größten Energie Verbraucher in unserem Körper. Daher versucht es soweit es geht Energie zu sparen. </p>



<p>Die Folge daraus ist &#8211; unser Hirn ist faul. </p>



<p>Es versucht unnötiges Denken zu vermeiden und sich die Energie für wirkliche Notfälle aufzuheben. Zwar lauert heute nicht mehr der legendäre Säbelzahntiger hinter dem Gebüsch auf uns. Aber unser Hirn ist trotzdem noch darauf eingestellt für Notfälle bereit zu sein.</p>



<h3 class="h-topspace wp-block-heading">User wollen nicht denken</h3>



<p>Mit diesem Wissen in deinem Kopf solltest du an das Design deiner Website herangehen. Du weisst ja &#8211; Design bedeutet nicht nur hübsch aussehen, es hat sehr viel mit der Funktion zu tun.</p>



<blockquote class="wp-block-quote h-topspace is-layout-flow wp-block-quote-is-layout-flow"><p>Es sollte das oberste Ziel sein, deine Website so zu gestalten, damit deine Besucher so wenig wie nur möglich denken müssen.</p></blockquote>



<p>Über dieses Thema wurden schon ganze Bücher geschrieben:</p>



<p>Denken wir einmal an Steve Krug, der in seinem <a rel="noreferrer noopener" aria-label="Buch „Don‘t make me think!“ (opens in a new tab)" href="https://amzn.to/2ODMlxC" target="_blank">Buch „Don‘t make me think!“</a> (*) Usability für Webseiten erklärt und den Buchtitel zum Leitsatz für gutes Webdesign macht. </p>



<p>User lesen Webseiten nicht, sie scannen. User versuchen Webseiten nicht zu verstehen, sie wurschteln sich einfach so durch.</p>



<p>User wollen nicht überrascht und nicht zum Denken gezwungen werden.</p>



<h2 class="h-topspace wp-block-heading">Erfinde das Rad nicht neu</h2>



<p>Auch das W3C, jene Organisation, die sich mit den Webstandards auseinander setzt hat ein interessantes Dokument mit dem Titel „<a rel="noreferrer noopener" aria-label="HTML Design Principles (opens in a new tab)" href="https://www.w3.org/TR/html-design-principles/#do-not-reinvent-the-wheel" target="_blank">HTML Design Principles</a>“ veröffentlicht. Dort gibt es unter anderem ein Kapitel mit dem Titel „<a href="https://www.w3.org/TR/html-design-principles/#do-not-reinvent-the-wheel" target="_blank" rel="noreferrer noopener" aria-label="Do not reinvent the wheel (opens in a new tab)">Do not reinvent the wheel</a>“. Wir sollen also das Rad nicht neu erfinden, sondern auf das setzen, was der User kennt und gewohnt ist.</p>



<p><a href="https://www.w3.org/TR/html-design-principles/#do-not-reinvent-the-wheel" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">https://www.w3.org/TR/html-design-principles/#do-not-reinvent-the-wheel</a></p>



<p>Designs müssen nicht immer etwas besonderes und anderes sein. Sie müssen sich nicht immer kreativ von anderen abheben. Mache es deinen Nutzern mit gewohntem und Konventionen einfacher mit deiner Website zu arbeiten.</p>



<p>Irgendwann muss man sich entscheiden, welche Eigenschaften eine gute designte Website erfüllen soll um. </p>



<p>Soll sie innovativ anders sein oder den User unbeschwert unsere Inhalte konsumieren lassen?</p>



<p>Soll sie toll aussehen oder soll sie schnell sein?</p>



<p>Das sind Beispiele von Eigenschaften, die sich nicht immer gut miteinander vereinbaren lassen. </p>



<p>Es sollte daher vor der Erstellung der Website darauf geachtet werden Richtlinien und vor allem Prioritäten festzulegen um im Konfliktfall leichter entscheiden zu können, welchen Weg man gehen soll.</p>



<p>Eines ist aber wichtig. Bei einer gut designten Website muss der Nutzer immer im Mittelpunkt stehen. Daher muss man ihn und sein Verhalten und seine Vorlieben kennen. Wenn wir Produkte und Dienstleistungen anbieten, dann sollten diese unseren Kunden helfen. Genau das gilt auch für unsere Website.</p>



<p>Zufriedene Webseiten Besucher bleiben nicht nur auf der Seiten, sie kommen auch wieder. Sie empfehlen uns und die Seite sogar weiter und sie kaufen auch unsere Produkte und Leistungen.</p>



<h2 class="h-topspace wp-block-heading">Usability und deren Prinzipien</h2>



<p>Wenn man von Bedienbarkeit spricht, dann kommt einem oft auch das Wort Usability unter. Usability heisst übersetzt Gebrauchstauglichkeit. Ein Wort, mit dem auch nicht jeder was anzufangen weiss. Ein besseres Wort ist vielleicht Benutzerfreundlichkeit. </p>



<p>Usability ist übrigens auch in einer ISO Norm (ISO 9241) festgehalten. Es gibt damit messbare Kriterien für die Umsetzung.</p>



<p>Im folgenden habe ich die einige wichtige Kriterien für eine bessere Usability aufgeführt. Wenn dich dieses Thema näher interessiert, dann findest du weitere Details in meinem Artikel „Was ist Usability“.</p>



<h3 class="h-topspace wp-block-heading">Für alle verwendbar &#8211; Barrierefreiheit, Accessibility, Zugänglichkeit.</h3>



<p>Das ist zwar keine direkte Usability Eigenschaft, aber Voraussetzung dafür dass eine Seite überhaupt bedient werden kann.</p>



<p>Einer der wichtigsten Grundsätze ist, dass eine Website für alle Menschen zugänglich ist. Sprich es sollten alle Menschen die Seite bedienen  und die Inhalte konsumieren können. Auch wenn diese irgendwelche körperlichen oder geistigen Einschränkungen haben.</p>



<p>Eine dieser Einschränkungen könnte die Sehkraft sein, also zum Beispiel blinde User oder etwas weniger einschränkend Nutzer, die Farbenblind sind.</p>



<p>Man spricht dabei von Begriffen wie Barrierefreiheit, Accessibility oder Zugänglichkeit. </p>



<p>Barrierefreiheit wird in verschiedene Stufen gekennzeichnet mit A, AA oder AAA.</p>



<p>Es müssen ja nicht unbedingt die drei A sein. Ein A lässt sich aber durch geeignete Massnahmen schon relativ einfach erreichen und hilft den betroffenen schon immens weiter.</p>



<h3 class="h-topspace wp-block-heading">Die Seite muss flott sein</h3>



<p>Man sagt dazu auch, sie sollte performant sein.</p>



<p>Oft tun es auch hier Kleinigkeiten um dem Ziel mit grossen Schritten näher zu kommen. </p>



<p>Wichtig ist auf jeden Fall einmal den IST Zustand aufzunehmen. Das kann entweder mit den Browser Tools (Network) oder den Pingdom Tools (<a href="https://tools.pingdom.com/" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">https://tools.pingdom.com/</a>) erfolgen. Dieses Tool gibt dir übrigens eine Menge Informationen und Tipps um deine Seite auf Grund der Messung zu optimieren.</p>



<p>Genauere Detail zu diesem Tool und den Massnahmen, die du daraus ableiten kannst, werde ich in einem eigenen Blog Artikel veröffentlichen.</p>



<p>Flott und  schnell hat aber auch eine andere Seite. Der User muss sein Ziel schnell erreichen können. Klare einfache Wege sind das Ziel. </p>



<p>Zum Beispiel &#8211; weg mit dem Formularwahnsinn. Einfach und kurz reciht oftmals aus.</p>



<p>Der User muss unterstützt werden damit er sein Ziel möglichst rasch erreichen kann. Dazu muss man die Ziele der User und deren Verhalten aber kennen. </p>



<p>Erreichen kann man das durch erstellen von Personas und dem durchführen von User Tests. Personas sind übrigens fiktive Personen, die deiner Zielgruppe entsprechen und ein typischen Abbild deiner Wunschkunden sind. Mehr zu Thema Personas und wie du diese erstellst, wird ebenfalls in einem eigenen Artikel behandelt.</p>



<h3 class="h-topspace wp-block-heading">Seiten müssen sich anpassen</h3>



<p>Auch als responsive Design bekannt, sollte sich die Website dem Gerät der Nutzer anpassen. Eigentlich sollte das heute schon selbstverständlich sein. Die Praxis im Internet zeigt aber leider sehr oft das Gegenteil.</p>



<p>Die Inhalte sollten so optimiert sein, dass sie sich auf dem jeweiligen Gerät optimal konsumieren lassen. Auch die Funktion sollte dem jeweiligen Gerät angepasst werden.</p>



<p>Notfalls müssen auch Inhalte auf verschiedenen Endgeräten ausgeblendet werden.</p>



<p>Aber nicht nur das Gerät in ein Grundlage für die Anpassung. Auch der Kontext des Users ist zu beachten. Eine Seite die man entspannt im Wohnzimmer am Sofa konsumiert, wird anders gestaltet sein müssen, als eine Seite, die man im Auto bedienen sollte. Es macht einen Unterschied ob du im entspannten Zustand, in einer Stresssituation oder unter Zeitdruck bist.</p>



<h3 class="h-topspace wp-block-heading">Design sollte vorhersehbar sein </h3>



<p>In der Usability wird diese Anforderung auch Erwartungskonformität genannt. Dabei geht es vor allem darum eine Anwendung und ein Design zu erstellen das einheitlich ist und den Erwartungen des Nutzers entspricht.</p>



<p>Erreichen kann man das durch Konventionen. Wie schon weiter oben erwähnt, macht es nicht immer Sinn kreativ zu sein und Neues zu erfinden. Altes bekanntes, was dein Besucher kennt ist in diesem Fall viel besser. Ein Beispiel ist das bekannte Warenkorb Symbol. Aber auch Links, die zumindest unterstrichen sein sollten gehören zu diesen Elementen.</p>



<p>Aber auch eine gewisse Konsistenz in deinem Design hilft deinem User Muster zu erkennen, zu erlernen und dann mit deiner Website besser arbeiten zu können. Das ganze sind natürlich Prozesse, die bei deinem Besucher völlig automatisch ablaufen.</p>



<h3 class="h-topspace wp-block-heading">Feedback liefern </h3>



<p>Dein User sollte bei Eingaben oder Aktionen ein brauchbares Feedback vom System bekommen.  Das kann sowohl im Erfolgsfall als auch im Fall von Fehlern erfolgen.</p>



<p>Ein Beispiel dafür ist das Ablegen von Produkten in den Warenkorb und der Eingabe von Daten in ein Formularfeld. Aber auch einfache Dinge, wie das Anklicken von Elementen auf deiner Seite.</p>



<p>Im Fall von Fehlermeldungen sollten diese zum richtigen  Zeitpunkt und an der richtigen Stelle erscheinen.</p>



<p>Beachten solltest du aber, dass  das Feedback auf keinen Fall störend wirken sollte.</p>



<h2 class="h-topspace wp-block-heading">Bei der Navigation fängt alles an</h2>



<p>Gutes Design fängt schon bei einem der ersten Elementen einer Seite an, nämlich der Navigation. Hier kann man in Hinblick auf gutes Webdesign sehr viel gut, aber leider auch vieles falsch machen.</p>



<p>Bei der Navigation gilt besonders der Grundsatz, dass der User diese möglichst einfach bedienen können soll und möglichst wenig nachgedacht werden muss.</p>



<p>Das beginnt bei so einfachen Grundregeln, wie der maximalen Anzahl an Menüpunkten, die 5-7 nicht überschreiten sollte und endet dann bei der sehr oft schwer zu beantwortenden Frage, welche Menüpunkte kommen idealerweise wohin. Die Anzahl der Menüpunkte kommt übrigens von der Millerschen Zahl, die beschreibt, wieviel Einheiten ein Mensch im Kurzzeitgedächtnis halten kann.</p>



<h3 class="h-topspace wp-block-heading">Fragen zur Navigation</h3>



<p>Wo soll die Navigation platziert werden? </p>



<p>Soll ich eine vertikale oder horizontale Navigation verwenden? </p>



<p>Kommt sie unter, neben oder über das Logo? </p>



<p>Soll sie beim Scrollen fix bleiben oder mit der Seite mitwandern? </p>



<p>Wie viele Ebenen soll mein Menü haben? </p>



<p>All das sind Fragen (und sicher noch einige mehr), die mit Sicherheit auftauchen und die man sich gut überlegen sollte.</p>



<p>Die Navigation ist ein zentraler und wichtiger Bestandteil einer guten Seite, da sie dem Nutzer bei der Orientierung und damit bei der Benutzung unserer Seite hilft. </p>



<h3 class="h-topspace wp-block-heading">Schaffe Orientierung</h3>



<p>Die Navigation sollte nicht nur die Möglichkeit bieten den User strukturiert durch unsere Inhalte zu führen, sondern auch anzeigen, wo man sich gerade befindet. Sei es zum Beispiel durch eingefärbte Navigationselemente oder durch die sogenannten Breadcrumbs. </p>



<p>Diese Breadcrumbs, sind vergleichbar mit den Brotkrümmel, die man aus Märchen kennt. Sie zeigen dem Besucher deiner Website an, welchen Weg er über möglicherweise mehrere Ebenen er zur aktuellen Seite zurückgelegt hat. Bei guten Breadcrumbs kann man nicht nur den Weg sehen, sondern auch zu einer beliebigen Stelle auf diesen Weg navigieren.</p>



<p>Viele von den Fragen in Bezug auf die Navigation kann man sich selbst beantworten. Andere aber, wie etwa welche Elemente wohin kommen, kann und sollte man nicht so einfach selbst entscheiden. Vor allem Menüs, die noch Untermenüpunkte enthalten und damit eine umfangreichere Navigation darstellen sind hier das Problem.</p>



<h3 class="h-topspace wp-block-heading">Dein User sollte entscheiden, was er braucht</h3>



<p>Hier hängt sehr viel von deinen Besuchern ab. Du solltest sie gut kennen und dann die Entscheidung auf Grund ihres Verhaltens und ihrer Denkweise treffen. Hier hilft übrigens die schon weiter oben erwähnte Erstellung einer oder mehrerer Personas weiter.</p>



<p>Es gibt dazu einige gute Methoden, die man in Tests oder Befragungen mit seinem Zielpublikum leicht und schnell durchführen kann. Eine davon ist zum Beispiel die Card Sorting Methode.</p>



<p>Bedenke auch, dass verschiedene Menschen verschiedene Zugänge haben um zum Ziel zu kommen. </p>



<p>Vergleichen wir das zum Beispiel mit einem Baumarkt. </p>



<p>Da gibt es jene, die den richtigen Gang mit dem gewünschten Produkten suchen, in dem sie die grossen Schilder mit der Aufschrift der Bereiche ansehen. Also z.B. Werkzeug, Sanitär, Gartengeräte, usw.. Das entspricht unserem bekannten Menü.</p>



<p>Dann gibt es aber jene, die beim Eingang einmal den Orientierungsplan studieren um zu sehen, wo sich was befindet. Um dann gezielt zu diesem Bereich zu gehen. Das ist bei einer Website vergleichbar mit der Sitemap. Diese zeigt auch bei einer Website einmal in einer strukturierten Übersicht alle Bereiche der Website an.</p>



<p>Und zuletzt gibt es dann die Besucher im Baumarkt, die zur Info gehen und fragen, wo sich das gewünschte Produkt befindet. Diese benutzen auf unserer Website das Suchfeld um zu den gewünschten Inhalten zu kommen.</p>



<p>Du siehst also die Navigation ist ein weites Gebiet, wo es noch viel zu erzählen gibt. Ich möchte in diesem Artikel jetzt nicht tiefer in das Thema einsteigen, denn es soll ja allgemein um gutes Webdesign gehen.</p>



<p>Daher gehe ich in einem gesonderten Beitrag noch näher auf das Thema Website Navigation ein.</p>



<h2 class="h-topspace wp-block-heading">Muss man jeden Trend mitmachen? </h2>



<p>Das sich die Erwartungen der Benutzer von Webseiten ändern, sieht man sehr gut am Thema scrollen. Galt vor einigen Jahren noch die Devise, die Inhalte möglichst auf einzelne Seiten aufzuteilen und nicht zu viel Inhalt auf eine Seite zu packen, so hat sich das heute doch stark geändert.</p>



<h3 class="h-topspace wp-block-heading">Wie lang darf eine Website sein?</h3>



<p>Gerade durch das immer mehr werdende mobile Surfen, sind wir es gewohnt scrollen zu müssen. Außerdem ist am Smartphone das Scrollen viel einfacher als das herum klicken zwischen verschiedenen Seiten.</p>



<p>Auch die sozialen Medien haben ihren Teil zu dieser neuen Erwartung beigetragen, da wir es dort gewohnt sind auf einer endlos langen Seite die Inhalte zu konsumieren. </p>



<p>Auf das „normale“ Webdesign hat das Auswirkungen in Form von sogenannten One Pager Seiten. Also Webseiten, die nur aus einer langen Seite bestehen und auf der entweder durchgescrollt werden kann oder die Bereiche über eine Navigation angesprungen werden können.</p>



<p>Doch diese neue Art der Seitengestaltung kann auch seine Schattenseiten haben. Die Ladezeit dieser einen Seite kann sich dadurch wesentlich erhöhen. Daher muss beachtet werden, dass wichtige Inhalte auch am Anfang geladen werden.</p>



<p>Das was weiter unten kommt, kann durch den Einsatz von entsprechenden Techniken sogar erst dann geladen werden, wenn der Besucher der Seite in die Nähe des entsprechenden Bereiches kommt.</p>



<p>Bei den langen Seiten hat sich leider auch das dynamische herein bewegen von Inhalten etabliert. Oft wird dieser Effekt als Parallax Scrolling bezeichnet, was nicht ganz korrekt ist. </p>



<p>Der Begriff Parallax Scrolling benutzt zwar ähnliche Techniken, versucht aber durch unterschiedliche Bewegungsgeschwindigkeiten beim Scrollen einen 3D Effekt hervorzurufen. </p>



<p>Diesen Effekt erreicht man durch das einfache hereinfliegen lassen von Elementen mit Sicherheit nicht. So nett diese Effekte auch am Anfang waren, so nervend können diese mittlerweile sein. Diese Effekte sind heute keine Besonderheit mehr und werden statt bestaunt oftmals eher als lästig und unangenehm empfunden.</p>



<p>Überlege also wirklich, ob du jeden Trend mitmachen musst.</p>



<h3 class="h-topspace wp-block-heading">One Pager haben auch Nachteile</h3>



<p>OnePager und vielleicht der Einsatz von Motion Scrolling können für den einen oder andern Fall schon sehr sinnvoll sein. Denke zum Beispiel an das Story Telling. Das lässt sich dadurch sehr gut darstellen.</p>



<p>OnePager und das Nachladen von Inhalten, können übrigens auch eine negative Auswirkung auf die SEO (Suchmaschinenoptimierung) haben. Für Suchmaschinen kann es sein, dass diese erst später erscheinenden Elemente gar nicht vorhanden sind.</p>



<p>Aber auch die Schwierigkeit ein Focus Keyword für deine lange Seite zu finden ist eine der Herausforderungen. Dazu kommt noch, dass die extrem lange Seite und die damit größere Anzahl an Inhalten negative Einflüsse auf die Performance hat. Statt mehrerer Einträge in der Suchmaschine bei mehreren Seiten, hast du jetzt nur einen Eintrag für die eine Seite.</p>



<p>Bei langen Seiten solltest du auch bestimmte Design Elemente, wie etwa den Header (Kopfbereiche) oder Footer (Fussbereich) einer Seite neu überdenken.</p>



<p>Der Header rückt bei langen Seiten und längerem scrollen immer mehr in unerreichbare Ferne und der Footer erscheint, bei Seiten die immer wieder nachladen möglicherweise nie.</p>



<p>Das sind keine unlösbaren Probleme, nur sie müssen bedacht werden.</p>



<h2 class="h-topspace wp-block-heading">Und was ist mit dem Aussehen?</h2>



<p>Am Schluss will ich jetzt doch noch auf das Aussehen deiner Website eingehen. </p>



<p>Vielleicht hast du ja jetzt den Eindruck gewonnen, dass es völlig egal ist, wie deine Seite aussieht und dass es nur auf die Funktion ankommt.</p>



<p>Sollten dieser Eindruck und diese Gedanken bei dir entstanden sein, dann will ich speziell für dich noch einige Worte zu diesem Thema sagen.</p>



<p>Natürlich ist das Aussehen nicht egal. </p>



<p>Der erste Eindruck deiner Seite wird sicher durch den optischen Eindruck erzeugt. Nur auf einer Seite, die für deinen Besucher ästhetisch anzusehen ist wird er sich wohlfühlen. Nur dort wird dein Nutzer auch länger bleiben und die Inhalte konsumieren wollen.</p>



<p>Das Layout und damit das Aussehen ist ein wichtiger Bestandteil von gutem Design. Farben die nicht zusammenpassen, Schriften, die niemand lesen kann oder mit Inhalten überladene Seiten führen sicher nicht dazu, dass man gerne und freiwillig bleibt.</p>



<p>Die Gestaltungsgesetze aus der Gestaltungspsychologie sollten natürlich Teil deines Designs sein.</p>



<p>Aussehen darf aber nicht zur Selbstverwirklichung dienen sondern sollte auch einen Mehrwert für deine Website Besucher bringen.</p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"><p>Das Aussehen und die Funktion deiner Website müssen Hand in Hand gehen und sie müssen eine Einheit bilden. </p></blockquote>



<p>Wenn du das erreichst, dann hast du ein gutes Webdesign. Und damit eine Seite, die Besucher anzieht, sie hält, zum wieder besuchen motiviert und auch im weiteren Erfolg für dich einbringt.</p>



<p class="has-cyan-bluish-gray-color has-text-color"> (*) Bei diesem Link handelt es sich im einen Affiliate Link. Das bedeutet ich bekomme eine kleine Provision, wenn du über den Link kaufst. Für dich kostet das Produkt dadurch nicht mehr.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.andreasstocker.at/gutes-webdesign-und-deine-kuechenuhr/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Was ist SEO und was sollte man darüber wissen</title>
		<link>https://www.andreasstocker.at/was-ist-seo/</link>
					<comments>https://www.andreasstocker.at/was-ist-seo/#respond</comments>
		
		<dc:creator><![CDATA[]]></dc:creator>
		<pubDate>Sun, 03 Sep 2017 20:25:18 +0000</pubDate>
				<category><![CDATA[Umsetzung]]></category>
		<category><![CDATA[Betrieb & Optimierung]]></category>
		<category><![CDATA[SEO]]></category>
		<category><![CDATA[Webdesign]]></category>
		<guid isPermaLink="false">https://www.andreasstocker.at/?p=3063</guid>

					<description><![CDATA[Wenn du es geschafft hast deine Webseite ins Internet zu stellen, dann wirst du dir irgendwann die Frage stellen, wie kommen jetzt Besucher auf die Seiten. Aja, da gibt es ja die sogenannten Suchmaschinen. Viele sagen dazu einfach Google, obwohl im Internet natürlich mehrere davon existieren. Google hat allerdings eine so starke Verbreitung, dass man [&#8230;]]]></description>
										<content:encoded><![CDATA[<p><strong>Wenn du es geschafft hast deine Webseite ins Internet zu stellen, dann wirst du dir irgendwann die Frage stellen, wie kommen jetzt Besucher auf die Seiten. Aja, da gibt es ja die sogenannten Suchmaschinen. Viele sagen dazu einfach Google, obwohl im Internet natürlich mehrere davon existieren. Google hat allerdings eine so starke Verbreitung, dass man fast immer von diesem Dienst spricht, wenn es um Suchmaschinen und die Optimierung dafür geht. </strong></p>
<p><strong>Wir wollen es also schaffen, dass unsere fertige Webseite in diesen Suchmaschinen möglichst weit vorne angezeigt wird, damit wir bald viele Besucher bekommen. Wie gehen wir dabei am besten vor?</strong></p>
<p><span id="more-3063"></span>An dieser Stelle habe ich eine schlechte und eine gute Nachricht für dich. Die schlechte Nachricht ist, dass du dir diese Frage schon etwas früher hättest stellen sollen. Wenn eine Seite noch nicht fertig ist, dann ist es wesentlich einfacher die SEO Regeln umzusetzen. Haben wir jetzt Pech gehabt und müssen wir jetzt alles neu machen? Nein, nicht ganz, die gute Nachricht ist, dass viele der Regeln auch im Nachhinein noch umgesetzt werden können, aber mit etwas mehr Aufwand und vielleicht nicht so perfekt, wie wenn wir uns schon früher darüber Gedanken gemacht hätten.</p>
<p>Damit haben wir schon unseren ersten Merksatz:</p>
<p>[bctt tweet=&#8220;SEO beginnt nicht nach der Fertigstellung einer Website, sondern schon in der Planungsphase.&#8220; username=&#8220;StockerAndreas&#8220;]</p>
<p>&nbsp;</p>
<h2>Was ist SEO?</h2>
<p>Doch halt &#8211; ich habe in den vorigen Sätzen schon wieder eines dieser Websprachen Fremdwörter verwendet. Was ist SEO eigentlich? SEO ist eine Abkürzung und bedeutet <strong>Search Engine Optimization</strong>, also auf Deutsch übersetzt <strong>Suchmaschinenoptimierung</strong>. Wir wollen damit unsere Webseite so optimieren, dass diese bei der Suche nach bestimmten Begriffen bei Suchmaschinen möglichst weit oben landet.</p>
<p>Spätestens jetzt solltest du dir hoffentlich die Frage stellen. „Oben landen, aber bei welchen Suchbegriffen genau?“. Solltest du dir diese Frage gestellt haben, dann bist du schon einen grossen Schritt weiter, als viele andere Website Betreiber, die vor der Aufgabe der Optimierung stehen.</p>
<p>Bevor ich näher auf das Thema SEO eingehe, möchte ich noch kurz auf zwei Begriffe, die oft im Zusammenhang mit SEO auftauchen eingehen.</p>
<p>Hört man den Begriff <strong>SEM</strong> dann handelt es sich dabei um <strong>Search Engine Marketing</strong>. SEM ist ein Oberbegriff und setzt sich aus zwei Teilen zusammen. Erstens aus der bereits erwähnten Suchmaschinenoptimierung SEO und zweitens aus der Werbung bei Suchmaschinen <strong>SEA</strong>, was <strong>Search Engine Advertising</strong> bedeutet. Sollten dir also die Begriffe SEA und SEM im Zusammenhang mit SEO unterkommen dann kannst du das jetzt besser einordnen.</p>
<p>&nbsp;</p>
<p><strong>Wenn du in Bezug auf SEO beim Erstellen deiner Webseiten nicht vergessen willst, dann hole dir GRATIS am Ende des Artikels meine SEO Checkliste.</strong></p>
<p><a href="#seo-checkliste"><img loading="lazy" decoding="async" class="aligncenter wp-image-3083 size-full" src="https://www.andreasstocker.at/wp-content/uploads/2017/09/button_checkliste_orange.png" alt="" width="266" height="43"></a></p>
<p>&nbsp;</p>
<h2>SEO beginnt beim Keyword</h2>
<p>Es gibt nicht so einfach die Möglichkeit bei Google und den anderen Suchmaschinen mit jedem Begriff ganz vorne zu sein. Es ist also eine wichtige Arbeit, sich im ersten Schritt einmal Gedanken darüber zu machen, mit welchem Begriff oder besser noch mit welchen Begriffen man an vorderster Stelle landen möchte.</p>
<p>Klar wirst du jetzt sagen, mit dem Begriff, das mein Geschäft beschreibt und das was ich mache. Ich möchte dir dazu ein kleines Beispiel bringen um dir zu zeigen, dass es nicht immer die Beste Lösung ist auf einen bestimmten Begriff zu setzen.</p>
<p>Nehmen wir einmal an, du betreibst ein Restaurant und hast dafür eine Webseite. Jetzt könnte dein Bestreben sein mit dem Begriff Restaurant ganz nach oben zu kommen. Gibt mal den Begriff in Google ein und du wirst feststellen, dass es etwa 2 Milliarden anderer Seiten gibt, die hier angezeigt werden wollen. Eine verdammt grosse Menge, gegen die man sich hier durchsetzen muss.</p>
<p>Schränken wir jetzt das ganze etwas mehr ein. Angenommen, dein Restaurant befindet sich in Wien. Gibt man nun beide Begriffe „Restaurant Wien“ ein, dann sind es nur ,mehr 31 Millionen Webseiten. Immer noch sehr viel aber schon eine Menge weniger. Gehen wir noch einen Schritt weiter. Du hast dich auf Wiener Hausmannskost spezialisiert. Demnach versuchen wir es nun mit drei Begriffen „Restaurant Wien Hausmannskost“. Jetzt wird das Ergebnis schon etwas überschaubarer. Es gibt jetzt „nur“ mehr 110000 Einträge auf der Liste. Gegenüber fast 2 Milliarden wird es jetzt schon etwas einfacher hier nach vorne zu kommen.</p>
<p>Bemüht man sich und findet noch weitere Einschränkungen, dann wird der Mitbewerb immer übersichtlicher. Diese Art der Suche entspricht ja auch der realen Suche der User im Netz. Oder suchst du nur nach dem Begriff Restaurant, wenn du in einer Stadt ein Lokal zum Essen suchst?</p>
<p>Sei auch etwas kreativ mit der Wahl der Worte und überlege, wonach ein User im Netz noch suchen könnte. Google selbst hilft dir dabei sogar ein Stück weiter. Gibts du den Begriff „Restaurant Wien Hausmannskost“ ein und scrollst nach unten zum Ende der Liste, dann findest du einen Bereich „Ähnliche Suchanfragen zu …“</p>
<p><figure id="attachment_3059" aria-describedby="caption-attachment-3059" style="width: 510px" class="wp-caption alignnone"><img loading="lazy" decoding="async" class="responsive-image wp-image-3059 size-full" src="https://www.andreasstocker.at/wp-content/uploads/2017/09/Google-ähliche-Suchanfrage-zu.png" alt="Google - Ähnliche Suchanfragen" width="510" height="246" srcset="https://www.andreasstocker.at/wp-content/uploads/2017/09/Google-ähliche-Suchanfrage-zu.png 510w, https://www.andreasstocker.at/wp-content/uploads/2017/09/Google-ähliche-Suchanfrage-zu-300x145.png 300w" sizes="(max-width: 510px) 100vw, 510px" /><figcaption id="caption-attachment-3059" class="wp-caption-text">Google &#8211; Ähnliche Suchanfragen</figcaption></figure></p>
<p>Hier wird dir vorgeschlagen, was User noch suchen könnten, bei deinen eingegebenen Begriffen.</p>
<p>Wählst du aus dieser Liste etwa „beste hausmannskost wien“, dann wird die Zahl der Ergebnisse nur mehr 75800 sein. Bei „gasthaus hausmannskost wien“ sind es sogar nur mehr 62800. Vielleicht passt der Begriff Gasthaus sogar besser zu deinem Lokal. Probierst du es mit „wirtshaus hausmannskost wien“, dann reduziert sich die Liste noch einmal auf 47100.</p>
<p>Was ich dir mit diesem Beispiel zeigen wollte, ist, dass es sich lohnt und sogar notwendig ist die Stichworte oder in der Fachsprache Keywords genannt gut auszuwählen. Auf dieser Entscheidung baut deine weitere SEO Arbeit auf.</p>
<p>Warum habe ich vorhin behauptet, dass die Suchmaschinenoptimierung schon in der Planungsphase beginnt. Auch das ist schnell erklärt. Suchmaschinen haben verschiedene Kriterien, wonach Webseiten bewertet werden. Bei Google sind es einige hundert und eigentlich ist die genaue Berechnung ein Geheimnis. Dennoch ist genug zu diesem Algorithmus bekannt um die wichtigsten Ranking Faktoren &#8211; so nennt man die Kriterien für die Berechnung &#8211; zu kennen.</p>
<p>&nbsp;</p>
<h2>Die Domain und URL &#8211; Startpunkt für Suchmaschinen und User</h2>
<p>Eines dieser Kriterien ist zum Beispiel die URL bzw. die Domain. Wie du mir zustimmen wirst, ist das sicher eine Tätigkeit, die man schon sehr zeitig durchführt. Bei der Domain kann es zum Beispiel sinnvoll sein Teile der Suchbegriffe schon in den Domainnamen einzubauen. Du solltest dabei aber beachten, dass der Domainname zwar eine gewisse Rolle spielt, aber die Auswahl der Domain auf Grund der Keywords nicht das vorrangige Kriterium sein sollte.</p>
<p>Viel mehr spielt die komplette URL, also auch der Teil hinter der Domain eine Rolle und dort sollte man versuchen seine Haupt-Keywords gezielt unterzubringen. Es sollte nicht das Ziel sein den kompletten Webauftritt auf ein Keyword zu optimieren, sondern verschiedene Seiten auf jeweils ein Hauptkeyword.</p>
<p><figure id="attachment_3057" aria-describedby="caption-attachment-3057" style="width: 682px" class="wp-caption alignnone"><img loading="lazy" decoding="async" class="responsive-image wp-image-3057 size-full" src="https://www.andreasstocker.at/wp-content/uploads/2017/09/seo_url.png" alt="SEO optimierte URL mit Domain sollte das Keyword beinhalten" width="682" height="110" srcset="https://www.andreasstocker.at/wp-content/uploads/2017/09/seo_url.png 682w, https://www.andreasstocker.at/wp-content/uploads/2017/09/seo_url-300x48.png 300w" sizes="(max-width: 682px) 100vw, 682px" /><figcaption id="caption-attachment-3057" class="wp-caption-text">SEO optimierte URL mit Domain sollte das Keyword beinhalten</figcaption></figure></p>
<p>So wie dieser Artikel für das Keyword SEO optimiert sein könnte, gibt es andere Artikel auf diesem Blog, die auf andere Keywords optimiert sind zum Beispiel „adobe muse cms“, „css einheiten“ oder „adobe muse responsive“. All diese Kombinationen liefern zum aktuellen Zeitpunkt eine andere Seite auf Google unter den ersten 10 Ergebnissen.</p>
<p>Die Optimierung der URL und andere Optimierungen, wie zum Beispiel der Seitentitel sind zwar auch noch möglich, wenn die Website schon fertig ist, bedeuten aber mitunter doch einen erheblichen Aufwand. Damit gilt auch hier, schon beim Planen an SEO zu denken ist keine schlechte Entscheidung. Sind deine Stichworte bereits bei der Erstellung der Webseite bekannt dann geht der Einbau Hand in Hand.</p>
<p>Auch das Erfassen der eigentlichen Inhalte wie Texte und Bildbeschreibungen bauen auf deine Keyword Recherche auf. Aus diesem Grund ist es auch schon vor dem Schreiben der Inhalte sinnvoll, die späteren Keywords zu kennen. Aber dazu etwas später mehr.</p>
<p>&nbsp;</p>
<h2>OnPage und OffPage &#8211; die zwei Bereiche der Suchmaschinenoptimierung</h2>
<p>Bevor wir uns jetzt in die Tiefen der Optimierung stürzen möchte ich dir zwei prinzipielle Richtungen der Suchmaschinen Optimierung zeigen. Bei SEO unterteilt man in die beiden Bereiche <strong>OnPage</strong> und <strong>OffPage</strong> Optimierung.</p>
<p>Bei <strong>OnPage</strong> hast du die Optimierung selbst in der Hand. In diesem Fall bestimmst du selbst die Qualität der Optimierung. Das ist auch jener Teil, der bei der Erstellung der Website und der Inhalte zum Tragen kommt. Ein Teil dieser OnPage Optimierung, ist wie weiter oben schon erwähnt die URL deiner Seite.</p>
<p>Anders ist es bei der <strong>OffPage</strong> Optimierung, hier bist du von anderen abhängig. Es geht in diesem Teil vor allem um die externe Verlinkung, sprich jene Seiten, die auf deine Inhalte verlinken.</p>
<p>Wir werden uns jetzt im folgenden auf die Bereiche konzentrieren, die du selbst in der Hand hast, also die OnPage Optimierung.</p>
<p>&nbsp;</p>
<h2>Ohne Text gibt es keine Optimierung</h2>
<p>Beginnen wir einmal bei dem wohl wichtigsten Teil der Optimierung. Wenn wir keinen Text auf unserer Seite haben, dann können wir auch nicht viel optimieren. Für Google und andere Suchmaschinen zählt alles, was als Text erfasst werden kann. Obwohl es zwar mittels OCR möglich wäre Inhalte in Bildern zu lesen, werden solche Texte von Suchmaschinen nicht ausgewertet. Noch schlimmer ist es mit Videos oder Flash.</p>
<p>Also ran an die Tastatur und Texte schreiben. Obwohl im Web die Regel gilt, möglichst kurze Texte zu schreiben, lieben Suchmaschinen viel Inhalt. Mindestens 300 Worte sollten es schon sein noch besser wäre 1000 Worte.</p>
<p>Wenn das aber gar nicht möglich ist, dann muss man sich natürlich nicht krampfhaft daran halten, denn es gilt auch die Regel</p>
<p>[bctt tweet=&#8220;„Schreibe in erster Linie für den Menschen und nicht für die Suchmaschine“&#8220; username=&#8220;StockerAndreas&#8220;]</p>
<p>&nbsp;</p>
<h3>Kopiere keine Inhalte</h3>
<p>Bei SEO gibt es aber noch einige weitere Anforderungen an die Texte. Es gibt nämlich etwas, was die Suchmaschinen gar nicht mögen. Das sind kopierte Texte. Kopiert man also Inhalte von anderen Webseiten, dann spricht man von Duplicate Content und das strafen Suchmaschinen gerne ab, in dem sie die Seiten dann entweder ganz schlecht oder gar nicht mehr auflisten.</p>
<p>&nbsp;</p>
<h3>Das Verhältnis zählt &#8211; die Keyworddichte</h3>
<p>Wenn wir uns an den Anfang des Artikels zurückerinnern, dann haben wir uns ja die Mühe gemacht und einige Keywords ermittelt, für die wir optimieren wollen. Diese Arbeit müssen wir natürlich laufend in unsere Suchmaschinenoptimierung einfliessen lassen. Das bedeutet, dass wir unsere Wörter gezielt in unsere Texte einbauen müssen.</p>
<p>Das geschieht am besten schön über den ganzen Text verteilt. Einmal im normalen Fliesstext, dann in Überschriften und auch in Bildbeschreibungen und Dateinamen.</p>
<p>Man bezeichnet das Verhältnis von Suchbegriffen zum Text als Keyworddichte. Wenn du zum Beispiel einen Text mit 500 Wörtern hast und dein Keyword 15 mal vorkommt, dann hast du eine Keyworddichte von 3%. Die Dichte sollte in der Regel so im Bereich von 2% bis 5% liegen. Ja du hast richtig gelesen, es gibt auch eine empfohlene Obergrenze. Zu viele Keywords im Text wird von Suchmaschinen als SPAM bewertet und führt damit zu schlechterem Ranking. Diese Werte stellen allerdings nur einen Richtwert dar. Es gibt auch Seiten, die gut ranken, auch wenn die Keyword Dichte geringer ist.</p>
<p>Und noch etwas ganz Wichtiges. Wir sprechen in diesem Artikel von SEO, also der Optimierung unserer Inhalte für Suchmaschinen. Dennoch müssen wir immer daran denken, wer unsere Inhalte wirklich lesen soll. Denke an den Merksatz von oben &#8211; richtig &#8211; es sind Menschen. Daher sollten die Inhalte bei dem Bestreben nach Optimierung immer für den Menschen geschrieben werden. Wir haben nicht viel davon, wenn die User zwar zu uns finden, uns aber dann rasch wieder verlassen, weil unsere Texte nicht lesbar sind. Eine kurze Verweildauer oder eine hohe Absprungrate wird übrigens von Suchmaschinen ebenfalls erfasst und kann in die Bewertung negativ einfliessen.</p>
<p>Für die Keyworddichte gibt es auch Webdienste, die dir sagen, wie hoch diese bei deiner Website ist.</p>
<p>Bei diesem SEO Tool, kannst du sowohl einen Text, als auch eine bereits bestehende Seite prüfen lassen:</p>
<p><a title="Tool zum Messen der Keyworddichte" href="http://tools.seobook.com/general/keyword-density/" target="_blank" rel="noopener noreferrer">http://tools.seobook.com/general/keyword-density/</a></p>
<p>Diese Seite zeigt dir an, wie gut dein Text auf bestimmte Keyword bezüglich Keyworddichte optimiert ist. Einfach mit Copy&amp;Paste den Text einfügen und checken lassen:</p>
<p><a title="Keywordtool zum Testen der Keyworddichte" href="https://seo-semantix.de/keywordtool/keyword.php" target="_blank" rel="noopener noreferrer">https://seo-semantix.de/keywordtool/keyword.php</a></p>
<p>&nbsp;</p>
<h2>Struktur der Seite</h2>
<p>Suchmaschinen lieben Semantik. Oje schon wieder so ein Fremdwort. Semantik ist nichts anders als die Bedeutung von Texten.</p>
<p>Werden Texte einfach so in einer langen Wurst runter geschrieben, dann fehlt einer Suchmaschine jegliche Struktur. Wir können jetzt Texte optisch mittels CSS Technik hervorheben und damit auch optisch Überschriften gestalten. Das hilft aber einer Suchmaschine sehr wenig, denn diese kann diese optischen Formatierung nicht sehen.</p>
<p>Wir müssen also unsere Struktur auch für die Suchmaschine sichtbar machen. Zum Glück gab es für das Web hier immer schon eine Methode nämlich die Überschriften Tags h1 bis h6. Eine Überschrift h1 &#8211; so nennt sich technisch der HTML Tag wird für eine Überschrift erster Ordnung also der obersten Überschrift verwendet. Dann folgen die h2 Überschriften, also die zweite Ordnung. Das ganze geht dann bis zu h6, also einer Überschrift sechster Ordnung. Damit sollte man für die Struktur seiner Texte schon auskommen.</p>
<p>Die Struktur der Überschrift, kennst du sicher, wenn du an Bücher denkst. Da gibt es den Buchtitel (h1), die Kapitel (h2) eventuell noch Unterkapitel (h3) und vielleicht auch noch weitere Überschriften (h4) in diesen Unterkapiteln.</p>
<p>Diese Überschriften haben aber für Suchmaschinen eine besondere Bedeutung, denn Wörter, die in den Überschriften stehen, werden als wichtiger angesehen. Aus diesem Grund sollte man eben nicht nur eine Struktur erstellen, sondern nach Möglichkeit auch seine Keywords in den Überschriften unterbringen.</p>
<p>Zu den semantischen Auszeichnungen zählen zum Beispiel auch Aufzählungen oder als Zitat markierte Texte.</p>
<p>Bevor wir mit unseren sichtbaren Elementen auf der Seite weitermachen, will ich noch eine besondere Art von Text erwähnen. Dieser ist zwar für die Leser unserer Seite unsichtbar, aber für die Suchmaschinenoptmierung sehr wichtig.</p>
<p>&nbsp;</p>
<h2>Meta Tags &#8211; Zusammenfassung für Suchmaschinen</h2>
<p>Die sogenannten Meta Tags helfen den Suchmaschinen die wesentlichen Inhalte unserer Seite zu erfassen. Dabei ist der Beschreibung Meta Tag (auch Description genannt) einer der wichtigsten. Diesen nehmen viele Suchmaschinen um den Text, der bei den Suchergebnissen angezeigt wird festzulegen. Fehlt der Text, dann nimmt die Suchmaschine einen Textinhalt, den sie als geeignet erachtet. Das kann sich aber von dem, was wir gerne hätte dann doch unterscheiden.</p>
<p><figure id="attachment_3056" aria-describedby="caption-attachment-3056" style="width: 597px" class="wp-caption alignnone"><img loading="lazy" decoding="async" class="responsive-image wp-image-3056 size-full" src="https://www.andreasstocker.at/wp-content/uploads/2017/09/seo_meta_beschreibung.png" alt="SEO Meta Beschreibung in Google" width="597" height="108" srcset="https://www.andreasstocker.at/wp-content/uploads/2017/09/seo_meta_beschreibung.png 597w, https://www.andreasstocker.at/wp-content/uploads/2017/09/seo_meta_beschreibung-300x54.png 300w" sizes="(max-width: 597px) 100vw, 597px" /><figcaption id="caption-attachment-3056" class="wp-caption-text">SEO Meta Beschreibung in Google</figcaption></figure></p>
<p>Es gibt auch die Möglichkeit bei den Meta Tags Suchbegriffe (Keyword Meta-Tag) einzugeben, aber in der Regel werden diese kaum ausgewertet. Wir müssen also schon die Tipps in diesem Artikel beachten um unsere gewünschten Suchbegriffe unterzubringen. Trotzdem kann es nicht schaden auch den Keyword Tag zu befüllen.</p>
<p>&nbsp;</p>
<h2>Seitentitel &#8211; an vielen Stellen sichtbar</h2>
<p>Ein auf den ersten Blick nicht sichtbares Element ist der Seitentitel. Dieser fällt vielen im ersten Schritt gar nicht auf, hat aber schlussendlich sehr sichtbare Auswirkungen.</p>
<p>Für den User, der deine Seite besucht, ist dieser Seitentitel oben in der Browserleiste oder in der Tab Beschriftung sichtbar. Wenn der User den Link deiner Seite in seinem Browser abspeichert, dann wird dieser Titel als Bezeichnung bei den gespeicherten Bookmarks, Lesezeichen oder wie auch immer sich das bei deinem Browser nennt angezeigt.</p>
<p><figure id="attachment_3055" aria-describedby="caption-attachment-3055" style="width: 682px" class="wp-caption alignnone"><img loading="lazy" decoding="async" class="responsive-image wp-image-3055 size-full" src="https://www.andreasstocker.at/wp-content/uploads/2017/09/seo_titel.png" alt="Seitentitel im Browser" width="682" height="69" srcset="https://www.andreasstocker.at/wp-content/uploads/2017/09/seo_titel.png 682w, https://www.andreasstocker.at/wp-content/uploads/2017/09/seo_titel-300x30.png 300w" sizes="(max-width: 682px) 100vw, 682px" /><figcaption id="caption-attachment-3055" class="wp-caption-text">Seitentitel im Browser</figcaption></figure></p>
<p>Wo kommt dieser Titel bei den Suchmaschinen vor. Erstens ist dieser Titel sehr prominent sichtbar, da er als Überschrift deines Suchergebnisses angezeigt wird. Also zusammen mit der Beschreibung, sind das die beiden Bereiche, wo du definieren kannst, wie deine Suchergebnisse angezeigt werden.</p>
<p><figure id="attachment_3058" aria-describedby="caption-attachment-3058" style="width: 597px" class="wp-caption alignnone"><img loading="lazy" decoding="async" class="responsive-image wp-image-3058 size-full" src="https://www.andreasstocker.at/wp-content/uploads/2017/09/seo_titel_in_google.png" alt="Seitentitel im Browser" width="597" height="108" srcset="https://www.andreasstocker.at/wp-content/uploads/2017/09/seo_titel_in_google.png 597w, https://www.andreasstocker.at/wp-content/uploads/2017/09/seo_titel_in_google-300x54.png 300w" sizes="(max-width: 597px) 100vw, 597px" /><figcaption id="caption-attachment-3058" class="wp-caption-text">Seitentitel im Browser</figcaption></figure></p>
<p>Weiters werden Wörter in diesem Titel von Suchmaschinen, wie etwa Google auch sehr stark bewertet. Achtet man hier nicht darauf, seine Keywords unterzubringen, verschenkt man einen wertvollen Platz für ein gutes Ranking.</p>
<p>Wichtig ist, dass dieser Seiten Titel, er wird mit dem HTML Tag title definiert nichts mit dem Meta-Tag Title zu tun hat. Also aufpassen, wo du den Titel definierst.</p>
<p>&nbsp;</p>
<h2>Interne Links (Anker oder andere Seiten)</h2>
<p>Wenden wir uns jetzt einem Element zu, dass man normalerweise eher aus der OffPage Optimierung kennt, den Links.</p>
<p>Auf der eigenen Website gibt es ja auch einiges zu verlinken. Zum einen hat man vielleicht mehrere Seiten, die untereinander verlinkt werden und zum andern kann man auf der Seite Verweise zu anderen Stellen auf der selben Seite machen. Auch das sind Links.</p>
<p>Oft macht man aber bei den Links den Fehler, diese falsch zu bezeichnen und verschenkt damit wertvolle Ranking Punkte.</p>
<p>Es sollte nicht lauten (Das Wort &#8222;hier&#8220; ist der Link):</p>
<p><strong><a id="seo_link_1"></a>Weiter Infos zum Thema SEO findest du <a href="#seo_link_1" rel="noopener">hier</a></strong></p>
<p>Sondern besser (der komplette Satz ist der Link)</p>
<p><strong><a id="seo_link_2"></a><a href="#seo_link_2" rel="noopener">Weitere Infos zum Thema SEO</a></strong></p>
<p>Der Unterschied liegt vor allem im verlinkten Text. Bei Variante 1 ist das Keyword „hier“, mit dem du sicher nicht gefunden werden willst. Bei der Variante 2 kommt das Wort SEO vor, dass eines meiner Keywords sein könnte.</p>
<p>Da Links in den meisten Fällen von Suchmaschinen höher bewertet werden, als normale Texte, lohnt es sich darüber nachzudenken, den einen oder anderen Link mehr einbauen und den verlinkten Text gut zu überlegen.</p>
<p>&nbsp;</p>
<h2>SEO und der Einsatz von Bildern</h2>
<p>Wie ich Anfangs schon erwähnt habe, ist es wichtig Texte auf der Webseite zu haben, da Suchmaschinen keine Bilder „lesen“ können. Dennoch sind Bilder ein wichtiger Teil für den User. Auf der einen Seite, kann man mit Bildern vieles einfacher erklären und auf der anderen Seite, lockern Bilder die Inhalte auf und machen den Text angenehmer lesbar.</p>
<p>Wenn man Bilder einsetzt, dann gibt es allerdings einiges zu beachten.</p>
<p>Im ersten Schritt solltest du beachten, dass du keine Bilder verwenden solltest um damit Texte darzustellen, die wichtige Informationen beinhalten.</p>
<p>Jetzt aber zur Bilddatei selbst. Schon beim Speichern des Bildes kann man einiges richtig und auch falsch machen.</p>
<p>&nbsp;</p>
<h3>Verwende optimierte Dateinamen</h3>
<p>Wähle einen Dateinamen, der deine Keywords enthält. Ein Dateiname <em>&#8222;img0012.jpg&#8220;</em> ist denkbar ungeeignet. Besser wäre hier etwa <em>&#8222;bilder-und-seo.jpg&#8220;</em>. Suchmaschinen können die Dateinamen auswerten und verwenden diese auch für das Ranking.</p>
<p>&nbsp;</p>
<h3>Optimiere die Abmessungen</h3>
<p>Ebenfalls beim Abspeichern, solltest du darauf achten, die Größe der Bilder zu optimieren. Das betrifft auf der einen Seite die Abmessungen, aber auch die Größe in kByte. Es macht keinen Sinn ein Bild aus der Digitalkamera, das vielleicht 3000&#215;2000 Pixel hat direkt auf die Webseite zu geben. Das Bild wird zwar in den meisten Fällen (sofern es richtig eingebaut wird) im Browser optisch für den User verkleinert, aber es werden damit unnötig Daten übertragen, die eine Seite dann langsamer machen.</p>
<p>&nbsp;</p>
<h3>Optimiere die Dateigröße</h3>
<p>Das Thema Geschwindigkeit spielt auch bei der Dateigröße eine große Rolle. Viele Bilder vor allem JPG und PNG lassen sich ohne merkliche Qualitätsverluste drastisch in der Datenmenge reduzieren. Dies wirkt sich dann sehr positiv auf die Ladezeiten deiner Seite aus.</p>
<p>Die beiden eben genannten Tipps sind sehr wertvoll, da das Thema Ladezeit bei manchen Suchmaschinen ein wichtiger SEO Rankingfaktor geworden ist. Dazu aber etwas mehr weiter unten.</p>
<p>&nbsp;</p>
<h3>Beschreibe die Bilder</h3>
<p>Da Suchmaschinen den Inhalt nicht erfassen können, sollte man der Suchmaschine mitteilen, was auf dem Bild zu sehen ist. Natürlich sollten hier die Keywords verwendet werden. Den alternativen Text kann man im HTML Code mit dem „alt“ Attribut angeben. Diverse Tools und CMS bieten ebenfalls die Möglichkeit diesen Alternativ Text anzugeben. Wenn dieser Alternativ Text verwendet wird, dann hast du auch schon einen wichtigen Schritt in Richtung Barrierefreiheit deiner Seite gemacht.</p>
<p>Zusätzlich zum „alt“ Attribut, gibt es auch noch das „title“ Attribut. Dieses wird bei den meisten Browsern dann angezeigt, wenn man mit der Maus über das Bild fährt. Es wäre nicht schlecht auch in diesem Text deine Keywords einzubauen. Allerdings wird dieser aus SEO Sicht nicht so hoch bewertet, wie das „alt“ Attribute.</p>
<p>Wie du Bilder im HTML Code genau optimierst, zeige ich dir in einem eigenen Praxisteil Beitrag.</p>
<p>&nbsp;</p>
<h2>Seitengeschwindigkeit optimieren</h2>
<p>Bei den Bildern habe ich schon erwähnt, dass manche Suchmaschinen &#8211; zumindest Google &#8211; einen grossen Wert darauf legen, dass Seiten rasch geladen werden.</p>
<p>Die Optimierung der Datenmenge die geladen werden ist einer der Optimierungspunkte. Die Ladezeit hängt allerdings von einigen anderen Faktoren ab. Diese sind zum einen der Webhoster und zum anderen auch die Anzahl der Dateien, die geladen werden.</p>
<p>Beim Webhoster kann man in der Regel nicht mehr viel machen, ausser zu wechseln, wenn es extrem problematisch wird.</p>
<p>Die Anzahl der Dateien lässt sich aber in vielen Fällen vermindern. Da geht es weniger um die Bilder, sondern mehr um diverse CSS und JavaScript Dateien. Oftmals sind das eine Menge verschiedener Dateien, die geladen werden müssen. Mit geeigneten Tools, kann man diese oft zu einer oder wenigen Dateien zusammenfassen.</p>
<p>Viel mehr Worte möchte ich hier über das Thema Seitengeschwindigkeit nicht verlieren, da dies ein eigenes spannendes Thema ist. Wenn ihr Interesse daran habt, schreibe ich gerne einmal einen eigenen Artikel dazu.</p>
<p>&nbsp;</p>
<h2>Tauglichkeit für mobile Geräte</h2>
<p>Möchtest du, dass du auch in den Suchergebnissen aufscheinst, die auf dem Smartphone angezeigt werden, dann ist eine Optimierung für mobile Geräte unbedingt erforderlich. Wenn man bei der SEO nicht auf die mobile Optimierung achtet, dann fällt man in der Liste weit zurück (wenn man überhaupt aufscheint).</p>
<p>Du kannst selbst leicht herausfinden, wie Google die Optimierung in Bezug auf mobile Tauglichkeit bewertet, in dem du folgende URL aufrufst und deine Seite damit überprüfen lässt:</p>
<p><a title="Google - Test auf Optimierung für Mobilgeräte" href="https://search.google.com/test/mobile-friendly" target="_blank" rel="noopener noreferrer">https://search.google.com/test/mobile-friendly</a></p>
<p>&nbsp;</p>
<p>Im Idealfall sieht dein Ergebnis so aus:</p>
<p><figure id="attachment_3061" aria-describedby="caption-attachment-3061" style="width: 350px" class="wp-caption alignnone"><img loading="lazy" decoding="async" class="wp-image-3061" src="https://www.andreasstocker.at/wp-content/uploads/2017/09/seo_google_mobile_ok.png" alt="Seite für Mobilgeräte optimiert" width="350" height="159" srcset="https://www.andreasstocker.at/wp-content/uploads/2017/09/seo_google_mobile_ok.png 629w, https://www.andreasstocker.at/wp-content/uploads/2017/09/seo_google_mobile_ok-300x136.png 300w" sizes="(max-width: 350px) 100vw, 350px" /><figcaption id="caption-attachment-3061" class="wp-caption-text">Seite für Mobilgeräte optimiert</figcaption></figure></p>
<p>&nbsp;</p>
<p>Wenn du Handlungsbedarf hast, dann könnte es so aussehen:</p>
<p><figure id="attachment_3054" aria-describedby="caption-attachment-3054" style="width: 350px" class="wp-caption alignnone"><img loading="lazy" decoding="async" class="wp-image-3054" src="https://www.andreasstocker.at/wp-content/uploads/2017/09/seo_google_mobile_nok.png" alt="Seite für Mobilgeräte nicht optimiert" width="350" height="380" srcset="https://www.andreasstocker.at/wp-content/uploads/2017/09/seo_google_mobile_nok.png 640w, https://www.andreasstocker.at/wp-content/uploads/2017/09/seo_google_mobile_nok-276x300.png 276w" sizes="(max-width: 350px) 100vw, 350px" /><figcaption id="caption-attachment-3054" class="wp-caption-text">Seite für Mobilgeräte nicht optimiert</figcaption></figure></p>
<p>Das schöne an diesem Test ist, dass dieser auch angezeigt, was Google an deiner Seite nicht gefällt und du weisst damit, was du ändern musst.</p>
<p>&nbsp;</p>
<h2>Eine sichere Verbindung</h2>
<p>Google achtet in letzte Zeit immer mehr darauf, das Webseiten auch eine verschlüsselte Verbindung anbieten.</p>
<p>Bereits im Jahr 2014 hat Google bekannt gegeben, dass SSL/TSL ein Ranking Faktor ist (<a href="https://webmasters.googleblog.com/2014/08/https-as-ranking-signal.html" target="_blank" rel="noopener noreferrer">https://webmasters.googleblog.com/2014/08/https-as-ranking-signal.html</a>). Es lohnt sich also aus SEO Sicht auf eine sicher HTTPS Verbindung umzustellen.</p>
<p>Eine sichere Website erkennt man übrigens am Schlosssymbol links von der URL &#8211; hier als Beispiel im Chrome Browser:</p>
<p><figure id="attachment_3060" aria-describedby="caption-attachment-3060" style="width: 429px" class="wp-caption alignnone"><img loading="lazy" decoding="async" class="responsive-image wp-image-3060 size-full" src="https://www.andreasstocker.at/wp-content/uploads/2017/09/seo_secure_website.png" alt="Website mit HTTPS" width="429" height="36" srcset="https://www.andreasstocker.at/wp-content/uploads/2017/09/seo_secure_website.png 429w, https://www.andreasstocker.at/wp-content/uploads/2017/09/seo_secure_website-300x25.png 300w" sizes="(max-width: 429px) 100vw, 429px" /><figcaption id="caption-attachment-3060" class="wp-caption-text">Website mit HTTPS</figcaption></figure></p>
<p>Mittlerweile ist es auch Dank Let’s Encrypt (<a href="https://letsencrypt.org/" target="_blank" rel="noopener noreferrer">https://letsencrypt.org/</a>) möglich kostenlos ein SSL Zertifikat für seine Website zu bekommen. Man braucht lediglich einen Provider der dies unterstützt. Auf jeden Fall ein Kriterium für die Providerwahl, wenn noch keiner vorhanden ist.</p>
<p>&nbsp;</p>
<h2>Zusammenfassung</h2>
<p>Du hast in diesem Artikel die wichtigsten Ranking Faktoren kennen gelernt, die du auf deiner Seite selbst beeinflussen kannst.</p>
<p>Bedenke bei SEO, dass dies eine laufende Arbeit ist, die mit jeder Seite, die du erstellst von vorne beginnt. Von vorne bedeutet auch wirklich alle von mir beschrieben Punkte abzuarbeiten, auch die Keyword Suche, denn jeder Text und jede Seite hat möglicherweise andere Keywords, mit denen du gefunden werden willst.</p>
<p>&nbsp;</p>
<p><strong>Wenn du dir die Arbeit einfachen machen willst und keinen der Rankingfaktoren übersehen willst, dann lade dir meine SEO Checkliste herunter. In dieser habe ich nochmals zusammengefasst, was du berücksichtigen solltest, damit sicher nichts vergessen wird.</strong></p>
<div id="seo-checkliste"></div>
<p>[thrive_leads id=&#8217;3078&#8242;]</p>
<p>&nbsp;</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.andreasstocker.at/was-ist-seo/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>WDC Podcast Folge 05 &#8211; Die verschiedenen Website Typen</title>
		<link>https://www.andreasstocker.at/wdc-podcast-folge-05-die-verschiedenen-website-typen/</link>
					<comments>https://www.andreasstocker.at/wdc-podcast-folge-05-die-verschiedenen-website-typen/#respond</comments>
		
		<dc:creator><![CDATA[]]></dc:creator>
		<pubDate>Wed, 31 May 2017 18:41:13 +0000</pubDate>
				<category><![CDATA[Planung & Konzeption]]></category>
		<category><![CDATA[Podcast-Website]]></category>
		<category><![CDATA[Webdesign]]></category>
		<guid isPermaLink="false">https://2020.andreasstocker.at/?p=5025</guid>

					<description><![CDATA[WDC005 Die verschiedenen Website Typen In der letzten Folge habe wir uns über die Inhalte für deinen Webauftritt unterhalten. Heute sehen wir uns an, welche verschiedene Typen von Webseiten es gibt und welche Auswirkungen die Inhalte auf die Wahl des richtigen Typs haben. Du wirst auch hören, welchen Website Typ du am besten wählen solltest. [&#8230;]]]></description>
										<content:encoded><![CDATA[
<h1 class="wp-block-heading">WDC005 Die verschiedenen Website Typen</h1>






<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="658" src="https://www.andreasstocker.at/wp-content/uploads/2017/05/bb_wdc_podcast_folge_005-1024x658.jpg" alt="" class="wp-image-5291" srcset="https://www.andreasstocker.at/wp-content/uploads/2017/05/bb_wdc_podcast_folge_005-1024x658.jpg 1024w, https://www.andreasstocker.at/wp-content/uploads/2017/05/bb_wdc_podcast_folge_005-300x193.jpg 300w, https://www.andreasstocker.at/wp-content/uploads/2017/05/bb_wdc_podcast_folge_005-768x494.jpg 768w, https://www.andreasstocker.at/wp-content/uploads/2017/05/bb_wdc_podcast_folge_005.jpg 1120w" sizes="(max-width: 1024px) 100vw, 1024px" /><figcaption class="wp-element-caption">WDC Podcast Folge 05 – Die verschiedenen Website Typen</figcaption></figure>



<p><strong>In der letzten Folge habe wir uns über die Inhalte für deinen Webauftritt unterhalten. Heute sehen wir uns an, welche verschiedene Typen von Webseiten es gibt und welche Auswirkungen die Inhalte auf die Wahl des richtigen Typs haben. Du wirst auch hören, welchen Website Typ du am besten wählen solltest.</strong></p>



<span id="more-5025"></span>



<h2 class="wp-block-heading"><strong>Die Visitkarte im Internet</strong></h2>



<p>Steigen wir gleich in das Thema ein und sehen wir uns den einfachsten Typ an – die Visitkarten Website.</p>



<p>Diese Art von Website, stellt für viele einen einfachen und raschen Einstieg in Ihre Webpräsenz dar. Wie der Name schon sagt, geht es hier darum dem Besucher die wichtigsten Information über sich oder sein Unternehmen zu präsentieren, also ähnlich wie man es auch auf einer Visitkarte aus Papier tut.</p>



<h2 class="wp-block-heading"><strong>Die Corporate (Unternehmens) Website</strong></h2>



<p>Der logische Schritt nach der Visitkarten Website ist die Unternehmens Website. Diese geht gegenüber der Visitkarten Seite mehr ins Detail. Es werden hier nicht nur direkte Daten des Unternehmens dargestellt, sondern auch über die Leistungen und Produkte. Auf der Unternehmens Website stellt man in der Regel seinen Besuchern vor, was das Unternehmen für den Kunden leistet. Zusätzlich bietet es sich noch an, weitere Informationen über das Unternehmen, wie zum Beispiel über das Team und die Mitarbeiter zu veröffentlichen. Auch ein Newsbereich ist ein guter Ansatz um der Usern einen Anlass für regelmässige Besuche zu geben. Oftmals wird dieser Bereich dann mit einem Blog, den ich etwas später noch erwähnen werde kombiniert.</p>



<h2 class="wp-block-heading"><strong>Branding / Marken Website</strong></h2>



<p>Bei der Unternehmens Website ist das vorrangige Ziel, das Unternehmen zu präsentieren. Im Vergleich dazu, ist das primäre Ziel bei einer Branding bzw. Marken Website ein Produkt bzw. eine Marke eines Unternehmens in den Vordergrund zu stellen.</p>



<p>Hier geht es darum ein möglichst gute Image und die Bekanntmachung einer Marke oder eines Produktes zu unterstützen.</p>



<p>Auf Merken Websites versucht man auch sehr oft, den User zum längeren verweilen zu bewegen oder die Seite weiter zu empfehlen oder sie in den sozialen Netzen zu teilen. Das kann man vielfach damit erreichen, in dem man dem Besucher Unterhaltung, zum Beispiel in Form von Spielen oder auch Videos anbietet.</p>



<h2 class="wp-block-heading"><strong>Themen Websites</strong></h2>



<p>Bei einer Themen Webseite steht nicht das Unternehmen oder ein einzelnes Produkt im Vordergrund, sondern ein spezielles Thema, über das geschrieben wird. Als Thema könnte es sich zum Beispiel rund um das Thema Essen &amp; Trinken handeln. Dabei sollte man allerdings beachten, dass das Thema nicht zu allgemein gehalten wird. So ist Essen und Trinken alleine sicher ein zu breites Thema. Man müsste es zum Beispiel einschränken auf die Bereiche selber kochen und dann möglicherweise das Ganze noch ein wenig mehr spezialisieren. Tut man das nicht, dann wird es später im Betrieb schwer die geeignete Zielgruppe oder Zieluser anzusprechen. Aber das Thema kennst du ja bereits von den Avataren. Je genauer du dich mit deinen Usern beschäftigst und die Inhalte dafür anpasst, desto erfolgreicher wirst du es schaffen, diese anzuziehen und dazu bekommen auch regelmäßig wiederzukommen und noch viel besser, dich auch weiterzuempfehlen.</p>



<h2 class="wp-block-heading"><strong>Laufende Neuigkeiten mit einem Blog</strong></h2>



<p>Artverwandt mit den „Themen Webseiten“ ist ein Blog. Ein Blog oder auch Web Tagebuch genannt, sollte regelmäßig Beiträge zu einem bestimmten Thema bringen. Im Gegensatz zu Themen Website, bei der nicht unbedingt laufend neue Inhalte erwartet werden, ist dies bei einem Blog sehr wohl der Fall. Auf der anderen Seite erwartet man sich bei der Themen Website von Beginn an einen bestimmten Umfang an Informationen. Ein Blog wird schrittweise aufgebaut und daher ist es weniger tragisch, wenn dieser Anfangs nur aus wenigen Beiträgen besteht und laufen erweitert wird. Bei einem Blog sind die Beiträge in den meisten Fällen chronologisch abgelegt.</p>



<p>Wichtig bei einem Blog ist allerdings genau dieser regelmässige Aufbau. Bei einem Blog, hat der User eine gewisse Erwartungshaltung, dass laufend neue Beiträge dazukommen. Für den Betreiber hat dies den Vorteil, wenn er die Interessen der User trifft auch laufend wiederkehrende User anzuziehen.</p>



<p>Im laufe der Zeit kann ein Blog durchaus vom Inhalt den Umfang einer Themen Website annehmen. Allerdings besteht ein Unterschied in der Aufbereitung und Strukturierung. Ein Blog ist eher chronologisch aufgebaut. Eine Themen Website kann vielfältige Möglichkeiten bieten um Informationen zu finden.</p>



<p>Oftmals werden diese beiden Typen miteinander kombiniert, bzw. entsteht aus einem Blog eine Themen Website, die aber weiterhin auch einen Blog beinhaltet.</p>



<h2 class="wp-block-heading"><strong>Magazin Website</strong></h2>



<p>Eine Magazin Website, ist am besten mit einem gedruckten Magazin, aber eben als Online Variante zu vergleichen. Sie stellt ein wenig eine Kombination aus Themen Website und Blog dar. Magazin Websites, haben vielfach ein größeres redaktionelles Team und können auch gut mit anderen Website Typen, wie der später noch erwähnten Community Website kombiniert werden.</p>



<h2 class="wp-block-heading"><strong>Mikro-Website</strong></h2>



<p>Während eine Unternehmens Website oder eine Themen-Website meist einen größeren umfang haben beschränkt sich eine Mikro-Website auf einen geringeren Umfang und behandelt meist ein spezielles Thema.</p>



<p>Eine Mikro-Website, kann auch gut mit einem Dossier oder einer Sammlung verglichen werden.</p>



<p>Es geht also darum aus einer grossen Menge an Inhalten einen bestimmten Bereich herauszunehmen und kompakt zusammenzufassen.</p>



<h2 class="wp-block-heading"><strong>Portfolio</strong></h2>



<p>Bei der Portfolio Website, stehen Projekte und Arbeiten im Vordergrund. Hier geht es nicht um das Produkt selbst, sondern um das was geleistet wurde. Natürlich kann das in Zusammenhang stehen, mit einem Produkt oder einer Leistung, die man anbietet.</p>



<p>Zum Beispiel können Grafik Designer, die unterschiedliche Leistungen anbieten, die bereits erstellen Arbeiten und Produkte auf einer Portfolio Site darstellen.</p>



<p>Bei Portfolio Websites, erfolgt die Präsentation der Inhalte meistens eher visuell, also mit Bildern.&nbsp;</p>



<h2 class="wp-block-heading"><strong>Community Websites</strong></h2>



<p>Wie praktisch und interessant soziale Medien sein können und wie sich damit Interessensgruppen bilden können, erkannte man spätestens seit sich Facebook immer mehr verbreitet hatte. Doch das Thema des sozialen Austausches und der Online-Communities ist nicht mit Facebook erfunden worden. Mittels Foren und anderen Techniken, konnte man sich schon in den 1990er Jahren im Internet organisieren und austauschen.</p>



<p>Eine Community Website kann für sich alleine stehen oder aber oft mit bereits erwähnten Websites Typen, wie etwa der Themen Website kombiniert werden.</p>



<p>Betreibt ein Unternehmen eine Community Website, dann kann es sehr viel wertvolle Informationen über das Verhalten und Denken seiner User bekommen. Allerdings sollte das Unternehmen dabei eher in den Hintergrund rücken, damit die Community Website nicht so wirkt, also würde sie von aussen beeinflusst werden. Passiert das, dann werden viele User abspringen oder sich nicht mehr so offen zeigen.</p>



<p>Viele Unternehmen weichen mittlerweile auf Dienste wie Facebook aus um mit ihrer Community zu kommunizieren. Eine eigene Web Präsenz ist in diesem Bereich aber durchaus zu empfehlen, da es sehr Vorteilhaft sein kann alles selbst unter Kontrolle zu haben.</p>



<p>Das betrifft auf der einen Seite die Informationen, die wirklich bei den Usern angezeigt werden und auf der anderen Seite auch der Umgang mit möglichen störenden Einflüssen.</p>



<p>Wenn man sich ein wenig im Internet umsieht dann sieht man trotz Facebook und Co noch immer eine Menge aktiv betriebener Online-Community Websites.</p>



<p>Community Websites werden sehr oft auch mit anderen Typen, wie der Themen Website oder der Magazin Website verknüpft.</p>



<h2 class="wp-block-heading"><strong>Produkte verkaufen mit einer e-Commerce Website</strong></h2>



<p>Möchte man seine Produkte nicht nur auf seiner Website darstellen sondern auch direkt darüber verkaufen dann spricht man von einer E-Commerce Website. In der Regel hat man eine größere Menge an Produkten die man wahrscheinlich auch noch in Kategorien unterteilen muss. Eine E-Commerce Website muss also die Aufgabe erfüllen eine bestimmte Anzahl am Produkten so zu gruppieren und darzustellen damit der User diese leicht finden und kaufen kann. Eine solche E-Commerce Plattform muss eine Reihe an Funktionalitäten Darstellungsmöglichkeiten anbieten. Der Käufer benötigt unterschiedliche Zugänge zu seinem gewünschten Produkt und möchte je nach Zeitpunkt auch unterschiedliche Detailinformationen aufnehmen.</p>



<p>Hat ein User sein Wunschprodukt gefunden dann muss man ihm einfach die Möglichkeit geben dieses in einem Warenkorb zu legen und den Kauf abzuschließen. Die E-Commerce Website sollte natürlich auch die Möglichkeit anbieten mehr als nur ein Produkt in seinem Warenkorb abzulegen.</p>



<p>Beim Kaufabschluss ist es notwendig den Käufer möglichst einfach zum Abschluss zu bringen und ihm die Möglichkeit zu geben verschiedene Zahlungsmittel verwenden zu können.</p>



<p>Nach Abschluss des Kaufes muss dem User noch eine geeignete Rechnung unter Zugang zum Produkt ermöglicht werden sofern es sich um ein online Produkt handelt.</p>



<h2 class="wp-block-heading"><strong>Membership (Mitglieder) Seiten</strong></h2>



<p>Möchte man nicht jedem User den Zugang zu seinen Websiteinhalten geben, dann benötigt man einen geschlossenen Bereich der nur über Usernamen und Passwort erreichbar ist man bezeichnet solche Seiten auch als Membership oder Mitgliederseiten.</p>



<p>Die Funktionen und Inhalte die ein solcher Mitgliederbereich bietet können völlig unterschiedlich sein. In den meisten Fällen werden aber Informationen in Form von Text Bildern und Videos bereitgestellt. Oftmals Werden diese Mitgliederbereiche auch mit Community angeboten bereichert.</p>



<p>Die Abrechnung in Mitgliederbereichen kann entweder einmalig oder durch laufende wiederkehrende Zahlungen erfolgen.</p>



<p>Erfolgt die Abrechnung durch laufende Zahlungen, dann ist die Erwartungshaltung eines Mitgliedes in einem solchen Bereich, dass regelmäßig neue wertvolle Informationen bereitgestellt werden. Andernfalls ist der User selten bereit einen regelmäßigen Beitrag für den Mitgliederbereich zu zahlen.</p>



<h2 class="wp-block-heading"><strong>E-Learning</strong></h2>



<p>Ein aktueller Trend ist es im Internet Lernangebote zur Verfügung zu stellen. Man spricht in diesem Fall von E-Learning.</p>



<p>Die Informationen können entweder kostenlos oder gegen eine Gebühr bereitgestellt werde. In vielen Fällen werden diese E-Learning Angebote in Zusammenhang mit Membership Seiten angeboten.</p>



<h2 class="wp-block-heading"><strong>Funktionale Website (Berechnung, Programm/App Charakter)</strong></h2>



<p>Eine ganz spezielle Art von Webseiten sind jene die bestimmte Funktionalitäten bereitstellen. Diese können von einfachen Berechnungen bis hin zu komplexen Programmen reichen.</p>



<p>Wenn die vielleicht schon einmal mit verschiedenen Google Produkten wie Google Docs oder Google Tabellen gearbeitet hast, dann weißt du was ich damit meine.</p>



<p>Diese Seiten oder auch Webapplikationen unterscheiden sich zum Teil gar nicht von Programmen die am Computer des Anwenders installiert sind.</p>



<h2 class="wp-block-heading"><strong>Landingpage / Sales Page / Squeeze Page</strong></h2>



<p>Kommen wir jetzt zum Abschuss noch zu einem speziellen Marketing Seitentypen. Möchtest du ein bestimmtes Produkt im Internet verkaufen, dann bietet sich dafür eine sogenannte Landingpage oder Salespage an. Diese Seiten haben nur einen Zweck nämlich ein Produkt zu verkaufen. Diese Seiten folgen zum Teil ganz anderen Richtlinien als normale Webseiten.</p>



<p>Legt man bei normalen Webseiten in der Regel großen Wert auf die Navigation, so versucht man bei dem Verkaufsseiten gänzlich darauf zu verzichten. Auf diesen Seiten soll es keine Ablenkung und störenden Elemente geben, die den User von der Seite wegziehen oder ihn vom Produkt ablenken.</p>



<p>Gedanklich muss man sich vom Aufbau von normalen Internetshops und E-Commerce Webseiten trennen. Diese haben die Aufgabe dem User das Auffinden von anderen Produkten zu ermöglichen, was man bei den speziellen Verkaufsseiten absolut vermeiden möchte.</p>



<p>Da die Landingpage ein für sich getrennter Auftritt ist, muss dieser auch eigenständig behandelt werden und wird in der Regel nicht mit dem restlichen Webauftritt gemeinsam erstellt.</p>



<p>Eine Abwandlung der vorhin genannten Verkaufsseiten ist die sogenannte Squeeze Page. Auch diese hat wie die Verkaufsseite nur einen Zweck. Dieser ist aber nicht das Verkaufen von Produkten sondern den User dazu zu bewegen seine Daten gegen Tausch eines in den meisten Fällen kostenlosen Produktes herzugeben.</p>



<p>Im Online Marketing fragt man vom Besucher meist die E-Mail Adresse und den Namen ab, um im dann ein mehr oder weniger wertvolles Geschenk (meist auch online) zukommen zu lassen.</p>



<p>Dies ist meist der Start für einen mehr oder weniger aufwendigen Verkaufsprozess, der schlussendlich bei der bereits erwähnten Sales Page landet.</p>



<h2 class="wp-block-heading"><strong>Welchen Type soll man jetzt nehmen</strong></h2>



<p>Du hast jetzt eine Reihe verschiedener Website Typen kennengelernt. Diese Liste ist natürlich nicht vollständig, denn es gibt in vielen Formen diverse Abwandlungen oder Spezial Webseiten. Du hast dabei aber auch gesehen, dass es nicht immer reine Typen gibt, sondern, dass diese auch kombiniert werden können. Möglicherweise hast du dir jetzt auch schon die Frage gestellt, welchen Website Typ man nun nehmen soll. Diese Antwort solltest du dir zum Teil schon selbst beantworten können.</p>



<p>Du hast dich hier in der Vergangenheit bereits mit deinen Zielpersonen, Zielen und Inhalten beschäftigt. Daraus abgeleitet solltest du jetzt den oder die passenden Websitetypen finden können. Die Entscheidung welche Websitetypen du verwendest hängt also primär und diesen Faktoren ab.</p>



<p>Wichtig ist aber auch zu erkennen, dass die unterschiedlichen Typen auch unterschiedlichen Aufwand bedeuten. Auf der einen Seite in der technischen Umsetzung und auf der anderen Seite auch in der inhaltlichen Betreuung.</p>



<p>Diese Erkenntnis ist wichtig für die weiteren Schlussfolgerungen. Wir werden uns in den nächsten Folgen noch damnit beschäftigen, wer den Webauftritt umsetzen oder betreuen soll. Wenn du technisch aufwendige Systeme verwenden willst, dann muss dir auch bewusst sein, dass du selbst einen entsprechenden Aufwand treiben musst um dir das notwendige Wissen anzueignen oder du musst wissen, wer für dich die Arbeit am besten durchführen könnten.</p>



<p>Auch inhaltlich ist es ähnlich. Wenn du nur eingeschränkt Zeit zur Verfügung hast, dann hat auch die Menge an Inhalten und die Zeit für Betreuung seine natürlichen Grenzen.</p>



<p>Du musst möglicherweise einen Kompromiss zwischen deinen Zielen und dem was du umsetzen und dir auch leisten kannst eingehen.</p>



<h2 class="wp-block-heading"><strong>Unsere Familie Reblinger</strong></h2>



<p>Wie geht es jetzt unserer Familie Reblinger mit den Website Typen zu ihrem Unternehmen und Plänen?</p>



<p>Wie so oft sitzen Julia und Martin an einem Freitag zusammen und Julia erklärt Martin ausführlich die verschiedenen Typen.</p>



<p>Da Martin brav seine Hausaufgaben gemacht hat und sich mit den Inhalten für seinen Webauftritt intensiv beschäftigt hat, fallen ihm während des Gesprächs schon die passenden Typen für sein Vorhaben ein.</p>



<p>Er benötigt definitiv mehr als nur eine Visitkarten Website. Eine Unternehmens-Website, wo er sein Lokal und seine Produkte vorstellen kann wäre ideal. Aber er wollte ja auch noch regelmäßig Informationen zum Thema Wein schreiben. Dafür wäre ein Blog besser geeignet. Und dann will er langfristig auch noch seine Produkte online verkaufen. Da muss es wohl ein Webshop sein. Martin ist jetzt etwas überfordert. Soll er das Alles machen – ist das nicht zu viel und wie passt das alles zusammen? Eigentlich ist schon die Unternehmens-Website eine Menge Arbeit. Er wollte doch schon für die aktuelle Saison einen Webauftritt haben.</p>



<p>Julia stimmt Martin zu, dass sein Vorhaben sicher eine Menge Arbeit bedeutet und er das selbst sicher nicht in einigen Tagen umsetzen kann. Aber das ist ja auch gar nicht notwendig beruhigt in Julia. Der Webshop zum Beispiel kann sicher noch warten. Man sollte ihn halt wo möglich jetzt schon einplanen, damit er vom Design dann leichter unterzubringen ist. Der Blog, den Martin vor hat, der kann ja auch schrittweise wachsen. Er muss ja auch nicht gleichzeitig mit der Unternehmens-Website starten. Wichtig ist doch einmal, dass er für die aktuelle Saison einen Webauftritt seines Lokals hat, wo er Adresse, Anfahrt, Öffnungszeiten und die wichtigsten Informationen veröffentlichen kann.</p>



<p>Vielleicht ist ja doch für den Anfang eine etwas erweiterte Visitkarten Website gut geeignet. Dann ist etwas Luft um die „große“ Website ordentlich zu planen und umzusetzen.</p>



<p>Martin findet diese Idee toll. Daran hat er gar nicht gedacht, dass er einmal ganz einfach beginnt und seinen Auftritt schrittweise erweitern kann. Er hat dann auch Zeit ein wenig mit seinen Gästen darüber zum plaudern, was sie sich auf seinem Auftritt wünschen würden.</p>



<p>Trotzdem stellt sich Martin noch immer die Frage, wer das alles umsetzen soll. „Kann ich das alles selbst machen?“ – fragt er Julia. Das kommt darauf an, wieviel Zeit du aufwenden willst und wie begabt du bist. Bei der einen oder anderen Arbeit kann ich dich ja sicher unterstützen.</p>



<p>Aber welche Möglichkeiten es für die Umsetzung gibt, dass sehen wir uns am besten nächstes Mal genauer an. Für heute glaube ich ist es genug.</p>



<h2 class="wp-block-heading"><strong>Zusammenfassung</strong></h2>



<p>Du hast in dieser Folge eine Reihe von Website Typen kennen gelernt. Das beginnt bei der einfachen&nbsp;<strong>Visitkarten Website</strong>&nbsp;und geht dann weiter zur&nbsp;<strong>Unternehmens-Website</strong>&nbsp;oder zur&nbsp;<strong>Markenseite</strong>, wenn Marken oder Image im Vordergrund stehen. Möchtest du laufend aktuelle Informationen anbieten, dann ist ein&nbsp;<strong>Blog</strong>&nbsp;ideal. Will man mehr Themenbezogene Inhalte anbieten, dann wären die&nbsp;<strong>Themen- oder Magazin Websites</strong>&nbsp;gut geeignet. Soll das Thema nicht ganz so groß behandelt werden, dann wird es wohl eher eine&nbsp;<strong>Micro Website</strong>&nbsp;werden. Geht es darum seine Werke und Arbeiten zu präsentieren, dann ist die&nbsp;<strong>Portfolio Website</strong>&nbsp;gut geeignet.</p>



<p>Willst du mit deinen Besuchern mehr Interaktion und eine Gemeinschaft bilden, dann bist du mit einer&nbsp;<strong>Community Website</strong>&nbsp;gut bedient. Sollen Produkte verkauft werden, dann würde ich zu einer&nbsp;<strong>E-Commerce Website</strong>&nbsp;raten. Willst du deinen Besuchern einen geschlossenen Bereich anbieten, dann ist ein&nbsp;<strong>Mitglieder oder auch Membership Bereich</strong>&nbsp;genannt perfekt. Dort kannst du auch eine Plattform zum&nbsp;<strong>Lernen</strong>&nbsp;anbieten. Soll deine Seite eine Funktion ausführen, wie etwa Berechnungen durchführen, dann sollte man an&nbsp;<strong>funktionale Webseiten</strong>&nbsp;oder Web-Apps denken. Geht es darum einzelne Produkte zu verkaufen oder Daten von deinen Besuchern zu bekommen, dann würde ich zu einer&nbsp;<strong>Landingpage, Salespage oder Squeezepage</strong>&nbsp;raten.</p>



<p>Du siehst also, es gibt eine Reihe verschiedener Typen, die jetzt mit deinen bisherigen Planungen in Einklang gebracht werden müssen. Wenn notwendig, kann man diese natürlich auch kombinieren.</p>



<h2 class="wp-block-heading">Wie üblich, noch eine Bitte am Schluss</h2>



<p>Wenn dir der Podcast gefallen hat, dann abonniere ihn bitte und empfehle ihn weiter.</p>



<p>Über eine Bewertung auf iTunes würde ich mich sehr freuen, das hilft mir und dem Podcast für eine größere Verbreitung.</p>



<p>Wenn du Kritiken oder andere Vorschläge für mich hast, dann lasse es mich am besten per persönlicher Nachricht wissen. Am besten erreicht du mich über meine Podcast Website.</p>



<p>Servus, Liebe Grüße und bis zum nächsten mal. Andreas – Dein Web Design Coach.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.andreasstocker.at/wdc-podcast-folge-05-die-verschiedenen-website-typen/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>WDC Podcast Folge 04 &#8211; Die Inhalte für deinen Webauftritt</title>
		<link>https://www.andreasstocker.at/wdc-podcast-folge-04-die-inhalte-fuer-deinen-webauftritt/</link>
					<comments>https://www.andreasstocker.at/wdc-podcast-folge-04-die-inhalte-fuer-deinen-webauftritt/#respond</comments>
		
		<dc:creator><![CDATA[]]></dc:creator>
		<pubDate>Thu, 11 May 2017 18:39:00 +0000</pubDate>
				<category><![CDATA[Planung & Konzeption]]></category>
		<category><![CDATA[Podcast-Website]]></category>
		<category><![CDATA[Webdesign]]></category>
		<guid isPermaLink="false">https://2020.andreasstocker.at/?p=5023</guid>

					<description><![CDATA[Wir haben uns in den letzten beiden Folgen um unsere Zielgruppe und Zielperson gekümmert und im Anschluss um die Ziele. Jetzt wird es spannend, denn wir kommen zu den Inhalten unserer Website. Die Inhalte stellen eine zentrale Rolle für uns dar. Erstens ist der Content, wie man Inhalte auch bezeichnet extrem wichtig für unsere Besucher [&#8230;]]]></description>
										<content:encoded><![CDATA[



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="658" src="https://www.andreasstocker.at/wp-content/uploads/2017/05/bb_wdc_podcast_folge_004-1024x658.jpg" alt="" class="wp-image-5289" srcset="https://www.andreasstocker.at/wp-content/uploads/2017/05/bb_wdc_podcast_folge_004-1024x658.jpg 1024w, https://www.andreasstocker.at/wp-content/uploads/2017/05/bb_wdc_podcast_folge_004-300x193.jpg 300w, https://www.andreasstocker.at/wp-content/uploads/2017/05/bb_wdc_podcast_folge_004-768x494.jpg 768w, https://www.andreasstocker.at/wp-content/uploads/2017/05/bb_wdc_podcast_folge_004.jpg 1120w" sizes="(max-width: 1024px) 100vw, 1024px" /><figcaption class="wp-element-caption">WDC Podcast Folge 04 &#8211; Die Inhalte für deinen Webauftritt</figcaption></figure>



<p><strong>Wir haben uns in den letzten beiden Folgen um unsere Zielgruppe und Zielperson gekümmert und im Anschluss um die Ziele. Jetzt wird es spannend, denn wir kommen zu den Inhalten unserer Website. Die Inhalte stellen eine zentrale Rolle für uns dar.</strong></p>



<p><strong>Erstens ist der Content, wie man Inhalte auch bezeichnet extrem wichtig für unsere Besucher und auf der anderen Seite, beeinflussen die Inhalte im weiteren auch, welche Technik und welche Systeme wir für unseren Webauftritt einsetzen.</strong></p>



<p>Bei der Erstellung einer Website gibt es zwei&nbsp;&nbsp;empfohlene „First“ Ansätze. Der eine ist Mobile First, was bedeutet, dass man sich zuerst um das mobile Layout kümmern sollte und dann durch Erweitern das Desktop Layout entwickeln soll. Der zweite First Ansatz ist Content First. Das wiederum meint, dass die Inhalte einer Website möglichst früh vorhanden sein sollen. Dieser Ansatz betrifft zwar mehr das Design einer Website, aber ich möchte dir zeigen, dass es sogar noch viel früher Sinn macht, sich um&nbsp;die Inhalte Gedanken zu machen. Um gleich ein Missverständnis vorzubeugen, es ist damit nicht gemeint, dass alle Texte bis ins Detail fertig sein sollen. Viel mehr geht es jetzt einmal darum, was man dem User auf der Webseite darstellen will. Content bezeichnet ja nicht nur Text, sondern man muss sich überlegen, wie weit man Bilder, Videos oder andere Content Elemente einsetzen will.</p>



<p>Um dir meine Gedanken etwas klarer zu machen, will ich dir einmal einige Beispiele bringen. Wenn es zum Beispiel ein Ziel von dir ist, Vertrauen zu deinen Besuchern aufzubauen und diese regelmäßig auf deine Seite zu bekommen, dann wäre eine Möglichkeit, den User regelmäßig mit interessanten Informationen bzw. Artikeln zu versorgen. Natürlich müssen diese Informationen inhaltlich auf deine Zielgruppen und Zielpersonen abgestimmt sein. Dazu aber etwas später.</p>



<p>Die Anforderung, regelmäßig wertvolle Inhalte auf der Website zu liefern, hat zur Folge, dass wir in diesem Fall nicht mehr so einfach mit einer statischen Webseite arbeiten können. Wir brauchen hier sinnvoller Weise ein CMS (Content Management System)&nbsp;oder einen Blog. Das Ändern und hinzufügen von Inhalten bei statischen Webseiten ist zwar prinzipiell möglich, aber mit mehr an Aufwand verbunden. Aus Erfahrung sage ich dir, dass dieses Vorhaben dann bald eingestellt wird, wenn es nicht wirklich einfach geht die Inhalte einzufügen.</p>



<p>Die Entscheidung ein CMS &nbsp;oder ein Blog System einzusetzen, hat dann wiederum Auswirkungen auf das Design und die Auswahl deines Providers. Das Design wird dadurch beeinflusst, dass man bei einem CMS mit sogenannten Templates oder auf deutsch Vorlagen arbeiten muss. Diese lassen einem aber nicht alle Freiheiten im Design und es ist auch technisch etwas komplizierter so ein Template zu erstellen, als beispielsweise eine selbst erstellte Website mit HTML und CSS oder noch einfacher mit Drag&amp;Drop Tools wie Adobe Muse.</p>



<p>Auch die Wahl des Providers wird dadurch beeinflusst, da für ein CMS oder einen Blog mehr Technik und Rechnerleistung notwendig ist. Da die Inhalte erst dynamisch berechnet und zusammengestellt werden, benötigt der Web Server mehr CPU Leistung und mehr Hauptspeicher. Weiters ist auch ein Datenbanksystem notwendig, damit diese dynamischen Daten, sprich unsere Artikel irgendwo abgelegt werden können um diese dann bei Bedarf über das Template darzustellen.</p>



<p>Du siehst also, dass die Inhalte eine nicht unwesentliche Auswirkung auf weitere Elemente deiner Webseite Erstellung haben.</p>



<p>Wenden wir uns jetzt konkret deinen Inhalten zu. Wenn du dich erinnerst haben wir in der letzten Folge darüber gesprochen was User motiviert. Wir haben hier die zwei Motivationsgründe kennengelernt. Das sind „Hinzu“ – also Freude zu erlangen und „Weg von“ – also Schmerz zu vermeiden. Wenn wir uns zwischen diesen beiden entscheiden müssten, dann haben wir auch gehört, dass Schmerz vermeiden stärker wirkt.</p>



<p>Außerdem haben wir uns in dieser Folge auch über unsere Ziele und dein Warum unterhalten. Das bedeutet du weißt jetzt was du mit deiner Webseite erreichen möchtest. Möchtest du zum Beispiel Produkte online verkaufen dann wird es wohl notwendig sein, dass deine Inhalte deine zu verkaufenden Produkte sind. Ist es dein Ziel laufend mit interessanten Neuigkeiten und Informationen zu versorgen, dann wird es wahrscheinlich notwendig sein, laufend Inhalte zu generieren und darzustellen.</p>



<p>Weiters haben wir uns in den vergangenen Folgen schon näher mit unserer Zielgruppe bzw. unseren Usern beschäftigt. All diese Dinge müssen wir jetzt kombinieren um zu den Inhalten zukommen die auf der einen Seite dazu dienen um unsere Ziele erreichen zu können und auf der anderen Seite die Bedürfnisse unserer Besucher abdecken.</p>



<h2 class="wp-block-heading">Die Probleme oder Bedürfnisse deiner Besucher</h2>



<p>Wenden wir uns also jetzt einmal im ersten Teil dem ermitteln der Bedürfnisse und Probleme deiner Besucher zu.</p>



<p>Du hast ein bestimmtes Produkt oder eine Dienstleistung, dass du anbieten möchtest. Meistens kennt man sehr gut die Eigenschaften und Features seiner Produkte. Mit dieser Liste wirst du allerdings bei deinen Besuchern in der Regel nicht viel erreichen. Wie schon öfter erwähnt steht für deinen User das Lösen eines Problems oder die Erfüllung von Bedürfnissen im Vordergrund. Du hast also jetzt die Aufgabe aus der Liste der Produkt Eigenschaften den Mehrwert für deine User herauszuarbeiten.</p>



<p>Dazu nimmst du dein Produkt oder deine Dienstleistung her und überlegst dir, welche Vorteile dein Produkt hat und welche Bedürfnisse und Probleme du damit lösen kannst. Sinnvoller Weise kannst du das mit Hilfe deiner aufgelisteten Produkt Eigenschaften erstellen. Beachte aber immer, dass du es so formulieren musst, dass ein Wert bzw. Ein Nutzen für deinen Besucher herauskommt. Dabei musst du&nbsp;<strong>noch</strong>&nbsp;nicht deine konkreten User berücksichtigen sondern konzentrierst dich fürs erste einmal nur auf dein Produkt und versuchst so gut wie möglich ein Ergebnis zu beschreiben, dass ein User erreichen kann. Dafür ist es nicht notwendig komplett ausformulierte Sätze zu erstellen. Es genügen auch einfache Stichworte. Ich persönlich erstelle solche Inhalte gerne in Form von Mindmaps.</p>



<p>Du wirst jetzt eine Menge von Informationen gesammelt haben die Vorteile, Mehrwert und Ergebnisse deines Produktes beschreiben. Von diesen Information sind aber für deinen konkreten Besucher möglicherweise nur einige wirklich relevant. Um herauszufinden welche das sind, müssen wir uns jetzt näher mit unserem User auseinandersetzen.</p>



<p>Um das möglichst effizient machen zu können nimmst du jetzt die bereits erstellten Persona Beschreibungen deiner User her. Ließ jetzt noch einmal die erstellte Beschreibung durch und versuche dich dadurch in deine Zielperson hinein zu versetzen. Wenn du jetzt so richtig in der Lage bist zu denken und zu fühlen wie dein User, dann sie dir noch einmal die erstellte Liste zu deinen Produkt an. Überlege dir jetzt aus Sicht des Users welche von den notierten Ergebnissen dich persönlich ansprechen. Du wirst am Ende dieses Vorgangs eine wesentlich reduzierter Liste erhalten.</p>



<p>Das Ergebnis dieses Prozesses ist, dass du jetzt ein konkretes Angebot für deine Ziel User hast. Es kann bei diesem Vorgang durchaus passieren, dass du feststellst, dass du unterschiedliche Probleme und Bedürfnisse deines Users zu lösen hast.</p>



<h2 class="wp-block-heading">Die Kundenreise</h2>



<p>Das ist aber durchaus normal, denn je nach Zugang und aktueller Situation kann sich auch der Bedarf ändern. Das bedeutet, dass du den User in seiner aktuellen Situation abholen musst um ihm die geeignete Lösung zum aktuellen Zeitpunkt anzubieten. Es könnte zum Beispiel es sein, dass der User im ersten Schritt nur das Bedürfnis hat Informationen über ein bestimmtes Thema einzusammeln. Im nächsten Schritt möchte er dann gerne mehr Details über das Thema wissen und lernen wie man diese Informationen in einem praktischen Projekt umsetzt. Der letzte Schritt könnte dann das Bedürfnis sein wirklich ein praktisches Projekt konkret umzusetzen.</p>



<p>Du siehst an diesem kurzen Beispiel dass anfangs nur ein Bedarf an Informationen besteht, im weiteren dann ein Bedarf zu lernen, wie man diese Informationen konkret anwendet und zu guter letzt geht es hier wirklich darum praktisch tätig zu werden.</p>



<p>Das könnte als Beispiel für die Inhalte der Webseite bedeuten dass man dem User mit einem Blog die gewünschten Informationen zur Verfügung stellt. Um das Lernen zu ermöglichen kann man dem User einen Onlinekurs anbieten und für die praktische Umsetzung könnte dann eine persönliche Beratung oder ein persönliches Coaching die Lösung sein.</p>



<p>Du siehst an diesem Beispiel, dass der User um sein endgültiges Ziel zu erreichen eine Reise mit verschiedenen Stationen absolviert. Man nennt dies in der Fachsprache auch Customer Journey oder auch die Kundenreise.</p>



<p>Was ich dir in diesem Beispiel zeigen wollte, ist, dass du dir gut überlegen musst welche Bedürfnisse dein User haben könnte. Beende also deine Suche nicht gleich bei dem ersten Bedürfnis das du gefunden hast. Wenn du dich an die Vorgehensweise die ich dir vorhin geschildert habe hältst, dann solltest du kein Problem haben die mögliche Kundenreise herauszufinden.</p>



<p>Es kann natürlich vorkommen das nicht jeder User bei der ersten Station beginnt sondern möglicherweise schon bei einer späteren Station einsteigt. Diese Situation stellt dich noch vor keine besondere Herausforderung den wo der User in die Reise einsteigt, ist für dich nicht ganz so wichtig.</p>



<p>Ein anderer Fall könnte aber sein wenn der User um zur Station zwei zukommen einen ganz anderen Startpunkt benötigt. Nehmen wir einmal in unserem obigen Beispiel an, dass unsere User das Ziel hat abzunehmen. Das könnte für unsere zuerst genannten drei Stationen bedeuten, dass er sich zuerst einmal über Ernährung informieren möchte. Im zweiten Schritt bieten wir ihm einen Kurs an indem er Schritt für Schritt lernt mit gezielter Ernährungsumstellung sein Ziel zu erreichen. Damit es dem User leichter fällt bieten wir dann im dritten Schritt dem User eine persönliche Betreuung und ein Coaching an um in an der Hand zu nehmen und zu helfen sein Ziel wirklich zu erreichen.</p>



<p>Diese Reise setzt voraus dass sich der User seines Problems bereits bewusst ist und sich&nbsp;schon aktiv mit dem Thema der Ernährung beschäftigen will. Ein anderer Zugang wäre allerdings, dass unser User ein Problem mit seiner aktuellen Situation verspürt aber noch nicht auf die Idee kommt, dies durch geeignete Ernährung zu lösen. In diesem Fall müssen wir den User mit geeigneten Informationen sein Problem vor Augen führen und als&nbsp;Lösung unseren Onlinekurs anbieten. Natürlich ist es auch hier unser Ziel unser erweitertes Produkt das Coaching anzubieten.</p>



<p>An diesem Beispiel sehen wir dass unser User in der Kundenreise zwei Stationen von der Kundenreise unseres ersten Kunden bestreitet aber die erste Station also der Startpunkt woanders beginnt. Es könnte in diesem Fall auch so sein dass wir den Kunden beim Start “eins” abholen und der direkt zur Station “drei” wandert. All diese Möglichkeiten müssen wir uns vorher schon überlegen um unserer Zielperson die geeigneten Informationen, Produkte und Dienstleistungen anzubieten und auch die Möglichkeit dem passenden Weg einzuschlagen.</p>



<p>Eine Marketingregel möchte ich in diesem Zusammenhang noch erwähnen. Es gibt die sieben Kontakte Regel die sagt, das ein Interessent erst nach sieben Kontakten ein Produkt erwirbt. Diese Regel darf man natürlich nicht so genau wortwörtlich nehmen, denn es gibt natürlich auch Kunden die schon beim ersten Kontakt von dir überzeugt sind. Aber in vielen Fällen ist es wirklich so dass man mit einem Anbieter verschiedene Kontakte oder um bei unseren Begriffen der Kundenreise zu bleiben verschiedene Stationen benötigt um schlussendlich das Ziel zu erreichen.</p>



<p>Wir werden uns in der nächsten Podcast Folge dann genauer ansehen welche verschiedenen Möglichkeiten es gibt um mit deinen Inhalten auf deinen Webauftritt die unterschiedlichen Zugänge für deinen Kunden abdecken zu können.</p>



<p>Du solltest dich aber im Vorfeld schon ein wenig mit den möglichen Inhalten und Wegen beschäftigen. Je genauer du das machst, desto eher wirst du die geeigneten Inhalte für deine Besucher finden.</p>



<h2 class="wp-block-heading">Die Inhalte unserer Familie Reblinger</h2>



<p>Sehen wir uns einmal an wie es unserem Geschwisterpaar bei der Familie Reblinger mit unserer Aufgabe die Inhalte zu überlegen geht.</p>



<p>Wie immer bekommt Martin von Julia eine ausführliche Erklärung, bevor Martin sich an die Arbeit machen kann. Nach dem Julia Martin erklärt hat wie er&nbsp;am besten zu den Inhalten bzw. zu den Bedürfnissen seine User kommt und er auch erfahren hat, was hinter dem Wort Kundenreise steckt macht es sich daran die Aufgabe umzusetzen.</p>



<p>Martin überlegt zuerst was er in seinem Betrieb für seine Gäste alles anbietet. Auf der einen Seite ist ein Lokal das Speisen und Getränke und gemütliches Beisammensein anbietet. Auf der anderen Seite gibt es auch die Möglichkeit im Betrieb die hauseigenen Weine zu erwerben und weitere Produkte rund um das Thema Wein.</p>



<p>Martin fällt sofort auf dass er hier zwei verschiedene Stationen für seine Gäste anbietet. Diese müssen aber nicht unbedingt getrennt von einander zu sehen sein. Denn Gäste die in seinem Haus Essen und Trinken können durchaus oder sind sogar in den meisten Fällen an seinen Produkten interessiert. Auf der anderen Seite gibt es auch Gäste die vielleicht nur ins Lokal kommen um einen&nbsp;gemütlichen Abend bei Speis und Trank zu verbringen. Andererseits kann es auch Gäste geben die nur kurz vorbeikommen und sich das eine oder andere Produkt zum mitnehmen wollen.</p>



<p>Martin macht sich also bei beiden Produkten bzw. Dienstleistungen eine Liste von deren Vorteilen. Beim gemeinsamen Brainstorming mit Julia erhält er so eine lange Liste mit der er jetzt weiter arbeiten kann. Im ersten Schritt erarbeiten sie einmal die Inhalte für das Bewirten&nbsp;der Gäste. Denn das stellt für den Betrieb derzeit noch das Kerngeschäft dar. Den Vorteil den Martin für seine Gäste sieht ist, dass er eine ansprechende Umgebung zum Verweilen anbietet. Wenn es das Wetter erlaubt dann haben die Gäste einen wunderschönen Blick in die Weinviertel Weinberge. Aber auch im Inneren des Lokals lebt die gemütliche Einrichtung zum Längeren verweilen ein. Der Betrieb bietet für Jung und Alt einen geeigneten Platz. Für Kinder gibt es einen eigenen gut ausgestatteten Spielbereich, der bei richtiger Platzwahl von den Eltern gut eingesehen werden kann. Durch die getrennten Räumlichkeiten können aber Gäste die sich vielleicht doch Kinder Lärm gestört fühlen Platz nehmen.</p>



<p>Die Speisen die im Lokal angeboten werden werden immer noch frisch und selbst zubereitet und sind bei den Gästen sehr beliebt. Das Angebot an Weinen ist ausreichend groß und von guter Qualität. Martin hat diese Vorteile natürlich wesentlich ausführlicher und umfangreicher erfasst. Würde ich aber jetzt alle Ausführungen die unser Geschwisterpaar erstellt hat erwähnen dann würde das den Rahmen unseres Podcasts springen.</p>



<p>Wichtig ist die Schlussfolgerung die Martin jetzt aus seiner Sammlung ableitet. Er vergleicht jetzt diese Inhalte mit seinen Kunden Avataren.<br>Günther unser männlicher Avatar ist 45 Jahre, verheiratet, hat 2 Kinder im Alter von 10 und 13 Jahren. Er liebt gute Weine und isst gerne. Er ist im Alltag oft unter Stress und möchte in der Freizeit gerne abschalten. Er ist viel unterwegs und verwendet für alle möglichen Aktivitäten sein Smartphone. Er holt sich viel Information über sein mobiles Gerät und liesst gerne auch längere Texte, wenn diese interessant sind.</p>



<p>Claudia ist unser weiblicher Avatar. Sie ist 38 Jahre alt, verheiratet und hat 1 Kind im Alter von 8 Jahren. Sie ernährt sich gerne bewusst, betreibt Sport und kümmert sich sehr um ihr Kind. Claudia hat ein Smartphone und verwendet es auch, wenn es sein muss, arbeitet aber lieber auf Desktop-Rechnern oder am Tablet. Wenn sie am Smartphone arbeitet, dann möchte sie nicht lange nach Informationen suchen – sie ist da recht schnell ungeduldig.</p>



<p>Dann haben wir noch Walter, ebenfalls männlich und 69 Jahre alt. Er ist alleinstehend und gerne in Gesellschaft. Er mag aber keinen übermässigen Lärm. Er benutzt auf seinem Smartphone nur einige wenige Apps und fragt auf dem Gerät auch seine E-Mails ab. Sonst verwendet er, um im Internet zu surfen meist seinen Standrechner.</p>



<p>Martin versucht jetzt die Informationen über seine Leistungen und Produkte mit seinen Personas zu verknüpfen. Erstellt als Gemeinsamkeit fest, dass alle in der Freizeit gerne abschalten und gemütliche Stunden verbringen wollen. Auch jene die Kinder haben und dadurch er unruhige Zeiten gewohnt sind. Er stellt auch fest, dass alle Kunden&nbsp;Smartphones verwenden dies aber in unterschiedlicher Intensität. Während Claudia sich nur schnell Informationen am Smartphone organisiert, verwendet Günter dieses um ausführliche Informationen zu bestimmten Themen zu bekommen. Gleichermaßen verwenden seine Gäste aber auch ihre Desktop Rechner.</p>



<p>Auch auf Speis und Trank legen die meisten Gäste großen Wert.</p>



<p>Martin erzählt Julia seine ersten Schlussfolgerungen aus diesem Vergleich.</p>



<p>Er sieht es als sehr wichtig, dass seine Website sowohl für die mobilen User als auch&nbsp;für Desktop User geeignet ist. Mobile User müssen sehr rasch die wichtigsten Informationen finden. Das sind zum Beispiel die Adresse oder unsere Öffnungszeiten. Es sollte aber auch möglich sein detaillierte Informationen über seine Produkte abrufen zu können. Vorteilhaft wäre es eventuell laufend neue Informationen bereitzustellen um den Informationshunger seiner Gäste zu stillen.</p>



<p>Martin sieht es außerdem als sehr wichtig, die Gemütlichkeit seit Lokales über die Webseite zu transportieren. Nachdem er für Kinder gut eingerichtet ist und es für seine Gäste sehr wichtig ist, dass ihre Kinder sich wohl fühlen und sich auch eine Zeit lang alleine unterhalten, sollte auch das entsprechend erwähnt werden.</p>



<p>Nachdem die meisten Gäste Wert auf qualitative und gute Speisen und Getränke legen müssen auch diese Informationen auf der Seite untergebracht werden.</p>



<p>Martin erkennt schon nach seinen ersten schnellen Gedanken dass es hier sehr viel Informationen gibt die aufbereitet und dargestellt werden müssen. Es sieht aber auf der anderen Seite das Problem dass seine Gäste die Informationen einfach und rasch finden wollen. Zwei Eigenschaften die sich eigentlich widersprechen sagt Martin zu Julia.</p>



<p>Julia stimmt Martin zu, beruhigt ihn aber mit der Aussage, dass es zwar schwierig sei aber kein unlösbares Problem. Wichtig ist aber sich dieser Herausforderung vorher bewusst zu sein denn dann kann man das Problem leichter lösen.</p>



<p>Nachdem es wieder spät geworden ist fasst Julia die Unterhaltung zusammen.</p>



<p>„Du möchtest also deinen Kunden folgende Inhalte anbieten:<br>– Wichtige Informationen zu deinem Betrieb sollten rasch und einfach zu finden sein.<br>– Es soll Detail Informationen zu deinem Betrieb und Produkten geben.<br>– Für interessierte möchtest du laufend neue Informationen rund um deinen Betrieb und das Thema Wein bereitstellen.<br>– Du möchtest deinen Kunden die Gemütlichkeit in deinem Lokal vermitteln und das es für Kinder Beschäftigungsmöglichkeiten gibt.<br>– Du willst deine hervorragenden Speisen und Getränke präsentieren.<br>– Weiters möchtest Du noch deine Weine anbieten und diese vielleicht später auch einmal Online verkaufen.”</p>



<p>„Toll zusammengefasst“. – sagt Martin. Ich glaube mehr fällt mir momentan nicht ein.</p>



<p>„Ich glaube das ist auch genug fürs Erste. Du hast ja bis nächste Woche Zeit nochmals darüber nachzudenken. Dann werden wir uns ansehen, welche Website Typen es gibt um deine Inhalte im Web präsentieren zu können.“</p>



<p>So das war es auch schon für heute.</p>



<p>Halt noch nicht ganz. Ich habe Dir am Anfang ein Geschenk versprochen.</p>



<p>Hast du manchmal das Gefühl, einfach nur Bahnhof zu verstehen, wenn es um die Umsetzung eines Webauftrittes geht. Dann habe ich jetzt eine Hilfe für dich. Auf meiner Website, kannst du völlig kostenlos mein WebDesign Lexikon anfordern, dass dich dabei unterstützen soll, dich im Dschungel der Begriffe zurecht zu finden.</p>



<p>Besuche dazu die Seite&nbsp;<a href="http://www.webdesign-coach.com/webdesign-lexikon" target="_blank" rel="noreferrer noopener">http://www.webdesign-coach.com/webdesign-lexikon</a>&nbsp;und schon kurze Zeit später kannst du darin schmökern. Sollte dir darin der eine oder andere Begriff fehlen oder etwas unklar sein, dann würde ich mich über eine persönliche Rückmeldung freuen.</p>



<p>So das war es aber jetzt wirklich.</p>



<h2 class="wp-block-heading">Wie üblich, noch eine Bitte am Schluss</h2>



<p>Wenn dir der Podcast gefallen hat, dann abonniere ihn bitte und empfehle ihn weiter.</p>



<p>Über eine Bewertung auf iTunes würde ich mich sehr freuen, das hilft mir und dem Podcast für eine größere Verbreitung.</p>



<p>Wenn du Kritiken oder andere Vorschläge für mich hast, dann lasse es mich am besten per persönlicher Nachricht wissen. Am besten erreicht du mich über meine Podcast Website.</p>



<p>Servus, Liebe Grüße und bis zum nächsten mal. Andreas – Dein Web Design Coach.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.andreasstocker.at/wdc-podcast-folge-04-die-inhalte-fuer-deinen-webauftritt/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>
