Sprache wählen Sprache wählen

Responsive Design

Früher war alles besser:) Früher war das Web noch einfach. Quatsch!

Eine Webseite musste zunächst nur für eine Auflösung entworfen und entwickelt werden: 640×480 Pixel. Das war die magische Größe, aber kurz danach hiess es: 800x600.Die Monitore wurden größer und die kleinen verschwanden. Gridsysteme wie das 960.gs etablierten sich und man beschränkte sich weitestgehend auf eine Breite von 960 Pixeln. Kleinere Monitore wurden vernachlässigt und Besitzer von größeren Monitoren hatten halt links und rechts viel Freiraum – eine Lösung mit der alle gut leben konnten.

Doch dann stellte Steve Jobs das iPhone vor und brachte eine rasante Entwicklung ins Rollen. Mobiles Internet, Webseiten am Smartphone, überall. Das funktioniert, doch so wirklich Spaß macht es eben nicht immer. Mittlerweile sind mobile Geräte wie Smartphones und Tablets weit verbreitet und die Zugriffe über diese Geräte nimmt rasant zu. Browser und Betriebssysteme stellen u.U eine Website ganz verschieden dar, weil jeder quasi Standards definiert, die schon morgen Schnee von gestern sind.  Ist Handeln angesagt?Ist die Zielgruppe mit diesen Geräten ausgestattet? Sind es die Kids, die den ganzen Tag damit verbringen? Kein Wunder also, das Thema Responsive Design hat sich zu einem der wichtigsten Themen entwickelt.

Responsive Webdesign hat theoretisch einen unschlagbaren Vorteil: Eine Webseite für alle Geräte, Browser und Auflösungen. Inhalte müssen nicht mehrfach angelegt werden, sondern sind für alle Geräte verfügbar.Eine responsive Website soll sich verdammt noch mal an alle Auflösungen flexibel anpassen! Gleichgültig, ob die Seite über ein 27 Zoll Display, Netbook, Tablet, Smartphone oder Smart-TV betrachtet wird. Für jedes Device und jede Auflösung stehen alle Inhalte zur Verfügung.Das klingt alles schön und gut, allerdings utopisch. Ein bestehendes komplexes System auf alle Auflösungen skalieren? Wohin mit den ganzen verwendeten Elementen auf kleineren Bildschirmen? Es steckt ein hoher konzeptioneller Aufwand dahinter, die Seiten für alle Auflösungen bedienungsfreundlich zu gestalten und dem Nutzer trotzdem alle Funktionen zur Verfügung zu stellen, die er von der Desktop-Variante gewöhnt ist. Es ist eine Investition notwendig, die sich erst mal rechnen muss.

Mit den steigenden Zugriffszahlen über mobile Geräte müssen sich Verantwortliche Gedanken über eine mobile Strategie machen. Haben Sie Ihre Zahlen im Überblick? Mittlerweile sind über 20% der Besuche über mobile Geräte keine Seltenheit. Diese Masse sollte man nicht vernachlässigen. Für diese Nutzer ist es empfehlenswert eine angepasste Seite anzubieten. Nutzer von mobilen Geräten haben durch die geringere Auflösung und die Bedienung über das Touch-Display Einschränkungen, die man ausgleichen muss.Deshalb ist es zunächst der leichtere Weg nur die kritischste Masse zu betrachten und für diese Nutzer eine optimierte Seite anzubieten. Häufig sind dies aktuell noch iOS-Geräte wie iPad und iPhone. Der Vorteil einer mobilen Webseite für ein oder zwei bestimmte Geräte sind die relativ überschaubaren Kosten. Zudem können Inhalte und Code sehr zielgerichtet für mobile Geräte schlank gehalten werden, was der Performance zugute kommt.Glücklich, wer rechtzeitig seinen Webauftritt mit einem ordentlichen Content Management System geplant hat. Design und Inhalt schön getrennt, so wie es sich gehört. Pflegen von Inhalten um sie für alle Geräte zugänglich zu halten, Inhalte separat vorbereiten, wer will das auf sich nehmen?

Bei der Entwicklung des mobilen Marktes gilt es mehrere Faktoren zu betrachten. Ein Faktor ist die Vorreiterrolle von Apple. Diese Vorreiterrolle schlägt sich zur Zeit noch in den Besuchszahlen nieder, allerdings hat Apple schon längst die Marktherrschaft gegenüber Android verloren. Weitere Systeme wie Windows Phone und Blackberry drängen auf den Markt. Das heißt die mobilen Besuche über andere Plattformen nimmt stark zu. Diese Plattformen sind nicht auf wenige Geräte beschränkt. Jeder Hersteller kann diese Plattformen für eigene Geräte mit eigenen Spezifikationen nutzen.Kein Hersteller möchte sich das Potenzial des mobilen Sektors entgehen lassen. Jeder Hersteller kommt mit neuen Geräten auf den Markt mit den unterschiedlichsten Auflösungen. Haben Sie sich mal die Auflösungen Ihrer Besucher angesehen? Über 1000 unterschiedliche Auflösungen in einem Monat.Über 1000 unterschiedliche Auflösungen in einem Monat.Diese Zahl muss man sich mal auf der Zunge zergehen lassen. Früher hat man sich schon bei vier bis fünf verschiedenen Auflösungen schwer getan sich zu entscheiden - eine kleinere Auflösung vernachlässigen. Zwar können exotische Auflösungen vernachlässigt werden, aber eine Verringerung der unterschiedlichen Auflösungen ist nicht in Sicht. Die Hersteller überbieten sich mit immer neueren und besseren Displays und mit immer höheren Auflösungen.

Man bedenke die ganze Problematik dreidimensional: Zum einen die Anzahl der Browser, jeder mit z.T. eigenen Spezifikationen. Die zweite Dimension wären die Betriebssysteme: früher war es Windows, heute gibt es mehrere Betriebssysteme, die zum Einsatz kommen. Schliesslich die unüberschaubare Anzahl von Geräten auf den Markt, vom Smart TV über Tablets hin zum Smartphone. Zur Zeit ist es wahrscheinlich profitabel sich bei der Optimierung auf wenige Geräte zu beschränken. Man sollte allerdings im Auge behalten, dass die mobilen Zugriffe immer weiter zunehmen.Eine Lösung, die plausibel ist drängt sich geradezu auf: Neben der bestehenden Desktop-Variante wird eine zweite Variante für Smartphones entwickelt. Diese mobile Variante passt sich lediglich der Auflösung an, während die Desktop-Variante fest bleibt.Ob letztendlich eine Investition notwendig ist, lässt sich nicht pauschal beantworten. Folgende Gedanken sollte sich jeder machen:

  • Wie viele mobile Besuche?- Welcher Trend zeichnet sich bei den mobilen Besuchen ab?   (Tablet versus iPhone, iOS versus Android, Auflösungen, usw.)
  • Wie groß sind die Hürden für die Besucher?- Welches Optimierungspotenzial ergibt sich daraus?
  • Wie hoch sind die Kosten für eine optimierte Variante?

Für die Zukunft wird die Geräte- und Auflösungsvielfalt weiter zunehmen. Die Entwicklung auf diesem Markt ist so rasant, dass sich die Anforderungen ständig ändern. Auf lange Sicht gesehen kann es von daher hilfreich sein sich mit dem Thema auseinander zu setzen. Je nach Ausrichtung wird man wahrscheinlich immer eine bestimmte Hauptzielgruppe haben, aber der Anteil der anderen mobilen Besucher wird in Zukunft weiter zunehmen, dass dieser nicht mehr vernachlässigt werden kann. So bietet eine mobile Version die Chance, noch zielgerichteter Inhalte anzubieten.

Weniger ist mehr!

Textgestaltung ist das A un O zur Kommunikation im Web. Das Papier, pardon der Bildschirm ist geduldig, aber wenn der Text zu Fremdwortschleuder wird klicke ich sofort weiter ...

Kommunizieren Sie einfach. Weniger ist mehr! Ihre Zielgruppe ist nicht von einem großen Wortschatz beeindruckt, noch weniger von Fachchinesisch, und bevorzugt kurze und allgemein verständliche Erläuterungen. Gehen Sie auf dem Punkt, nennen Sie die grundlegenden und wesentlichen Fakten, und fahren fort. Broschüren und Anzeigen mögen Ihre Produkte und Dienstleistungen gut bewerben, aber Ihre Website sollte einfach und leicht verständlich sein.

Schreiben und Korrekturlesen Ihrer Inhalte, als ob diese von einem Lehrer benotet würden. Vermeiden Sie Unstimmigkeiten in Ihren Text durch ordnungsgemäße Rechtschreibung und Formatierung sorgen Sie für eine konsequente Erzählweise, Stil, spannend und fließend.Auch wenn mehrere Personen für die gleiche Website schreiben, sollte es sich lesen, als ob der gesamte Website-Content von der gleichen Person geschrieben wurde. Es ist wichtig, dass die Textinhalte die Website widerspiegelt und Glaubwürdigkeit aufbaut.

Der Inhalt Ihrer Website muss ausreichend organisiert werden, so dass die Inhalte klar kommuniziert werden. Eine Mindmap kann Ihnen helfen, effektiv Inhalte zu strukturieren und die Zielgruppe klar ansprechen. Hier können auch die guten alten Zettel weiterhelfen.

Schreiben Sie so, dass Ihre Inhalte leicht verstanden werden können. Das ist wichtig, um sicherzustellen, dass die Leser den gewünschten Inhalt auch finden. Eine Möglichkeit, dies zu tun ist Sichworte, also Keywords zu verwenden, die genau den Inhalt des Textes beschreiben. Tools wie Google Analytics können Sie für die Entscheidung, welche Keywords passen würden gut unterstützen. Effektive Textgestaltung mit Hilfe dieser Schlüsselwörter wird dazu beitragen, die Sichtbarkeit in den Suchmaschinen zu steigern um damit Ihre Zielgruppe zu finden und Zugang zu den gewünschten Informationen effektiver machen.

Obwohl es möglich ist, dies zu tun, ohne Grammatikregeln zu brechen, sind Sätze, beginnend mit diesen Konjunktionen in der Regel schlecht. Weiterhin sind auch bei korrekten Sätzen die damit beginnen verpönt im Umfeld der professionellen Textgestaltung.Ähnliche Fehler entstehen durch Überstrapazierte Begriffe wie "auch" und "aber". Halten Sie Ihre Inhalte einfach. Denken Sie an Ihre Zielgruppe.

Normalerweise, wenn Sie Texte schreiben, beginnen Sie mit einer Einführung, gehen Sie durch den Text, und dann schließen mit Sie einem motivierenden Absatz über das Produkt oder Thema ab. Bei der Entwicklung von Web-Inhalten sollte man genau das Gegenteil tun. Legen Sie Ihre Schlussfolgerungen am Anfang, kommen Sie auf den Punkt, bieten Sie Ihrer Zielgruppe die Option weiter zu lesen. Somit findet Ihre Zielgruppe, die von ihr benötigten Informationen schnell und einfach.

Sie mögen vielleicht gerne Dinge wie "Wir sind die Nummer eins!" formulieren, aber dazu sollten Sie sich auch auf glaubwürdige Quellen berufen können, um diesen Ansprüchen gerecht zu werden. Sie sind viel besser dran mit der Einbeziehung von Kundenaussagen, Statistiken und Fakten, die leicht überprüft werden können.

Das ist wirklich selbsterklärend, aber ein Absatz sollte nur eine Aussage enthalten. Die Leser sind beim "Durchwandern" der Inhalte schnell frustriert und werden wahrscheinlich nicht die Geduld haben, um Ihre Inhalte zu lesen, wenn es mehrere Themen in einem kleinen Raum abdeckt weerden. Schreiben Sie zu einem Thema einen kurzen Satz, kurz auführen und dann schließen. Wenn es eine zweite Aussage folgt, dann sollte es ein zweiter Absatz werden.

Verlassen Sie sich nicht voll und ganz auf Software oder ein Online-Rechtschreibeprüfung. Verwenden die Ihre natürliche Intelligenz, um sicherzustellen, dass Ihre Inhalte korrekt formuliert sind und  verlassen Sie sich nicht vollkommen auf die automatische Rechtschreibeprüfung.

 

 

Es ist unwahrscheinlich, dass Ihre Zielgruppe Lust hat, sich durch eine Seite mit langen Absätzen durchzulesen. Gestalten Sie Ihre Inhalte "scannbar", so dass Sie schnell identifiziert werden können und die wichtigsten Punkte finden. Sortieren, "Fett" oder markieren Sie relevanten Schlagzeilen, verwenden Sie Unterüberschriften, Aufzählungszeichen, nummerierte Listen, und halten Sie Ihren Text kurz und präzise. Verwenden Sie aussagekräftige Links und Hyperlinks, soweit möglich.

Beherzigen Sie diese Tips und Ihre Leserschaft wird es Ihnen danken.

Nach oben

Farbpaletten aus Fotos

Die Wahl der richtigen Farbpalette für ein Projekt kann entscheidend für den Erfolg bzw. Misserfolg sein. Ein gängiger Weg, ein neues Projekt zu beginnen führt über Brainstorming, Scribbles, Mockups usw.

Ein Zwischenschritt besteht immer in einer Bildrecherche und das Erstellen eigener Bilder. Daraus kann man wunderbar Farbpaletten ableiten. Im Internet gibt es eine Reihe von Tools, kleine Helferlein; eine kleine Auswahl beschreibe ich nachfolgend.Als Ausgangsbild verwende ich folgendes Bild. Ich habe es auf die schnelle aus meinem Fundus ausgewählt. Die Farbes scheinen auf den ersten Blick zusammenzupassen.

mehr ...

Als Ausgangsbild verwende ich folgendes Bild. Ich habe es auf die schnelle aus meinem Fundus ausgewählt. Die Farben scheinen auf den ersten Blick zusammenzupassen.

mehr ...

 

 

Das Erste Tool ist Kuler von Adobe. Es ist eines der bekanntesten Tools um Farbschemen zu ermitteln und bietet viele nützliche Features. Im diesem Beispiel hier habe ich zunächst das Kamerasymbol oben rechts angeklickt, um das Bild zu laden. Die Oberfläche ist intuitiv und selbsterklärend.

mehr ...

Um dieses Tool zu nutzen muss man sich registrieren. Es ist kostenlos. Um das eigene Bild zu anaysieren benötigen Sie eine URL des Bildes. Es gibt also keine direkte Möglichkeit das Bild direkt hochzuladen.Standardmäßig ist der Reiter "Colors" aktiviert. Um eine eigene Farbpalette zu ermitteln, wechseln Sie zum Reiter "Photos".

mehr ...

 

Das Tool Pictaculous ist ganz einfach zu bedienen, um eine Farbpalette zu erzeugen. Einfach den Button "browse" drücken und ein Bild Ihrer Wahl hochladen. "GET MY PALETTE" generiert einen Vorschlag.

mehr ...

Selbsterklärend und intuitiv ist auch das Tool "Color Palette FX". Drücken Sie einfach "Select Photo" und wählen Sie Ihr Foto. Die Analyse erfolgt umgehend.

mehr ...

CSS Drive hat einen Farbpalettengenerator, der sich ebenfalls von selbst erklärt. Um Ihr Bild zu verarbeiten, wählen Sie, wie im vorherigen Tool Ihr Bild aus und laden es hoch. Das Resultat sieht wir im nachfolgenden Bild aus.

mehr ...

Dieses Tool unterscheidet sich von den vorherigen dadurch, dass Sie Ihre Farbpalette von Roh (Rough) bis Ultrafein generieren können.

mehr ...

Wie Sie gesehen haben, können die Ergebnisse stark voneinander abweichen. Im direkten Vergleich von ein und demselben Foto kommen unterschiedliche Resultate zustande. Als Grundbasis können diese Farbpaletten durchaus verwendet werden; ich empfehle eine spielerische Annäherung anhand mehrerer Tools; die finale Ausarbeitung liegt ohnehin bei Ihnen.

mehr ...