Je öfter man eine Sache anschaut, desto weniger Aufmerksamkeit und Anziehungskraft übt sie aus. Deshalb verlieren aktuelle Trends auch meist nach einer gewissen Zeit ihren Reiz. Erinnern wir uns an die Einführung von Flash, was zu einer inflationären Nutzung des Formats für sinnlose Eingangsseiten führte. Das Web hat sich jedoch längst weiterentwickelt. Um nicht den Konkurrenten den Markt zu überlassen, sollte der engangierte Webdesigner die aktuellen Design-Trends kennen.

Zumeist findet sich dieses Symbol oben links, wo es meiner Meinung nach nur für Linkshänder otpimal platziert ist. Der Browser Firefox und viele andere Anwendungen machen es besser und platzieren das Symbol oben rechts, wo es vom Daumen des Rechtshänders rasch erreicht werden kann.

Um dieses Symbol darzustellen, gibt es mehrere Möglichkeiten.
Zunächst der Klassiker, Beispiel 1:
Das Symbol wird als Grafik erstellt und eingebunden.
Der Nachteil wird schon hier deutlich, je nach Darstellungsgröße wirkt diese Grafik unscharf.

Klassiker Nummer 2: Wir nehmen einfach das Zeichen aus dem Schriftzeichensatz. Unicode: ☰ ☰

Die Vorteile liegen auf der Hand, keine Ladezeit für eine Grafik, die Größe kann variiert werden, doch das Zeichen sieht nicht wirklich gut aus.

Pseudo Box-Shadow

Besser scheinen da sogenannte Pseudo Elemente geeignet, z.B. Pseudo Box-Shadow.

In HTML die simplen Zeilen:

<a href="#menu" class="box-shadow-menu">
  Menu
</a>

In CSS zunächst etwas linker Abstand durch padding-left. Die Positionierung wird relative. Dann wird eine einzelne schwarze Linie oben links in den Platz absolute positioniert und durch den Gebrauch von box-shadow werden zwei weitere Linien darunter generiert.

.box-shadow-menu {
  position: relative;
  padding-left: 1.25em;
}
.box-shadow-menu:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.25em;
  width: 1em;
  height: 0.15em;
  background: black;
  box-shadow: 
    0 0.25em 0 0 black,
    0 0.5em 0 0 black;
}

Pseudo Gradient

Mit dem gleichen HTML-Befehl läßt sich das Symbol aber auch per Pseudo Gradient verwirklichen, da Gradients nicht unbedingt Verläufe darstellen müssen -ist die Anfangsfarbe gleich der Endfarbe gibt es keinen Verlauf!

.gradient-menu {
  padding-left: 1.25em;
  position: relative;
}
.gradient-menu:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.21em;
  bottom: 0.21em;
  width: 1em;
  background: linear-gradient(
    to bottom, 
    black, black 20%, 
    white 20%, white 40%, 
    black 40%, black 60%, 
    white 60%, white 80%, 
    black 80%, black 100%
  );
}

Parallax Scrolling ist in aller Munde und damit einer der großen Webdesign-Trends des Jahres.

Was verbirgt sich hinter diesem Begriff?

Einzelne Ebenen einer Website bewegen sich unterschiedlich schnell und dadurch entsteht beim Betrachter ein Eindruck von Tiefe. Diesen Effekt kennen wir aus der realen Welt, wenn wir zum Beispiel beim Autofahren aus dem Seitenfenster schauen. Nahe Objekte wie Menschen oder Häuser scheinen sich dann schneller zu bewegen als weit entfernte Objekte wie Wälder oder Berge. Diesen Effekt nennt man in der virtuelle Welt des Webdesigns Parallax Scrolling.

Parallax Scrolling ist in der digitalen Welt, vor allem in Videospielen, schon seit vielen Jahren im Einsatz. Ins Webdesign brachte Nike diesen Effekt Anfang letzten Jahres durch die Website Nike Better World. Die zunehmende Verbreitung von HTML5 und CSS3 begünstigen den Einsatz des Parallax Scrolling, da sie die Entwicklung damit einhergehender Details – beispielsweise Animationen und Übergänge erleichtern.

Wann ist der Einsatz von Parallax Scrolling sinnvoll?

Mithilfe des Scrolling-Effektes lassen sich vor allem Geschichten auf beeindruckende Art und Weise ins Web übertragen. Und da wirkt sich natürlich das Interesse am Storytelling positiv aus, das in den vergangenen Jahren vor allem im Marketing Einzug hielt.

Minimales Design

Statt verwirrend vieler Informationen auf der Startseite, beschränken wir uns auf eine zentrale Botschaft im Headerbereich. Ein großes Bild zeigt einen sogenannten Hero-Shot mit Verlinkung (Call-to-Action Button. Oder wir bauen für tragbare Endgeräte ein One-Page-Layout.

Single-Page Layout oder One-Page Websites

Für kleine Firmen, Agenturen und Selbstständige kann das One-Page Layout gut funktionieren. Das Angebot oder Produkt muss nur einfach genug verständlich sein.

Größere Typographie

Da die Inhalte reduziert werden, kann die Lesbarkeit wie die Auffälligkeit erhöht werden. 16px wird zur neuen Minimumscheiftgröße bei einer Zeilenlänge von 60 – 70 Zeichen. Header können auch über 60px groß werden.

Große Blöcke und viel Whitespace

Aus drei Spalten mit nebeneinander angeordneten Inhalten werden die Inhaltsblöcke für eine bessere Leserführung untereinander platziert und damit die Aufmerksamkeit beim Betrachter stärker fokussiert.

Storytelling

Was wir in den letzten Jahren bereits im Bereich Präsentationen gelernt haben, wirkt auch auf Webseiten. Eindrucksvolle Videos und Musik erzeugen Emotionen, dadurch werden Inhalte und Wissen viel leichter vom Betrachter gespeichert. Das bedeutet auch eine Abkehr von Stockphotos und Hinwendung zu hochauflösenden Detailbildern höchstmöglicher Qualität.

Ausblendbare Menüs und Sidebars

Soll die Aufmerksamkeit auf ein oder zwei Botschaften pro Seite fokussiert werden, treten Menüs und Sidebars zwangsläufig in den Hintergrund.

Begriffsverwirrung

Klar ist inzwischen jedem, dass Webinhalte auf Großmonitoren ebenso abgerufen werden wie schnell mal unterwegs per Mobile.

Um jedem gerecht werden zu können, gibt es prinzipiell zwei Ansätze unterschiedlicher Website-Typen, die responsive Website und die adaptive Website, sowie drei verschiedene Layout-Typen, das fixed Layout, das fluid Layout und das elastic Layout. Zum Verständnis: Die Website-Typen beschreiben das Verhalten einer Website. Responsive Websites stellen die Seiteninhalte und ihr Design in den Mittelpunkt, adaptive konzentieren sich auf die Möglichkeiten des Endgerätes. Alle Website-Typen bedienen sich zumindest eines der oben genannten Layout-Typen.

Hier mein Beispiel für ein Fluid Layout.

Responsive Website

Im Responsive Layout werden sogenannte Breakpoints für eine optimale visuelle Darstellung auf unterschiedlichen Endgeräten programmiert. Wenn z.B.  Boxen oder Spalten nicht mehr sinnvoll nebeneinander dargestellt werden können, rutschen sie untereinander. Dieses Repositionieren, aber auch Skalieren und/oder Ein- und Ausblenden von Inhalten erfolgt client-seitig über das CSS und bedeutet somit, dass in jedem Fall alle Daten aller Inhalte geladen werden müssen. In der Regel bedienen sich Responsive Websites eines Fluid Layouts, ihre Größenangaben sind relative, nämlich prozentuale Verteilungen des verfügbaren Platzes.

Adaptive Website

Die adaptive Website richtet sich server-seitig um die Anpassung an die Fähigkeiten des Endgerätes. Der Server liefert an das Endgerät nur diejenigen Inhalte, die für die jeweilig Darstellung ausgewählt bzw. optimiert worden sind. So ist es möglich, für diesen Website-Typ Fixed Layouts zu nutzen, die in ihren Größenangaben den unterschiedlichen Viewports von z.B. Smartphones, Tablets, Notebooks oder Monitoren individuell angepasst sind.

Die Vorteile liegen auf der Hand: der mobile User kommt wegen der angepassten Datenmengen schneller und besser an die gewünschten Informationen. Der Nachteil ist in den höheren Herstellungskosten zu sehen, da jede Version einzeln programmiert werden muss.

Eine mobile Website hat also im Großen und Ganzen die gleichen Inhalte wie die normale Website, nur dass ihre Inhalte durch responsive Design in optimierter Form ausgegeben werden. Mobile Websites können im Inhalt reduziert sein, große Bilder werden ganz entfernt oder neuerlich optimiert, verkleinert, mehrspaltige Texte werden einspaltig dargestellt, damit diese Websites auf Smartphones rasch und gut lesbar dargestellt werden können.

Im Gegensatz dazu soll die Web-App[likation] nur einen einzigen Hauptnutzen haben, etwa eine Informationsmöglichkeit, eine Suchmöglichkeit oder die Möglichkeit, Informationen zu speichern. Sie sollte wie eine native App auf dem Homebildschirm abspeicherbar sein, Daten lokal speichern können und offline zur Verfügung stehen. Gegebenfalls kann sie gar wie eine native App in Appstores zur Verfügung gestellt werden [Hybrid-App].

Ihre Kunden sollen in ihrer lokalen Nähe per Handy primär Ihren Notdienst sofort finden oder einen Tisch buchen können. Dann sprechen Sie mit uns. Wir machen Ihnen gerne ein Angebot über die Erstellung einer [zusätzlichen] Web-App.

Immer häufiger finden sich sogenannte Aktionsangebote zur Optimierung Ihrer Webseite im Spamfilter

SEO ist das neue Zauberakronym der Branche. Gemeint ist die Suchmaschinenoptimierung oder Search Engine Optimization. Selbst ernannte Fachleute schicken Ihnen fast täglich unaufgefordert Angebote mit Aktionspreisen, die Ihnen durch Webseitenoptimierung eine Erhöhung der Webseitenpositionierung in der Ergebnisliste bei Google garantieren. Löschen Sie diese Mails, wie alle anderen Spammails auch und klicken Sie nicht auf den Link: Diesen Newsletter abbestellen, denn dies ist kein Newsletter, man will nur Ihre persönliche Mailadresse haben.
Dass diese Mails nicht für Sie sind, sondern als Spam herausgeschleudert werden, zeigen die folgenden Tatsachen:

* Jeder bekommt diese Mails, also auch jene Inhaber von gut positionierten, weil gut programmierten Websites.

* Niemand kann Ihnen ein bestimmtes Ranking garantieren.

* Google ist zwar wichtig, aber nicht die einzige Suchmaschine, die für Sie relevant sein kann.

Wir sind seit Jahren im Geschäft. Suchmaschinenoptimierung war und ist uns stets ein wichtiger Teil unserer Arbeit gewesen. Eine Suchmaschinenoptimierung kann nicht einfach von außen aufgesetzt werden, sie ist integraler Bestandteil der Programmierung und der Inhalte Ihrer Website.

Sollten Sie Fragen oder Wünsche zu diesem Thema haben, treten Sie bitte mit uns in Kontakt.