Insgesamt 11 Beiträge in dieser Kategorie

Layout, Webdesign & Gestaltung

Was macht eine gut strukturierte und übersichtliche Website aus?


Es gibt unzählige große, mittlere und kleinere Unternehmen in Deutschland und alle versuchen sich auf dem freien Markt, innerhalb der sozialen Marktwirtschaft Deutschlands, zu behaupten. Dieser Konkurrenzkampf ist hart und jede Firma kämpft für sich. Eines der Mittel, das für das Erreichen der Unternehmensziele eingesetzt wird, ist eine eigene Website, um im Internet Präsenz zu zeigen. Im Folgenden wollen wir einige Aspekte aufzeigen, die für eine gute, eigene Website unerlässlich sind und zur Grundausstattung eines jeden Unternehmens gehören sollten



Klares Ziel


Ein klares Ziel ist die Hauptaufgabe einer guten Website. Das Ziel besteht zumeist darin, den potenziellen Kunden über das Unternehmen zu informieren, auf Neuigkeiten aufmerksam zu machen, Neugierde zu wecken und im Allgemeinen das Unternehmen attraktiv darzustellen. Hierfür ist das Platzieren von sogenannten Call to Actions unbedingt notwendig. Hierbei werden zumeist farbige, auffällige Buttons im oberen Seitenbereich platziert. Ein gutes Beispiel zeigt www.uber.com/de, da hier sofort der Hinweis auf das Registrieren gegeben wird. Zudem besteht die Möglichkeit, unkompliziert Partner zu werden.




Aktuelle News und Informationen


Um den potenziellen Kunden auf den neusten Stand zu bringen und auch fortlaufend auf diesem zu halten, bieten sich eingeblendete Informationen zum jeweiligen Themengebiet an. So zeigt die Seite www.bwin.com/de beispielsweise, welche aktuellen Sportereignisse momentan weltweit stattfinden, wie der Spielstand ist und in welcher Phase sich das jeweilige Spiel befindet. Der Kunde sollte mit Aktualität und ansprechendem Design überzeugt werden.




Ansprechende Startseite


Das Ausschlaggebende bei einer Website im Allgemeinen ist selbstverständlich die Startseite, über welche die meisten Zugriffe erfolgen. Es ist dabei unerlässlich, dass diese nicht mit Informationen und sowohl visuellen als auch akustischen Reizen überladen wird. Ein gutes Beispiel hierbei stellt die Seite airbnb.de dar, welche mit wenigen Farben auskommt und das Wichtigste übersichtlich und in Kürze präsentiert.




Möglichkeit für Feedback und Selbstbeteiligung


Vor allem für die Unternehmen und Firmen, die Dienstleistungen oder auch Konsumgüter anbieten, ist das Feedback von Kunden ein Mittel der fortlaufenden Weiterentwicklung und wird aus diesem Grund hoch geschätzt. Die Möglichkeit für dieses wertvolle Feedback und ein produktives Einbringen des Kunden selber, sollte unbedingt Platz auf der unternehmenseigenen Website habe. Als Beispiel dient hier die Seite ritter-sport.de, welche es dem Kunden erlaubt, eigene Schokoladenkreationen vorzuschlagen, von denen auch einige in die Endproduktion gerieten.




Veröffentlicht am unter - Layout, Webdesign & Gestaltung
- Details ansehen




Responsive Webdesign - Für ein schöneres Internet


Responsive Webdesign ist eines der grundlegendsten Designkonzepte im Online Marketing.


Eine Website bedarf einer strategischen Planung bevor Sie durchstarten kann. Machen Sie gerade Ihre ersten Schritte im Online Marketing oder planen Sie den Internetauftritt Ihrer Firma? Ganz egal ob Sie Ihr eigenes Unternehmen, einen Hobby-Blog oder einen News-Feed präsentieren möchten: Responsive Webdesign ist absolut essentiell für den Erfolg Ihrer Website. Denn ein Ziel teilen sich alle Websites aus dem World Wide Web: Sie wollen gesehen werden!


Es gibt viele gute Gründe um Ihren Internet-Auftritt mit Responsive Webdesign auszustatten:



Internet-Nutzer sind mobil.


Man muss kein Experte sein um zu diesem Schluss zu kommen. Lange vorbei sind die Zeiten, in denen nur am stationären Computer oder Laptop gesurft wurde. Auch Google sieht im Shopping mit dem Smartphone einen vielversprechenden Markt der sich noch auf vielfältige Art und Weise ausbreiten wird.


Quelle: gs.statcounter.com

Eine Website, die in der heutigen Zeit nicht für die mobilen Geräte optimiert ist, ignoriert wahrscheinlich schon bald den größeren Teil der Internet-Nutzer. 


Eine Seite muss also „Handy-freundlich“ sein. Ein Problem was Sie ohne Responsive Webdesign haben werden ist die unglaubliche Menge und Vielfältigkeit der mobilen Geräte. Es ist eine nahezu unmögliche Aufgabe mit bisherigen Mitteln Ihre Seite für jedes Gerät zu optimieren. Responsive Webdesign ist hier die Zeit und Arbeitssparende Lösung.



Eine Website soll auf jedem Gerät gut aussehen.


Egal ob auf dem Smartphone, dem Tablet oder Ihrem Computer: Ihre Website ordnet sich allen Formaten stufenlos an. Mit Responsive Webdesign haben Sie auch in Zukunft eine Website die immer Ihre Inhalte liefert. Das ist komplett Plattform unabhängig. So wird auch jeder gängige Browser unterstützt.


Responsive Webdesign zeigt Ihre Inhalte immer in optimaler Anordnung auf jedem erdenklichen Bildschirm und in jeder möglichen Größe. Sie haben somit die Sicherheit, dass Ihre Inhalte sogar auf Geräten die noch nicht auf dem Markt sind richtig präsentiert werden.



Inhalte werden automatisch optimiert.


Stellen Sie sich vor, Sie müssten für jedes Endgerät eine eigene Darstellung oder gar eine eigene Website erstellen. Keine angenehme Vorstellung und dank des Responsive Webdesign auch nicht nötig. Die Inhalte müssen nur einmalig erstellt werden. Sie passen sich dann automatisch an die verschiedenen Geräte an. Auch bei zukünftigen Aktualisierungen müssen Sie die Inhalte nur einmal bearbeiten und nicht für jede Plattform separat. Dies spart Ihnen viel Aufwand und Nerven. Das wichtigste aber ist der Gefallen, den Sie Ihren Besuchern machen.



Niemand möchte darauf verzichten.


Bestimmt sind Sie selbst schon auf einer Website gelandet, die nicht optimiert war. Diese gehören inzwischen (glücklicherweise) zur Minderheit. Als Besucher bekommen Sie nicht nur das Gefühl auf einer veralteten Website zu sein. Das entscheidendere Gefühl ist die Orientierungslosigkeit. Sämtliche Strukturen sind verloren und Raster sowie Menüpunkte zeigen keine Ordnung oder Sinnenhafte Reihenfolge an. Wenn dann auch das komplette Format an einen großen Breitbildschirm angepasst ist und jeder Button die Größe einer Stecknadel aufweist fühlt sich niemand Wohl. Nicht nur das Image Ihres Unternehmens leidet. Meist folgt auch das schnelle Verlassen der Website.


Always Conected


Tun Sie Ihren Kunden und der Netzgemeinde den Gefallen und präsentieren Sie sich von Ihrer besten Seite.



Vorteile für Suchmaschinenoptimierung


Die Faustregel des SEO: Was Nutzern gut tut, tut (ihrem) Google-Ranking gut. Google befürwortet die Optimierung Ihrer Website für mobile Geräte. So lassen sich deutliche Vorteile für Ihre Auffindbarkeit in der größten Suchmaschine der Welt gewinnen. (Quelle) Aber auch für andere Suchmaschinen sind die Vorteile von Responsive Webdesign nicht abzustreiten. Oft ist aber auch schon die Konkurrenz der entscheidende Grund, warum Responsive Webdesign ein „must-have“ ist. Ihre Konkurrenz nutzt es sehr wahrscheinlich auch. Wollen Sie weiterhin und langfristig konkurrenzfähig bleiben, sollten Sie diesen Schritt auf keinen Fall ignorieren.


Noch mehr über Online Marketing, Suchmaschinenoptimierung und Webdesign finden Sie in unseren älteren aber auch zukünftigen Blogbeiträgen! Gerne beraten und unterstützen wir Sie auch persönlich bei Ihrem Projekt. Wir sind immer offen für ein informatives Gespräch. Auch bei einer Kooperation können Sie von unserer langjährigen Erfahrung profitieren.


Veröffentlicht am unter - Layout, Webdesign & Gestaltung
- Details ansehen




Typografie im Web - Welche Schriftarten passen zu meiner Website?


Die Bedeutung von Typografie im Web wird leider viel zu oft unterschätzt. Häufig kommt es vor, dass unerfahrene Webentwickler aus Bequemlichkeit auf Standardfonts wie Arial oder Helvetica zurückgreifen. Diese sind zwar universell einsetzbar werden aber schnell langweilig, was negative Auswirkungen auf das Nutzererlebnis der Website haben kann. Daher macht es Sinn sich für individuellere Schriften zu entscheiden, welche einerseits den Inhalt der Seite unterstützen und zudem den Wiedererkennungswert steigern. Für die Schriftauswahl ist beispielsweise Google Webfonts zu empfehlen, wo die Fontsuche durch Filter für Schriftkategorie und Schriftauszeichnung erleichtert wird. Dennoch steht man nun vor einer Auswahl von mehreren hundert Schriften. Um langwieriges Experimentieren zu vermeiden können bei der Wahl der richtigen Font einige Grundregeln helfen:


  1. Das höchste Gebot ist natürlich die Lesbarkeit. Besonders bei Fließtext sind klare Schriften mit wenig Schnörkeln zu empfehlen damit das Leseerlebnis nicht zur Tortur wird.

  2. Man sollte sich auf die Auswahl von zwei oder drei verschiedenen Schriftarten pro Webprojekt beschränken. So kann eine Font für Überschriften und eine weitere für Fließtext genutzt werden, manchmal ist es sinnvoll noch eine dritte Schrift für Subheadlines oder Hervorhebungen einzuführen. Doch bevor man den Leser mit zu vielen Schriftarten verwirrt sollte man bei der Textstrukturierung lieber auf unterschiedliche Schriftgrößen und Auszeichnungen setzen.

  3. Die Verwendung von mehreren Schriften, welche sich ähneln sollte vermieden werden. Stattdessen empfiehlt es sich auf Kontraste zu setzen also beispielsweise eine serifenlose Schrift und eine Serif-Font zu kombinieren. So wird die Struktur des Inhalts klarer.

  4. Dekorative, besonders ausgefallene Schriften sollten sparsam eingesetzt werden damit sie ihre besondere Wirkung nicht verlieren, zum Beispiel nur beim Logo oder den Hauptüberschriften.


Veröffentlicht am unter - Layout, Webdesign & Gestaltung
- Details ansehen




Webvisitenkarten für Kleingewerbe und Privatpersonen


Webvisitenkarten sind Micro-Webseiten (so genannte Microsites) die lediglich aus einer einzigen Seite bestehen. Diese Seite enthält alle wichtigen Kontaktinformationen um es potentiellen Kunden / Interessenten zu ermöglichen mit dem Betreiber in Kontakt zu treten.

Eine Webvisitenkarte erfüllt zwei zentrale Aufgaben: Zum einen hilft sie dem Betreiber im Internet - explizit in Suchmaschinen - gefunden zu werden. Sucht jemand nach Ihnen oder Ihrem Gewerbe im Netz ist es von Vorteil wenn er hier anstellen von halbseriösen Einträgen in Foren, Branchenbüchern und Bewertungsseiten an erster Stelle eine von Ihnen selbst verfasste Webvisitenkarte (Mini-Website) vorfindet.

Auch wenn für Sie und Ihre Arbeit das Internet keine Zentrale Rolle spielt ist doch anzunehmen dass einige Leute Sie früher oder später "googlen" werden.. Möchten Sie hier einen seriösen Eindruck hinterlassen oder die Suchenden zum direkten Kontakt mit Ihnen anregen ist es wichtig dass hier auch Suchergebnisse vorhanden sind. Google ist heutzutage so etwas wie das neue Telefonbuch!

Die zweite Aufgabe einer Webvisitenkarte ist es, auf den ersten Blick die wichtigsten Informationen über den Betreiber zur Verfügung zu stellen. Bereits auf den ersten Klick sollten Informationen wie Telefonnummer, Anschrift, Ansprechpartner, eMail-Adresse und Öffnungszeiten erkennbar sein. Eben genau die Informationen, die Sie sonst auf ihre normale Visitenkarte aufdrucken lassen.

Das Szenario ist einfach: Ein potentieller Kunde / Interessent /... / möchte Sie kontaktieren oder bei Ihnen vorbei kommen und ist entweder nicht im Besitz Ihrer normalen Visitenkarte oder hat diese gerade "verlegt" beziehungsweise nicht in greifbarer Nähe. Er gibt Ihren Namen in Google ein und hofft so auf die fehlenden Informationen (Telefon, eMail, Öffnungszeiten,...) zu stoßen. Findet er hier eine professionell gestaltete und übersichtliche Webvisitenkarte mit den wichtigsten Informationen hinterlässt dies gleich einen viel besseren Eindruck als unseriöse Branchenbücher oder gar überhaupt keine Suchergebnisse.

Unser Angebot:

Wir bieten professionelle und individuell gestaltete Webvisitenkarten zum kleinen Preis! Wie sie unserem Werbeflyer entnehmen können enthält unser Angebot einen "komplett-Service" sodass Sie keinerlei Verwaltungsaufwand und keine zusätzlichen Kosten erwarten. Gerne beraten wir Sie zu unserem Angebot!

So kann es aussehen:

Webvisitenkarte preiswert

 

Professionelle Webvisitenkarten


Veröffentlicht am unter - Layout, Webdesign & Gestaltung
- Web- und Softwarelösungen
- Details ansehen




Große Hintergrundbilder serverseitig skalieren


Große Hintergrundbilder
Große und bestenfalls den Bildschirm ausfüllende Hintergrundbilder bieten Website-Betreibern einen Vorteil: Sie wirken professionell und eindrucksvoll. Doch bei dieser Idee gibt es einen Haken: Um tatsächlich bildschirmfüllende Grafiken zu benutzen, müssen die Bilder meist in einer Auflösung von mindestens 1920px Breite vorliegen. Bilder in dieser Größe haben nicht selten mehrere MBit Dateigröße.

Für den Fall, dass der Besucher mit einem hochauflösenden Retina-Bildschirm auf Ihre Seite geht, muss die Datei in entsprechender Größer vorliegen - Doch was ist, wenn der Benutzer nur einen kleineren Bildschirm, einen Laptop oder gar ein Tablet-PC oder Smartphone hat?

Die Originaldatei wird auf jeden Fall in voller Größe geladen. Das ist gerade bei langsamen Internetverbindungen oder im mobilen Netz eine wahre Zumutung für den Nutzer. So wird die Internetverbindung mit unglaublich großen Datenpaketen beansprucht, die Seite lädt langsam und letztendlich muss der Browser die geladene Datei doch wieder nur an die aktuelle Browsergröße des benutzten Mediums anpassen.

Angepasste Hintergrundbilder durch Adaptive Images


Diesem Problem kann man jedoch begegnen, indem man den Ansatz der "Adaptive Images" nutzt. Das "Adaptive Images"-Skript, was ohne Probleme auf jedem Webserver installiert werden kann, stellt serverseitig eine Art Bilder-Cache zur Verfügung.

Sobald die Besucher auf die Seite zugreifen, wird ein Cookie gesetzt und übertragen, welches die maximale Browsergröße beinhaltet. Werden nun im zweiten Schritt die Bilder vom Server angefordert, wird die Anfrage auf ein Skript umgeleitet, welches diese Daten ausliest und die Bilder auf die maximale vom Nutzer benötigte Größe skaliert. Damit die Skalierung nicht jedes mal neu ausgeführt werden muss, werden die Bilder am Server zwischengespeichert, sodass beim erneuten Aufruf mit dieser Browsergröße die Bilder direkt ausgeliefert werden können.

Mit den Adaptive Images können Sie die Ladezeiten für Ihre Website auf das Mindestmaß reduzieren und eine fehlerfreie Anzeige dennoch garantieren.


Veröffentlicht am unter - Layout, Webdesign & Gestaltung
- Details ansehen




Was ist Parallax Scrolling? Nutzung und Nachteile


Parallax Scrolling, oft auch Parallax Design, ist ein Begriff aus dem Bereich des Webdesigns. Es handelt sich letztendlich um einen Designansatz, der erzeugt wird, indem unterschiedliche Ebenen erstellt und asynchron gegeneinander geschoben werden - wie auf dieser Seite oft zu beobachten ist.


Der Begriff Parallax Scrolling (engl.) kommt vom Begriff der Parallaxe (dt.). Als Parallaxe bezeichnet man die scheinbare, relative Position eines Objekts in Abhängigkeit vom Standpunkt des Betrachters. Anwendung findet dieses Phänomen üblicherweise in der Astronomie.

Der Gedanke hinter Parallax Scrolling


Was beim Parallax Scrolling Design genutzt wird, ist die Überlegung, wie die Relationen und Bewegungen von Elementen sich für das Auge verhalten wenn man aus großer Entfernung darauf schaut, wobei in diesem Fall natürlich die Änderung des Betrachtungswinkels eine reine Simulation ist. Während der Inhalt zumeist - aus Gründen der Lesbarkeit - in die optische "Nähe" des Benutzers gesetzt wird und entsprechend mit mehr oder weniger natürlicher Scrollgeschwindigkeit bewegt wird, gibt man dem Hintergrund eine optische Tiefe, die sich oft ausschließlich aus der veränderten Scrollgeschwindigkeit ergibt.

Scrollt man nun langsam über die Seite bemerkt man, dass die beiden Inhalte sich wie zwei Ebenen gegeneinander verschieben. In der technischen Umsetzung ist das letztendlich auch nichts anderes. Natürlich wird hier nicht - wie im herkömmlichen Sinn der Parallaxe - eine dritte Dimension genutzt. Es handelt sich um eine reine Simulation, die auch in der Zweidimensionalen hervorragend funktioniert. Die bloße Veränderung der Scrollgeschwindigkeit erzeugt beim Betrachter bereits das Gefühl der Räumlichkeit.

Die Stärke der Geschwindigkeitsdifferenz kann hierbei variieren. So kann sowohl ein geringer Unterschied als auch eine scheinbare "Fixierung" des Hintergrunds den Parallax Effekt hervorrufen. Die stärke des Effekts variiert von Webdesign zu Webdesign - immerhin stellt sich die Überlegung inwieweit hier der Nutzer durch die viele gegenläufige Bewegung nicht tatsächlich gestört wird.

Nachteil: Perfomance-Belastungen


Ein großes Problem beim Parallax Scrolling ist in der Regel die Größe der Bilder die für das Vorhaben benötigt wird. Sollen die Bilder in der Breite tatsächlich bildschirmfüllend sein, so müssen relativ große Bilder vorgeladen werden. Auch die überdeckten Bereiche müssen gefüllt sein, damit beim Scrolling der Seite auch tatsächlich ein neuer Bildbereich "aufgedeckt" werden kann. Das Laden der großen Bilder wirkt sich äußerst negativ auf die Performance der Seite aus. In der Regel sollten derartige "Spielereien" auf mobilen Geräten abgeschaltet werden. Außerdem sollte bei der Auslieferung der Bilder durch den Server eine Skalierung stattfinden, sodass nie mehr als die maximal benötigte Auflösung geladen werden muss.


Veröffentlicht am unter - Layout, Webdesign & Gestaltung
- Details ansehen




Eyecatcher für die eigene Webseite


Der Begriff „Eyecatcher“ ist Englisch und bedeutet so viel wie Blickfang. Im Grafikdesign (egal ob Print- oder Webdesign) hat sich dieser Begriff bereits fest etabliert. Das Ziel von Eyecatchern ist es, die Aufenthaltsdauer der Besucher auf Ihrer Webseite zu verlängern bzw. denen Aufmerksamkeit zu gewinnen oder auf bestimmte Inhalte zu lenken. Deshalb sollte ein Eyecatcher nur zum hervorheben des wichtigsten Elements gebraucht werden.

Das "hervorgehobene" oder durch den Eyecatcher besonders betonte Element entspricht im Normalfall der wichtigsten Einnahmequelle der Webseite. Dies kann eine angebotene Dienstleistung, ein Produkt oder aber auch eingeblendete Werbung sein. Mit der Verwendung von Eyecatchern sollte grundsätzlich vorsichtig umgegangen werden, da zu viele oder unwirksam (störende) Eyecatcher leicht einen gegenteiligen Effekt verursachen und den Besucher ablenken oder abschrecken können.

Es gibt verschiedene Arten Elemente auf Ihrer Webseite hervorzuheben. Bei allen Beispielen ist darauf zu achten, dass ein übermäßiger Gebrauch häufig das Ziel verfehlt und sich somit negativ auf den Eindruck Ihrer Website bei Kunden auswirken kann.


  1. Nutzen Sie Farben! Farben sind eine beliebte Methode Dinge hervorzuheben. Die Farbe Rot zum Beispiel, hat eine intensive Wirkung und zieht die Aufmerksamkeit ihrer Besucher auf sich. Des Weiteren ist Rot auch eine warme Farbe die positiv wirkt. Am stärksten kommt Rot auf einem dezenten Hintergrund zu Wirkung.

  2. Animieren Sie Elemente! Auf Bewegungen reagieren Menschen bewusst und unterbewusst sehr stark. Sie ziehen reflexartig die Aufmerksamkeit auf sich und eignen sich so um Dinge in den Vordergrund zu stellen. So kann eine Animation die Aufmerksamkeit zwar leicht auf sich ziehen, jedoch können diese im übermäßigen Gebrauch auch sehr schnell als störend oder ablenkend empfunden werden. Überlegen Sie sich, an welchen Stellen ein bewegter Inhalt günstig ist.

  3. Nutzen Sie Schriften! Verwenden Sie außergewöhnliche - nicht stadartisierte - Schriftarten oder heben Sie einen kurzen Text durch besonders überdimensionierte Größenverhältnisse hervor, so können Sie sicherstellen, dass die Grundaussage oder der wesentliche Inhalt Ihrer Website vom Benutzer sehr schnell wahrgenommen werden kann.

  4. Verwenden Sie Grafiken! Eine ansprechende Grafik die an den richtigen Stellen positioniert wird kann schnell einen Eindruck vom Inhalt verschaffen. Denken Sie daran, das Element durch Schattierungen, Abstände oder Größenverhältnisse für den Betrachter angemessen platziert werden müssen und achten Sie auf eine prägnante Aussage in Ihrem Bildern.


Da der Eyecatcher den Stil der Webseite maßgeblich mitbestimmt sollten Sie früh damit beginnen sich entsprechende Gedanken zu machen und auch Ihre gesamten Inhalte danach ausrichten. Die Erstellung des geeignetsten Eyecatchers sollte deshalb von vornherein mit der Konzeption des Layouts eingeplant werden. Sprechen Sie mit Ihrem Webdesigner über Ihre Möglichkeiten.


Veröffentlicht am unter - Layout, Webdesign & Gestaltung
- Web- und Softwarelösungen
- Details ansehen