Damals war mir noch nicht so recht klar, welche Ausrichtung mein Blog genau haben soll.

Mittlerweile liegt mein Fokus klar darauf, anderen zu helfen, ihre eigene Website zu realisieren – unabhängig davon, mit welchem System sie die Seite umsetzen wollen.

Nicht nur Tools und Technik

Websites Umsetzen beginnt und endet aber nicht mit dem Tool und der Technik. 

Es gehört viel mehr dazu. Schon bei der Planung & Konzeption kann man Vieles richtig aber auch falsch machen. 

Ein geeignetes Design und Layout macht die Website für Besucher erst so richtig attraktiv. Schlussendlich will man nach der Umsetzung lange Freude an der Website haben. 

Deshalb muss man sich auch um den laufenden Betrieb und die Optimierung kümmern.

All diese Infos stellte ich in irgendeiner Form zur Verfügung, sie waren aber leider nicht immer leicht auffindbar.

Neben dem Blog habe ich Schritt für Schritt die Veröffentlichung von immer mehr Inhalten auf verschiedenen Plattformen ausprobiert. Audios mit dem Podcast, Videos auf meinem YouTube Kanal, Kurse auf meiner Kursplattform oder auf UDEMY, einen Mitgliederbereich in meinem CLUB,  Livevideos auf Facebook, Webinare und Vieles mehr.

Viele der Inhalte waren aber nicht über meine Website 

https://www.andreasstocker.at

zu finden sondern unter anderen Domains oder auf andern Plattformen.

Das war sowohl für mich verwirrend, weil ich manchmal nicht mehr wusste, wo und wie ich meine geplanten Inhalte veröffentlichen sollte, und vor allem für dich, weil du möglicherweise gar nicht alles gefunden hast.

So, und damit ist jetzt Schluss!

Ab heute gibt es all meinen Content zusammengefasst auf meiner Website

https://www.andreasstocker.at

Diese ist der Ausgangspunkt für den Weg zu all meinen Inhalten und Angeboten.
Damit es dir leichter fällt, die für dich relevanten Inhalte zu finden, habe ich den contentselector in meine Seite eingebaut.

Mit ihm kannst du auswählen, in welcher Projektphase du dich befindest und auf welche Art und Weise du meine Inhalte konsumieren willst. Du kannst aber auch über die Stichworte oder mittels Volltextsuche die gewünschten Informationen finden.

Neue Vorschaubilder sollen dir auf den ersten Blick zeigen, wie du den Content erleben wirst. Denn ich stelle meine Inhalte in verschiedenen Formaten zur Verfügung: 

Als Blogbeitrag zum Lesen
als Podcast zum Hören
als Video zum Schauen und
als Coaching zum Lernen

Schlussendlich habe ich auch noch die Möglichkeiten zusammengefasst, wie du mit mir persönlich zusammen arbeiten kannst.

So, jetzt aber genug der Theorie.

Ich will dich nicht länger mit meiner Mail langweilen. Besuche mich einfach auf meiner neuen Website

https://www.andreasstocker.at

und mach dir selbst ein Bild davon.

Über deine Rückmeldung würde ich mich sehr freuen. Vielleicht hast du ja noch den einen oder anderen Tipp, was ich für dich verbessern könnte.

Also, dann bis gleich auf meiner neuen Website!

Liebe Grüße
Andreas Stocker – Dein Webdesign Coach

PS: Mein besonderer Dank bei diesem Projekt gilt übrigens meinem langjährigen Freund Alex Wastian, mit dem ich bereits Mitte der 1990er Jahre meine ersten Webprojekte umgesetzt habe und der mich vor allem im Bereich Design & Layout mit Rat und Tat unterstützt hat.

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 Webseite. Für diesen ersten Eindruck nehmen sie sich in etwa 5 Sekunden Zeit. Nicht viel – oder?

Es ist also eine ganz schöne Herausforderung diese Fragen deiner Besuchern beantworten zu können.

Schaffen kannst du das durch eine gut optimierte Website. Aber wie kannst du nach all der getaner Arbeit dein Ergebnis überprüfen?

Dafür gibt es den 5 Sekunden Test, 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.

Ich persönlich finde den Test genial, weil man mit sehr geringem Zeitaufwand sehr wichtige Informationen über das Design der eigenen Website erhalten kann.

Beginnen wir aber einmal ganz von vorne

Was ist der 5 Sekunden Test und wofür benötigen wir ihn?

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.

Vor allem, wenn die Besucher über Suchmaschinen auf deine Seite kommen.

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.

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.

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.

Auch das, was deine Website Besucher auf deiner Seite tun können musst du rasch und klar vermitteln.

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.

Um herauszufinden, ob all diese Kriterien von deiner Website erfüllt werden, gibt es einen einfach und rasch durchzuführenden Test – den 5 Sekunden Test für deine Website.

Wie funktioniert der 5 Sekunden Website Test?

Die Funktion des 5 Sekunden Website Tests ist sehr einfach beschrieben. Er ist in zwei Schritte unterteilt. Zuerst einmal der eigentliche Test – das Betrachten der Website. Im weiteren dann die Auswertung in Form einer Befragung.

Zuerst einmal zu den Voraussetzungen.

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.

Das kann eine deiner Unterseiten, eine spezielle Landingpage oder auch eine Verkaufsseite sein.

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.

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.

Für einen ersten Gesamteindruck oder wenn es um Vertrauenswürdigkeit geht, müssen die testenden User nicht unbedingt aus deiner Zielgruppe kommen.

Wenn es um das Verständnis der Inhalte und Leistungen geht, dann ist es sehr wohl notwendig.

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.

Jetzt aber zur eigentlichen Durchführung. Diese ist sehr einfach und auch relativ schnell gemacht. Zumindest der erste Teil ist in wenigen Sekunden erledigt.

Der erste Schritt – Website betrachten

Dabei sitzt die Testperson vor einem Computer. Wenn diese bereit ist, dann wird für 5 Sekunden deine zu testende Website angezeigt.

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.

Also kein Scrollen und kein Klicken – nur schauen.

Nach 5 Sekunden wird die Website wieder ausgeblendet. Teil 1 ist damit schon erledigt.

Im zweiten Schritt kommt die Befragung.

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.

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.

Form der Befragung

Wenn du den Betrachter neben dir sitzen hast, dann kannst du ein persönliches Interview führen.

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.

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.

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.

Welche Variante du wählst hängt auch sehr vom Ziel und der Art der Fragen ab.

Welche Fragen soll ich stellen?

Jetzt wirst du dir wahrscheinlich schon die Frage stellen „Welche Fragen soll ich meinen Website Testern stellen?“

Dazu möchte ich dir einige Beispiele geben, damit du siehst in welche Richtung die Fragen gehen können.

Achte darauf bei diesem Test nicht zu viele Fragen zu stellen. Ein gute Anzahl sind drei bis fünf Fragen.

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.

Praktisch sieht das dann so aus:

„Du hast in Google nach xyz gesucht und auf ein Ergebnis geklickt. Folgende Seite wurde geöffnet …“

Mögliche Fragen die du dann stellen kannst:

Worum geht es bei der Website?

Was hast du auf der Seite gesehen?

Woran kannst du dich erinnern?

Was macht das Unternehmen?

Was ist der Zweck der Seite?

Welche sind die wichtigsten Elemente, an du dich erinnern kannst?

Welche Bilder auf der Webseite sind in Erinnerung geblieben?

Welche Farben wurden auf der Webseite verwendet?

An welche Begriffe oder Slogans erinnerst du dich?

Hast du dich von der Webseite angesprochen gefühlt? Falls ja, was hat dich angesprochen? Falls nein, warum nicht?

Was glaubst du, wer die Zielgruppe ist?

Was war dein Eindruck vom Layout?

Was kann man auf der Seite alles machen?

Was ist der nächste Schritt, den du machen kannst?

Du kannst die Antworten auch einschränken, in dem du Fragen formulierst, wie etwa.

Bietet diese Webseite Produkt A oder Produkt B an?

Bei der Frage:

Wirkt das Design oder die Marke vertrauenswürdig?

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.

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.

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.

Was benötige ich für den Test?

Du weisst jetzt schon, warum du einen 5 Sekunden Website Test machen sollst und auch worauf es ankommt, bzw. wie der Test abläuft.

Wie aber kannst du jetzt einen solchen Test in der Praxis durchführen.

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.

Gehen wir jetzt die verschiedenen Möglichkeiten und Methoden durch.

Variante 1: Du sitzt daneben

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.

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.

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.

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.

Ist der erste Teil abgeschlossen, kann die Befragung beginnen.

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.

Für den Test kannst du natürlich auch eines der Online Tools verwenden, die ich noch vorstellen werde.

Variante 2: Remote über Online Meeting Software

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.

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.

Auch hier achte darauf, dass die Seite vorher schon geladen wurde.

Die Auswertung kann ähnlich wie bei der ersten Variante mittels einem Interview oder auch mit einem Online Befragungstool stattfinden.

Variante 3: Remote automatisiert

Bei dieser Variante kann alles völlig automatisch ablaufen.

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

Im Anschluss an die 5 Sekunden wird die Testperson auf einen Fragebogen weitergeleitet.

Hat er diesen ausgefüllt, dann ist der Test komplett abgeschlossen.

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.

Welche Tools gibt es?

Zum Schluss möchte ich dir noch eine Auswahl an Tools zeigen, damit du den Test mit der Remote Variante einfach durchführen kannst.

Usability Hub 5 Sekunden Test

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.

https://usabilityhub.com/product/five-second-tests

Um das Tool nutzen zu können, musst du dich vorher registrieren. Die einfache Variante des Tests kannst du kostenlos nutzen.

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.

Jetzt kann man noch Fragen eingeben, die im Anschluss an die 5 Sekunden angezeigt werden.

Ist das erledigt, kannst du einen Link erstellen, den du dann deinen Testern weitergeben kannst.

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.

Webdesign Coach 5 Sekunden Test Tool

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.

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

Das Ergebnis findest du unter:

https://tools.webdesign-coach.com/

Dort musst du einfach aus der Liste das Tool „Website 5 Sekunden Test“ auswählen und es geht schon los.

Einfach 2 URLs eingeben. Einmal für die Testseite und eine zweite optionale für die anschliessende Seite z.B. den Fragebogen. Dann auf „Test Link erstellen“ klicken und das war es schon.

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

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

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).

https://tools.webdesign-coach.com/5sekundentest/start5sectest.html?url=aHR0cHM6Ly93d3cuYW5kcmVhc3N0b2NrZXIuYXQv&aurl=aHR0cHM6Ly9mb3Jtcy5nbGUvZGtaUkxLZVA5VXRpRDlQNDY=

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: https://docs.google.com/forms/

Zusammenfassung

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.

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.

Im Anschluss soll die Testperson einige von dir vorbereitete Fragen zur Website und deren Inhalten beantworten.

Damit kannst du leicht feststellen, ob du dein gewünschtes Ziel erreichst.

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.

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.

Er eigenet sich daher auch einmal schnell eine Arbeit zu prüfen, bevor man weiter macht.

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.

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.

Dieser Test ist dann allerdings nicht mehr so einfach, schnell und kostengünstig durchzuführen.

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.

Was hat das aber jetzt mit gutem Webdesign zu tun?

Lerne in diesem Artikel kennen, was gutes Webdesign ausmacht.

[toc]

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

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

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

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

Design ist nicht, wie es aussieht, Design ist wie es funktioniert.

Steve Jobs

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

Was meint Steve Jobs aber mit dieser Aussage?

Zurück zu unserer Uhr

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

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.

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.

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.

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.

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

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.

Liefere, was der Nutzer erwartet

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

Aber auch klar durchdachte Abläufe die nachvollziehbar oder noch besser vorhersehbar sind.

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.

Ä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.

Gutes Design für Webseiten

So wie es mit der Software ist, so ist es auch mit Webseiten.

Naja nicht ganz.

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

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

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.

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.

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.

Warum ist Einfachheit und Klarheit, wichtig?

Was du über das Hirn des Menschen wissen solltest

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

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.

Die Folge daraus ist – unser Hirn ist faul.

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.

User wollen nicht denken

Mit diesem Wissen in deinem Kopf solltest du an das Design deiner Website herangehen. Du weisst ja – Design bedeutet nicht nur hübsch aussehen, es hat sehr viel mit der Funktion zu tun.

Es sollte das oberste Ziel sein, deine Website so zu gestalten, damit deine Besucher so wenig wie nur möglich denken müssen.

Über dieses Thema wurden schon ganze Bücher geschrieben:

Denken wir einmal an Steve Krug, der in seinem Buch „Don‘t make me think!“ (*) Usability für Webseiten erklärt und den Buchtitel zum Leitsatz für gutes Webdesign macht.

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

User wollen nicht überrascht und nicht zum Denken gezwungen werden.

Erfinde das Rad nicht neu

Auch das W3C, jene Organisation, die sich mit den Webstandards auseinander setzt hat ein interessantes Dokument mit dem Titel „HTML Design Principles“ veröffentlicht. Dort gibt es unter anderem ein Kapitel mit dem Titel „Do not reinvent the wheel“. Wir sollen also das Rad nicht neu erfinden, sondern auf das setzen, was der User kennt und gewohnt ist.

https://www.w3.org/TR/html-design-principles/#do-not-reinvent-the-wheel

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.

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

Soll sie innovativ anders sein oder den User unbeschwert unsere Inhalte konsumieren lassen?

Soll sie toll aussehen oder soll sie schnell sein?

Das sind Beispiele von Eigenschaften, die sich nicht immer gut miteinander vereinbaren lassen.

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.

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.

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.

Usability und deren Prinzipien

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.

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

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“.

Für alle verwendbar – Barrierefreiheit, Accessibility, Zugänglichkeit.

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

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.

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

Man spricht dabei von Begriffen wie Barrierefreiheit, Accessibility oder Zugänglichkeit.

Barrierefreiheit wird in verschiedene Stufen gekennzeichnet mit A, AA oder AAA.

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.

Die Seite muss flott sein

Man sagt dazu auch, sie sollte performant sein.

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

Wichtig ist auf jeden Fall einmal den IST Zustand aufzunehmen. Das kann entweder mit den Browser Tools (Network) oder den Pingdom Tools (https://tools.pingdom.com/) erfolgen. Dieses Tool gibt dir übrigens eine Menge Informationen und Tipps um deine Seite auf Grund der Messung zu optimieren.

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

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

Zum Beispiel – weg mit dem Formularwahnsinn. Einfach und kurz reciht oftmals aus.

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.

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.

Seiten müssen sich anpassen

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.

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.

Notfalls müssen auch Inhalte auf verschiedenen Endgeräten ausgeblendet werden.

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.

Design sollte vorhersehbar sein

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.

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.

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.

Feedback liefern

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.

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.

Im Fall von Fehlermeldungen sollten diese zum richtigen Zeitpunkt und an der richtigen Stelle erscheinen.

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

Bei der Navigation fängt alles an

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.

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.

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.

Fragen zur Navigation

Wo soll die Navigation platziert werden?

Soll ich eine vertikale oder horizontale Navigation verwenden?

Kommt sie unter, neben oder über das Logo?

Soll sie beim Scrollen fix bleiben oder mit der Seite mitwandern?

Wie viele Ebenen soll mein Menü haben?

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

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.

Schaffe Orientierung

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.

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.

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.

Dein User sollte entscheiden, was er braucht

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.

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.

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

Vergleichen wir das zum Beispiel mit einem Baumarkt.

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ü.

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.

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.

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.

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

Muss man jeden Trend mitmachen?

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.

Wie lang darf eine Website sein?

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.

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.

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.

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.

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.

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.

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

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.

Überlege also wirklich, ob du jeden Trend mitmachen musst.

One Pager haben auch Nachteile

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.

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.

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.

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

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.

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

Und was ist mit dem Aussehen?

Am Schluss will ich jetzt doch noch auf das Aussehen deiner Website eingehen.

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.

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

Natürlich ist das Aussehen nicht egal.

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.

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.

Die Gestaltungsgesetze aus der Gestaltungspsychologie sollten natürlich Teil deines Designs sein.

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

Das Aussehen und die Funktion deiner Website müssen Hand in Hand gehen und sie müssen eine Einheit bilden.

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.

(*) 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.

Vor etwas mehr als 2 Wochen ging mein Podcast on Air und hilft dir bei der Erstellung eines gelungen Webauftrittes. Was dich dort erwartet und wie du diesen findest, dass habe ich dir in diesem Beitrag kurz zusammengefasst.

Was ist eigentlich ein Podcast?

Falls du übrigens nicht weisst, was ein Podcast ist, dann will ich dir das kurz erklären.

Podcasts sind im Prinzip nicht anderes als Medien Dateien, die du abonnieren kannst. Ein Podcast bieten zwar auch die Möglichkeit als Video verbreitet zu werden, aber die Regel sind doch eher Audios.

Um Podcasts zu hören benötigt man auf seinem Smartphone einen entsprechenden Player. Bei iPhone ist die Podcast App von Apple bereits vorinstalliert. Es gibt aber auch alternative Player für das iPhone, wie zum Beispiel Overcast. Auch für Android Phones gibt es natürlich verschiedene Podcast Player. Prinzipiell sind Podcasts dafür gedacht am mobilen Gerät gehört zu werden, das ist aber kein Muss. Viele Betreiber stellen ihre Audio Shows auch auf einer Website zur Verfügung, auf der man sich in den meisten Fällen ebenfalls die Audio Dateien anhören kann.

Auch für meinen Podcast gibt es eine Website, wo du nähere Infos zu den Inhalten der einzelnen Folgen findest und dir natürlich die Folgen auch anhören kannst.

http://podcast.webdesign-coach.com/

Ich persönlich mag Podcasts recht gerne, da man diese unterwegs leichter konsumieren kann als zum Beispiel Videos. Egal ob in öffentlichen Verkehrsmitteln, im Auto, beim Sport oder bei der Gartenarbeit – es gibt viele Möglichkeiten Audios zu hören.

Was dich in diesem Podcast erwartet

Aber eigentlich geht es ja hier um meinen neuen Podcast und den will ich dir jetzt kurz vorstellen.

Wie weiter oben schon erwähnt, geht es bei dem Podcast um deinen Webauftritt. Damit dir dieser gelingt, helfe ich dir in jeder Folge mit einem neuen Thema weiter um dich zu deinem gelungen Webauftritt zu begleiten.

In den ersten Folgen, geht es vor allem um den Einstieg. Hier erfährst du alle notwendigen Grundlagen, damit du überhaupt mit deiner Website starten kannst und weisst, welche Systeme und Tools für deine Umsetzung in Frage kommen.

Weiter geht es dann Schritt für Schritt mit Beiträgen die dann weiter in die Tiefe gehen und zusätzliche Themen behandeln oder bereits angesprochene Inhalte weiter vertiefen. Der Schwerpunkt liegt aber nicht nur auf der Erstellung, sondern auch in der Verbesserung und Optimierung eines bereits bestehenden Auftritts. Auch Inhalte zu Themen, wie Online Marketing, Suchmaschinen Optimierung, Social Media usw. sollen in diesem Podcast behandelt werden.

Die ersten 3 Folgen sind online

WebDesign Coach – Folge 0 – Eine kurze Einführung

In  Folge 0 – das ist in Podcast Kreisen die Einführungsfolge. Da erfährst du nähere Details zum Podcast und ich erzähle dir auch ein wenig etwas über mich.

Du findest die erste Folge unter: http://podcast.webdesign-coach.com/folge000

WebDesign Coach – Folge 1 – Die 10 Schritte der Vorbereitung

Weiter geht es dann mit der ersten echten Folge. Hier sehen wir uns einmal in der Übersicht die 10 Schritte an, die du durchführen solltest, bevor du mit deinem Webauftritt startest. Hier geht es um deine Zielgruppe, deine groben Inhalte, aber auch um die Entscheidung, mit welchem System und welcher Technik die Seite realisiert werden soll. Schlussendlich zählt auch die Wahl der geeigneten Domain und die Auswahl eines Providers zu den notwendigen Schritten. Es geht in dieser Folge vor allem um die Zusammenhänge dieser 10 Schritte und wie diese aufeinander aufbauen.

Die Folge ist unter http://podcast.webdesign-coach.com/folge001 zu finden.

WebDesign Coach – Folge 2 – Von der Zielgruppe zur Zielperson

In der zweiten Folge geht es dann schon mit dem ersten Schritt los. Hier wenden wir uns deiner Zielgruppe zu und sehen uns an, wie wir daraus zur Zielperson kommen und warum wir diese benötigen.

Ausserdem lernst du in dieser Folge mein virtuelles Projekt kennen, dass dir die Inhalte leichter verständlich rüberbringen soll. Für dieses Projekt, habe ich ein fiktives Familienunternehmen gegründet, das wir auf dem Weg zu ihrem Webauftritt begleiten werden. Aber am besten hörst du dir das selbst an unter:

http://podcast.webdesign-coach.com/folge002

Ich würde mich freuen, wenn auch du in meinen Podcast reinhörst und hoffentlich auch Abonnent wirst.

Auf den oben genannten Seiten, findest du einen „Abonnieren“ Button für deine bevorzugte Podcast App.

Den direkten Link zu iTunes gibt es auch hier: https://itunes.apple.com/podcast/id1200512595

Viel Spass beim Hören und wie immer freue ich mich über Rückmeldungen per Kommentar oder Mail.

Liebe Grüße
Andreas

Wie alles andere bei Muse, kann man sein responsive Layout völlig befreit von irgendwelchen Grid Systemen einfach mit Drag and Drop erstellen.

Wie gut das ganze funktioniert und ob es praktisch brauchbar ist, habe ich mir angesehen und in diesem Artikel zusammen gefasst. Leider ist nicht alles Gold was glänzt und daher werden in diesem Artikel auch ein wenig die Einschränkungen und Nachteile beleuchtet.

Adobe hat mittlerweile die Version 2015.2 um Juni 2016 freigegeben, die einige Kritikpunkte, die ich in diesem Beitrag erwähnen wollte behoben hat. Das heisst, dieser Artikel geht auf die aktuelle Version vom Juni 2016 ein und wird daher auch etwas weniger kritisch sein, als ursprünglich geplant.

Um zu sehen, wie schnell sich ein responsive Layout mit Adobe Muse umsetzen lässt, habe ich mein responsive Beispiel, dass ich mit Dreamweaver gemacht habe als Test mit Muse realisiert. Ich habe dabei das Design gewählt, dass ich auch in meinen Dreamweaver Tutorials schon verwendet habe.

Responsive Design mit Dreamweaver CC 2015 und Bootstrap Tutorials – Teil 1 und 2

Responsive Design mit Dreamweaver CC 2015 und Bootstrap Tutorials – Teil 3 und 4

Ich habe mir vor der Umsetzung nur kurz die wichtigsten Tutorials von Adobe angesehen. Diese haben beschrieben, wie man responsive Elemente fixiert, skaliert und Breakpoints erstellt. Mit diesem Wissen habe ich dann begonnen das Beispiel zu bauen. Ein klein wenig braucht man um festzustellen, wann man welche Elemente wie verankern muss, aber nach einigen Tests hat man das schnell herausgefunden.

Ein neues Projekt erstellen

Bei der Erstellung eines neuen Muse Projektes hat man jetzt die Wahl zwischen „Variable Breite“ und „Feste Breite“. Auswählen sollte man für ein echtes flüssiges responsive Layout „Variable Breite“. Kommt man mit der Variablen Breite nicht zurecht, dann kann man auch feste Breite auswählen. Bei dieser Wahl springt dann das Layout bei den definierten Haltepunkten um und passt sich zwischen den Haltepunkten nicht laufend an. Hat man „Variable Breite“ ausgewählt, dann kann man noch die maximale Seitenbreite eingeben. Das bedeutet, wenn das Browserfenster breiter ist, dann wird die Seite trotzdem nicht weiter ausgedehnt. Ich lasse einmal die Standardeinstellung von 960. Der Wert lässt sich ja jederzeit verändern.

Im ersten Schritt habe ich die Seite mit den bestehenden Bildmaterialen und Texten im Desktop Layout zusammengestellt. Das geht, wie in Muse üblich in wenigen Minuten. Der Kopfbereich mit dem Logo und dem Menü wurde wie vorgesehen in einer Masterpage erstellt und der Rest auf einer normalen Seite. Um das Menü automatisch erstellen zu lassen, wurden noch die notwendigen leeren Seiten im Planungsmodus erstellt.

Elemente verankern

Jetzt wurde es aber spannend. Wie verhält es sich jetzt mit dem responsive Layout? Zuerst einmal probieren, was passiert, wenn man die Seite kleiner macht. Wie erwartet, drängen sich die Inhalte im Content Bereich immer mehr zusammen, bis diese irgendwann nicht mehr gut lesbar sind. Ausserdem stelle ich fest, dass das Logo über den linken Rand raus wandert, wie am folgenden Bild zu sehen ist.

Es ist also die erste Anpassung notwendig. Um zu verhindern, dass Elemente in der Gegend herumwandern, kann man diese auf der Seite fixieren oder auch verankern, wie Adobe es in Muse nennt. Um das machen zu können, ist zu dem bisher schon bekannten Verankern Symbol noch ein weiteres hinzugekommen. Beide sind im Bild hier ersichtlich. Bisher wurde „Verankern“ verwendet um Elemente im Browser also zum Beispiel für den Kopf oder Fussbereich zu fixieren. Das neue Symbol legt fest, wonach sich Elemente ausrichten sollen, wenn die Seite in der Breite verändert wird.

Unser Logo werden wir, wie im Bild ersichtlich ist links fixieren und das Menü rechts.

Ist die Masterseite fertig gestellt, dann müssen wir selbiges auch bei den eigentlichen Inhaltsseiten durchführen.

Dabei habe ich allerdings festgestellt, dass zu voreiliges fixieren nicht immer hilfreich ist. Ich habe zum Beispiel das grosse Bild unterhalb des Header Bereiches in der Mitte fixiert und musste dann feststellen, dass beim Verkleinern der Seite ein Abstand zwischen dem Bild und den darunter liegenden Überschriften entsteht. Auch dieses Problem ist in einem Bild am besten darstellbar:

In meinem Fall konnte ich die Fixierung wegnehmen, da diese keine Auswirkung hatte und das Bild trotzdem in der Mitte bleibt da es sich in der Größe automatisch anpasst. Wie man allerdings wirklich vorgeht, wenn man eine Fixierung benötigt und sich der Abstand in der Höhe nicht ändern soll ist mir nicht so recht klar. Die Dokumentation von Adobe schweigt zu diesem Thema. Ich ordne das einmal unter den noch zu behebenden Kinderkrankheiten ein.

Skalierung von Elementen

Ich habe oben erwähnt, dass sich das Problem bei mir nicht ausgewirkt hat, da sich das Bild in der Größe automatisch angepasst hat. Diese zweite wichtige Funktion neben der Verankerung möchte ich jetzt noch erklären.

Verändert man die Breite der Seite im Browser, dann haben die darin befindlichen Elemente zwei Möglichkeiten um komplett auf der Seite dargestellt zu werden.

1. Die Größe der Elemente kann gleich bleiben und das Layout wird nur durch verändern der Abstände zwischen den Elementen angepasst.

2. Die Elemente passen sich ebenfalls in der Größe an und werden bei kleiner werdender Breite ebenfalls kleiner. Man spricht hier von responsive Breite.

Diese Eigenschaft lässt sich bei Adobe Muse bei jedem Element bestimmen. Dafür gibt es neben der Verankern Eigenschaft noch die Skalieren Eigenschaft. Die zur Verfügung stehenden Auswahl Möglichkeiten sind im folgenden Bild erkennbar.

Bei „Ohne“ wird keine Anpassung vorgenommen und das Element zum Beispiel das Bild bleibt immer in der Originalgröße. Wird die Seite kleiner als das Bild, dann wird auch nur mehr ein Teil davon im sichtbaren Browser Fenster dargestellt. Bei Bildern hat man zusätzlich noch die Auswahl „Responsive Breite und Höhe“. Wird die Seite verkleinert, dann wird das Bild proportional kleiner. Die Auswahl „Responsive Breite“ macht bei einem Bild nicht wirklich Sinn, da es sonst verzerrt dargestellt werden würde. Aus diesem Grund, kann diese erst gar nicht ausgewählt werden. Bei Textfeldern oder Rechtecken, stehen auch „Responsive Breite“ und „An Browserbreite anpassen“ zur Verfügung.

In meinem Beispiel habe ich sowohl das Logo links oben, als auch das Menü rechts nicht responsive gemacht, da ich nicht möchte, dass sich diese beiden Elemente anpassen. Die Texte und Bilder im Content Bereich sind fast alle mit einer responsive Breite und Höhe versehen worden. Eine Ausnahme stellen hier meine Icons dar, die ich ebenfalls nicht anpassen wollte.

Mit diesen Funktionen hat man schon einmal die wichtigsten Werkzeuge um bei einem flüssigen responsive Layout die Anordnung und das Verhalten der Element zu bestimmen.

Haltepunkte, das Herzstück responsiver Webseiten

Irgendwann reicht aber auch das nicht mehr aus und die Elemente der Seite müssen anders dargestellt werden, da diese einfach nicht mehr gut wahrnehmbar sind. Ein Beispiel sind die vier Service Elemente in meinem Layout. Die Spalten werden ab einer gewissen Breite so eng, dass die Texte nicht mehr wirklich angenehm lesbar sind, wie im folgenden Bild erkennbar ist.

Um das Problem zu beheben, ordnet man die Elemente ab einer bestimmten Breite anders an. Diesen Punkt nennt man in der Fachsprache Breakpoint oder wie Adobe es in der deutschen Version von Muse nennt – „Haltepunkt“. Man definiert also in Muse diesen Punkt und kann dann die Elemente so anordnen, dass diese wieder gut lesbar sind.

Der erste Schritt ist also die Definition dieses Haltepunktes. Dazu ändert man die Breite der Seite in der Entwurf Ansicht soweit, bis man eine Änderung haben möchte. Jetzt hat man die Möglichkeit auf das Plus Symbol, das sich bei mir etwa bei 650px befindet zu klicken.

Hat man das gemacht, dann sieht man den neuen Haltepunkt in der Leiste dargestellt.

Wie man erkennen kann, habe ich diesen nicht genau getroffen. Das ist aber kein Problem, denn mit einem Doppelklick auf den Haltepunkt kann man alle Eigenschaft leicht anpassen. Auch die Farbe, wie dieser oben in der Leiste dargestellt wird, lässt sich auf Wunsch verändern.

Ein einfacher Klick in auf die entsprechende Farbe in der Leiste lässt Muse zu diesem Haltepunkt springen. Jetzt lassen sich die Elemente auf der Seite beliebig anordnen. In meinem Beispiel werde ich die vier Elemente nicht mehr in einer Reihe nebeneinander anordnen, sondern ein zwei Reihen zu je 2 Elementen.

Das Ganze sieht dann so aus:

Wenn die Seite noch weiter verkleinert wird und auch diese Darstellung nicht mehr gut aussieht, dann kann man einen weiteren Haltepunkt definieren und die Element dort zum Beispiel alle untereinander darstellen.

Was ich in meinem Beispiel mit drei verschiedenen Layout Varianten gezeigt habe, lässt sich natürlich mit beliebig vielen Breakpoints durchführen. Welche Breakpoints man am besten wo setzen sollte, darauf werde ich weiter unten noch eingehen.

Freie Anordnung der Elemente

Jetzt möchte ich zu einer Eigenschaft von Adobe Muse kommen, die so recht einzigartig oder zumindest selten in responsive Website Tools zu finden ist. Es handelt sich dabei um die völlig freie Anordnung der Elemente auf der Webseite bei jedem Breakpoint. In den meisten Tools muss man bedingt durch die eingesetzten responsive Frameworks die Elemente so nehmen, wie diese der Reihe nach kommen. Ich kann also bei den Breakpoints die Reihenfolge und Anordnung nicht beliebig verändern. Der Bereich „Service 4“ in meinem Beispiel musste immer an letzter Stelle stehen.

Bei Muse ist das allerdings anders. Hier kann man die Reihenfolge bei jedem Haltepunkt beliebig verändern. Es könnten also die Inhalte von Service 4 ganz am Anfang der untereinander angeordneten Element stehen. Das macht zwar hier keinen Sinn, kann aber durchaus hilfreich sein, wenn man an Inhalte denkt, die in Spalten angeordnet sind und aus optischen Gründen eine bestimmte Anordnung der Spalten hat, obwohl die logische Reihenfolge des Lesens eine andere wäre.

Adobe Muse CC bietet damit dem Designer Möglichkeiten, die sich diese schon lange gewünscht haben.

Doch ACHTUNG! Wird Muse also Prototyping Tool verwendet um die Funktion eines responsive Layouts im Browser zu zeigen und die Seite wird dann aber „traditionell“ umgesetzt, so kann das zu Problemen führen. Wie oben schon erwähnt, ist es mit verschiedenen responsive Frameworks nicht so einfach möglich die Reihenfolge von Elementen zu ändern. Das bedeutet, der Prototyp würde die Inhalte so darstellen, wie sie später nicht wirklich umgesetzt werden können. Ausserdem muss man auch ein wenig im Gridsystem denken.

Das ist der Grund, warum ich jedem Designer empfehle sich mit den grundlegenden Techniken des responsive Designs auseinander zusetzen um beurteilen zu können ob der erstellte HTML Prototyp sich auch praktisch realisieren lässt.

Werden aber die mit Muse erstellen Seiten nicht als Prototyp erstellt sondern wirklich ins Internet gestellt, dann kann man die Vorteile der freien Anordnung natürlich problemlos verwenden.

Wo sollen Breakpoints gesetzt werden und wie viele?

Wie sieht es aber jetzt mit den Breakpoints aus. Weiter oben habe ich erwähnt, dass man beliebig viele Breakpoints setzen kann. Aber welche Anzahl ist wirklich sinnvoll und wo sollte man diese Breakpoints wirklich setzen?

Eine Zeit lang war es üblich, für verschiedene Smartphone Größen einen Breakpoint zu setzen. Das ist aber heute weder sinnvoll noch möglich, da es immer mehr Geräte mit unterschiedlichen Bildschirm Auflösungen gibt. Man beschränkt sich daher eher auf typische Größen der verschiedenen Geräte Typen. Dabei ist es üblich ein Layout für Mobile, eines für Tablets und eines für Desktops zu erstellen. Mitunter auch noch für große Desktop Bildschirme.

Da responsive Webseiten in den meisten Fällen mit responsive Frameworks wie zum Beispiel Bootstrap (http://getbootstrap.com/css/#grid) umgesetzt werden, verwendet man die Breakpoints, die diese Tools bereitstellen. Bei Bootstrap wären das:

– Mobile <768px
– Tablets  ab 768px
– Desktops ab 992px
– Grosse Desktops ab 1200px

Man sieht also an der Liste, dass man mit insgesamt 4 Haltepunkten auskommt. Das war allerdings nur ein Beispiel. Andere Frameworks haben etwas andere Breakpoints. Gemeinsam haben die meisten allerdings, wie oben schon erwähnt, dass die Breakpoints für Mobile, Tablet, Desktop und eventuell grosser Desktop definiert werden.

Ist es jetzt sinnvoll diese Werte in Muse zu übernehmen? Die Antwort darauf ist nicht ganz so einfach, denn es kommt wie so oft darauf an. Aber auf was kommt es an?

Wie bereits erwähnt, wird Muse gerne verwendet um HTML Prototypen für Web Projekte zu erstellen. Wenn man das macht, dann sollte man natürlich die Breakpoints des Frameworks verwenden, das später zum Einsatz kommt. Wenn man das nicht genau weiss, dann ist es ratsam die Person zu fragen, die später diese Umsetzung macht. Im Zweifelsfall würde ich die oben aufgelisteten Werte von Bootstrap verwenden.

Wird das Projekt allerdings mit Adobe Muse gestaltet und dann auch direkt ins Web gestellt, dann ist man bei den Breakpoints völlig frei. Es macht wenig Sinn einen von den oben aufgelisteten Werten zu verwenden wenn er nicht unbedingt notwendig ist. Eine schöne Regel für responsive Webdesign Breakpoints sagt, dass man einen Breakpoint dann setzen sollte, wenn das Layout Schwierigkeiten macht. Das bedeutet, wenn Elemente sich überlappen oder wenn Inhalte nicht mehr wie gewünscht wahrgenommen werden können, dann sollte man einen Breakpoint setzen. So einfach ist die Entscheidung.

Diese Regel gilt übrigens nicht nur für Muse, sondern ist eine generelle Empfehlung im responsive Design. Nur praktisch ist das eben auf Grund des Einsatzes von verschiedenen Frameworks nur schwer möglich.

Weiters sollte man daraus nicht schliessen, dass man für jedes Element, das sich auf einer Seite befindet bei Notwendigkeit einen Breakpoint setzen soll. Das kann im schlimmsten Fall dazu führen, dass in kurzen Abständen solche Haltepunkte verwendet werden und die Anzahl extrem hoch wird. Also ein wenig vorausschauen und damit ein sparsamer Umgang mit Breakpoints ist schon empfehlenswert.

Haltepunkte können in Adobe Muse übrigens bei Masterseiten unabhängig von den normalen Seiten gesetzt werden. Das bedeutet, dass die Masterseiten komplett andere Haltepunkte haben könnte als die normalen Seiten.

Ausblenden von Elementen

Kehren wir zurück zu Muse. Wir wissen jetzt, wie Haltepunkte gesetzt werden und dass man die Anordnung der Elemente bei jedem Haltepunkt frei verändern kann. Was aber kann man noch verändern?

Zuerst kann man nicht erwünschte Inhalte ausblenden. Man darf diese aber nicht so einfach durch löschen des Elements am Haltepunkt entfernen, da dieses sonst generell entfernt werden und damit an allen Haltepunkten weg sind. Um also ein Element bei einer bestimmten Größe nicht anzuzeigen, kann man mit einem rechts Klick auf das Element das Menü öffnen und den Menüpunkt „Im Haltepunkt ausblenden“ auswählen. Es geht übrigens auch der umgekehrte Weg, in dem man das Element bei allen anderen Größen ausblendet und im aktuellen sieht.

Möchte man ein ausgeblendetes Element wieder anzeigen, dann wählt man in der entsprechenden Breakpoint Ansicht die Ebenen aus und kann in der linken Spalte das Element durch setzen eines Punktes wieder einblenden. Auf diese Art und Weise kann man übrigens Elemente auch ausblenden, es wird also nicht unbedingt das Menü benötigt.

Formatieren von Texten im responsive Layout

Ein weitere sehr praktische Funktion, ist die Formatierung von Texten. Mit dem folgenden Icon in der Werkzeugleiste kann man angeben wo die Texte formatiert werden sollen.

Es gibt dabei die Auswahl zwischen „Text auf aktuellen Haltepunkt formatieren“ – linkes Symbol oder „Text auf allen Haltepunkten formatieren“ – rechtes Symbol. Damit kann man bei jedem Breakpoint auch individuell den Text formatieren, wie zum Beispiel die Größe anzupassen.

Jene, die Adobe Muse bereits kennen, werden wahrscheinlich fragen, ob es auch möglich ist Texte bei verschiednen Haltepunkten Absatz- oder Zeichenformaten zu formatieren. Ja es ist möglich. Man definiert dazu zum Beispiel zwei verschiedene Absatzformate. Nennen wir das eine „H1 Desktop“ und das andere „H1 Tablet“. In unserem Desktop Haltepunkt verbinden wir die Überschrift mit dem Absatzformat „H1 Desktop“ und im Tablet Haltepunkt verbinden wir die Überschrift mit dem Haltepunkt „H1 Tablet“. Wenn man Texte bei den Haltepunkte so formatiert, dann benötigt man das Text Icon für die Haltepunkte übrigens nicht.

Was brachte der Juni Neues?

Vertikales Verschiebe Werkzeug

Wenn man mit der ersten responsive Version (Februar 2016) von Adobe Muse gearbeitet hat, dann ist man sehr schnell genervt, wenn man es darum geht die Elemente bei den Breakpoints neu anzuordnen. Es war nicht wirklich einfach mehrere Elemente nach unten zu verschieben um einen Bereich frei zu machen oder nach oben zu verschieben um Lücken zu schliessen. Gerade bei langen Seiten war es mühsam erst alle Elemente markieren zu müssen um diese dann verschieben zu können.

Um hier das Leben zu erleichtern, hat Adobe in der Version 2015.2 vom Juni 2016 ist ein neues sehr hilfreiches Tool eingeführt, dass Vertikale Verschiebe Werkzeug.

Mit diesem Werkzeug kann man alle Elemente die sich auf der Seite unterhalb der Linie befinden nach unten oder nach oben verschieben. Um das Werkzeug zu aktivieren, reicht es einfach ein Element zu markieren. Es erscheint dann auf der linken Seite ein Symbol mit einem blauen Doppelpfeil. Diesen kann man nun mit der Maus nach oben oder unten verschieben.

Bildlaufeffekte funktionieren wieder

Als Adobe im Februar die erste Muse Version mit responsive Design Funktion freigegeben hat, wurde man bald enttäuscht. Der recht nette Bildlaufeffekt, mit dem Elemente beim Scrollen im Browser animiert werden konnten, lies sich nicht mit responsive Webseiten kombinieren. Diese Einschränkung wurde nun mit der letzen Version vom Juni 2016 behoben. Fügt man jetzt einen Haltepunkt mit „Fester Breite“ ein, dann kann man auch die Bildlaufeffekte wieder verwenden.

Code Qualität

Für mich als Web Entwickler ist immer interessant, wie die Code Qualität bei Drag&Drop Design Tools aussieht.

Ich muss sagen, auf den ersten Blick war ich etwas geschockt. Ich habe eine Menge HTML DIV Elemente entdeckt, die in mir auf den ersten schnellen Blick den Eindruckt erweckten, dass Inhalte auf der Seite mehrfach vorhanden sind.

Für jeden Breakpoint gibt einen Block, in dem die komplette Struktur der Seite abgebildet ist. Was auf den ersten Blick aussieht, also ob alles mehrfach vorhanden ist, stellt sich auf den zweiten Blick nicht ganz so schlimm heraus. Es ist zwar richtig, dass alle Element Container mehrfach vorhanden sind, nur sind diese nicht wirklich mit Inhalten gefüllt. Es befinden sich lediglich Platzhalter Kommentare statt der echten Inhalte in den Containern. Die echten Inhalte sind nur im aktiven Breakpoint Container.

Wir das Browserfenster nun verkleinert und einer der Haltepunkte erreicht, dann kopiert ein JavaScript die echten Inhalte an die entsprechenden Stellen die durch Platzhalter markiert sind.

Ganz optimal ist diese Lösung meiner Meinung nach nicht, aber das ist der Preis, den man für ein visuell responsive Design zahlt. Den größten Nachteil, sehe ich darin, dass JavaScript benötigt wird, damit das responsive Design im Browser funktioniert. Schaltet man JavaScript aus, dann sieht man am Schirm nicht mehr sehr viel, es gibt also kein Fallback im Falle von fehlender JavaScript Funktionalität.

Durch das mehrfache vorhanden sein der kompletten Seitenstruktur, wird auch der Code unnötig groß und komplex. Um so mehr ein Grund darauf zu achten, nicht zu viele Breakpoints einzufügen, da jeder zusätzliche Breakpoint einen solchen Block hinzufügt.

Kritikpunkte

Komplexer Code und JavaScript notwendig

Bei der Code Qualität habe ich bereits erwähnt, dass JavaScript beim User unbedingt notwendig ist um die Seite darzustellen. Ausserdem ist der Code durch das mehrfache einfügen der kompletten Seitenstruktur unnötig komplex und groß. Das sind Dinge, für die man zahlt, wenn man eben seine responsive Webseiten mit einem Drag&Drop erstellt.

Fehlendes Mobile Menü

Ein weiterer Kritikpunkt ist für mich immer noch die fehlende Möglichkeit einfach mobile Menüs zu erstellen. Ich meine damit das oft verwendete Hamburger Menü. Für das sonst bei mobilen Webseiten übliche Ausklappmenü erkennbar an den 3 Strichen gibt es zwar Workarounds mit Hilfe des Accordion Widgets.  Das ist aber doch mit einigen Aufwand und Know How verbunden.

Probleme mit vertikalen Abständen

Ich habe weiter oben schon erwähnt, dass es bei fixierten Elementen zu unschönen vertikalen Abständen kommt. Bis jetzt habe ich keine Lösung gefunden, dieses Verhalten zu verhindern, ausser die Fixierung zu entfernen.

Entwurf entspricht nicht der Vorschau und echter Website

Etwas störender finde ich, dass das Ergebnis in der Muse Vorschau und im Browser nicht immer dem entspricht, was man im Entwurf gestaltet. Inhalte sind manchmal um einiges neben der geplanten Position angeordnet. Besonders nervend ist dabei, dass man das Problem nur schwer beheben kann, denn man hat keine andere Möglichkeit Inhalte zu positionieren, als im Entwurfsmodus.

Mangelnde Barrierefreiheit bei Adobe Muse

Der letzte Kritikpunkt ist für mich persönlich der schwerwiegendste. Dieser lässt mich darüber nachdenken, ob die mit der aktuellen Version von Adobe Muse CC erstellten Webseiten überhaupt für den produktiven Einsatz geeignet sind. Es geht dabei um die Barrierefreiheit der erstellten Webseiten.

Adobe behauptet auf seiner Website, dass Muse alle Kriterien für barrierefreie Webseiten erfüllt. Ich bin da allerdings anderer Meinung, den es lässt sich in Muse nicht bestimmen, in welcher Reihenfolge die Inhalte angeordnet werden. Das wiederum hat zur Folge, dass einem blinden User die Inhalte völlig durcheinander vorgelesen oder dargestellt werden. Damit wird das Arbeiten mit einer von Muse erstellten Seite für blinde User fast unmöglich gemacht.

Da dieses Thema doch etwas umfangreicher ist, werde ich in einem eigenen Artikel noch etwas näher darauf eingehen und auch die Stellungnahme von Adobe zu diesem Thema vorstellen.

Responsive Design mit Muse in der Übersicht

Abschliessend möchte ich noch einmal kurz die wichtigsten responsive Funktionen von Muse zusammenfassen.

1. Beim Start eines neuen Projektes kann man jetzt zwischen Variabler Breite (echtes fluid responsive Design) und Fester Breite wählen.

2. Objekte lassen sich auf der Seite an drei verschiedenen Positionen, nämlich links, mittig oder rechts anordnen.

3. Die Größe der Elemente kann sich in der Breite oder Höhe anpassen oder auch in einer fixen Größe bleiben.

4. Breakpoints oder auch Haltepunkte genannt lassen sich beliebig definieren.

5. Elemente können bei jedem Haltepunkt frei angeordnet werden.

6. Auch Textformatierungen können bei jedem Breakpoint unterschiedlich formatiert werden.

7. Elemente können bei verschiedenen Breakpoints ausgeblendet werden.

8. Bildlaufeffekte können verwendet werden, wenn man Haltepunkte mit einer festen Breite verwendet.

Fazit

Adobe hat mit der neuen Version von Muse sicher eine Variante geschaffen um responsive Design so einfach wie nie zu realisieren und das ohne irgendwelche technischen Details kennen zu müssen und völlig befreit von sonst üblicherweise verwendeten Gridsystemen.

Wenn man einmal die wichtigsten Funktionen soweit kennt, dann geht einem die Arbeit wirklich sehr flott von der Hand. Mein Beispiel, dass ich mit Muse umgesetzt habe, war in einer halben Stunde umgesetzt.

Es muss aber auch gesagt werden, dass nicht alles Gold ist was glänzt. Die neue Version von Adobe Muse CC hat noch so seine Kinderkrankheiten, obwohl mit der Version 2015.2 (Juni 2016) einige davon schon behoben sind.

Zumindest lassen sich jetzt auch in responsive Layouts wieder Bildlaufeffekte verwenden. Das war mit der Version 2015.1 noch nicht möglich. Das musste man sich für eines von beiden entscheiden.

Auch das umständliche Verschieben von mehreren Inhaltselementen unterhalb eines bestimmten Bereiches wurde mit der letzten Version vom Juni 2016 mit dem vertikalen Verschiebe Werkzeug gut gelöst. Das war einer der Punkte, die mich bei der Februar Version am meisten  genervt haben.

Was für mich aber noch überbleibt, ist das Problem, dass Layout in der Vorschau und im Browser manchmal nicht so aussehen, wie in der Entwurfsansicht.

Auch das Verhalten der unterschiedlichen Höhenverschiebung bei Elementen, die ursprünglich in einer Linie waren ist etwas unangenehm.

Eines der größten Probleme bei den neuen Muse Versionen sehe ich aber im Bereich der Barrierefreiheit. Es lässt sich bei Muse nicht die Reihenfolge der Content Elemente bestimmen, was beim Vorlesen mit Screenreadern zu recht wirren Ausgaben führen kann und damit blinde User  stark benachteiligt. Zu diesem Thema gibt es noch eine ausführlichere Info in meinem nächsten Blogbeitrag.

Trotz dieser Einschränkung werde ich persönlich Adobe Muse CC zumindest als HTML Prototyping Tool verwenden. Den mit kaum einem anderen Tool konnte ich so schnell einen responsive Prototypen umsetzen. Mal sehen, ob es sich auch bald wieder für einen echten produktiven Einsatz eignet.

Zum Schluss würde mich noch interessieren, wie Du Muse findest und einsetzt. Bist Du an weiteren Muse Inhalten oder auch an kostenlosen Youtube Videos zu Muse interessiert?

Schreib mir doch einfach ein paar Zeilen in den Kommentarbereich.

[thrive_leads id=’2675′]

Schritt 1: In der ersten Zeile die Basis Font Größe eingeben (Wenn keine CSS Regel definiert ist, dann ist die Größe in der Regel 16 Pixel).

Schritt 2: In der zweiten Zeile einen „em“ Werte eingeben, wenn „em“ in Pixel umgerechnet werden soll oder einen Pixel Wert eingeben, wenn Pixel in „em“ konvertiert werden sollen.

Schritt 3: Auf Berechnen klicken und das Ergebnis ablesen.

Wenn Du mehr über CSS Einheiten und deren Verwendung wissen willst, dann empfehle ich dir meinen Blog Artikel „Die Qual der Wahl mit den CSS Einheiten px vs. em vs. %„.

Bildschirm oder Druck

Nachdem ich einmal davon ausgehe, dass wir unsere Seiten für Bildschirme gestalten, möchte ich jene Einheiten ausschliessen, die für Bildschirme gar  nicht geeignet sind. Dazu gehören cm (Zentimeter), mm(Millimeter), in (Inch / Zoll) aber auch pt (Punkt = 1/72 Zoll) und pc (Pica = 12pt , 1/6 Zoll). Diese Masseinheiten sind vor allem für den Print Bereich interessant, aber nicht für das Screen Design. Ich möchte gleich vorweg die Frage beantworten, warum es im Web Design überhaupt diese Einheiten gibt. Die Antwort hier ist recht einfach. Man hat im Web nicht immer nur den Screen als Ausgabe Medium, sondern auch das Papier, nämlich dann, wenn die Inhalte gedruckt werden. Mit einer eigenen Abfrage im CSS kann man dann die Einheiten für Print Ausgabe verwenden.

Aber keine Sorge auch ohne die Print Einheiten bleiben uns genügend Einheiten über.

Wo verwendet man Größenangaben?

Bevor ich aber detaillierter die Einheiten erkläre, möchte ich noch kurz darauf eingehen, was alles mit Größenangaben versehen werden kann. Ich möchte dabei kurz auf die wichtigsten Elemente und deren Eigenschaften eingehen, damit ihr einen groben Überblickt habt, wo überall eine Größe angepasst werden kann.

Die Schriften

Beginnen wir einmal bei unseren Texten, dabei können wir die Größe unserer Schrift angeben. So bedeutet zum Beispiel eine Font Size von 16px, dass die Schrift 16 Pixel gross ist. Größenangaben bei Schriften enden aber nicht bei der Schriftgröße. Es gibt noch eine Reihe von weiteren Angaben, wie Zeilenhöhe, Einzug, Shadows, Abständen zwischen Wörtern und Buchstaben. Wir du siehts, kann selbst das Formatieren von Schriften sehr umfangreich sein.

Boxen

Neben den Schriften kann man alles, was die Form einer Box hat mit diversen Größenangaben versehen. Boxen sind im Prinzip alle Blockelemente und dazu gehören DIV Elemente, Absätze (p), Überschriften (h1 – h6) und einige mehr. Bei diesen Boxen können zuerst einmal die Ausdehnung in Breite und Höhe definieren werden, aber auch diverse Abstände (innen und aussen) sowie die Breite des Rahmens. Eine solche Box lässt sich natürlich auch auf der Webseite platzieren, wobei ebenfalls die CSS Einheiten für Größen eine Rolle spielen. Definiert sind diese Angaben übrigens im sogenannten Box-Modell. Eine Skizze davon ist hier abgebildet:

Eingeschränkt lassen sich einzelne Angaben auch bei Inline Elemente anwenden.

Diese grobe Übersicht soll einmal reichen um ein Grundwissen zu haben, was wir mit unseren Einheiten alles angeben können. Obwohl es im Detail natürlich noch wesentlich mehr Möglichkeiten gibt, läuft es im Grossen und Ganzen auf die Formatierung von Schriften und auf Eigenschaften des Box Models hinaus. Dieser Unterschied der beiden verschiednen Bereiche ist etwas später noch wichtig für uns.

So nun genug davon, was wir designen können, wir wollen ja den Unterschied der verschiedenen Einheiten wissen.

Absolute CSS Einheiten

Bei den Einheiten unterscheiden wir prinzipiell zwischen zwei Gruppen, den absoluten und den relativen Einheiten. Ich werde mich im ersten Schritt einmal den absoluten Einheiten widmen, da diese wesentlich einfacher zu verstehen sind und es auch nicht so viele davon gibt.

Das Pixel (px)

Beginnen wir einmal bei der am häufigsten verwendeten Einheit, dem Pixel (px). Diese Einheit stellt eine absolute Größe am Bildschirm dar. So wie wir in der Regel auch beim Speichern von Bildern für eine Webseite eine Größe in Pixel angeben, so können wir das mit CSS Einheiten auch tun.

Pixel sind für den Designer meist eine angenehme Einheit, denn die Größe unserer Geräte in Pixel kennen wir annähernd und Designs werden im Grafikprogramm immer noch häufig mit einer fixen Pixelbreite erstellt. Wenn man also annimmt, dass der Bildschirm 1024 Pixel breit ist, dann kann man mit der Angabe von Pixel Werten im CSS den Platz gut aufteilen, bzw. hat man eine gute Vorstellung, wie viel Platz unsere Elemente auf der Seite einnehmen. Man sieht aber auch beim unten stehenden Beispiel das Problem der Breitenangaben in Pixel. Denn ist ein Gerät in der Breite kleiner, dann kann es sein, dass nur mehr ein Teil der Informationen am Bildschirm Platz hat.

Relative CSS Einheiten

Das vorhin angesprochene Problem mit den fixen Pixelgrößen kann durch die immer größer werdende Zahl an Geräten mit unterschiedlichen Bildschirm Größen mitunter recht unangenehm werden. Gerade bei Webseiten, die dem responsive Design Ansatz folgen kann man nicht mehr nur mit fixen Pixel Werten arbeiten. Dafür verwendet man relative Einheiten die verschiedene Eigenschaften unsere Ausgabe Geräte berücksichtigen. Aus diesem Grund werden und sollten diese relativen Einheiten verstärkter eingesetzt werden.

Prozent – %

Beginnen wir auch hier mit der wahrscheinlich bekanntesten relativen Einheit dem Prozent. Diese Einheit bei Block Elemente kann man sich recht gut vorstellen. Möchte man zwei Block Elemente nebeneinander haben, die gemeinsam die gesamte Breite des zur verfügung stehenden Platzes einnehmen, dann bekommt jedes der beiden Elemente eine Breite von 50%.

Will man 3 Elemente so aufteilen, dass ein Element die Hälfte des Platzes einnimmt und die anderen beiden sich die restlichen 50% gleichmässig aufteilen, dann vergibt man einmal 50% und zweimal 25%. Ich denke mit diesen beiden Beispielen sollte es recht klar werden, welchen Vorteil die relativen Prozent Angaben bei sich verändernden Breiten bietet. Denn egal wie breit der Schirm ist, die Verteilung ist immer die selbe.

Wie sieht es jetzt mit der Anwendung von Prozent bei Schriften aus? Prinzipiell kann man die % Angaben auch für Schriften verwenden. Dabei wird die Schrift relativ zur Schriftgröße des Eltern Elements dargestellt. Das bedeutet – ist die Schriftgröße des Eltern Element 16 Pixel, dann ergibt eine Angabe von 50% eine Schriftgröße von 8 Pixel.

em

Eine weitere relative Einheit, die im Verhalten zumindest bei der Größe der Schriften sehr nahe zur Prozent Angabe ist, ist die em Einheit. Ein em entspricht 100% der Schriftgröße der Schrift des Eltern Elements. Hat man keine verschachtelten Elemente mit unterschiedlichen Schriftgrößen, dann gilt die Schriftgröße des HTML Elements, welches ohne einer Angabe in der Regel 16 Pixel ist. Verwendet man die em Angabe 2em für einen Font, dann ist dieser 2 x 16 Pixel also 32 Pixel gross. Wie das aussieht, zeigt das folgende Beispiel:

HTML Code:

<p>Basis Font Size (16px)</p>
<p class="em200">Text 2em</p>
<p class="font32px">Text 32px</p>

CSS Code:

.em200 {font-size: 2em}
.font32px {font-size: 32px}

Bildschirm Ausgabe:

Verwendet man 0.5em dann ist die Schrift 0.5 x 16 Pixel also 8 Pixel gross.

HTML Code:

<p>Basis Font Size (16px)</p>
<p class="em050">Text 0.5em</p>
<p class="font8px">Text 8px</p>

CSS Code:

.em050 {font-size: 0.5em}
.font8px {font-size: 8px}

Bildschirm Ausgabe:

In beiden Fällen kann man die em Werte auch einfach in Prozent Werte umrechnen, denn 2em sind hier 200% und 0.5 entsprechen 50%.

Etwas anderes sieht es aus, wenn man em verwendet um damit Breiten und Höhen Angaben von Block Elementen zu definieren. Denn eine Breite von 10em bedeutet, wenn man von einer Basis Font Größe von 16px ausgeht, dass das Element 20 x 16 Pixel also 320 Pixel breit ist. Hier unterscheidet sich das Verhalten deutlich von der einer 20 Prozent Angabe, wie ich es weiter oben beschrieben habe. Das bedeutet also, dass bei Größenangaben bei Blockelementen em Werte nicht mit Prozent Werte gleichgesetzt werden können.

Die Breiten Angabe in em wird allerdings gerne bei Media Queries verwendet. Bei folgendem Beispiel wird die Media Query Regel bei 760 Pixel wirksam, wenn man von einem Basis Font von 16 Pixel ausgeht (760 / 16 = 47.5).

@media (max-width: 47.5em) {
  …
}

Wird in diesem Fall der Basis Font auf 20 Pixel verändert, dann wirkt die Media Query Regel erst ab 47.5 x 20 Pixel also 950 Pixel. Damit kann man, wenn es benötigt wird Media Query Angaben bezogen auf eine Basis Font Größe definieren. Auch wenn solche Angaben derzeit noch eher selten verwendet werden so haben diese durchaus bei manchen Anwendungsfällen ihre Vorteile.

Eine Anwendung in Zusammenhang mit Media Queries, ist die Änderung des Basis Fonts in Abhängigkeit von der Breite des Browser Fensters. Damit kann man zum Beispiel bei mobilen Geräten die Basis Font Size kleiner machen. Damit werden alle Standard oder mit em versehenen Schriften ebenfalls kleiner dargestellt.

HTML Code:

<h1>Media Query Font Test H1</h1>
<h2>Media Query Font Test H2</h2>
<p>Media Query Font Test P</p>
<p class=""em150>Media Query Font Test 1.5em</p>

CSS Code:

@media (max-width: 320px) {
  html { font-size: 12px; }
}
.em150 {font-size: 1.5em}

Bildschirm Ausgabe > 320px:

Bildschirm Ausgabe <= 320px:

Auch bei der Angabe von Abständen mittels Padding oder Margin, bietet sich der em Wert sehr gut an, denn hier kann man die Abstände abhängig von der Schrift definieren.

Um das Umrechnen zwischen Pixel, em und dem weiter unten noch erklärten rem zu erleichtern habe ich einen kleinen Pixel / em Umrechner erstellt, mit dem ihr einfach ausgehend von der Eingabe eines Basis Fonts entweder Pixel in em/rem oder em/rem in Pixel umrechnen könnt.

Den Rechner findet ihr auch ohne diesen Blog Artikel auf:

https://www.andreasstocker.at/css-px-em-konverter/

rem (root em)

Einen Nachteil, wird man beim Arbeiten mit em oder Prozent Werten allerdings bald feststellen. Da sich em und Prozent Angaben immer auf das Eltern Element beziehen, kann es sein, dass Schriften sich ein wenig „unberechenbar“ verhalten. Hat man zum Beispiel bei einem DIV Element eine CSS Angabe von 2 em definiert, dann werden alle Schriften bei einem Basis Font von 16 px nun 32 px gross. Hat man jetzt auch noch eine Überschrift innerhalb dieses DIV Block mit 1.5 em, dann ist diese Überschrift 32 px mal 1.5 also 48 Pixel gross. Das kann mitunter ein unerwünschtes Ergebnis sein.

Auch eine falsche Verwendung, zum Beispiel direkt einem DIV Element eine solche CSS Eigenschaft zuzuordnen führt früher oder später zu Problemen. Werde bei einer solchen Angabe nur drei DIV Elemente verschachtelt, so hat ein ursprünglicher Basis Font im innersten Element nur mehr 2 Pixel (1.DIV: 16 durch 2 ist 8, 2.DIV: 8 durch 2 ist 4, 3.DIV: 4 durch 2 ist 2). Um das Problem besser zu sehen, habe ich die Basis Font Größe im folgenden Beispiel auf 32 Pixel gesetzt. In diesem Fall ist daher die Schrift innerhalb des DIV Elements 4 Pixel und damit kaum erkennbar.

HTML Code:

Basis Font Groesse normal
<div>
  <div>
    <div>
      Verschachtelte DIV Elemente mit em
    </div>
  </div>
</div>

CSS Code:

html { font-size: 32px; }

div {font-size: 0.5em}

Bildschirm Ausgabe:

Um dieses Problem zu beheben, wurde in CSS die Einheit rem eingeführt. Die Einheit rem bedeutet root em und bezieht sich immer auf den Root Basis Font, also jener der im HTML Element definiert oder standardmässig 16 Pixel ist. Das Beispiel von oben noch einmal mit der rem Einheit sieht schon wesentlich besser aus

HTML Code:

Basis Font Groesse normal
<div>
  <div>
    <div>
      Verschachtelte DIV Elemente mit em
    </div>
  </div>
</div>

CSS Code:

html { font-size: 32px; }

div {font-size: 0.5rem}

Bildschirm Ausgabe:

Was man beim Verwenden von rem Werten beachten sollte, ist dass beim Festlegen des Basis Fonts dies immer im HTML Element zu tun ist, denn nur dann hat es auch eine Auswirkung auf die Einheit rem.

Einen kleinen Nachteil in Zusammenhang mit rem gibt es allerdings, den rem funktioniert bei alten Browser nicht. Betroffen sind vor allem Browser von Microsoft, allem voran der IE8. Ab dem IE 11 wird rem komplett unterstützt. Dieses Problem wird allerdings in Zukunft immer geringer, da die betroffenen Browser zunehmend vom Aussterben bedroht sind.

Und es gibt noch mehr

Wenn man die CSS Spezifikationen durchliest, dann wird man feststellen, dass es noch mehr Einheiten in CSS gibt. Um den Artikel aber nicht unnötig kompliziert zu möchte ich die wichtigsten nur kurz in zwei Absätzen vorstellen.

Die Einheit ex, klingt recht ähnlich dem em und verhält sich auch recht ähnlich. Allerdings wird hier zur Berechnung die Größe des Buchstabens x des Basis Fonts herangezogen. Möchte man also seine Inhalte in bezug auf den Buchstaben x ausrichten, dann wäre diese Einheit die richtige Wahl. Ich persönlich habe diese Einheit noch nie verwendet und sehe auch kein wirkliches praktische Beispiel, wo ich das einsetzen könnte.

Die Einheiten vw, vh, vmin und vmax sind spezielle Größenangaben, die sich auf den Viewport des Browserfensters beziehen, damit kann man zum Beispiel Elemente, die immer so gross sind wie das aktuelle Browserfenster realisieren. Da dies aber ein völlig eigenständiges Thema ist, werde ich bei Interesse in einem eigenen Artikel darauf eingehen.

Zusammenfassung

Wie man in diesem Artikel gesehen hat, gibt es für CSS Einheiten keine Lösung die allgemein verwendet werden kann. Es hängt immer sehr davon ab, welche Elemente man formatieren möchte und ob man sich der Umgebung automatisch anpassen will oder nicht.

Von Pixel Werten wurde in der Vergangenheit oft abgeraten, da diese bei Browser Zoom nicht reagiert haben. Da dies bei den meisten Browser aber nicht mehr zutrifft, ist eine Verwendung von Pixel Werten nicht mehr so kritisch. Dennoch sollte man bei Schriftgrößen eher darüber nachdenken em oder rem zu verwenden.

Auch bei der Angabe der Ausdehnung von Block Elementen sind Pixel Werte durchaus noch üblich und haben ihre Berechtigung. Möchte man auf Gerätegrößen reagieren, dann wird man eher Prozentwerte verwenden. Die Verwendung von em und rem ist bei solchen Elementen eher unüblich.

Will man bei Blockelementen diverse Abstände, also Margin, Border oder Padding angeben, dann sind Pixel oder em bzw. rem die richtige Wahl.

Ich denke ich konnte euch mit diesem Artikel einmal eine grobe Übersicht der zur Verfügung stehenden Einheiten geben um euch die Entscheidung in Zukunft etwas leichter zu machen.

Wie sieht es bisher mit euren praktischen Arbeiten aus – welche Erfahrung habt ihr mit dem Einsatz der verschiedenen CSS Einheiten gemacht? Schreibt mir doch einmal eure Erfahrungen und Vorgehensweisen in den Kommentarbereich.

Was bedeutet das aber nun für den Betreiber einer Website. Muss man sich überraschen lassen oder kann man schon vorher feststellen, wie es um das künftige Ranking aussieht? Die gute Nachricht, man muss nicht warten. Google bietet eine Menge Unterstützung an, um die Betreiber einer Website beim Künftigen mobile Ranking zu unterstützen.

Ich möchte in diesem Artikel kurz beschreiben wie man dabei am besten vorgehen und wie man eventuelle Probleme beheben kann.

Was hat Google geändert?

Bevor ich das mache, möchte ich noch kurz auf die Änderungen und die Auswirkungen eingehen. So wie es derzeit aussieht, werden nur Suchanfragen, die von mobilen Geräten aufgerufen werden davon berührt sein. Gibt man einen Suchbegriff auf der Google Website auf einem Smartphone ein, dann erscheint beim Suchergebnisse (hoffentlich) der Zusatz „Für Mobilgeräte“, wie in unten stehenden Bild zu sehen ist.

Im Gegensatz zur mobilen Abfrage sieht man diesen Zusatz „Für Mobilgeräte“ bei der Desktop Abfrage nicht. Probiert man die selbe Suchanfrage auf einem Desktop Browser aus, dann sieht man eben keinen Zusatz. Es ist daher auch anzunehmen, dass es auch keine Auswirkungen auf das Ranking bei Desktop Suchen gibt.

Bedeutet das nun, dass man seine Website damit nicht mobile tauglich machen muss? Nun meiner Meinung nach keineswegs, denn erstens kann sich das bei Google natürlich auch schnell ändern und in Zukunft auch die Desktop Variante betreffen. Zweitens sollte man heute auch aus anderen Gründen schon dafür sorgen, dass seine Website für mobile Geräte verwendbar ist. Alleine wenn man sich die Statistiken für die mobile Internet Nutzung ansieht, dann erkennt man, dass der Trend eindeutig zur Mobilität geht. Ob es den eigenen Webauftritt betrifft, muss jeder für sich selbst entscheiden, aber eine Hilfe dafür können Analyse Tools, wie etwa auch Google Analytics sein, die einem Auskunft darüber geben, welche Geräte die User einer Website zum Browsen benutzen.

Da ich einmal davon ausgehe, dass wir dem aktuellen Trend folgen und für mobile Nutzer gerüstet sein wollen, möchte ich jetzt im folgenden einige Ratschläge dazu geben.

Die 3 Schritte zur mobile Website

Schritt 1: Testen der Website

Zuerst einmal sollte man sich die Frage stellen, wie sieht ein mobiler User bzw. Im speziellen der mobile „Google User“ unsere Website. Um hier keine Überraschungen zu erleben, hat Google bereits vor einiger Zeit einen Test für Mobile Friendly Websites ins Netz gestellt. Aufrufen kann man diesen unter:

https://www.google.com/webmasters/tools/mobile-friendly/

Gibt man hier die eigene URL ein, dann bekommt man im besten Fall die Rückmeldung, dass die Website Mobile tauglich ist.

Man muss hier dann keine weiteren Schritte durchführen. Kann sich allerdings noch das Bild ansehen, wie die Seite auf einem Handy aussehen würde.

Erhält man allerdings eine Meldung die lautet „Nicht für Mobilgeräte optimiert“ dann besteht Handlungsbedarf. Netterweise teilt Google auch gleich mit, was es an der Seite zu kritisieren gibt. Ein Beispiel ist im folgenden Bild zu sehen.

Weitere Informationen, was man tun kann um SEO für Mobilgeräte zu verbessern erhält man auch direkt von Google unter:

https://developers.google.com/webmasters/mobile-sites/mobile-seo/

Sehen wir uns jetzt einmal die Schritte an, die zu unternehmen sind, wenn der erste Schritt negativ ausfällt.

Schritt 2: Entscheidung für eine mobile Technologie

Responsive Website

Dies ist die üblichste und meist einfachste Form der mobilen Darstellung einer Website. Hier wird die Darstellung mit unterschiedlichen CSS Regeln angepasst. Die Inhalte sind in allen Varianten gleich. Das heisst es wird die selbe HTML Datei ausgeliefert. Inhalte können jedoch über CSS ausgeblendet oder geändert (z.B. bei Bildern) werden.

Dynamische Bereitstellung

Bei dieser Variante wird vor der Auslieferung der Seite das Gerät abgefragt und dann ein entsprechender Inhalt (HTML und CSS) ausgeliefert. Diese Variante stellt allerdings einen höheren Aufwand dar, da unterschiedliche Versionen für verschiedene Endgeräte erstellt werden müssen. Mit einem CMS kann dies mitunter vereinfacht werden.

Ein typischer Vertreter einer solchen Website Erstellung ist das Tool Adobe Muse. Hier wird für verschiedene Geräte Arten (Desktop, Tablet und Mobile) eine eigene Website erstellt. Verknüpfte Textfelder und Bilder machen zumindest die Wartung etwas einfacher.

Eigene Mobile URL

Im Gegensatz zu der dynamischen Bereitstellung wird hier der mobile Inhalt nicht automatisch auf Grund des Gerätes ausgeliefert sondern durch Aufruf einer eigenen URL. Diese könnte zum Beispiel mobile.domainname.com lauten. Die Vor- und Nachteile entsprechen allerdings der Variante der dynamischen Bereitstellung.

Schritt 3: Beheben der Fehler

Erhält man beim Test einen Fehler, dann bekommt man von Google auch eine Auflistung, was nicht passt. Mit den folgenden Tipps sollte es nicht schwer sein diese auch beheben zu können.

Links liegen zu eng beieinander

Mobile Webseiten werden meistens mit den Fingern und nicht mit der Maus bedient. Daher kann es für den User problematisch sein, wenn die Links oder Buttons zu eng beieinander liegen.

Google empfiehlt, dass Elemente eine Mindestgröße von 48 CSS Pixel haben. Wenn diese kleiner sind, dann sollte der Abstand mindestens 32 CSS Pixel betragen.

Text zu klein

Wie groß Schriften wahrgenommen werden hängt von einigen Faktoren (z.B. auch der Schriftart) ab und kann nicht nur über die Pixelgröße angegeben werden. Generell wird von Google empfohlen eine Basis Font Größe von 16 CSS Pixel zu nehmen. Small Schriften werden mit 0,75% und große Schriften mit 125% dargestellt.

Mobiler Darstellungsbereich nicht festgelegt

Mit dem Darstellungsbereich wird angegeben, wie das mobile Gerät eine Seite rendert. Wird dieser nicht angegeben, so wird die Seite mit der Breite eines Desktop Devices behandelt. Es wird versucht die Seite am mobilen Gerät vollständig darzustellen, was dazu führt dass die Inhalte nur sehr klein wahrnehmbar sind. Der User muss in diesem Fall in die einzelne Bereiche hinein zoomen um mit den Inhalten arbeiten zu können.

Durch eine Viewport Angabe im head Bereich der HTML Datei lässt sich dieses Problem leicht lösen:

name=viewport content="width=device-width, initial-scale=1">

Inhalt weiter als Schirm

Wird wie oben beschrieben eine Viewport Angabe gemacht und die Inhalte passen in der Breite nicht auf den Screen, dann erhält man die Meldung, dass die Inhalte breiter sind als der Schirm. Passt man also den Viewport an, dann muss man natürlich auch dafür sorgen, dass die Inhalte auf dem Gerät genug Platz haben.

Mit diesen Tipps sollte es also gar nicht so schwer die richtigen Massnahmen zu ergreifen um eine Webseite mobile tauglich zu machen und das Google Label „Für Mobilgeräte“ zu erhalten.

[chimpy_form]

Favicon steht als Abkürzung für „Favorit Icon“. Das sagt eigentlich schon aus, welche Aufgabe es hat – es ist ein Icon, das neben den Favoriten (auch Lesezeichen oder Bookmarks genannt) steht. Dieses Icon wurde bereits vor fast 10 Jahren von Microsoft im Internet Explorer 5 eingeführt – daher auch der abgeleitete Name von „Favorit“.

Aber warum ist es so wichtig? Genau das möchte ich mit den folgenden 8 Argumenten aufzeigen.

1. Sich von anderen abheben

Zwar sind Favicons bei einer guten Website mittlerweile schon Standard. Trotzdem kann man sich damit immer noch von der Vielzahl an Seiten abheben, die kein Favicon oder nur die Standard Icons ihres Providers oder ihrer Software verwenden.

2. Leichter gefunden werden

Das ist der eigentliche Grund, warum diese Icons geschaffen wurden. In der mitunter langen Liste an Favoriten findet man eine abgespeicherte Website wesentlich leichter wieder, wenn diese auch mit einem eigenen Bild neben der Beschreibung vertreten ist.

3. Immer im Blickfeld des User sein

Mittlerweile ist dieses Bildchen aber nicht nur bei den Favoriten zu finden. Je nach Betriebssystem und verwendetem Browser kann dieses kleine Bild an vielen Stellen auftauchen, zum Beispiel neben der URL Leiste im Browser oder in der Taskleiste des Betriebssystems.

4. Erleichterung beim TAB Browsing

Die meisten modernen Browser bieten Tab Browsing an. Wenn viele Tabs geöffnet sind, ist es manchmal gar nicht einfach, aus den wenigen dargestellten Buchstaben im Tab die richtige Seite wieder zu finden. Das Icon vereinfacht auf jeden Fall den Zugriff auf die gewünschte Webseite.

5. App Tabs

Bei der Verwendung von App Tabs, wie sie z.B. Firefox anbietet, werden in den Tabs nur mehr Favicons angezeigt. Hat eine Website kein eigenes Icon, ist es nicht mehr möglich, die gewünschte Seite gezielt anzuklicken.

6. Marke oder Logo fördern

Mit dem Einsatz eines Marken- oder Firmenlogos als Favicon ist die Marke/Firma beim User dauerhaft präsent und prägt sich im Gedächtnis des Users schneller ein.

7. Social Links

Links werden immer häufiger über soziale Netzwerke geteilt. Google+ z.B. zeigt einen solchen Link mit dem zugehörigen Favicon an, wodurch er sich von jenen Links, die keines haben, deutlich abhebt.

8. Es ist einfach schnell erstellt

Favicons zu erstellen und in eine Website einzubinden ist keine Wissenschaft. In einem folgenden Beitrag zeige ich, wie einfach und schnell ein Favicon erstellt und in eine Website integriert werden kann.