Monthly Archives: Dezember 2011

Responsive Design

70 comments

Mobile, Pads und Netbooks verändern die Ansprüche an eine Website. In Zukunft werden wir bei der Konzeption einer Website, eine Vielzahl von Devices berücksichtigen müssen €“ mit unterschiedlichen Auflösungen, Fähigkeiten und Bedienkonzepten. Doch wie muss modernes Webdesign auf diese Herausforderung reagieren?

Eine vielversprechende Antwort bei der zukünftigen Gestaltung von Websites heißt: Responsive Design. Im Kern lässt sich der Gedankengang hinter Responsive Design wie folgt Zusammenfassen:

Wenn die Anzahl unterschiedlicher Endgeräte zunimmt, gibt es nur eine ökonomische und ergonomische Konsequenz: die Benutzeroberfläche einer Website muss sich flexibel auf die Anforderungen des Endgerätes anpassen.

Das Ende der absoluten Kontrolle

Hinter dieser Antwort verbirgt sich ein radikaler Paradigmenwechsel im Webdesign. Designer von Benutzeroberflächen lieben in der Regel feste Rahmenbedingungen. Denn innerhalb von fest definierten Umgebungen lässt sich das Design und damit das Erscheinungsbild einer Website perfekt kontrollieren. Absolute Kontrolle ist bei vielen Grafikern geradezu ein zwanghafter Trieb. Dies resultiert in ein Designprinzip mit starren Rastern. Ein Prinzip, auf das seit Jahrtausenden unsere westliche Kunst und Grafik basiert. Eine feststehende Gestaltungsfläche wird über virtuelle Linien in ein harmonisches Flächensystem aufgeteilt €“ das Gestaltungsraster. Ein perfektioniertes Gestaltungssystem, angewandt von malenden Mönche bis zum neuzeitlichen Grafikdesigner. Das Raster gibt dem Gestalter seit Urzeiten Sicherheit: feste Regeln, absolute Kontrolle über Proportion und Harmonie.

Paradigmenwechsel Responsive Design

Hinter dem Begriff Responsive Design verbirgt sich daher eine kleine Revolution. Responsive Design ist das Ende der absoluten Kontrolle über feststehende Raster. Ein Blatt Papier hat eine feste Proportion. Dagegen sind die Proportionen von Bildschirmdisplays von Smartphones, Pads, PCs und Laptops höchst unterschiedlich. Ein Design mit festen Proportionen wird dieser Vielzahl digitaler Ausgabebedingungen nicht gerecht. Für Screendesigner bedeutet dies: verabschiedet euch vom Gedanken der absoluten Kontrolle über Proportion und Harmonie.

Responsive Design erfordert Denken ohne starre Grenzen

Wer sich mit Responsive Design beschäftigt muss daher zuerst die Barrieren im eigenen Denken überwinden: gutes Webdesign verhält sich interaktiv. Ändern sich die Spielregeln durch ein bestimmtes Endgerät so ändert sich das Design. In der digitalen Welt gibt es eben kein feststehendes A4 Format. Für viele Designer eine schwere Kost. Wer in festen Rastern denkt, kann mit relativen Umgebungen schlecht umgehen. Eine Hürde, die für manchen Designer unüberwindbar ist. Wer versucht für jede Möglichkeit eines Endgerätes eine optimale feststehende Oberfläche zu definieren wird scheitern. n unterschiedliche Endgeräte resultieren zwangsläufig in n unterschiedliche Designraster. Dies ist der ökonomische Overkill für Webdesign.

Ökonomisches und ergonomisches Webdesign

Responsive Design bietet eine mögliche Antwort zur Lösung dieses Dilemmas. Ein Designprinzip, dass eine möglichst optimale Annäherung der Gestaltung an flexible Rahmenbedingen sucht. Die Betonung liegt hierbei auf optimale Annäherung. Denn das Optimum wird dabei nur selten erreicht. Die Unwägbarkeit und der Umgang mit dem Suboptimalen wird zum Kern der Gestaltung. Tschüss feste Raster, tschüss Pixelvermesser, tschüss oldschool Design. Dafür herzlich Willkommen ihr Benutzer mit Laptop, PC, Netbook, Pad, iPhone, Blackberry und Android.

Prinzipien Responsive Design

Welche Kernprinzipien zeichnen Responsive Design aus? Meiner Meinung nach sind folgende Dinge zu beachten:

  • Relative Bildschirmbreite: es gibt kein festes Maß für Displaybreiten, aber Schwellenwerte auf die Design annähernd optimal funktionieren soll, z.B. 800px, 1024px oder 1200px Breite. Das Design unter, zwischen oder über solchen Schwellenwerten interpoliert flexibel das Layout zum nächsten optimalen Schwellenwert.
  • Flexible Raster statt starre Layouts: Layoutraster sollen sich proportional zur Auflösung verändern.
  • Flexible Grafiken und Schriften: % Maßeinheiten ersetzen die absolute Einheit des Pixels. Dies gilt für alle Vermaßungen, insbesondere Grafiken, Schriften etc.
  • Mobile ist nicht gleich PC: die Benutzeroberflächen für Touchdisplays erfordern geeignete Navigationselemente €“ reduziert auf das Wesentliche.

Beispiele für Responsive Design

Wie sieht Responsive Design in der Praxis aus? Anbei ein paar praktische Beispiele, die mir gut gefallen:

http://lapse.org/
http://www.barrelofmonkeys.org/
http://earthhour.fr/
http://calebacuity.us/

Einfach die Größe des Browserfensters verändern und beobachten, wie das Layout der Website dynamisch reagiert.

Viel Spaß beim Testen.

Suchmaschinen-Optimierung (SEO) im Maschinenbau

One comment

Maschinen- und Anlagenbauer sind Exportweltmeister. Um so erstaunlicher, daß die Sichtbarkeit der eigenen Homepage in den wichtigen Exportmärkten für viele Unternehmen dieser Branche ein unbekanntes Terrain ist.


SEO / SEM im Maschinenbau und Anlagenbau

Ich wage zu behaupten: die Mehrzahl der Unternehmen im Maschinen- und Anlagenbau ist sich der wahren Bedeutung der eigenen Homepage nicht bewusst. Diese ist längst mehr als eine digitale Unternehmensbroschüre. So ist die Homepage das Informationsmedium Nummer 1, wenn es darum geht Informationen zu Lösungen und Produkten zu erhalten €“ noch bevor eine Anfrage per E-Mail oder Telefon erzeugt wird. Damit ist die eigene Homepage neben PR, Messen und Vertrieb die wichtigste Leadquelle €“ national und international.

SEO / SEM Strategien für Maschinen- und Anlagenbau

Suchmaschinen-Optimierung (SEO) im Maschinen- und Anlagenbau

Doch wie generiere ich nachhaltig Zugriffe auf die eigene Homepage? Neben konsequenter PR-Arbeit sollten Unternehmen kontinuierlich die Platzierung des eigenen Internet-Angebotes in Suchmaschinen im Auge behalten.

Was gehört zu einer erfolgreichen SEO Strategie?

1. Keyword-Analyse: Welche Schlüsselwörter sind relevant? Welche Schlüsselwörter werden wo und wie häufig gesucht?

2. Zielmarkt-Analyse: Welche Suchmaschinen sind für welche Zielmärkte relevant? In Europa und USA beispielsweise Google, in Russland Yandex und in China Baidu.

3. Wettbewerber-Analyse: Wo steht Ihr Unternehmen im Vergleich zu Wettbewerbern? Auf Basis der Keyword-Analyse werden die Suchmaschinen-Rankings in den jeweiligen Zielmärkten betrachtet. Die Performance der eigenen Seite, wird mit der Performance der Wettbewerber verglichen.

4. On-Site Maßnahmen: Was lässt sich auf der eigenen Webseite verbessern, um in Suchmaschinen sichtbarer zu werden? Dies sind technische und redaktionelle Maßnahmen.

5. Off-Site Maßnahmen: Was können Sie sonst verbessern, damit das Ranking besser wird? Dazu zählt der konsequente Aufbau von Backlinks und beispielsweise Aktivitäten auf Social Media Plattformen.

6. Suchmaschinen-Marketing (SEM): Was tun, wenn sich das Ranking im Vergleich zum Wettbewerb nicht verbessert? In diesem Fall gibt es zwei Dinge zu beachten: erstens einen langen Atem behalten €“ ist der Wettbewerb gut in SEO, dann dauert es eben länger diesen einzuholen. Und zweitens, bezahlte Anzeigen für Bereiche verwenden in denen das Ranking auf mittlere bis lange Sicht nicht natürlich zu verbessern ist.

Sie haben Fragen zu nationalen und internationalen SEO Maßnahmen? Gerne unterstützen wir Sie.