Responsive Webdesign von Büro für Gestaltung

Allgemein Schlagwörter: , 0 Kommentare

Responsive Design, Mobile First
Vielen Dank, dass Du Dir die Zeit genommen hast, meine Seite zu besuchen.

In den letzten Jahren habe ich im Büro für Gestaltung individuelle Raumkonzepte für Geschäfts- und Privaträume entworfen, (Wartezimmer, rückenfreundlicher Büro-Alltag, Möbel-Desing, Typografische Sitzgelegenheiten) aber auch Digital Signage.

Mobiles Zeitalter

Wenn eine Marke heute ihre Zielgruppe erreichen will, muss sie zur richtigen Zeit am richtigen Ort sein: immer überall. Unsere Aufgabe ist es, Deine Marke dorthin zu bringen. Das Büro für Gestaltung entwickelt nun mobile Markenerlebnisse, die nicht an Plattform und Medium gebunden sind.

Responsive Design, Mobile First

Immer mehr mobile Webclients greifen auf normale Webseiten zu, und sehen auf Smartphones nur bedingt brillant aus. Ist Deine Internetseite gut auf Smartphones präsentiert? responsive?

Ein responsive fähiges Webdesign passt sich den Gegebenheiten des Endgerätes an, auf dem es angesehen wird, da das Display des z.B. Laptops mehr Größe und Auflösung als das Smartphone bietet. Insbesondere geht es hier um die Anordnung und Darstellung einzelner Elemente, wie zum Beispiel dem Text oder das Menü. Somit wird dem Betrachter die Inhalte übersichtlich und benutzerfreundlich präsentiert. Wer dies testen möchte kann auf der Seite www.responsinator.com seine Domain eingeben und bekommt unterschiedliche Display-Varianten angezeigt.

Als Vergleich ein aktueller Entwurf einer Landing Page von r23.

Gestalterisch lag der Schwerpunkt auf einem klaren, leichten Erscheinungsbild. Ich verfolgte bei der Konzeption die Idee eines Responsive Posters, das sich dynamisch an jeden Screen anpasst und immer wieder neue Kompositionen ergibt.

wird gern verwechselt mit dem Design mobiler Websites. Das ist nicht völlig falsch, aber viel zu kurz gegriffen. ist vielmehr eine Herangehensweise an die Website-Gestaltung, die theoretisch unabhängig von Geräten ist. Wer sich mit dem Thema bislang nicht beschäftigt hat, findet im Folgenden einen Einstieg.

Beim Responsive Webdesign handelt es sich um die technische Umsetzung eines anpassungsfähigen Website-Layouts. Daher wird anstelle von “responsiv” häufig auch von einem “adaptiven Layout” gesprochen. Der grafische Aufbau einer „responsiven“ Webseite erfolgt anhand der Anforderungen des jeweiligen Gerätes, mit dem die Seite betrachtet wird. Dies betrifft insbesondere die Anordnung und Darstellung einzelner Elemente, wie beispielsweise Navigationen, Seitenspalten und Texte. Technische Basis hierfür sind neueste Webstandards wie HTML5 und CSS3.

Die Größe und Auflösung der Displays auf Laptops, Desktop-PCs, Tablets, Smartphones, E-Book-Readern und TV-Geräten können erheblich variieren. Aus diesem Grund sind das Erscheinungsbild und die Bedienung einer Webseite stark abhängig vom Endgerät. Webseiten, die mit einem reaktionsfähigem Design ausgestattet sind, berücksichtigen die unterschiedlichen Anforderungen der Endgeräte. Ziel dieser Praxis ist, dass Websites ihre Darstellung so anpassen, dass sie sich jedem Betrachter so übersichtlich und benutzerfreundlich wie möglich präsentieren. Kriterium für das angepasste Erscheinungsbild ist in der Regel, aber nicht nur, die Anzahl der Pixel, die der Browser in der Breite zur Verfügung hat.

M-Commerce - Smartphones und Tablets als Vertriebskanal

 

M-Commerce - Smartphones und Tablets als Vertriebskanal

 

Der mobile Zugang zu Produkten bietet vor allem Online Shops völlig neue Chancen – wenn sie auf das neue Entscheidungs- und Konsumverhalten von Smartphone-Usern bewusst eingehen. Mobilize your business!

Weshalb Responsive Webdesign in den kommenden Jahren immer wichtiger wird, lässt sich leicht beantworten. Schon in diesem Jahr werden zum ersten Mal mehr Menschen über ein Smartphone als über einen klassischen PC auf das Internet zugreifen. Auch Tablet-PCs, die es mittlerweile in ganz unterschiedlichen Größen gibt, werden immer populärer.

Für Gestalter von Webseiten ergeben sich aus dieser Entwicklung jedoch einige Herausforderungen. Schließlich ist es ein großer Unterschied, ob man eine Webseite auf einem großen PC-Bildschirm oder auf dem deutlich kleineren Display eines Smartphones betrachtet. Zudem bietet die Navigation mit Maus und Tastatur ganz andere Möglichkeiten als das Scrollen und Zoomen auf einem Touchscreen.

 

Responsive Webdesign von Büro für Gestaltung

 

Responsive Webdesign von Büro für Gestaltung

 

Responsive Webdesign von Büro für Gestaltung

 

Responsive Webdesign von Büro für Gestaltung

Fazit

Das obige Beispiel zeigt, dass sich sauber aufgebaute Webseiten, deren Gestaltung vor allem Cascading Style Sheets bewirken, ohne großen Aufwand für mobile Endgeräte optimieren lassen. Es versteht sich von selbst, dass der Aufwand mit der Komplexität der Webseite, beispielsweise durch Interaktionselemente steigt.

Der Quelltext der Landing Page wird wie gewohnt unter einer Open-Source-Lizenz gestellt. Es wird neben einer kommerziellen Variante für Firmen auch möglich sein, das Produkt völlig gratis zu nutzen. Unter diesem Link gibt es eine Vorschau.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Business Shooting

Mit dem visuellen Erscheinungsbild beginnt alles. Egal ob Du Freelancer, langjähriger Unternehmer oder Verantwortlicher eines Start-ups bist – Du musst nach außen kommunizieren, für welche Kompetenzen und Botschaften Du stehst.
Imagefördernde Fotos unterstützen ein Unternehmen dabei, sich erfolgreich und attraktiv zu präsentieren und damit neue Kunden anzusprechen.
Bei meiner Arbeit geht es mir sowohl um die ausdrucksstarke und kompetente Darstellung der Führungskräfte und Mitarbeiter als auch um die repräsentative Abbildung der Produkte.

Aktuell

Blog via E-Mail abonnieren

Gib Deine E-Mail-Adresse an, um diesen Blog zu abonnieren und Benachrichtigungen über neue Beiträge via E-Mail zu erhalten.