Warum es ein Responsive Design sein muss!
Fast jeder Mensch in Deutschland hat heute ein Smartphone und nutzt somit einen mobilen Internetzugang! Mobile Suchanfragen wachsen seit Jahren im zweistelligem Bereich. Wir als Nutzer und Konsumenten suchen und vergleichen an Ort und Stelle Produkte und Dienstleistungen und machen unsere Kaufentscheidungen, Reservierungsanfragen oder Restaurantbesuche von der schnellen und einfachen Verfügbarkeit der Angebote im Internet abhängig.
Kostenloses und unverbindliches Angebot anfordern
Wie oft wird Ihre Website über mobile Endgeräte aufgerufen?
In Google Analytics finden Sie unter anderem eine Aufschlüsselung Ihrer Website-Besucher nach Gerätekategorien, nach Gerätetypen, nach verwendeten Betriebssystemen und der Bildschirmauflösung. Diese Informationen können Ihnen helfen, zu erkennen, ob eine responsive Website für Sie sinnvoll ist.
54,6 % der deutschen Bevölkerung ab 14 Jahre nutzen bereits mobile Medien wie Smartphone und Tablets, um im Internet zu recherchieren. (AGOF digital facts 2015-07)
Modernes Webdesign für jede Situation
Sie möchten für Ihr Unternehmen als Firmenpräsenz eine neue Webseite gestalten lassen? Dann sollten Sie auf ein modernes responsives Layout setzen. Eine gute Seite ist heute mehr als nur HTML5, CSS3, Tables, Fotos, Videos und Media Queries! Im Rahmen der Webseitenkonzeption ist es wichtig, die Inhalte für die jeweiligen Ausgabeformate und Ausgabegeräte zu definieren. Da spielt auch pfiffiges Webdesign vom Profi eine Rolle, wenn der Platz effizient und strukturiert genutzt werden will. Haben Sie schon einmal in der U-Bahn Ihre Küche mit einem Küchenplanungstool online geplant? Vermutlich nicht! Meine neue Küche plane ich am Tablet (Samsung, Apple, uvm.) mit einer App (die App-Erstellung übernehmen wir gern für Ihr Projekt) oder auch am Rechner Zuhause.
Es spielt kaum eine Rolle, ob man seine Kontaktdaten und Öffnungszeiten auf der Unternehmenswebseite bereitstellt, Produkt- und Leistungsinformationen oder ganze Bildergalerien von Referenzen. Wenn der Zugriff auf solche Informationen für die Nutzung auf mobilen Geräten optimiert ist, dann besteht eine deutlich höhere Chance, dass sich ein Besucher auch von Ihnen überzeugen lässt.
Höchste Zeit also, die eigene Webseite für die Ausgabe auf Smartphone und Tablets zu optimieren. Zeit für Responsive Webdesign – kurz RWD.
Responsive Design muss gut geplant sein!
Sie planen eine neue Webseite oder den Relaunch Ihrer bestehenden Seite? Gerne unterstützen und beraten wir bei der Planung und Einführung neuer Onlineprojekte wie Shops, Firmenpräsenzen, mobiler Webseiten (neben Responsive gibt es auch separate mobile Seiten, Apps oder AJAX-Inhalte) oder sorgen für die optimale Auffindbarkeit über Bing und Google Ads, Google Shopping und SEO.
Der konzeptionelle Ansatz im Responsive Webdesign – Eine Webseite für alle Geräte
Für moderne Internetagenturen gehört die mobile Optimierung von Websites im Responsive Design zum Standard. Heute entwickelt man ein Webseiten-Layout, das in der Lage ist, sich an verschiedene Bildschirmgrößen anzupassen, ohne dass der optische Gesamteindruck verloren geht.
Versuchen Sie es: verringern Sie einfach die Breite dieses Browserfensters und Sie werden sehen, wie sich unsere Webseite an die veränderten Platzverhältnisse anpasst. Responsive Webdesign in Perfektion.
Bei der Konzeption einer responsiven Webseite beginnt man mit derjenigen Ausgabegröße, für die eine Webseite hauptsächlich gedacht ist. Dabei unterscheidet man den „Mobile-First“ Ansatz und die „Desktop-First“ Variante.
Je nachdem, ob eine Zielgruppe überwiegend mit mobilen oder eher stationären Endgeräten auf eine Webseite zugreifen wird, entscheidet man sich dafür, das gesamte Konzept der Webseite Mobile-First oder Desktop-First zu entwickeln. Dabei geht es überwiegend um Fragen, wie der nach der Navigationstiefe, der Anordnung von inhaltlichen Bereichen oder der Platzierung der Webseiten-Navigation.
Erst, wenn definiert wurde, wie eine Webseite sich darstellt und wie sie sich verändert, wenn Bildschirmauflösung und Breite des Viewports zu- oder abnehmen, dann kann man sich Gedanken über das Layout machen. Ganz nach dem Prinzip „Form follows Funktion“ macht es erst Sinn, Design und Optik zu entwickeln, wenn fest steht, was eine Webseite alles können muss und wo die Inhalte in welcher Form abgebildet werden.
Der technische Aspekt des Responsive Webdesign – CSS Media Queries
Neben der reinen Umsetzung eines flexiblen, sich an verschiedene Bildschirmgrößen anpassenden Gestaltungsrasters gilt es auch, die unterschiedlichen Bedienkonzepte der Endgeräte zu berücksichtigen. Während Desktop-PCs mit einer Maus bedient werden, ist es beim Notebook eher das Trackpad. Tablets und Smartphone werden dagegen mit dem Finger bedient. Klassische Eingabegeräte, wie Maus und Tastatur gibt es nicht.
Das erfordert neben der reinen mobil optimierten Darstellung der Inhalte einer responsiven Webseite, dass auch die Bedienkonzepte adaptiert und bei der Umsetzung berücksichtigt werden. Ein einfacher Textlink mag mit einer Maus recht gut zu treffen sein, aber auf einem Smartphone oder einem kleinen Tablet ist das nicht mehr so einfach. Interaktive Elemente, wie Links oder Buttons benötigen hier größere Flächen, um problemlos bedient werden zu können.
Mit den Möglichkeiten von HTML5 und CSS3 kann man mit bestimmten Ausgangswerten arbeiten, um solche Optimierungen vorzunehmen. Die CSS Media Queries beispielsweise lassen es nicht nur zu, die Breite eines Viewports (sichtbarer Bereich einer Webseite auf dem Bildschirm) abzufragen, sondern auch seine Ausrichtung, Pixeldichte oder eben, wie grob oder genau die Eingabe sein werden.
Gibt ein mobiler Browser beispielsweise zu erkennen, dass er nur 360 Pixel horizontal anzeigen kann, dann kommen die entsprechenden CSS Angaben zum Tragen, die den Media Queries für diese Größe definiert wurden. Auf solche Art und Weise lassen sich verschiedene Gerätegrößen ansprechen und mit modernem CSS optimal mit Anpassungen versorgen.
So kann man spezielle Anpassungen beispielsweise für die Ausgabe einer Webseite für Smartphones mit Touch-Eingabe oder Spielekonsolen mit Controller-Eingabe schreiben. Responsive Webdesign regelt nicht nur die Anzeige einer Webseite für verschiedene Bildschirmgrößen, sondern eben auch für verschiedene Geräteklassen. Denn heute kann eine Webseite auf jedem Bildschirm angezeigt werden, nicht nur auf den klassischen Notebooks, sondern auch in Autos, auf Fernsehern oder Spielekonsolen. Den optimalen Bedienkomfort und die angepasste Darstellung dafür übernimmt das Responsive Webdesign.
Responsive Webdesign für Online-Shops – Mobile Commerce nimmt stark zu
Mit jedem Jahr erfährt der Online-Handel mehr und mehr Käufe über mobile Endgeräte. Da sich dieser Trend in den nächsten Jahren dramatisch fortsetzen wird, ist es für die Betreiber von Online-Shops unerlässlich, das Shop-Layout ebenfalls im Responsive Design zu entwickeln.
Hierbei muss ein flexibles Gestaltungsraster in Kombination mit speziellen Anpassungen der Darstellung durch Media Queries dafür Sorge tragen, dass die Produkte eines Online-Shops optimal zur Geltung kommen. Dabei gilt es aber gleichzeitig, die kleinen Bildschirme nicht zu überfüllen und das Kaufen eines Produktes so einfach wie möglich zu gestalten. Gerade im E-Commerce ist Responsive Webdesign eine Königsdisziplin, denn nicht nur die Darstellung des Layouts muss optimiert werden, sondern auch der Einkaufsvorgang an sich.
