Responsive Webdesign Freiburg

Das Internet wird auf völlig unterschiedlichen Endgeräten genutzt … Jeder Deutsche verwendet im Durchschnitt 2,4 Endgeräte dafür.

Smartphones

51% aller Internetnutzer nutzen das Netz auch mobil. Unter den 16 bis 24-Jährigen sind es gar 81%.

Tablets

... ersetzen das Labtop in rasantem Tempo. 2013 wuchsen die Tablet-Verkäufe um 53% die Verkaufszahlen von PCs Laptops etc. sanken um 8%.

Laptops

Für B-to-B Kommunikation nach wie vor relevant, werden Laptops doch häufig von Entscheidern genutzt.

Desktop-PCs

Spielen für einige Jahre am Arbeitsplatz noch immer die Hauptrolle und werden dort auch häufig privat genutzt.

Smarthphone Nutzung

So nutzen Smartphone-Besitzer ihre Geräte - gut wenn Ihre Website daran erfolgreich teil hat. (-:

Internet
92%
Shopping
60%
Preisvergleich
72%

Was Besucher erwarten …

Proportion & Naviagtion

Ein Smartphone im Hochformat hat völlig andere Proportionen als ein 16:9 Bilschirm auf dem Schreibtisch. Die Auflösung des Retina Display der iOS Geräte ist 4,5 mal höher als die eines Computerbildschrims, gleiches gilt für hochwertige Android Smartphones. Dies alles wird beim responsive Webdesign berücksichtigt.

Responsive Webdesign berücksichtig die Touch-Navigation durch Fingergesten

Touch Navigation

für Gestensteuerung

Schaltflächen sollten groß genug sein, dass sie auch über eine Touch-Geste steuerbar sind. "Roll-Over-Effekte" dürfen keine Voraussetzung für die Navigation sein.

Responsive Webdesign berücksichtig die Zeigernavigation mit der Maus

Mausnavigation

für Zeigersteuerung

Wischgesten sind mit dem Mauszeiger nur umständlich auszuführen, die Desktop-Version einer Website sollte lieber Steuerungspfeile anbieten.

Responsive Webdesign sorgt für optimierte Bilddaten für die unterschiedlichen Auflösungen der Zieldisplays

Optimierte Bilddaten

für unterschiedliche Auflösungen

Für eine optimierte Bilddarstellung auf hochauflösenden Displays müssen Bildddaten häufig in zwei Auflösungen hinterlegt werden. Wo immer möglich sollte mit skalierbaren Vektorgrafiken gearbeitet werden.

Resposive Webdesign bewirkt:

42

Prozent längere Verweildauer

71

Prozent
weniger Absprünge auf der ersten Seite

Aktuelle Arbeiten


Responsive Webdesign in der Praxis

Hier sehen Sie einige Projekte die wir jüngst im responsive Webdesign realisiert haben.

simon-druck.de | stadtfuehrung-freiburg-app.de | planet-app.de | app-programmieren-freiburg.de

Begeistern Sie Ihr Publikum

Jederzeit und an jedem Ort …

In der Nahaufnahme können Sie verschiedene responsive Layouts für ein Smartphonedisplay im Hochformat sehen.

Responsive Webdesign - Konzept

Bevor die Reise losgeht lohnt es sich, Fragen zu stellen und Antworten zu finden.

Marketingziele

Klare präzise Festlegungen darüber welche Aufgaben die Website erfüllen soll. Konzept zur Vernetzung der Website mit den übrigen Markenkanälen des Unternehmens.

Zielgruppe

Welche Adressaten hat die Website, welche demographischen, und sozioökonomischen Daten sind zur Zielgruppe vorhanden. Welche Rückslüsse sind daraus für den Erfolg der Website möglich.

Redaktionelles Konzept

Welche Botschaften, welche Argumente, welche Beispiele, welche Produkte/Dienstleistungen werden über die Website kommuniziert. Wie können Emotion und Kognition der Besucher intelligent angesprochen werden.

Bildsprache

Welche Schlüsselbilder transportieren die Botschaften, welche Bildstilistik ist geeignet das redaktionelle Konzept erfolgreich zu verstärken. Ist der Einsatz von Bewegtbildern sinnvoll.

Responsive Webdesign - Design

Design ist nicht alles – aber ohne Design ist alles nichts.

Farbschema

Entwicklung eines erfolgversprechenden Farbschemas für die Website, Definition von Basis- und Akzentfarben für Content und Navigation.

Typographie

Auswahl geeigneter Schrifttypen, Definition der typographischen Parameter für die unterschiedlichen Texttypen, Test unter verschiedenen Ausgabebedingungen.

Interface

Gestaltung der interaktiven Seitenelemente wie Schaltflächen und Formularelemente, inklusive ihrer interaktionsabhängigen alternativen Ansichten.

Bildgestaltung

Durchsicht Bildbestand, Agenturrecherche, Photoshootings, Auswahl der Bilder und Festlegung der Bildausschnitte.

Responsive Webdesign - Usability

Benutzerfreundlichkeit ist einer der wichtigsten Erfolgsfaktoren ...

Makrousability

Festlegung der Anzahl der responsiven Layouts - mindestestens zwei - Definition der Breakpoints, Aufteilung des Layout in Animations-, Text und Bildflächen.

Navigation

Gestaltung und Test alternativer Navigationselemente für die mausgesteuerte Zeigernavigation einerseits und die touch- und gestentesteuerte Fingernavigation andererseits.

Typographisches Feintuning

Anpassung der Schriftrößen an die unterschiedlichen Displayauflösungen zur Optimierung des Leseflusses und der Aufmerksamkeitswerte für die Kernbotschaften.

Optimierung Bilddaten

Erstellung und Einbindung auflösungsoptimierter Bilddaten gemäß den Anforderungen unterschiedlicher Displayauflösungen. Festlegungen alternativer Bildausschnitte für die hochformatige Darstellung auf Smartphones.

Responsive Webdesign - Programmierung

Umsetzung des Responsive Webdesign in Programmcode

Umgebungsermittlung

Programmierung der Abfrage der Darstellungsumbgebung - Endgerät, Browser, Displaygröße, zur Steuerung der optimalen Darstellung, ggf. Ergänzung um eine Sprachkomponente zur Darstellung der Inhalte in der Sprache des Betriebssystems.

CSS Programmierung

Umsetzung der geräteoptimierten Layouts in CSS-Stylesheets zur technischen Umsetzung der Vorgaben aus dem Design und der Usability. Verknüpfung des Content mit den Style-Eigenschaften durch Layout-Templates.

CMS Programmierung

Installation und Konfiguration eines geeigneten Content-Management-Systems zur Aufnahme der Text- Bildinhalte und deren laufende Pflege (Backend). Implementierung des CMS in die Programmierung der Website (Frontend).

Tests & Launch

Laufende und abschließende Tests der Programmierung zur Evaluation der Programmierung sowie der Übereinstimmung mit den Vorgaben des Design und der Usability. Als Testumgebungen kommen sowohl physikalische vorhandene Endgeräte als auch emulierte Systeme und Simulatoren zum Einsatz.

Mobile Marketing


Mobilmachung für Ihr Marketing

Entdedecken Sie neue Wege Ihr Publikum zu begeistern

Mobile e-Mail Newsletter
 

Ein großer Teil der Smartphone Nutzer ließt seine E-Mails teilweise oder komplett auf dem Mobilgerät. Sorgen Sie auch auf dieser Plattform für ein erfolgreiches Markenerlebnis

Responsive Webdisign - Timeline 1
Responsive Webdesign spielt auch im E-Mail-Marketing eine wichtige Rolle.
Websites die Responsive Webdesign nutzen erzielen gute Suchmaschinen-Rankings
Responsive Webdesign Timeline 2
Nutzen für Ihre Suchmaschinenoptimierung (SEO)
 

Führt ein Anwender eine mobile Suche auf einem Smartphone aus und glangt von dort auf eine Website, die für sein Endgerät ungeeignet ist, kehrt er normalerweise wieder zur Suchanfrage zurück. Dies bewirkt eine hohe "bounce-rate" wie google das nennt, und verschlechtert das Ranking Ihrer Website in den Suchergebnissen.

Native Apps nutzen die mobilen Möglichkeiten noch intensiver
 

Mit nativen Apps können Sie dem Bekanntheitsgrad und der Sympathie für Ihre Marke unglaublich viel Gutes tun. Dabei sind die Kosten verglichen mit TV und Nationaler Printwerbung deutlich geringer.

Responsive Webdesign Timeline 3
Native Apps und Responsive Webdesign spielen sich im Mobile-Marketing die Bälle zu.

Kontakt


Interesse geweckt?

Wir laden Sie gerne zu einem unverbindlichen Erstgespräch zu uns ein …