Webseitenplanung

Webseitenplanung

by Uncategorized

Eine neue Webseite einzurichten oder eine schon bestehende Webseite neu zu gestalten, kann einen ganz schnell überfordern. Und noch bevor man anfängt sich Gedanken zum Design zu machen sollte man sich überlagen, was möchte ich für Inhalte anbieten und wie struckturier ich diese.

Also stellen wir uns die Fragen: Für wen ist die Webseite? Welchen Zweck soll die Webseite erfüllen und Wie möchte ich das ganze Umsetzen?

1. Die wichtigsten Fragen klären

Denn die Antworten auf diese Fragen können je nach Art der Webseite komplett unterschiedlich ausfallen. Wenn du z.B. ein Onlineshop hast, sind die Anforderungen an deine Webseite ganz andere, als bei einem Portfolio, einer Geschäftspräsentation oder einem privaten Blog.

Nachdem du dir Gedanken zum Zielpublikum deiner Webseite gemacht hast und du dich auch mit der Frage auseinander gesetzt hast, welchen Zweck du mit deiner Webseite eigentlich erfüllen möchtest kannst du sehr viel leichter herausfinden, welche Inhalte für deine Webseiten-Besucher eigentlich am wichtigsten sind.

Welche Links sollten in deinem Hauptmenü vorkommen, welche müssen in ein Untermenü oder auf welche kannst du komplett verzichten (oder eventuell reicht es auch, einige Links nur im Footer unterzubringen).
Welche Bereiche deiner Webseite sollten auf jeder Seite vorkommen und welche Inhalte sollten je nach Art der Seite wechseln?
Was möchtest du auf deiner Startseite zeigen und welche Inhalte sollen eher auf den Unterseiten angeordnet werden?

Du könntest auch mit einer Startseite anfangen, die die Inhalte deiner Webseite nur anteasert, so dass deine Besucher auf der Startseite einen ersten Eindruck bekommen, was sie auf deiner Webseite an Inhalten erwartet.

2. Woher kommen deine Webseiten-Besucher?

Jetzt hast du dir also bereits Gedanken zu deiner Startseite gemacht. Aber es ist auch wichtig zu bedenken, wie deine Besucher eigentlich überhaupt auf deine Webseite gelangen.

Falls du schon eine bestehende Webseite hast, kannst du dafür Google Analytics als Info-Quelle zur Hand nehmen (z.B. über das WordPress-Plugin Google Analytics). Du solltest nämlich auch daran denken, dass viele Besucher vielleicht über die Google-Suche oder Social Media-Links (über Facebook oder Twitter) direkt auf einem Blog-Artikel oder einer anderen Unterseite landen. Diese Besucher sehen also die Startseite überhaupt nicht gleich.

Bei einem Portfolio, das du hauptsächlich als Visitenkarte für dich nutzt, ist dagegen recht wahrscheinlich, dass alle Besucher als erstes deine Startseite besuchen.


3. Welche Informationen sind wirklich relevant?

Außerdem solltest du dir darüber Gedanken machen, welche deiner Inhalte wirklich wichtig sind, um deine Ziele zu erreichen. Dein Haupt-Menü sollte z.B. übersichtlich und leicht überschaubar sein. Einige Links sind daher vielleicht besser an einer anderen Stelle aufgehoben (Sidebar, Untermenü, Footer).

Natürlich gibt man sich viel Mühe mit den eigenen Inhalten und am liebsten möchte man seinen Besuchern, gleich alle Informationen mitteilen. Aber die Inhalte übersichtlich zu halten, ist eventuell wichtiger, als alles mitteilen zu wollen. Wenn du aber nur die wichtigen Informationen aufnimmst, schaffst du eine klarere Struktur und du kannst deinen wichtigen Inhalten mehr Platz bieten. Deine Besucher finden sich so viel leichter auf deiner Webseite zurecht.

Natürlich ist es aber auch wichtig, die Besucher nicht zu langweilen. Auf News-Webseiten oder Online-Magazinen, auf denen die Besucher die Inhalte eher abscannen und nicht unbedingt im Detail lesen, ist eventuell eine andere Strategie sinnvoller. Es kommt also wie gesagt immer sehr stark auf deine Ziele und dein Ziel-Publikum an, welche Strategie du für deine Webseite verfolgen solltest.


4. Optionen bieten

Ein weiterer wichtiger Punkt ist es auch, immer Optionen zu bieten und deine Besucher nicht ins „Nichts“ laufen zu lassen. Es könnte vielleicht sinnvoll sein, noch einmal eine Anzahl an relevanten Infos oder Links im Footer anzubringen, anstatt die Webseite einfach mit dem letzten Inhaltsbereich enden zu lassen. Auch eine Webseiten-Suche ist dabei eine hilfreiche Möglichkeit.

Auf Blog-Artikeln kannst du mit Hilfe eines Plugins weitere Beiträge mit ähnlichen Themen anzeigen (z.B. mit Related Posts von Jetpack oder dem Yet Another Related Posts-Plugin). So können deine Leser gleich zum nächsten Beitrag weiter klicken, wenn ihnen der gerade gelesene Artikel gefallen hat.

Wenn die Hauptmenü-Punkte auf deiner Webseite (z.B. bei einem Shop mit Warenkorb-Link) besonders wichtig sind, könnte eine feststehende Menüleiste für dich wichtig sein. So finden deine Besucher immer sofort zu deinen wichtigsten Links. Wichtig ist dabei zu beachten, ob die Leiste nicht zu viel Platz in der Höhe deiner Webseite wegnimmt oder ob du diesen Platz für das Menü einnehmen möchtest.


Es gibt also wirklich jede Menge Fragen zu klären und Punkte zu beachten, um Inhalte einer Webseite best möglichst zu organisieren.

responsive

Responsive Webdesign

by AdaptiveResponsiveScreendesignViewport
 

Screendesign für alle Auflösungen und Geräte

Responsive Webdesign steht für einen flexiblen Ansatz von Screendesign und Webentwicklung, um alle Inhalte einer Webseite unabhängig vom Gerät gut lesbar anzuzeigen. Im besten Fall passt sich die Darstellung automatisch an alle Geräte an, ohne dass der Betrachter den Inhalt zoomen muss oder eine bestimmte Ansicht auswählen muss. Die Darstellung funktioniert für alle Bildschirmauflösungen, Betriebssysteme oder Browser.

Technik

Um eine optimale Darstellung zu erreichen, müssen alle Möglichkeiten der aktuellen Web-Technologien ausgeschöpft werden: HTML5, CSS3, JavaScript. Beispielsweise kann man für die Umsetzung sogenannte Media Queries nutzen. Mit Media Queries wird im Prinzip abgefragt, welches Gerät (z.B. iPhone X) eine Webseite aufrufen möchte und mit Hilfe von CSS3 wird dann, das passende Layout ausgewählt und angezeigt.

Folgende Geräteeigenschaften können z.B. ausgelesen werden:

  • Portrait oder Landscape Modus (Hoch- bzw. Querformat)
  • Größe des Gerätes (PC, Smartphone, Laptop)
  • Bildschirmauflösung
  • Eingabemöglichkeiten (Tastatur oder Touchscreen)

Viewport

Um den Begriff Responsive Webdesign wirklich zu verstehen sollten man zuerst den Begriff „Viewport“  kennen: Der Viewport ist der sichtbare Bereich innerhalb eines Browser-Fensters (ohne jegliche weitere Handlung (d.h. ohne scrollen etc.)). Der Viewport sieht für alle Geräte und Auflösungen unterschiedlich aus und es gibt viele Aspekte, die den Viewport verändern können: z.B. Hochformat (Portrait Mode) oder Querformat (Landscape Mode) oder die  individuelle Browsereinstellungen. Beim Responsive Webdesign wird nun versucht, den Viewport so zu nutzen, dass die Inhalte optimal dargestellt werden können. Im Vordergrund steht dabei die Information (Der Text ist einwandfrei lesbar), das Layout ordnet sich unter.

Adaptive Webdesign

Adaptive Webdesign ist die kleine Schwester des „echten“ Responsive Webdesign. Hier werden verschiedene Varianten für verschiedene Auflösungen oder Geräte gestaltet. Das ist zum Beispiel sinnvoll, wenn in der Mobilen Ansicht bestimmte Informationen nicht  angezeigt werden sollen. So kann man sich beispielsweise in der mobilen Ansicht auf Kernfunktionalitäten konzentrieren und Designelemente weglassen, die hier nicht gebraucht werden. Das spart Ladezeiten und Traffic des Nutzers.

 

Responsive Webdesign

„Echtes“ Responsive Webdesign arbeitet mit flexiblen Rastern, flexiblen Bildern und flexiblen Media-Dateien. Alle Inhalte werden so optimiert dargestellt, dass die Inhalte gut lesbar sind und die Funktionen ohne Einschränkung genutzt werden können. Auch Bilder werden beispielsweise automatisch an die Größe des Viewports angepasst. Im Idealfall ist Responsive Webdesign optimal für alle Auflösungen und Geräte.

Ist das aber alles überhaupt notwendig?

Allerdings kommt es halt immer auf das Projekt an, ob ein responsive programmiertes Template überhaupt Sinn macht.

Natürlich ist es möglich, die Website vom Malermeister Huber responsiv zu gestalten. Es wir wohl nur keiner danach fragen.

Wenn man ihm den Vorschlag machen und Ihm auch den Mehraufwand bzw. die Kosten nennen würde, würde Herr Huber sicherlich fragen, ob denn die Webseitenbesucher die  Smartphones nutzen seine Seite nicht sehen könnten denn im Endeffekt würden alleine seine Kontaktdaten ausreichen für Mobile Besucher.

Und darauf müsste man ihm ehrlicherweise antworten, dass auch Seiten, die nicht responsiv sind, auf modernen mobilen Clients natürlich vernünftig angezeigt werden. Da wird man zwar zoomen und pinnen müssen, aber nutzen kann man sie. Speziell, wenn man weiß das die neuste Generation Smartphones nicht wie früher mit 320 pixel sondern bereits mit 1080 pixel Breite arbeiten können.